diff --git a/.coderabbit.yaml b/.coderabbit.yaml
new file mode 100644
index 0000000000..08e1985ae7
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,18 @@
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+language: "en-US"
+early_access: false
+reviews:
+  profile: "chill"
+  request_changes_workflow: true
+  high_level_summary: true
+  poem: true
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+    enabled: true
+    drafts: false
+    base_branches:
+      - develop
+      - main
+chat:
+  auto_reply: true
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000000..de7cff92ec
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,31 @@
+# 👋 Welcome, we're glad you're setting up an installation of Talawa-admin. Copy this 
+# file to .env or set the variables in your local environment manually.
+
+
+# Custom port number for the talawa-admin development server to run on. Default is 4321.
+
+PORT=4321
+
+# Run Talawa-api locally in your system, and put its url into the same.
+
+REACT_APP_TALAWA_URL=
+
+# Do you want to setup and use "I'm not a robot" Checkbox (Google Recaptcha)?
+# If no, leave blank, else write yes
+# Example: REACT_APP_USE_RECAPTCHA=yes
+
+REACT_APP_USE_RECAPTCHA=
+
+# If you are using Google Recaptcha, i.e., REACT_APP_USE_RECAPTCHA=yes, read the following steps
+# Get the google recaptcha site key from google recaptcha admin or https://www.google.com/recaptcha/admin/create 
+# from here for reCAPTCHA v2 and "I'm not a robot" Checkbox, and paste the key here.
+# Note: In domains, fill localhost 
+
+REACT_APP_RECAPTCHA_SITE_KEY=
+
+# has to be inserted in the env file to use plugins and other websocket based features.
+REACT_APP_BACKEND_WEBSOCKET_URL=ws://localhost:4000/graphql/
+
+# If you want to logs Compiletime and Runtime error , warning and info write YES or if u want to  
+# keep the console clean leave it blank
+ALLOW_LOGS=
diff --git a/.eslintignore b/.eslintignore
index e69de29bb2..7e45de312a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+# Contains the PDF file of the Tag as JSON string, thus does not need to be linted
+src/components/CheckIn/tagTemplate.ts
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
index a1f8002a3c..26470f7aab 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,7 @@
 {
   "env": {
     "browser": true,
+    "node": true,
     "es6": true
   },
 
@@ -10,7 +11,9 @@
     "eslint:recommended",
     "plugin:jest/recommended",
     "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier",
+    "prettier"
   ],
   "globals": {
     "Atomics": "readonly",
@@ -26,12 +29,97 @@
   },
 
   // Specify the ESLint plugins tobe used
-  "plugins": ["react", "@typescript-eslint", "react-hooks", "jest"],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "jest",
+    "import",
+    "eslint-plugin-tsdoc",
+    "prettier"
+  ],
   "rules": {
-    "react/destructuring-assignment": ["warn", "always"],
-    "react/no-multi-comp": ["error", { "ignoreStateless": false }],
-    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
+    "react/destructuring-assignment": "error",
+    "@typescript-eslint/explicit-module-boundary-types": "error",
+    "react/no-multi-comp": [
+      "error",
+      {
+        "ignoreStateless": false
+      }
+    ],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [".tsx"]
+      }
+    ],
+    "import/no-duplicates": "error",
+    "tsdoc/syntax": "error",
+    "@typescript-eslint/ban-ts-comment": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
+    "@typescript-eslint/no-non-null-assertion": "error",
+    "@typescript-eslint/no-var-requires": "error",
+    "@typescript-eslint/no-unsafe-function-type": "error",
+    "@typescript-eslint/no-wrapper-object-types": "error",
+    "@typescript-eslint/no-empty-object-type": "error",
+    "@typescript-eslint/no-duplicate-enum-values": "error",
+    "@typescript-eslint/array-type": "error",
+    "@typescript-eslint/consistent-type-assertions": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/explicit-function-return-type": [
+      2,
+      {
+        "allowExpressions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
+    "camelcase": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      // Interfaces must begin with Interface or TestInterface followed by a PascalCase name
+      {
+        "selector": "interface",
+        "format": ["PascalCase"],
+        "prefix": ["Interface", "TestInterface"]
+      },
+      // Type Aliases must be in PascalCase
+      {
+        "selector": ["typeAlias", "typeLike", "enum"],
+        "format": ["PascalCase"]
+      },
+      {
+        "selector": "typeParameter",
+        "format": ["PascalCase"],
+        "prefix": ["T"]
+      },
+      {
+        "selector": "variable",
+        "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+        "leadingUnderscore": "allow"
+      },
+      {
+        "selector": "parameter",
+        "format": ["camelCase"],
+        "leadingUnderscore": "allow"
+      },
+      {
+        "selector": "function",
+        "format": ["camelCase", "PascalCase"]
+      },
+      {
+        "selector": "memberLike",
+        "modifiers": ["private"],
+        "format": ["camelCase"],
+        "leadingUnderscore": "require"
+      },
 
+      {
+        "selector": "variable",
+        "modifiers": ["exported"],
+        "format": null
+      }
+    ],
     // Ensures that components are always written in PascalCase
     "react/jsx-pascal-case": [
       "error",
@@ -42,23 +130,16 @@
     "react/jsx-equals-spacing": ["warn", "never"],
     "react/no-this-in-sfc": "error",
 
-    // Ensures that components are always indented by 2 spaces
-    "react/jsx-indent": ["warn", 2],
-    "react/jsx-tag-spacing": [
-      "warn",
-      {
-        "afterOpening": "never",
-        "beforeClosing": "never",
-        "beforeSelfClosing": "always"
-      }
-    ],
+    // All tests must need not have an assertion
+    "jest/expect-expect": 0,
 
     // Enforce Strictly functional components
     "react/no-unstable-nested-components": ["error", { "allowAsProps": true }],
     "react/function-component-definition": [
-      "error",
+      0,
       { "namedComponents": "function-declaration" }
-    ]
+    ],
+    "prettier/prettier": "error"
   },
 
   // Let ESLint use the react version in the package.json
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug-report.md
similarity index 60%
rename from .github/ISSUE_TEMPLATE/bug_report.md
rename to .github/ISSUE_TEMPLATE/bug-report.md
index ccbb9c4d8e..d9f95c0d65 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -1,9 +1,10 @@
 ---
-name: Bug report
+name: Bug Report
 about: Create a report to help us improve.
-title: Bug report
-labels: Bug
-assignees: ""
+title: Bug Report
+labels: bug
+assignees: ''
+
 ---
 
 **Describe the bug**
@@ -27,3 +28,9 @@ A clear and concise description of how the code performed w.r.t expectations.
 If applicable, add screenshots to help explain your problem.
 
 **Additional details**
+Add any other context or screenshots about the feature request here.
+
+**Potential internship candidates**
+
+Please read this if you are planning to apply for a Palisadoes Foundation internship 
+- https://github.com/PalisadoesFoundation/talawa/issues/359
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature-request.md
similarity index 69%
rename from .github/ISSUE_TEMPLATE/feature_request.md
rename to .github/ISSUE_TEMPLATE/feature-request.md
index 1c93611c44..51aea0e9d9 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -1,9 +1,10 @@
 ---
-name: Feature request
+name: Feature Request
 about: Suggest an idea for this project
-title: Feature request
-labels: Feature
-assignees: ""
+title: Feature Request
+labels: feature request
+assignees: ''
+
 ---
 
 **Is your feature request related to a problem? Please describe.**
@@ -20,3 +21,8 @@ A clear and concise description of approach to be followed.
 
 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+**Potential internship candidates**
+
+Please read this if you are planning to apply for a Palisadoes Foundation internship 
+- https://github.com/PalisadoesFoundation/talawa/issues/359
diff --git a/.github/dependabot.yaml b/.github/dependabot.yaml
new file mode 100644
index 0000000000..81d68df4bd
--- /dev/null
+++ b/.github/dependabot.yaml
@@ -0,0 +1,18 @@
+# Configuration for automated dependency updates using Dependabot
+version: 2
+updates:
+  # Define the target package ecosystem
+  - package-ecosystem: "npm"
+    # Specify the root directory
+    directory: "/"
+    # Schedule automated updates to run weekly
+    schedule:
+      interval: "monthly"
+    # Labels to apply to Dependabot PRs
+    labels:
+      - "dependencies"
+    # Specify the target branch for PRs
+    target-branch: "develop-postgres"
+    # Customize commit message prefix
+    commit-message:
+      prefix: "chore(deps):"
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index b3f679554c..9e3081d0ee 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,13 +1,40 @@
-<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->
+<!--
+This section can be deleted after reading.
+
+We employ the following branching strategy to simplify the development process and to ensure that only stable code is pushed to the `master` branch:
+
+- `develop`: For unstable code: New features and bug fixes.
+- `master`: Where the stable production ready code lies. Only security related bugs.
+
+NOTE!!!
+
+ONLY SUBMIT PRS AGAINST OUR `DEVELOP` BRANCH. THE DEFAULT IS `MAIN`, SO YOU WILL HAVE TO MODIFY THIS BEFORE SUBMITTING YOUR PR FOR REVIEW. PRS MADE AGAINST `MAIN` WILL BE CLOSED.
+-->
+
+<!--
+Thanks for submitting a pull request! Please provide enough information so that others can review your pull request.
+-->
 
 **What kind of change does this PR introduce?**
 
 <!-- E.g. a bugfix, feature, refactoring, etc… -->
 
+**Issue Number:**
+
+Fixes #<!--Add related issue number here.-->
+
 **Did you add tests for your changes?**
 
+<!--Yes or No. Note: Add unit tests or automation tests for your code.-->
+
+**Snapshots/Videos:**
+
+<!--Add snapshots or videos wherever possible.-->
+
 **If relevant, did you update the documentation?**
 
+<!--Add link to Talawa-Docs.-->
+
 **Summary**
 
 <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
@@ -18,3 +45,9 @@
 <!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->
 
 **Other information**
+
+<!--Add extra information about this PR here-->
+
+**Have you read the [contributing guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/CONTRIBUTING.md)?**
+
+<!--Yes or No-->
diff --git a/.github/workflows/README.md b/.github/workflows/README.md
new file mode 100644
index 0000000000..1e9a81eaf8
--- /dev/null
+++ b/.github/workflows/README.md
@@ -0,0 +1,47 @@
+# Talawa GitHub Workflows Guidelines
+
+Follow these guidelines when contributing to this directory.
+
+## General
+
+Any changes to files in this directory are flagged when pull requests are run. Make changes only on the advice of a contributor.
+
+## YAML Workflow Files
+
+The YAML files in this directory have very specific roles depending on the type of workflow.
+
+Whenever possible you must ensure that:
+1. The file roles below are maintained
+1. The sequence of the jobs in the workflows are maintained using [GitHub Action dependencies](https://docs.github.com/en/actions/learn-github-actions/managing-complex-workflows). 
+
+### File Roles
+Follow these guidelines when creating new YAML defined GitHub actions. This is done to make troubleshooting easier.
+
+1. `Issue` Workflows:
+   1. Place all actions related to issues in the `issues.yml` file.
+1. `Pull Request` workflows to be run by:
+   1. Workflows to run **First Time** repo contributors:
+      1. Place all actions related to to this in the `pull-request-target.yml` file.
+   1. Workflows to be run by **ALL** repo contributors:
+      1. Place all actions related to pull requests in the `pull-request.yml` file.
+1. `Push` workflows:
+   1. Place all actions related to pushes in the `push.yml` file.
+
+#### File Role Exceptions
+
+There are some exceptions to these rules in which jobs can be placed in dedicated separate files:
+1. Jobs that require unique `cron:` schedules 
+1. Jobs that require unique `paths:` statements that operate only when files in a specific path are updated.
+1. Jobs only work correctly if they have a dedicated file (eg. `CodeQL`)
+
+## Scripts
+
+Follow these guidelines when creating or modifying scripts in this directory.
+
+1. All scripts in this directory must be written in python3 for consistency.
+1. The python3 scripts must follow the following coding standards. Run these commands against your scripts before submitting PRs that modify or create python3 scripts in this directory.
+    1. Pycodestyle
+    1. Pydocstyle
+    1. Pylint
+    1. Flake8
+1. All scripts must run a main() function.
diff --git a/.github/workflows/auto-label.json5 b/.github/workflows/auto-label.json5
new file mode 100644
index 0000000000..37929ea97b
--- /dev/null
+++ b/.github/workflows/auto-label.json5
@@ -0,0 +1,8 @@
+{
+  "labelsSynonyms": {
+    "dependencies": ["dependabot", "dependency", "dependencies"],
+    "security": ["security"],
+    "ui/ux": ["layout", "screen", "design", "figma"]
+  },
+  "defaultLabels": ["unapproved"],
+}
\ No newline at end of file
diff --git a/.github/workflows/check-tsdoc.js b/.github/workflows/check-tsdoc.js
new file mode 100644
index 0000000000..d5c3b33b90
--- /dev/null
+++ b/.github/workflows/check-tsdoc.js
@@ -0,0 +1,68 @@
+import fs from 'fs/promises'; // Import fs.promises for async operations
+import path from 'path';
+
+// List of files to skip
+const filesToSkip = [
+    'index.tsx', 
+    'EventActionItems.tsx',
+    'OrgPostCard.tsx',
+    'UsersTableItem.tsx',
+    'FundCampaignPledge.tsx'
+];
+
+// Recursively find all .tsx files, excluding files listed in filesToSkip
+async function findTsxFiles(dir) {
+  let results = [];
+  try {
+    const list = await fs.readdir(dir);
+    for (const file of list) {
+      const filePath = path.join(dir, file);
+      const stat = await fs.stat(filePath);
+      if (stat.isDirectory()) {
+        results = results.concat(await findTsxFiles(filePath));
+      } else if (
+        filePath.endsWith('.tsx') &&
+        !filePath.endsWith('.test.tsx') &&
+        !filesToSkip.includes(path.relative(dir, filePath))
+      ) {
+        results.push(filePath);
+      }
+    }
+  } catch (err) {
+    console.error(`Error reading directory ${dir}: ${err.message}`);
+  }
+  return results;
+}
+
+// Check if a file contains at least one TSDoc comment
+async function containsTsDocComment(filePath) {
+  try {
+    const content = await fs.readFile(filePath, 'utf8');
+    return /\/\*\*[\s\S]*?\*\//.test(content);
+  } catch (err) {
+    console.error(`Error reading file ${filePath}: ${err.message}`);
+    return false;
+  }
+}
+
+// Main function to run the validation
+async function run() {
+  const dir = process.argv[2] || './src'; // Allow directory path as a command-line argument
+  const files = await findTsxFiles(dir);
+  const filesWithoutTsDoc = [];
+
+  for (const file of files) {
+    if (!await containsTsDocComment(file)) {
+      filesWithoutTsDoc.push(file);
+    }
+  }
+
+  if (filesWithoutTsDoc.length > 0) {
+    filesWithoutTsDoc.forEach(file => {
+      console.error(`No TSDoc comment found in file: ${file}`);
+    });
+    process.exit(1);
+  }
+}
+
+run();
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
deleted file mode 100644
index 3efc4fd51f..0000000000
--- a/.github/workflows/ci.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-name: Continuous Integration
-on: [pull_request]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Install Dependencies
-        run: yarn
-      - name: Run tests
-        run: yarn test
-
-        
\ No newline at end of file
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
deleted file mode 100644
index ccd6fc3705..0000000000
--- a/.github/workflows/codeql-analysis.yml
+++ /dev/null
@@ -1,67 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    - cron: '22 0 * * 5'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
diff --git a/.github/workflows/codeql-codescan.yml b/.github/workflows/codeql-codescan.yml
new file mode 100644
index 0000000000..6fa463001f
--- /dev/null
+++ b/.github/workflows/codeql-codescan.yml
@@ -0,0 +1,44 @@
+##############################################################################
+##############################################################################
+#
+# NOTE!
+#
+# Please read the README.md file in this directory that defines what should 
+# be placed in this file
+#
+##############################################################################
+##############################################################################
+
+name: codeql codescan workflow
+
+on:
+  pull_request:
+    branches:
+      - '**'  
+  push:
+    branches:
+      - '**'   
+jobs:
+  CodeQL:
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    name: Analyse Code With CodeQL
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+    steps:
+       - name: Checkout repository
+         uses: actions/checkout@v4
+
+       - name: Initialize CodeQL
+         uses: github/codeql-action/init@v2
+         with:
+          languages: ${{ matrix.language }}
+          debug: true
+
+       - name: Autobuild
+         uses: github/codeql-action/autobuild@v2
+
+       - name: Perform CodeQL Analysis
+         uses: github/codeql-action/analyze@v2
diff --git a/.github/workflows/compare_translations.py b/.github/workflows/compare_translations.py
new file mode 100644
index 0000000000..ef65b6c52b
--- /dev/null
+++ b/.github/workflows/compare_translations.py
@@ -0,0 +1,212 @@
+"""Script to encourage more efficient coding practices.
+Methodology:
+
+    Utility for comparing translations between default and other languages.
+
+    This module defines a function to compare two translations
+    and print any missing keys in the other language's translation.
+Attributes:
+
+    FileTranslation : Named tuple to represent a combination
+                        of file and missing translations.
+
+        Fields:
+            - file (str): The file name.
+            - missing_translations (list): List of missing translations.
+
+Functions:
+    compare_translations(default_translation, other_translation):
+        Compare two translations and print missing keys.
+
+     load_translation(filepath):
+        Load translation from a file.
+
+    check_translations():
+        Load the default translation and compare it with other translations.
+
+     main():
+        The main function to run the script.
+        Parses command-line arguments, checks for the
+        existence of the specified directory, and then
+        calls check_translations with the provided or default directory.
+
+
+Usage:
+    This script can be executed to check and print missing
+    translations in other languages based on the default English translation.
+
+Example:
+    python compare_translations.py
+NOTE:
+    This script complies with our python3 coding and documentation standards
+    and should be used as a reference guide. It complies with:
+
+        1) Pylint
+        2) Pydocstyle
+        3) Pycodestyle
+        4) Flake8
+
+"""
+# standard imports
+import argparse
+import json
+import os
+import sys
+from collections import namedtuple
+
+# Named tuple for file and missing
+#   translations combination
+FileTranslation = namedtuple("FileTranslation",
+                    ["file", "missing_translations"])
+
+
+def compare_translations(default_translation,
+    other_translation, default_file, other_file):
+    """Compare two translations and return detailed info about missing/mismatched keys.
+
+    Args:
+        default_translation (dict): The default translation (en.json).
+        other_translation (dict): The other language translation.
+        default_file (str): The name of the default translation file.
+        other_file (str): The name of the other 
+                            translation file.
+
+    Returns:
+        list: A list of detailed error messages for each missing/mismatched key.
+    """
+    errors = []
+
+    # Check for missing keys in other_translation
+    for key in default_translation:
+        if key not in other_translation:
+            error_msg = f"Missing Key: '{key}' - This key from '{default_file}' is missing in '{other_file}'."
+            errors.append(error_msg)
+    # Check for keys in other_translation that don't match any in default_translation
+    for key in other_translation:
+        if key not in default_translation:
+            error_msg = f"Error Key: '{key}' - This key in '{other_file}' does not match any key in '{default_file}'."
+            errors.append(error_msg)
+    return errors
+
+def flatten_json(nested_json, parent_key=""):
+    """
+    Flattens a nested JSON, concatenating keys to represent the hierarchy.
+
+    Args:
+        nested_json (dict): The JSON object to flatten.
+        parent_key (str): The base key for recursion (used to track key hierarchy).
+
+    Returns:
+        dict: A flattened dictionary with concatenated keys.
+    """
+    flat_dict = {}
+
+    for key, value in nested_json.items():
+        # Create the new key by concatenating parent and current key
+        new_key = f"{parent_key}.{key}" if parent_key else key
+        
+        if isinstance(value, dict):
+            # Recursively flatten the nested dictionary
+            flat_dict.update(flatten_json(value, new_key))
+        else:
+            # Assign the value to the flattened key
+            flat_dict[new_key] = value
+
+    return flat_dict
+
+def load_translation(filepath):
+    """Load translation from a file.
+
+    Args:
+        filepath: Path to the translation file
+
+    Returns:
+        translation: Loaded translation
+    """
+    try:
+        with open(filepath, "r", encoding="utf-8") as file:
+            content = file.read()
+            if not content.strip():
+                raise ValueError(f"File {filepath} is empty.")
+            translation = json.loads(content)
+            flattened_translation = flatten_json(translation)
+        return flattened_translation
+    except json.JSONDecodeError as e:
+        raise ValueError(f"Error decoding JSON from file {filepath}: {e}")
+
+
+def check_translations(directory):
+    """Load default translation and compare with other translations.
+
+    Args:
+        directory (str): The directory containing translation files.
+
+    Returns:
+        None
+    """
+    default_language_dir = os.path.join(directory, "en")
+    default_files = ["common.json", "errors.json", "translation.json"]
+    default_translations = {}
+    for file in default_files:
+        file_path = os.path.join(default_language_dir, file)
+        default_translations[file] = load_translation(file_path)
+
+    languages = os.listdir(directory)
+    languages.remove("en")  # Exclude default language directory
+
+
+    error_found = False
+
+    for language in languages:
+        language_dir = os.path.join(directory, language)
+        for file in default_files:
+            default_translation = default_translations[file]
+            other_file_path = os.path.join(language_dir, file)
+            other_translation = load_translation(other_file_path)
+
+            # Compare translations and get detailed error messages
+            errors = compare_translations(
+                default_translation, other_translation, f"en/{file}", f"{language}/{file}"
+            )
+            if errors:
+                error_found = True
+                print(f"File {language}/{file} has missing translations for:")
+                for error in errors:
+                    print(f"  - {error}")
+
+
+    if error_found:
+        sys.exit(1)  # Exit with an error status code
+    else:
+        print("All translations are present")
+        sys.exit(0)
+
+
+def main():
+    """
+
+    Parse command-line arguments, check for the existence of the specified directory 
+    and call check_translations with the provided or default directory.
+
+    """
+    parser = argparse.ArgumentParser(
+        description="Check and print missing translations for all non-default languages."
+    )
+    parser.add_argument(
+        "--directory",
+        type=str,
+        nargs="?",
+        default=os.path.join(os.getcwd(), "public/locales"),
+        help="Directory containing translation files(relative to the root directory).",
+    )
+    args = parser.parse_args()
+
+    if not os.path.exists(args.directory):
+        print(f"Error: The specified directory '{args.directory}' does not exist.")
+        sys.exit(1)
+
+    check_translations(args.directory)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.github/workflows/countline.py b/.github/workflows/countline.py
new file mode 100755
index 0000000000..d0b03c503f
--- /dev/null
+++ b/.github/workflows/countline.py
@@ -0,0 +1,297 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+"""Script to encourage more efficient coding practices.
+
+Methodology:
+
+    Analyses the `lib` and `test` directories to find files that exceed a
+    pre-defined number of lines of code.
+
+    This script was created to help improve code quality by encouraging
+    contributors to create reusable code.
+
+NOTE:
+
+    This script complies with our python3 coding and documentation standards
+    and should be used as a reference guide. It complies with:
+
+        1) Pylint
+        2) Pydocstyle
+        3) Pycodestyle
+        4) Flake8
+
+    Run these commands from the CLI to ensure the code is compliant for all
+    your pull requests.
+
+"""
+
+# Standard imports
+import os
+import sys
+import argparse
+from collections import namedtuple
+
+
+def _valid_filename(filepath):
+    """Determine whether filepath has the correct filename.
+
+    Args:
+        filepath: Filepath to check
+
+    Returns:
+        result: True if valid
+
+    """
+    # Initialize key variables
+    invalid_filenames = [".test.", ".spec."]
+    result = True
+
+    # Test
+    for invalid_filename in invalid_filenames:
+        if invalid_filename.lower() not in filepath.lower():
+            continue
+        result = False
+
+    return result
+
+
+def _valid_extension(filepath):
+    """Determine whether filepath has the correct extension.
+
+    Args:
+        filepath: Filepath to check
+
+    Returns:
+        result: True if valid
+
+    """
+    # Initialize key variables
+    invalid_extensions = [".css", ".jpg", ".png", ".jpeg"]
+    result = True
+
+    # Test
+    for invalid_extension in invalid_extensions:
+        if filepath.lower().endswith(invalid_extension.lower()) is False:
+            continue
+        result = False
+
+    return result
+
+
+def _valid_exclusions(excludes):
+    """Create a list of full file paths to exclude from the analysis.
+
+    Args:
+        excludes: Excludes object
+
+    Returns:
+        result: A list of full file paths
+
+    """
+    # Initialize key variables
+    result = []
+    filenames = []
+    more_filenames = []
+
+    # Create a list of files to ignore
+    if bool(excludes.files):
+        filenames = excludes.files
+    if bool(excludes.directories):
+        more_filenames = _filepaths_in_directories(excludes.directories)
+    filenames.extend(more_filenames)
+
+    # Remove duplicates
+    filenames = list(set(filenames))
+
+    # Process files
+    for filename in filenames:
+        # Ignore files that appear to be full paths because they start
+        # with a '/' or whatever the OS uses to distinguish directories
+        if filename.startswith(os.sep):
+            continue
+
+        # Create a file path
+        filepath = "{}{}{}".format(os.getcwd(), os.sep, filename)
+        if os.path.isfile(filepath) is True:
+            result.append(filepath)
+
+    # Return
+    return result
+
+
+def _filepaths_in_directories(directories):
+    """Create a list of full file paths based on input directories.
+
+    Args:
+        directories: A list of directories
+
+    Returns:
+        result: A list of full file paths
+
+    """
+    # Initialize key variables
+    result = []
+
+    # Iterate and analyze each directory
+    for directory in directories:
+        for root, _, files in os.walk(directory, topdown=False):
+            for name in files:
+                # Read each file and count the lines found
+                result.append(os.path.join(root, name))
+    # Return
+    return result
+
+
+def _arg_parser_resolver():
+    """Resolve the CLI arguments provided by the user.
+
+    Args:
+        None
+
+    Returns:
+        result: Parsed argument object
+
+    """
+    # Initialize parser and add the CLI options we should expect
+    parser = argparse.ArgumentParser()
+    parser.add_argument(
+        "--lines",
+        type=int,
+        required=False,
+        default=300,
+        help="The maximum number of lines of code to accept.",
+    )
+    parser.add_argument(
+        "--directory",
+        type=str,
+        required=False,
+        default=os.getcwd(),
+        help="The parent directory of files to analyze.",
+    )
+    parser.add_argument(
+        "--exclude_files",
+        type=str,
+        required=False,
+        nargs="*",
+        default=None,
+        const=None,
+        help="""An optional space separated list of \
+files to exclude from the analysis.""",
+    )
+    parser.add_argument(
+        "--exclude_directories",
+        type=str,
+        required=False,
+        nargs="*",
+        default=None,
+        const=None,
+        help="""An optional space separated list of \
+directories to exclude from the analysis.""",
+    )
+
+    # Return parser
+    result = parser.parse_args()
+    return result
+
+
+def main():
+    """Analyze dart files.
+
+    This function finds, and prints the files that exceed the CLI
+    defined defaults.
+
+    Args:
+        None
+
+    Returns:
+        None
+
+    """
+    # Initialize key variables
+    lookup = {}
+    errors_found = False
+    file_count = 0
+    Excludes = namedtuple("Excludes", "files directories")
+
+    # Get the CLI arguments
+    args = _arg_parser_resolver()
+
+    # Define the directories of interest
+    directories = [
+        os.path.expanduser(os.path.join(args.directory, "lib")),
+        os.path.expanduser(os.path.join(args.directory, "src")),
+        os.path.expanduser(os.path.join(args.directory, "test")),
+    ]
+
+    # Get a corrected list of filenames to exclude
+    exclude_list = _valid_exclusions(
+        Excludes(
+            files=args.exclude_files, directories=args.exclude_directories
+        )
+    )
+
+    # Get interesting filepaths
+    repo_filepath_list = _filepaths_in_directories(directories)
+
+    # Iterate and analyze each directory
+    for filepath in repo_filepath_list:
+        # Skip excluded files
+        if filepath in exclude_list:
+            continue
+
+        # Skip /node_modules/ sub directories
+        if "{0}node_modules{0}".format(os.sep) in filepath:
+            continue
+
+        # Ignore invalid file extensions
+        if _valid_extension(filepath) is False:
+            continue
+
+        # Ignore invalid file filenames
+        if _valid_filename(filepath) is False:
+            continue
+
+        # Process the rest
+        with open(filepath, encoding="latin-1") as code:
+            line_count = sum(
+                1
+                for line in code
+                if line.strip()
+                and not (
+                    line.strip().startswith("#")
+                    or line.strip().startswith("/")
+                )
+            )
+            lookup[filepath] = line_count
+
+    # If the line rule is voilated then the value is changed to 1
+    for filepath, line_count in lookup.items():
+        if line_count > args.lines:
+            errors_found = True
+            file_count += 1
+            if file_count == 1:
+                print(
+                    """
+LINE COUNT ERROR: Files with excessive lines of code have been found\n"""
+                )
+
+            print("  Line count: {:>5} File: {}".format(line_count, filepath))
+
+    # Evaluate and exit
+    if bool(errors_found) is True:
+        print(
+            """
+The {} files listed above have more than {} lines of code.
+
+Please fix this. It is a pre-requisite for pull request approval.
+""".format(
+                file_count, args.lines
+            )
+        )
+        sys.exit(1)
+    else:
+        sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.github/workflows/eslint_disable_check.py b/.github/workflows/eslint_disable_check.py
new file mode 100644
index 0000000000..201b4462b8
--- /dev/null
+++ b/.github/workflows/eslint_disable_check.py
@@ -0,0 +1,122 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+"""ESLint Checker Script.
+
+Methodology:
+
+    Recursively analyzes TypeScript files in the 'src' directory and its subdirectories
+    as well as 'setup.ts' files to ensure they do not contain eslint-disable statements.
+
+    This script enforces code quality practices in the project.
+
+NOTE:
+
+    This script complies with our python3 coding and documentation standards.
+    It complies with:
+
+        1) Pylint
+        2) Pydocstyle
+        3) Pycodestyle
+        4) Flake8
+
+"""
+
+import os
+import re
+import argparse
+import sys
+
+def has_eslint_disable(file_path):
+    """
+    Check if a TypeScript file contains eslint-disable statements.
+
+    Args:
+        file_path (str): Path to the TypeScript file.
+
+    Returns:
+        bool: True if eslint-disable statement is found, False otherwise.
+    """
+    eslint_disable_pattern = re.compile(r'//\s*eslint-disable(?:-next-line|-line)?', re.IGNORECASE)
+    
+    try:
+        with open(file_path, 'r', encoding='utf-8') as file:
+            content = file.read()
+            return bool(eslint_disable_pattern.search(content))
+    except Exception as e:
+        print(f"Error reading file {file_path}: {e}")
+        return False
+
+def check_eslint(directory):
+    """
+    Recursively check TypeScript files for eslint-disable statements in the 'src' directory.
+
+    Args:
+        directory (str): Path to the directory.
+
+    Returns:
+        bool: True if eslint-disable statement is found, False otherwise.
+    """
+    eslint_found = False
+
+    for root, dirs, files in os.walk(os.path.join(directory, 'src')):
+        for file_name in files:
+            if file_name.endswith('.tsx') and not file_name.endswith('.test.tsx'):
+                file_path = os.path.join(root, file_name)
+                if has_eslint_disable(file_path):
+                    print(f'File {file_path} contains eslint-disable statement.')
+                    eslint_found = True
+
+    setup_path = os.path.join(directory, 'setup.ts')
+    if os.path.exists(setup_path) and has_eslint_disable(setup_path):
+        print(f'Setup file {setup_path} contains eslint-disable statement.')
+        eslint_found = True
+
+    return eslint_found
+
+def arg_parser_resolver():
+    """Resolve the CLI arguments provided by the user.
+
+    Returns:
+        result: Parsed argument object
+    """
+    parser = argparse.ArgumentParser()
+    parser.add_argument(
+        "--directory",
+        type=str,
+        default=os.getcwd(),
+        help="Path to the directory to check (default: current directory)"
+    )
+    return parser.parse_args()
+
+def main():
+    """
+    Execute the script's main functionality.
+
+    This function serves as the entry point for the script. It performs
+    the following tasks:
+    1. Validates and retrieves the directory to check from
+       command line arguments.
+    2. Recursively checks TypeScript files for eslint-disable statements.
+    3. Provides informative messages based on the analysis.
+    4. Exits with an error if eslint-disable statements are found.
+
+    Raises:
+        SystemExit: If an error occurs during execution.
+    """
+    args = arg_parser_resolver()
+
+    if not os.path.exists(args.directory):
+        print(f"Error: The specified directory '{args.directory}' does not exist.")
+        sys.exit(1)
+
+    # Check eslint in the specified directory
+    eslint_found = check_eslint(args.directory)
+
+    if eslint_found:
+        print("ESLint-disable check failed. Exiting with error.")
+        sys.exit(1)
+
+    print("ESLint-disable check completed successfully.")
+
+if __name__ == "__main__":
+    main()
diff --git a/.github/workflows/issue.yml b/.github/workflows/issue.yml
index 798c766ca6..420d50adbe 100644
--- a/.github/workflows/issue.yml
+++ b/.github/workflows/issue.yml
@@ -1,13 +1,66 @@
-name: Issue Auto label
+##############################################################################
+##############################################################################
+#
+# NOTE!
+#
+# Please read the README.md file in this directory that defines what should 
+# be placed in this file
+#
+##############################################################################
+##############################################################################
+
+name: Issue Workflow
 on:
   issues:
       types: ['opened']
 jobs:
-  build:
+  Opened-issue-label:
+    name: Adding Issue Label
     runs-on: ubuntu-latest
     steps:
-      - uses: Renato66/auto-label@v2.2.0
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            .github/workflows/auto-label.json5
+          sparse-checkout-cone-mode: false
+      - uses: Renato66/auto-label@v3
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/github-script@v6
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            const issue_number = context.issue.number;
+            const apiParams = {
+              owner,
+              repo,
+              issue_number
+            };
+            const labels = await github.rest.issues.listLabelsOnIssue(apiParams);
+            if(labels.data.reduce((a, c)=>a||["dependencies"].includes(c.name), false))
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                labels: ["good first issue", "security"]
+              });
+            else if(labels.data.reduce((a, c)=>a||["security", "ui/ux"].includes(c.name), false))
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                labels: ["good first issue"]
+              });
+
+
+  Issue-Greeting:
+    name: Greeting Message to User
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/first-interaction@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          ignore-comments: true
-          default-labels: '["unapproved"]'
+          issue-message: "Congratulations on making your first Issue! :confetti_ball: If you haven't already, check out our [Contributing Guidelines](https://github.com/PalisadoesFoundation/talawa-admin/blob/develop/CONTRIBUTING.md) and [Issue Reporting Guidelines](https://github.com/PalisadoesFoundation/talawa-admin/blob/develop/ISSUE_GUIDELINES.md) to ensure that you are following our guidelines for contributing and making issues."
+
diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml
deleted file mode 100644
index cae9570993..0000000000
--- a/.github/workflows/linter.yml
+++ /dev/null
@@ -1,11 +0,0 @@
-name: Linter
-on: [pull_request]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Install Dependencies
-        run: yarn
-      - name: Run ESLint and Prettier
-        run: yarn lint
\ No newline at end of file
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
deleted file mode 100644
index 861e37239f..0000000000
--- a/.github/workflows/npm-publish.yml
+++ /dev/null
@@ -1,47 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - run: npm ci
-      - run: npm test
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-
-  publish-gpr:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://npm.pkg.github.com/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.github/workflows/pull-request-target.yml b/.github/workflows/pull-request-target.yml
new file mode 100644
index 0000000000..af75effc13
--- /dev/null
+++ b/.github/workflows/pull-request-target.yml
@@ -0,0 +1,77 @@
+##############################################################################
+##############################################################################
+#
+# NOTE!
+#
+# Please read the README.md file in this directory that defines what should 
+# be placed in this file
+#
+##############################################################################
+##############################################################################
+
+name: PR Target Workflow
+on: 
+  pull_request_target:
+  
+jobs:
+  PR-Greeting:
+    name: Pull Request Target
+    runs-on: ubuntu-latest
+    steps:
+      - name: Add the PR Review Policy
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: pr_review_policy
+          message: |
+            ## Our Pull Request Approval Process
+            
+            Thanks for contributing! 
+            
+            ### Testing Your Code
+            
+            Remember, your PRs won't be reviewed until these criteria are met:
+            
+            1. We don't merge PRs with poor code quality. 
+                1. Follow coding best practices such that CodeRabbit.ai approves your PR.
+            1. We don't merge PRs with failed tests. 
+                1. When tests fail, click on the `Details` link to learn more.
+                1. Write sufficient tests for your changes (CodeCov Patch Test). Your testing level must be better than the target threshold of the repository
+                1. Tests may fail if you edit sensitive files. Ask to add the `ignore-sensitive-files-pr` label if the edits are necessary.
+            1. We cannot merge PRs with conflicting files. These must be fixed.
+                
+            Our policies make our code better.
+
+            ### Reviewers
+
+            Do not assign reviewers. Our Queue Monitors will review your PR and assign them. 
+            When your PR has been assigned reviewers contact them to get your code reviewed and approved via:
+
+            1. comments in this PR or
+            1. our slack channel
+
+            #### Reviewing Your Code
+
+            Your reviewer(s) will have the following roles:
+
+            1.  arbitrators of future discussions with other contributors about the validity of your changes
+            2.  point of contact for evaluating the validity of your work
+            3.  person who verifies matching issues by others that should be closed.
+            4.  person who gives general guidance in fixing your tests
+
+            ### CONTRIBUTING.md
+
+            Read our CONTRIBUTING.md file. Most importantly:
+
+            1. PRs with issues not assigned to you will be closed by the reviewer
+            1. Fix the first comment in the PR so that each issue listed automatically closes
+
+            ### Other
+
+            1. :dart: Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise.
+            2. Read the CONTRIBUTING.md file make 
+
+      - name: Greeting Message to User
+        uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: "Congratulations on making your first PR! :confetti_ball: If you haven't already, check out our [Contributing Guidelines](https://github.com/PalisadoesFoundation/talawa-admin/blob/-/CONTRIBUTING.md) and [PR Reporting Guidelines](https://github.com/PalisadoesFoundation/talawa-admin/blob/-/PR_GUIDELINES.md) to ensure that you are following our guidelines for contributing and creating PR."
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
new file mode 100644
index 0000000000..aaeebc8345
--- /dev/null
+++ b/.github/workflows/pull-request.yml
@@ -0,0 +1,265 @@
+##############################################################################
+##############################################################################
+#
+# NOTE!
+#
+# Please read the README.md file in this directory that defines what should
+# be placed in this file
+#
+##############################################################################
+##############################################################################
+
+name: PR Workflow
+
+on:
+  pull_request:
+    branches:
+      - '**'
+
+env:
+  CODECOV_UNIQUE_NAME: CODECOV_UNIQUE_NAME-${{ github.run_id }}-${{ github.run_number }}
+
+jobs:
+  Code-Quality-Checks:
+    name: Performs linting, formatting, type-checking, checking for different source and target branch
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Count number of lines
+        run: |
+          chmod +x ./.github/workflows/countline.py
+          ./.github/workflows/countline.py --lines 600 --exclude_files src/screens/LoginPage/LoginPage.tsx src/GraphQl/Queries/Queries.ts src/screens/OrgList/OrgList.tsx src/GraphQl/Mutations/mutations.ts src/components/EventListCard/EventListCardModals.tsx src/components/TagActions/TagActionsMocks.ts src/utils/interfaces.ts src/screens/MemberDetail/MemberDetail.tsx
+
+      - name: Get changed TypeScript files
+        id: changed-files
+        uses: tj-actions/changed-files@v40
+      - name: Check formatting
+        if: steps.changed-files.outputs.only_changed != 'true'
+        run: npm run format:check
+        
+      - name: Run formatting if check fails
+        if: failure()
+        run: npm run format
+
+      - name: Check for type errors
+        if: steps.changed-files.outputs.only_changed != 'true'
+        run: npm run typecheck
+
+      - name: Check for linting errors in modified files
+        if: steps.changed-files.outputs.only_changed != 'true'
+        env: 
+          CHANGED_FILES: ${{ steps.changed_files.outputs.all_changed_files }}
+        run: npx eslint ${CHANGED_FILES} && python .github/workflows/eslint_disable_check.py
+        
+      - name: Check for TSDoc comments
+        run: npm run check-tsdoc # Run the TSDoc check script
+
+      - name: Check for localStorage Usage
+        run: |
+          chmod +x scripts/githooks/check-localstorage-usage.js
+          node scripts/githooks/check-localstorage-usage.js --scan-entire-repo
+
+      - name: Compare translation files
+        run: |
+          chmod +x .github/workflows/compare_translations.py
+          python .github/workflows/compare_translations.py --directory public/locales
+
+      - name: Check if the source and target branches are different
+        if: ${{ github.event.pull_request.base.ref == github.event.pull_request.head.ref }}
+        run: |
+          echo "Source Branch ${{ github.event.pull_request.head.ref }}"
+          echo "Target Branch ${{ github.event.pull_request.base.ref }}"
+          echo "Error: Source and Target Branches are the same. Please ensure they are different."
+          exit 1
+
+  Check-Sensitive-Files:
+    if: ${{ github.actor != 'dependabot[bot]' && !contains(github.event.pull_request.labels.*.name, 'ignore-sensitive-files-pr') }}
+    name: Checks if sensitive files have been changed without authorization
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      
+      - name: Get Changed Unauthorized files
+        id: changed-unauth-files
+        uses: tj-actions/changed-files@v40
+        with:
+          files: |
+            .github/**
+            env.example
+            .node-version
+            .husky/**
+            scripts/**
+            schema.graphql
+            package.json
+            tsconfig.json
+            .gitignore
+            .eslintrc.json
+            .eslintignore
+            .prettierrc
+            .prettierignore
+            vite.config.ts
+            docker-compose.yaml
+            Dockerfile
+            CODEOWNERS
+            LICENSE
+            setup.ts
+            .coderabbit.yaml
+            CODE_OF_CONDUCT.md
+            CODE_STYLE.md
+            CONTRIBUTING.md
+            DOCUMENTATION.md
+            INSTALLATION.md
+            ISSUE_GUIDELINES.md
+            PR_GUIDELINES.md
+            README.md
+            
+      - name: List all changed unauthorized files
+        if: steps.changed-unauth-files.outputs.any_changed == 'true' || steps.changed-unauth-files.outputs.any_deleted == 'true'
+        env: 
+          CHANGED_UNAUTH_FILES: ${{ steps.changed-unauth-files.outputs.all_changed_files }}
+        run: |
+          for file in ${CHANGED_UNAUTH_FILES}; do
+            echo "$file is unauthorized to change/delete"
+          done
+          exit 1
+
+  Count-Changed-Files:
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    name: Checks if number of files changed is acceptable
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v40
+
+      - name: Echo number of changed files
+        env: 
+          CHANGED_FILES_COUNT: ${{ steps.changed-files.outputs.all_changed_files_count }}
+        run: |
+          echo "Number of files changed: $CHANGED_FILES_COUNT"
+
+      - name: Check if the number of changed files is less than 100
+        if: steps.changed-files.outputs.all_changed_files_count > 100
+        env: 
+          CHANGED_FILES_COUNT: ${{ steps.changed-files.outputs.all_changed_files_count }}
+        run: |
+          echo "Error: Too many files (greater than 100) changed in the pull request."
+          echo "Possible issues:"
+          echo "- Contributor may be merging into an incorrect branch."
+          echo "- Source branch may be incorrect please use develop as source branch."
+          exit 1
+
+  Check-ESlint-Disable:
+    name: Check for eslint-disable
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.9
+
+      - name: Run Python script
+        run: |
+          python .github/workflows/eslint_disable_check.py
+
+  Test-Application:
+    name: Test Application
+    runs-on: ubuntu-latest
+    needs: [Code-Quality-Checks, Check-ESlint-Disable]
+    steps:
+      - name: Checkout the Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: Install Dependencies
+        run: npm install
+      
+      - name: Get changed TypeScript files
+        id: changed-files
+        uses: tj-actions/changed-files@v40
+          
+      - name: Run tests
+        if: steps.changed-files.outputs.only_changed != 'true'
+        run: npm run test -- --watchAll=false --coverage       
+      
+      - name: TypeScript compilation for changed files
+        run: |
+          for file in ${{ steps.changed-files.outputs.all_files }}; do
+            if [[ "$file" == *.ts || "$file" == *.tsx ]]; then
+              npx tsc --noEmit "$file"
+            fi
+          done
+        
+      - name: Present and Upload coverage to Codecov as ${{env.CODECOV_UNIQUE_NAME}}
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          verbose: true
+          fail_ci_if_error: false
+          name: '${{env.CODECOV_UNIQUE_NAME}}'
+
+      - name: Test acceptable level of code coverage
+        uses: VeryGoodOpenSource/very_good_coverage@v2
+        with:
+          path: "./coverage/lcov.info"
+          min_coverage: 95.0
+
+  Graphql-Inspector:
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    name: Runs Introspection on the GitHub talawa-api repo on the schema.graphql file
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: resolve dependency
+        run: npm install -g @graphql-inspector/cli
+      
+      - name: Clone API Repository
+        run: |
+          # Retrieve the complete branch name directly from the GitHub context
+          FULL_BRANCH_NAME=${{ github.base_ref }}
+          echo "FULL_Branch_NAME: $FULL_BRANCH_NAME"
+          
+          # Clone the specified repository using the extracted branch name
+          git clone --branch $FULL_BRANCH_NAME https://github.com/PalisadoesFoundation/talawa-api && ls -a 
+
+      - name: Validate Documents
+        run: graphql-inspector validate './src/GraphQl/**/*.ts' './talawa-api/schema.graphql'
+
+  Check-Target-Branch:
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    name: Check Target Branch
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if the target branch is develop
+        if: github.event.pull_request.base.ref != 'develop'
+        run: |
+          echo "Error: Pull request target branch must be 'develop'. Please refer PR_GUIDELINES.md"
+          exit 1
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
new file mode 100644
index 0000000000..950d063fac
--- /dev/null
+++ b/.github/workflows/push.yml
@@ -0,0 +1,62 @@
+##############################################################################
+##############################################################################
+#
+# NOTE!
+#
+# Please read the README.md file in this directory that defines what should 
+# be placed in this file
+#
+##############################################################################
+##############################################################################
+
+name: push workflow
+
+on:
+  push:
+    branches:
+      - '**'   
+      
+env:
+    CODECOV_UNIQUE_NAME: CODECOV_UNIQUE_NAME-${{ github.run_id }}-${{ github.run_number }}
+  
+jobs:
+  Code-Coverage:
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    name: Test and Calculate Code Coverage
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: |
+            ~/.npm
+            node_modules
+          key: ${{ runner.os }}-code-coverage-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-code-coverage-${{ env.cache-name }}-
+            ${{ runner.os }}-code-coverage-
+            ${{ runner.os }}-
+      
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        run: npm install
+      - run: npm run test -- --watchAll=false --coverage
+      - name: Present and upload coverage to Codecov as ${{env.CODECOV_UNIQUE_NAME}}
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          verbose: true
+          fail_ci_if_error: false
+          name: '${{env.CODECOV_UNIQUE_NAME}}'
+
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
new file mode 100644
index 0000000000..24667f8e06
--- /dev/null
+++ b/.github/workflows/stale.yml
@@ -0,0 +1,43 @@
+##############################################################################
+##############################################################################
+#
+# NOTE!
+#
+# Please read the README.md file in this directory that defines what should 
+# be placed in this file
+#
+##############################################################################
+##############################################################################
+
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+permissions:
+  issues: write
+  pull-requests: write  
+  
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/stale@v8
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.'
+        stale-pr-message: 'This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the develop branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work.'
+        close-issue-message: 'This issue did not get any activity in the past 180 days and thus has been closed. Please check if the newest release or develop branch has it fixed. Please, create a new issue if the issue is not fixed.'
+        close-pr-message: 'This pull request did not get any activity in the past 180 days and thus has been closed.'
+        stale-issue-label: 'no-issue-activity'
+        stale-pr-label: 'no-pr-activity'
+        days-before-stale: 10
+        days-before-close: 180
+        remove-stale-when-updated: true
+        exempt-all-milestones: true
+        exempt-pr-labels: 'wip'
+        exempt-issue-labels: 'wip'
+        operations-per-run: 30
diff --git a/.github/workflows/talawa_admin_md_mdx_format_adjuster.py b/.github/workflows/talawa_admin_md_mdx_format_adjuster.py
new file mode 100644
index 0000000000..cd76a30cf6
--- /dev/null
+++ b/.github/workflows/talawa_admin_md_mdx_format_adjuster.py
@@ -0,0 +1,96 @@
+#!/usr/bin/env python3
+# -*- coding: UTF-8 -*-
+"""
+Script to make Markdown files MDX compatible.
+
+This script scans Markdown files and escapes special characters (<, >, {, })
+to make them compatible with the MDX standard used in Docusaurus v3.
+
+This script complies with:
+    1) Pylint
+    2) Pydocstyle
+    3) Pycodestyle
+    4) Flake8
+"""
+import os
+import argparse
+import re
+
+def escape_mdx_characters(text):
+    """
+    Escape special characters in a text string for MDX compatibility.
+    Avoids escaping already escaped characters.
+
+    Args:
+        text: A string containing the text to be processed.
+
+    Returns:
+        A string with special characters (<, >, {, }) escaped, avoiding
+        double escaping.
+    """
+    # Regular expressions to find unescaped special characters
+    patterns = {
+        "<": r"(?<!\\)<",
+        ">": r"(?<!\\)>",
+        "{": r"(?<!\\){",
+        "}": r"(?<!\\)}"
+    }
+
+    # Replace unescaped special characters
+    for char, pattern in patterns.items():
+        text = re.sub(pattern, f"\\{char}", text)
+
+    return text
+
+def process_file(filepath):
+    """
+    Process a single Markdown file for MDX compatibility.
+
+    Args:
+        filepath: The path to the Markdown file to process.
+
+    Returns:
+        None, writes the processed content back to the file only if there are changes.
+    """
+    with open(filepath, 'r', encoding='utf-8') as file:
+        content = file.read()
+
+    # Escape MDX characters
+    new_content = escape_mdx_characters(content)
+
+    # Write the processed content back to the file only if there is a change
+    if new_content != content:
+        with open(filepath, 'w', encoding='utf-8') as file:
+            file.write(new_content)
+
+def main():
+    """
+    Main function to process all Markdown files in a given directory.
+
+    Scans for all Markdown files in the specified directory and processes each
+    one for MDX compatibility.
+
+    Args:
+        None
+
+    Returns:
+        None
+    """
+    parser = argparse.ArgumentParser(description="Make Markdown files MDX compatible.")
+    parser.add_argument(
+        "--directory",
+        type=str,
+        required=True,
+        help="Directory containing Markdown files to process."
+    )
+
+    args = parser.parse_args()
+
+    # Process each Markdown file in the directory
+    for root, _, files in os.walk(args.directory):
+        for file in files:
+            if file.lower().endswith(".md"):
+                process_file(os.path.join(root, file))
+
+if __name__ == "__main__":
+    main()
diff --git a/.gitignore b/.gitignore
index 4d29575de8..80c2b97cd9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,18 +1,24 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# files that interfere with YARN
+yarn.lock
+pnpm-lock.yaml
+
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 
 # testing
-/coverage
+coverage/
+codecov
 
 # production
 /build
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -21,3 +27,11 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# express setup
+debug.log
+
+# No editor related files
+.idea
+.vscode
+*.swp
diff --git a/.husky/post-merge b/.husky/post-merge
new file mode 100755
index 0000000000..c7f42c373b
--- /dev/null
+++ b/.husky/post-merge
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+git diff HEAD^ HEAD --exit-code -- ./package.json || npm install
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000000..77ecddae25
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,10 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run format:fix
+# npm run lint:fix
+npm run lint-staged
+npm run typecheck
+npm run update:toc
+
+git add .
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
new file mode 100644
index 0000000000..36195c0491
--- /dev/null
+++ b/.lintstagedrc.json
@@ -0,0 +1,5 @@
+{
+  "**/*.{ts,tsx,yml}": "eslint --fix",
+  "**/*.{ts,tsx,json,scss,css,yml}": "prettier --write",
+  "**/*.{ts,tsx}": "node scripts/githooks/check-localstorage-usage.js"
+}
diff --git a/.node-version b/.node-version
new file mode 100644
index 0000000000..751f4c9f38
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+v22.7.0
diff --git a/.prettierignore b/.prettierignore
index 9a357a08f7..a955d32db3 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,4 @@
 node_modules
-.github
\ No newline at end of file
+.github
+# Contains the PDF file of the Tag as JSON string, thus does not need to be formatted
+src/components/CheckIn/tagTemplate.ts
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index dc2fb828f0..2c0fc022ce 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,4 @@
 {
-    "singleQuote": true
+    "singleQuote": true,
+    "endOfLine": "auto"
 }
\ No newline at end of file
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000000..57dc9c6c80
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1,2 @@
+/.github/ @palisadoes
+CODEOWNERS @palisadoes
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 4a38c46419..b82fab3779 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,5 +1,23 @@
 # Contributor Covenant Code of Conduct
 
+# Table of Contents
+
+<!-- toc -->
+
+- [Our Pledge](#our-pledge)
+- [Our Standards](#our-standards)
+- [Enforcement Responsibilities](#enforcement-responsibilities)
+- [Scope](#scope)
+- [Enforcement](#enforcement)
+- [Enforcement Guidelines](#enforcement-guidelines)
+  - [1. Correction](#1-correction)
+  - [2. Warning](#2-warning)
+  - [3. Temporary Ban](#3-temporary-ban)
+  - [4. Permanent Ban](#4-permanent-ban)
+- [Attribution](#attribution)
+
+<!-- tocstop -->
+
 ## Our Pledge
 
 We as members, contributors, and leaders pledge to make participation in our
diff --git a/CODE_STYLE.md b/CODE_STYLE.md
new file mode 100644
index 0000000000..df184b12a0
--- /dev/null
+++ b/CODE_STYLE.md
@@ -0,0 +1,253 @@
+# Talawa Admin Code Style
+
+For Talawa Admin, most of the rules for the code style have been enforced with ESLint, but this document serves to provide an overview of the Code style used in Talawa Admin and the Rationale behind it.
+
+The code style must be strictly adhered to, to ensure that there is consistency throughout the contributions made to Talawa-Admin
+
+code style should not be changed and must be followed.
+
+# Table of Contents
+
+<!-- toc -->
+
+- [Tech Stack](#tech-stack)
+- [Component Structure](#component-structure)
+- [Code Style and Naming Conventions](#code-style-and-naming-conventions)
+- [Test and Code Linting](#test-and-code-linting)
+- [Folder/Directory Structure](#folderdirectory-structure)
+  - [Sub Directories of `src`](#sub-directories-of-src)
+- [Imports](#imports)
+- [Customising Bootstrap](#customising-bootstrap)
+
+<!-- tocstop -->
+
+## Tech Stack
+
+- Typescript
+
+- React.js 
+
+- CSS module
+
+- React bootstrap
+
+- Material UI
+
+- GraphQL
+
+- Jest & React Testing Library for testing
+
+## Component Structure
+
+- Components should be strictly functional components
+
+- Should make use of React hooks where appropriate
+
+
+## Code Style and Naming Conventions
+
+- All React components *must* be written in PascalCase, with their file names, and associated CSS modules being written in PascalCase
+
+- All other files may follow the camelCase naming convention
+
+- All the Return fragment should be closed in empty tag
+
+- Use of custom classes directly are refrained, use of modular css is encouraged along with bootstrap classes
+
+**Wrong way ❌**
+```
+<div className="myCustomClass">...</div>
+<div className={`${styles.myCustomClass1} myCustomClass2`}>...</div> // No using personal custom classes directly, here you should  not use myCustomClass2
+.container{...} // No changing the property of already existing classes reserved by boostrap directly in css files
+```
+
+**Correct ways ✅** 
+```
+<div className={styles.myCustomClass}>...</div> // Use custom class defined in modular css file
+<div className={`${styles.myCustomClass} relative bg-danger`}>...</div> // Use classes already defined in Bootstrap
+<div className={styles.myCustomClass + ' relative bg-danger' }>...</div> // Use classes already defined in Bootstrap
+```
+
+- All components should be either imported from React-Bootstrap library or Material UI library, components should not be written using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library.
+
+**Example: Bootstrap Dropdown**
+
+**Wrong way ❌**
+
+Using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library should be refrained. While it may work for basic functionality, it doesn't fully integrate with React and may cause issues when dealing with more complex state management or component interactions. 
+```
+    <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+    </div>
+```
+    
+
+**Correct way ✅**
+
+It's recommended to use the React-Bootstrap library for seamless integration of Bootstrap components in a React application.
+```
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function BasicExample() {
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant="success" id="dropdown-basic">
+        Dropdown Button
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export default BasicExample;
+```
+
+
+## Test and Code Linting 
+
+Unit tests must be written for *all* code submissions to the repository, 
+the code submitted must also be linted ESLint and formatted with Prettier.
+
+## Folder/Directory Structure
+
+### Sub Directories of `src`
+
+`assets` - This houses all of the static assets used in the project
+  - `css` - This houses all of the css files used in the project
+  - `images` - This houses all of the images used in the project
+  - `scss` - This houses all of the scss files used in the project
+    - `components -` All Sass files for components
+    - `content -` All Sass files for content
+    - `forms -` All Sass files for forms
+    - `_talawa.scss` - Partial Sass file for Talawa
+    - `_utilities.scss` - Partial Sass file for utilities
+    - `_variables.scss` - Partial Sass file for variables
+    - `app.scss` - Main Sass file for the app, imports all other partial Sass files
+
+`components`  - The directory for base components that will be used in the various views/screens
+
+`Constant` - This houses all of the constants used in the project
+
+`GraphQl` - This houses all of the GraphQL queries and mutations used in the project
+
+`screens` - This houses all of the views/screens to be navigated through in Talawa-Admin
+
+`state` - This houses all of the state management code for the project
+
+`utils` - This holds the utility functions that do not fall into any of the other categories
+
+
+## Imports
+
+Absolute imports have been set up for the project, so imports may be done directly from `src`.
+
+An example being
+
+```
+import Navbar from 'components/Navbar/Navbar';
+```
+
+Imports should be grouped in the following order:
+
+  - React imports
+  - Third party imports
+  - Local imports
+
+
+If there is more than one import from a single library, they should be grouped together
+  
+Example - If there is single import from a library, both ways will work
+
+```
+import Row from 'react-bootstrap/Row';
+// OR
+import { Row } from 'react-bootstrap';
+```
+
+If there are multiple imports from a library, they should be grouped together
+
+```
+import { Row, Col, Container } from 'react-bootstrap';
+```
+
+## Customising Bootstrap
+
+Bootstrap v5.3.0 is used in the project.
+Follow this [link](https://getbootstrap.com/docs/5.3/customize/sass/) to learn how to customise bootstrap.
+
+**File Structure**
+
+- `src/assets/scss/components/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
+  - **_accordion.scss**
+  - **_alert.scss**
+  - **_badge.scss**
+  - **_breadcrumb.scss**
+  - **_buttons.scss**
+  - **_card.scss**
+  - **_carousel.scss**
+  - **_close.scss**
+  - **_dropdown.scss**
+  - **_list-group.scss**
+  - **_modal.scss**
+  - **_nav.scss**
+  - **_navbar.scss**
+  - **_offcanvas.scss**
+  - **_pagination.scss**
+  - **_placeholder.scss**
+  - **_progress.scss**
+  - **_spinners.scss**
+
+- `src/assets/scss/content/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
+  - **_table.scss**
+  - **_typography.scss**
+
+
+- `src/assets/scss/forms/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
+  - **_check-radios.scss**
+  - **_floating-label.scss**
+  - **_form-control.scss**
+  - **_input-group.scss**
+  - **_range.scss**
+  - **_select.scss**
+  - **_validation.scss**
+
+- `src/assets/scss/_utilities.scss` - The utility API is a Sass-based tool to generate utility classes.
+- `src/assets/scss/_variables.scss` - This file contains all the Sass variables used in the project
+- `src/assets/scss/_talawa.scss` - This files contains all the partial Sass files imported into it
+
+**How to compile Sass file**
+
+`src/assets/scss/app.scss` is the main Sass file for the app, it imports all other partial Sass files.
+According to naming convention the file name of the partial Sass files should start with an underscore `_` and end with `.scss`, these partial Sass files are not meant to be compiled directly, they are meant to be imported into another Sass file. Only the main Sass file `src/assets/scss/app.scss` should be compiled.
+
+The compiled CSS file is `src/assets/css/app.css` and it is imported into `src/index.tsx` file.
+
+To compile the Sass file once, run the following command in the terminal
+
+```
+npx sass src/assets/scss/app.scss src/assets/css/app.css
+```
+
+To watch the Sass file for changes and compile it automatically, run the following command in the terminal
+
+```
+npx sass src/assets/scss/app.scss src/assets/css/app.css --watch
+```
+The `src/assets/css/app.css.map` file associates the generated CSS code with the original SCSS code. It allows you to see your SCSS code in the browser's developer tools for debugging.
+
+To skip generating the map file, run
+```
+npx sass --no-source-map src/assets/scss/app.scss src/assets/css/app.css
+```
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d4a02270b6..dbe448c807 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,25 +4,50 @@ Thank you for your interest in contributing to Talawa Admin. Regardless of the s
 
 If you are new to contributing to open source, please read the Open Source Guides on [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/).
 
+## Table of Contents
+
+<!-- toc -->
+
+- [Code of Conduct](#code-of-conduct)
+- [Videos](#videos)
+- [Ways to Contribute](#ways-to-contribute)
+  - [Our Development Process](#our-development-process)
+    - [Issues](#issues)
+    - [Pull Requests](#pull-requests)
+    - [Branching Strategy](#branching-strategy)
+    - [Conflict Resolution](#conflict-resolution)
+  - [Contributing Code](#contributing-code)
+- [Internships](#internships)
+- [Community](#community)
+
+<!-- tocstop -->
+
 ## Code of Conduct
 
-A safe environment is required for everyone to contribute. Read our [Code of Conduct Guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/CODE_OF_CONDUCT.md) to understand what this means. Let us know immediately if you have unacceptable experiences in this area.
+A safe environment is required for everyone to contribute. Read our [Code of Conduct Guide](CODE_OF_CONDUCT.md) to understand what this means. Let us know immediately if you have unacceptable experiences in this area.
 
 No one should fear voicing their opinion. Respones must be respectful.
 
+## Videos
+
+1. Visit our [YouTube Channel playlists](https://www.youtube.com/@PalisadoesOrganization/playlists) for more insights
+   1. The "[Getting Started - Developers](https://www.youtube.com/watch?v=YpBUoHxEeyg&list=PLv50qHwThlJUIzscg9a80a9-HmAlmUdCF&index=1)" videos are extremely helpful for new open source contributors.
+
 ## Ways to Contribute
 
-If you are ready to start contributing code right away, we have a list of [good first issues](https://github.com/PalisadoesFoundation/talawa-admin/labels/good%20first%20issue) that contain issues with a limited scope.
+If you are ready to start contributing code right away, get ready!
 
-## Quicklinks
+1. Join our Slack and introduce yourself. See details on how to join below in the Community section.
+   1. This repository has its own dedicated channel.
+   1. There are many persons on the various channels who are willing to assist you in getting started.
+1. Take a look at our issues (**_after reading our guidelines below_**):
+   1. We have a list of [good first issues](https://github.com/PalisadoesFoundation/talawa-admin/labels/good%20first%20issue) that contain challenges with a limited scope for beginners.
+   1. There are issues for creating tests for our code base. We need to increase reliablility. Try those issues, or create your own for files that don't already have tests. This is another good strategy for beginners.
+   1. There are [dormant issues on which nobody has worked for some time](https://github.com/PalisadoesFoundation/talawa-admin/issues?q=is%3Aopen+is%3Aissue+label%3Ano-issue-activity). These are another place to start
+   1. There may also be [dormant PRs on which nobody has worked for some time](https://github.com/PalisadoesFoundation/talawa-admin/issues?q=is%3Aopen+is%3Aissue+label%3Ano-issue-activity+label%3Ano-pr-activity)!
+1. Create an issue based on a bug you have found or a feature you would like to add. We value meaningful sugestions and will prioritize them.
 
-- [Our Development Process](#Our-development-process)
-  - [Issues](#issues)
-  - [Pull Requests](#pull-requests)
-  - [Git Flow](#git-flow)
-- [Contributing Code](#contributing-code)
-- [GSoC](#gsoc)
-- [Community](#community)
+Welcome aboard!
 
 ### Our Development Process
 
@@ -30,24 +55,27 @@ We utilize GitHub issues and pull requests to keep track of issues and contribut
 
 #### Issues
 
-Make sure you are following [issue report guidelines](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/issue-guidelines.md) available here before creating any new issues on Talawa Admin project.
+Make sure you are following [issue report guidelines](ISSUE_GUIDELINES.md) available here before creating any new issues on Talawa Admin project.
 
 #### Pull Requests
 
-[Pull Request guidelines](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/PR-guidelines.md) is best resource to follow to start working on open issues.
+[Pull Request guidelines](PR_GUIDELINES.md) is best resource to follow to start working on open issues.
 
-#### Git Flow
+#### Branching Strategy
 
-For Talawa Admin, we utilize the GitFlow branching model. GitFlow is geared towards efficiently tracking development and managing releases. The model makes parallel development efforts easy and safe by isolating new development efforts from completed work.
+For Talawa Admin, we had employed the following branching strategy to simplify the development process and to ensure that only stable code is pushed to the `main` branch:
 
-The different types of branches we may use are:
+- `develop`: For unstable code and bug fixing
+- `main`: Where the stable production ready code lies. This is our default branch.
 
-- Feature branches (feature/branch-name)
-- Release branches (release/1.XX)
-- Bug branches (bugfix/branch-name)
-- Hotfix branches (hotfix/branch-name)
+#### Conflict Resolution
 
-Detailed document containing how GitFlow works: https://nvie.com/posts/a-successful-git-branching-model/
+When multiple developers are working on issues there is bound to be a conflict of interest (not to be confused with git conflicts) among issues, PRs or even ideas. Usually these conflicts are resolved in a **First Come First Serve** basis however there are certain exceptions to it.
+
+- In the cases where you feel your potential issues could be an extension or in conflict with other PRs it is important to ask the author of the PR in the slack channel or in their PRs or issues themselves why he/she did not write code for something that would require minimal effort on their part.
+- Based on basic courtesy, it is good practice to let the person who created a function apply and test that function when needed.
+- Last but not the least, communication is important make sure to talk to other contributors, in these cases, in slack channel or in a issue/PR thread.
+- As a last resort the Admins would be responsible for deciding how to resolve this conflict.
 
 ### Contributing Code
 
@@ -57,11 +85,81 @@ Make sure you have read the [Documentation for Setting up the Project](https://g
 
 The process of proposing a change to Talawa Admin can be summarized as:
 
-1. Fork the Talawa Admin repository and branch off `master`.
-1. The repository can be cloned locally using `git clone <forked repo url>`.
+1. Fork the Talawa Admin repository and branch off `develop`.
+1. Your newly forked repository can be cloned locally using `git clone <YOUR FORKED REPO URL>`.
+1. Make the Palisadoes Foundation's repo your `git upstream` for your local repo.
 1. Make the desired changes to the Talawa Admin project.
 1. Run the app and test your changes.
-1. If you've added code that should be tested, write tests.
+1. If you've added code, then test suites must be added.
+
+   1. **_General_:**
+
+      1. We need to get to 100% test coverage for the app. We periodically increase the desired test coverage for our pull requests to meet this goal.
+      1. Pull requests that don't meet the minimum test coverage levels will not be accepted. This may mean that you will have to create tests for code you did not write. You can decide which part of the code base needs additional tests if this happens to you.
+
+   2. **_Testing_:**
+
+      1. Test using this set of commands:
+
+         ```
+         npm install
+         npm run test --watchAll=false --coverage
+         ```
+
+      2. Debug tests in browser
+
+         You can see the output of failing tests in broswer by running `jest-preview` package before running your tests
+
+         ```
+         npm install
+         npm run jest-preview
+         npm run test --watchAll=false --coverage
+         ```
+
+         You don't need to re-run the `npm run jest-preview` command each time, simply run the `npm run test` command if the Jest Preview server is already running in the background, it'll automatically detect any failing tests and show the preview at `http://localhost:3336` as shown in this screenshot -
+
+         ![Debugging Test Demo](./public/images/jest-preview.webp)
+
+   3. **_Test Code Coverage_:**
+
+      1. _General Information_
+         1. The current code coverage of the repo is: [![codecov](https://codecov.io/gh/PalisadoesFoundation/talawa-admin/branch/develop/graph/badge.svg?token=II0R0RREES)](https://codecov.io/gh/PalisadoesFoundation/talawa-admin)
+         2. You can determine the percentage test coverage of your code by running these two commands in sequence:
+            ```
+            npm install
+            npm run test --watchAll=false --coverage
+            genhtml coverage/lcov.info -o coverage
+            ```
+         3. The output of the `npm run test` command will give you a tablular coverage report per file
+         4. The overall coverage rate will be visible on the penultimate line of the `genhtml` command's output.
+         5. The `genhtml` command is part of the Linux `lcov` package. Similar packages can be found for Windows and MacOS.
+         6. The currently acceptable coverage rate can be found in the [GitHub Pull Request file](.github/workflows/pull-requests.yml). Search for the value below the line containing `min_coverage`.
+      2. _Testing Individual Files_
+         1. You can test an individual file by running this command:
+            ```
+            npm run test --watchAll=false /path/to/test/file
+            ```
+         2. You can get the test coverage report for that file by running this command. The report will list all tests in the suite. Those tests that are not run will have zero values. You will need to look for the output line relevant to your test file.
+            ```
+            npm run test --watchAll=false --coverage /path/to/test/file
+            ```
+      3. _Creating your code coverage account_
+
+         1. You can also see your code coverage online for your fork of the repo. This is provided by `codecov.io`
+
+            1. Go to this link: `https://app.codecov.io/gh/XXXX/YYYY` where XXXX is your GitHub account username and YYYY is the name of the repository
+            2. Login to `codecov.io` using your GitHub account, and add your **repo** and **branches** to the `codecov.io` dashboard.
+               ![Debugging Test Demo](/public/images/codecov/authorise-codecov-github.jpg)
+            3. Remember to add the `Repository Upload Token` for your forked repo. This can be found under `Settings` of your `codecov.io` account.
+
+            4. Click on Setup Repo option
+               ![Debugging Test Demo](</public/images/codecov/homescrenn%20(1).jpg>)
+            5. Use the value of this token to create a secret named CODE_COV for your forked repo.
+               [![Code-cov-token.jpg](/public/images/codecov/Code-cov-token.jpg)]()
+               [![addd-your-key.jpg](/public/images/codecov/addd-your-key.jpg)]()
+            6. You will see your code coverage reports with every push to your repo after following these steps
+               [![results.jpg](/public/images/codecov/results.jpg)]()
+
 1. After making changes you can add them to git locally using `git add <file_name>`(to add changes only in a particular file) or `git add .` (to add all changes).
 1. After adding the changes you need to commit them using `git commit -m '<commit message>'`(look at the commit guidelines below for commit messages).
 1. Once you have successfully commited your changes, you need to push the changes to the forked repo on github using: `git push origin <branch_name>`.(Here branch name must be name of the branch you want to push the changes to.)
@@ -69,18 +167,13 @@ The process of proposing a change to Talawa Admin can be summarized as:
 1. Ensure the test suite passes, either locally or on CI once a PR has been created.
 1. Review and address comments on your pull request if requested.
 
-### Internships
-
-We have internship partnerships with a number of organizations. See below for more details.
-
-#### GSoC
-
-If you are participating in the 2021 Summer of Code, please read more about us and our processes [here](https://palisadoesfoundation.github.io/talawa-docs/docs/internships/gsoc/gsoc-introduction)
+## Internships
 
-#### GitHub Externship
+If you are participating in any of the various internship programs we are members of, then please read the [introduction guides on our documentation website](https://docs.talawa.io/docs/).
 
-If you are participating in the 2021 GitHub Externship, please read more about us and our processes [here](https://palisadoesfoundation.github.io/talawa-docs/docs/internships/github/github-introduction)
+## Community
 
-### Community
+There are many ways to communicate with the community.
 
-The Palisadoes Foundation has a Slack channel where members can assist with support and clarification. Click [here](https://join.slack.com/t/thepalisadoes-dyb6419/shared_invite/zt-nk79xxlg-OxTdlrD7RLaswu8EO_Q5rg) to join our slack channel.
+1. The Palisadoes Foundation has a Slack channel where members can assist with support and clarification. Visit the [Talawa GitHub repository home page](https://github.com/PalisadoesFoundation/talawa) for the link to join our slack channel.
+1. We also have a technical email list run by [freelists.org](https://www.freelists.org/). Search for "palisadoes" and join. Members on this list are also periodically added to our marketing email list that focuses on less technical aspects of our work.
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
new file mode 100644
index 0000000000..7691b5d452
--- /dev/null
+++ b/DOCUMENTATION.md
@@ -0,0 +1,32 @@
+# Documentation
+Welcome to our documentation guide. Here are some useful tips you need to know!
+
+# Table of Contents
+
+<!-- toc -->
+
+- [Where to find our documentation](#where-to-find-our-documentation)
+- [How to use Docusaurus](#how-to-use-docusaurus)
+- [Other information](#other-information)
+
+<!-- tocstop -->
+
+## Where to find our documentation
+
+Our documentation can be found in ONLY TWO PLACES:
+
+1. ***Inline within the repository's code files***: We have automated processes to extract this information and place it in our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/). 
+1. ***In our `talawa-docs` repository***: Our [Talawa-Docs](https://github.com/PalisadoesFoundation/talawa-docs) repository contains user edited markdown files that are automatically integrated into our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/) using the [Docusaurus](https://docusaurus.io/) package.
+
+## How to use Docusaurus
+The process in easy:
+1. Install `talawa-docs` on your system
+1. Launch docusaurus on your system according to the `talawa-docs`documentation. 
+    - A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
+1. Add/modify the markdown documents to the `docs/` directory of the `talawa-docs` repository
+1. If adding a file, then you will also need to edit the `sidebars.js` which is used to generate the [docs.talawa.io](https://docs.talawa.io/) menus.
+1. Always monitor the local website in your brower to make sure the changes are acceptable. 
+    - You'll be able to see errors that you can use for troubleshooting in the CLI window you used to launch the local website.
+
+## Other information
+***PLEASE*** do not add markdown files in this repository. Add them to `talawa-docs`!
diff --git a/Docker_Container/.dockerignore b/Docker_Container/.dockerignore
deleted file mode 100644
index 56e8146402..0000000000
--- a/Docker_Container/.dockerignore
+++ /dev/null
@@ -1,5 +0,0 @@
-node_modules
-build
-.dockerignore
-Dockerfile
-Dockerfile.prod
\ No newline at end of file
diff --git a/Docker_Container/README.md b/Docker_Container/README.md
deleted file mode 100644
index b4bc5bf290..0000000000
--- a/Docker_Container/README.md
+++ /dev/null
@@ -1,50 +0,0 @@
-## Steps to start the build with Docker
-
-### Project Setup
-
-- Install [Docker](https://www.docker.com/)
-
-- Build and Tag The Docker Image
-
-`$ docker build -t sample:dev`
-
-- Then Spin up the container once build is done
-
-```
-$ docker run \
-    -it \
-    --rm \
-    -v ${PWD}:/app \
-    -v /app/node_modules \
-    -p 3001:3000 \
-    -e CHOKIDAR_USEPOLLING=true \
-    sample:dev
-```
-
-- Whats Happening here
-
-1. The `docker run` command creates and runs a new conatiner instance from the image we just created
-
-2. `-it` starts the container in interactive mode
-
-3. `--rm` removes the container and volumes after the container exists.
-
-4. `-v ${PWD}:/app` mounts the code into the container at "/app".
-
-5. Since we want to use the container version of the “node_modules” folder, we configured another volume: `-v /app/node_modules` . You should now be able to remove the local “node_modules” flavor.
-
-6. `-p 3001:3000` exposes port 3000 to other Docker containers on the same network (for inter-container communication) and port 3001 to the host.
-
-7. Finally , `-e CHOKIDAR_USEPOLLING=true` enables a polling mechanism via chokidar (which wraps `fs.watch`, `fs.watchFile`, and `fsevents`) so that hot-reloading will work.
-
-### For using compose file
-
-- Build the image and fire up the container
-
-`$ docker-compose up -d --build`
-
-- Ensure the app is running in the browser and test hot - reloading again. Bring down the container before moving on
-
-`$ docker-compose stop`
-
-- Now your container is ready to run
diff --git a/Docker_Container/docker-compose.yml b/Docker_Container/docker-compose.yml
deleted file mode 100644
index ad7cad7f48..0000000000
--- a/Docker_Container/docker-compose.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-version: '3.7'
-
-services:
-
-  sample:
-    container_name: sample
-    build:
-      context: .
-      dockerfile: Dockerfile
-    volumes:
-      - '.:/app'
-      - '/app/node_modules'
-    ports:
-      - 3001:3000
-    environment:
-      - CHOKIDAR_USEPOLLING=true
\ No newline at end of file
diff --git a/Docker_Container/dockerfile b/Docker_Container/dockerfile
deleted file mode 100644
index 34eca8c102..0000000000
--- a/Docker_Container/dockerfile
+++ /dev/null
@@ -1,21 +0,0 @@
-# pull official base image
-FROM node:13.12.0-alpine
-
-# set working directory
-WORKDIR /app
-
-# add `/app/node_modules/.bin` to $PATH
-ENV PATH /app/node_modules/.bin:$PATH
-
-# install app dependencies
-COPY package.json ./
-COPY yarn.lock ./
-COPY package-lock.json ./
-RUN yarn install --silent
-RUN yarn install react-scripts@3.4.1 -g --silent
-
-# add app
-COPY . ./
-
-# start app
-CMD ["yarn", "start"]
diff --git a/INSTALLATION.md b/INSTALLATION.md
new file mode 100644
index 0000000000..5813b7d1cb
--- /dev/null
+++ b/INSTALLATION.md
@@ -0,0 +1,337 @@
+# Talawa-Admin Installation
+
+This document provides instructions on how to set up and start a running instance of `talawa-admin` on your local system. The instructions are written to be followed in sequence so make sure to go through each of them step by step without skipping any sections.
+
+# Table of Contents
+
+<!-- toc -->
+
+- [Installation Steps Summary](#installation-steps-summary)
+- [Prerequisites](#prerequisites)
+  - [Install git](#install-git)
+  - [Setting up this repository](#setting-up-this-repository)
+  - [Install node.js](#install-nodejs)
+  - [Install TypeScript](#install-typescript)
+  - [Install Required Packages](#install-required-packages)
+- [Configuration](#configuration)
+  - [Creating .env file](#creating-env-file)
+  - [Setting up PORT in .env file](#setting-up-port-in-env-file)
+  - [Setting up REACT_APP_TALAWA_URL in .env file](#setting-up-react_app_talawa_url-in-env-file)
+  - [Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file](#setting-up-react_app_backend_websocket_url-in-env-file)
+  - [Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file](#setting-up-react_app_recaptcha_site_key-in-env-file)
+  - [Setting up Compiletime and Runtime logs](#setting-up-compiletime-and-runtime-logs)
+- [Post Configuration Steps](#post-configuration-steps)
+  - [Running Talawa-Admin](#running-talawa-admin)
+  - [Accessing Talawa-Admin](#accessing-talawa-admin)
+  - [Talawa-Admin Registration](#talawa-admin-registration)
+  - [Talawa-Admin Login](#talawa-admin-login)
+- [Testing](#testing)
+  - [Running tests](#running-tests)
+  - [Debugging tests](#debugging-tests)
+  - [Linting code files](#linting-code-files)
+  - [Husky for Git Hooks](#husky-for-git-hooks)
+      - [pre-commit hook](#pre-commit-hook)
+      - [post-merge hook](#post-merge-hook)
+
+<!-- tocstop -->
+
+# Installation Steps Summary
+
+Installation is not difficult, but there are many steps. This is a brief explanation of what needs to be done:
+
+1. Install `git`
+2. Download the code from GitHub using `git`
+3. Install `node.js` (Node), the runtime environment the application will need to work.
+4. Configure the Node Package Manager (`npm`) to automatically use the correct version of Node for our application.
+5. Use `npm` to install TypeScript, the language the application is written in.
+6. Install other supporting software such as the database.
+7. Configure the application
+8. Start the application
+
+These steps are explained in more detail in the sections that follow.
+
+# Prerequisites
+
+In this section we'll explain how to set up all the prerequisite software packages to get you up and running.
+
+## Install git
+
+The easiest way to get the latest copies of our code is to install the `git` package on your computer.
+
+Follow the setup guide for `git` on official [git docs](https://git-scm.com/downloads). Basic `git` knowledge is required for open source contribution so make sure you're comfortable with it. [Here's](https://youtu.be/apGV9Kg7ics) a good tutorial to get started with `git` and `github`.
+
+## Setting up this repository
+
+First you need a local copy of `talawa-admin`. Run the following command in the directory of choice on your local system.
+
+1. On your computer, navigate to the folder where you want to setup the repository.
+2. Open a `cmd` (Windows) or `terminal` (Linux or MacOS) session in this folder.
+   1. An easy way to do this is to right-click and choose appropriate option based on your OS.
+3. **For Our Open Source Contributor Software Developers:**
+
+   1. Next, we'll fork and clone the `talawa-admin` repository.
+   1. In your web browser, navigate to [https://github.com/PalisadoesFoundation/talawa-admin/](https://github.com/PalisadoesFoundation/talawa-admin/) and click on the `fork` button. It is placed on the right corner opposite the repository name `PalisadoesFoundation/talawa-admin`.
+
+      ![Image with fork](public/markdown/images/install1.png)
+
+   1. You should now see `talawa-admin` under your repositories. It will be marked as forked from `PalisadoesFoundation/talawa-admin`
+
+      ![Image of user's clone](public/markdown/images/install2.png)
+
+   1. Clone the repository to your local computer (replacing the values in `{{}}`):
+      ```bash
+      $ git clone https://github.com/{{YOUR GITHUB USERNAME}}/talawa-admin.git
+      cd talawa-admin
+      git checkout develop
+      ```
+      - **Note:** Make sure to check out the `develop` branch
+   1. You now have a local copy of the code files. For more detailed instructions on contributing code, and managing the versions of this repository with `git`, checkout our [CONTRIBUTING.md](./CONTRIBUTING.md) file.
+
+4. **Talawa Administrators:**
+
+   1. Clone the repository to your local computer using this command:
+
+      ```bash
+      $ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
+      ```
+
+## Install node.js
+
+Best way to install and manage `node.js` is making use of node version managers. We recommend using `fnm`, which will be described in more detail later.
+
+Follow these steps to install the `node.js` packages in Windows, Linux and MacOS.
+
+1. For Windows:
+   1. first install `node.js` from their website at https://nodejs.org
+      1. When installing, don't click the option to install the `necessary tools`. These are not needed in our case.
+   2. then install [fnm](https://github.com/Schniz/fnm). Please read all the steps in this section first.
+      1. All the commands listed on this page will need to be run in a Windows terminal session in the `talawa-admin` directory.
+      2. Install `fnm` using the `winget` option listed on the page.
+      3. Setup `fnm` to automatically set the version of `node.js` to the version required for the repository using these steps:
+         1. First, refer to the `fnm` web page's section on `Shell Setup` recommendations.
+         2. Open a `Windows PowerShell` terminal window
+         3. Run the recommended `Windows PowerShell` command to open `notepad`.
+         4. Paste the recommended string into `notepad`
+         5. Save the document.
+         6. Exit `notepad`
+         7. Exit PowerShell
+         8. This will ensure that you are always using the correct version of `node.js`
+2. For Linux and MacOS, use the terminal window.
+   1. install `node.js`
+   2. then install `fnm`
+      1. Refer to the installation page's section on the `Shell Setup` recommendations.
+      2. Run the respective recommended commands to setup your node environment
+      3. This will ensure that you are always using the correct version of `node.js`
+
+## Install TypeScript
+
+TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional types, classes, and modules to JavaScript, and supports tools for large-scale JavaScript applications.
+
+To install TypeScript, you can use the `npm` command which comes with `node.js`:
+
+```bash
+npm install -g typescript
+```
+
+This command installs TypeScript globally on your system so that it can be accessed from any project.
+
+## Install Required Packages
+
+Run the following command to install the packages and dependencies required by the app:
+
+```
+npm install
+```
+
+The prerequisites are now installed. The next step will be to get the app up and running.
+
+# Configuration
+
+It's important to configure Talawa-Admin. Here's how to do it.
+
+You can use our interactive setup script for the configuration. Use the following command for the same.
+
+```
+npm run setup
+```
+
+All the options in "setup" can be done manually as well and here's how to do it. - [Creating .env file](#creating-env-file)
+
+## Creating .env file
+
+A file named .env is required in the root directory of talawa-admin for storing environment variables used at runtime. It is not a part of the repo and you will have to create it. For a sample of `.env` file there is a file named `.env.example` in the root directory. Create a new `.env` file by copying the contents of the `.env.example` into `.env` file. Use this command:
+
+```
+cp .env.example .env
+```
+
+This `.env` file must be populated with the following environment variables for `talawa-admin` to work:
+
+| Variable                        | Description                                       |
+| ------------------------------- | ------------------------------------------------- |
+| PORT                            | Custom port for Talawa-Admin development purposes |
+| REACT_APP_TALAWA_URL            | URL endpoint for talawa-api graphql service       |
+| REACT_APP_BACKEND_WEBSOCKET_URL | URL endpoint for websocket end point              |
+| REACT_APP_USE_RECAPTCHA         | Whether you want to use reCAPTCHA or not          |
+| REACT_APP_RECAPTCHA_SITE_KEY    | Site key for authentication using reCAPTCHA       |
+
+Follow the instructions from the sections [Setting up PORT in .env file](#setting-up-port-in-env-file), [Setting up REACT_APP_TALAWA_URL in .env file](#setting-up-REACT_APP_TALAWA_URL-in-env-file), [Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file](#setting-up-react_app_backend_websocket_url-in-env-file), [Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file](#setting-up-REACT_APP_RECAPTCHA_SITE_KEY-in-env-file) and [Setting up Compiletime and Runtime logs](#setting-up-compiletime-and-runtime-logs) to set up these environment variables.
+
+## Setting up PORT in .env file
+
+Add a custom port number for Talawa-Admin development purposes to the variable named `PORT` in the `.env` file.
+
+## Setting up REACT_APP_TALAWA_URL in .env file
+
+Add the endpoint for accessing talawa-api graphql service to the variable named `REACT_APP_TALAWA_URL` in the `.env` file.
+
+```
+REACT_APP_TALAWA_URL="http://API-IP-ADRESS:4000/graphql/"
+```
+
+If you are a software developer working on your local system, then the URL would be:
+
+```
+REACT_APP_TALAWA_URL="http://localhost:4000/graphql/"
+```
+
+If you are trying to access Talawa Admin from a remote host with the API URL containing "localhost", You will have to change the API URL to
+
+```
+REACT_APP_TALAWA_URL="http://YOUR-REMOTE-ADDRESS:4000/graphql/"
+```
+
+## Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file
+
+The endpoint for accessing talawa-api WebSocket graphql service for handling subscriptions is automatically added to the variable named `REACT_APP_BACKEND_WEBSOCKET_URL` in the `.env` file.
+
+```
+REACT_APP_BACKEND_WEBSOCKET_URL="ws://API-IP-ADRESS:4000/graphql/"
+```
+
+If you are a software developer working on your local system, then the URL would be:
+
+```
+REACT_APP_BACKEND_WEBSOCKET_URL="ws://localhost:4000/graphql/"
+```
+
+If you are trying to access Talawa Admin from a remote host with the API URL containing "localhost", You will have to change the API URL to
+
+```
+REACT_APP_BACKEND_WEBSOCKET_URL="ws://YOUR-REMOTE-ADDRESS:4000/graphql/"
+```
+
+For additional details, please refer the `How to Access the Talawa-API URL` section in the INSTALLATION.md file found in the [Talawa-API repo](https://github.com/PalisadoesFoundation/talawa-api).
+
+## Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file
+
+You may not want to setup reCAPTCHA since the project will still work. Moreover, it is recommended to not set it up in development environment.
+
+Just skip to the [Post Configuration Steps](#post-configuration-steps) if you don't want to set it up. Else, read the following steps.
+
+If you want to setup Google reCAPTCHA now, you may refer to the `RECAPTCHA` section in the INSTALLATION.md file found in [Talawa-API repo](https://github.com/PalisadoesFoundation/talawa-api).
+
+`Talawa-admin` needs the `reCAPTCHA site key` for the `reCAPTCHA` service you set up during `talawa-api` installation as shown in this screenshot:
+
+![reCAPTCHA site key](./public/images/REACT_SITE_KEY.webp)
+
+Copy/paste this `reCAPTCHA site key` to the variable named `REACT_APP_RECAPTCHA_SITE_KEY` in `.env` file.
+
+```
+REACT_APP_RECAPTCHA_SITE_KEY="this_is_the_recaptcha_key"
+```
+
+## Setting up Compiletime and Runtime logs
+
+Set the `ALLOW_LOGS` to "YES" if you want warnings , info and error messages in your console or leave it blank if you dont need them or want to keep the console clean
+
+# Post Configuration Steps
+
+It's now time to start Talawa-Admin and get it running
+
+## Running Talawa-Admin
+
+Run the following command to start `talawa-admin` development server:
+
+```
+npm run serve
+```
+
+## Accessing Talawa-Admin
+
+By default `talawa-admin` runs on port `4321` on your system's localhost. It is available on the following endpoint:
+
+```
+http://localhost:4321/
+```
+
+If you have specified a custom port number in your `.env` file, Talawa-Admin will run on the following endpoint:
+
+```
+http://localhost:${{customPort}}/
+```
+
+Replace `${{customPort}}` with the actual custom port number you have configured in your `.env` file.
+
+## Talawa-Admin Registration
+
+The first time you navigate to the running talawa-admin's website you'll land at talawa-admin registration page. Sign up using whatever credentials you want and create the account. Make sure to remember the email and password you entered because they'll be used to sign you in later on.
+
+## Talawa-Admin Login
+
+Now sign in to talawa-admin using the `email` and `password` you used to sign up.
+
+# Testing
+
+It is important to test our code. If you are a contributor, please follow these steps.
+
+## Running tests
+
+You can run the tests for `talawa-admin` using this command:
+
+```
+npm run test
+```
+
+## Debugging tests
+
+You can see the output of failing tests in broswer by running `jest-preview` package before running your tests
+
+```
+npm run jest-preview
+npm run test
+```
+
+You don't need to re-run the `npm run jest-preview` command each time, simply run the `npm run test` command if the Jest Preview server is already running in the background, it'll automatically detect any failing tests and show the preview at `http://localhost:3336` as shown in this screenshot -
+
+![Debugging Test Demo](./public/images/jest-preview.webp)
+
+## Linting code files
+
+You can lint your code files using this command:
+
+```
+npm run lint:fix
+```
+
+## Husky for Git Hooks
+
+We are using the package `Husky` to run git hooks that run according to different git workflows.
+
+#### pre-commit hook
+
+We run a pre-commit hook which automatically runs code quality checks each time you make a commit and also fixes some of the issues. This way you don't have to run them manually each time.
+
+If you don't want these pre-commit checks running on each commit, you can manually opt out of it using the `--no-verify` flag with your commit message as shown:-
+
+        git commit -m "commit message" --no-verify
+
+#### post-merge hook
+
+We are also running a post-merge(post-pull) hook which will automatically run "npm install" only if there is any change made to pakage.json file so that the developer has all the required dependencies when pulling files from remote.
+
+If you don't want this hook to run, you can manually opt out of this using the `no verify` flag while using the merge command(git pull):
+
+        git pull --no-verify
+
+<br/>
diff --git a/ISSUE_GUIDELINES.md b/ISSUE_GUIDELINES.md
new file mode 100644
index 0000000000..5170de5839
--- /dev/null
+++ b/ISSUE_GUIDELINES.md
@@ -0,0 +1,59 @@
+# Issue Report Guidelines
+
+:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
+
+In order to give everyone a chance to submit a issues reports and contribute to the Talawa project, we have put restrictions in place. This section outlines the guidelines that should be imposed upon issue reports in the Talawa project.
+
+___
+## Table of Contents
+
+<!-- toc -->
+
+- [Issue Management](#issue-management)
+  - [New Issues](#new-issues)
+  - [Existing Issues](#existing-issues)
+  - [Feature Request Issues](#feature-request-issues)
+  - [Monitoring the Creation of New Issues](#monitoring-the-creation-of-new-issues)
+- [General Guidelines](#general-guidelines)
+
+<!-- tocstop -->
+
+___
+## Issue Management
+
+In all cases please use the [GitHub open issue search](https://github.com/PalisadoesFoundation/talawa-admin/issues) to check whether the issue has already been reported.
+
+### New Issues
+To create new issues follow these steps:
+
+1. Your issue may have already been created. Search for duplicate open issues before submitting yours.for similar deficiencies in the code.duplicate issues are created. 
+1. Verify whether the issue has been fixed by trying to reproduce it using the latest master or development branch in the repository.
+1. Click on the [`New Issue`](https://github.com/PalisadoesFoundation/talawa-admin/issues/new/choose) button
+1. Use the templates to create a standardized report of what needs to be done and why.
+1. If you want to be assigned the issue that you have created, then add a comment immediately after submitting it.
+
+We welcome contributors who find new ways to make the code better.
+
+### Existing Issues
+
+You can also be a valuable contributor by searching for dormant issues. Here's how you can do that:
+
+1. **Previously Assigned Issues**: We regularly review issues and add a [`no-issue-activity`](https://github.com/PalisadoesFoundation/talawa-admin/issues?q=is%3Aissue+is%3Aopen+label%3Ano-issue-activity) label to them. Use the issue comments to ask whether the assignee is still working on the issue, and if not, ask for the issue to be assigned to you.
+1. **Unassigned Issues**: If the issue is already reported and [not assigned to anyone](https://github.com/PalisadoesFoundation/talawa-admin/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee) and you are interested in working on the issue then:
+   1. Ask for the issue to be assigned to you in the issue comments
+   2. Ask our contributors to assign it to you in `#talawa` slack channel.
+
+Working on these types of existing issues is a good way of getting started with the community.
+
+### Feature Request Issues
+
+Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the mentors of the merits of this feature. Please provide as much detail and context as possible.
+
+### Monitoring the Creation of New Issues 
+1. Join our `#talawa-github` slack channel for automatic issue and pull request updates.
+
+## General Guidelines
+
+1. Discuss issues in our various slack channels when necessary
+2. Please do not derail or troll issues. 
+3. Keep the discussion on topic and respect the opinions of others.
diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
deleted file mode 100644
index c59e24c1ee..0000000000
--- a/ISSUE_TEMPLATE.md
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--- Provide a general summary of the issue in the Title above -->
-
-## Expected Behavior
-
-<!--- Tell us what should happen -->
-
-## Current Behavior
-
-<!--- Tell us what happens instead of the expected behavior -->
-
-## Possible Solution
-
-<!--- Not obligatory, but suggest a fix/reason for the bug, -->
-
-## Steps to Reproduce
-
-<!--- Provide a link to a live example, or an unambiguous set of steps to -->
-<!--- reproduce this bug. Include code to reproduce, if relevant -->
-
-1.
-2.
-3.
-4.
-
-## Context (Environment)
-
-<!--- How has this issue affected you? What are you trying to accomplish? -->
-<!--- Providing context helps us come up with a solution that is most useful in the real world -->
-
-<!--- Provide a general summary of the issue in the Title above -->
-
-## Detailed Description
-
-<!--- Provide a detailed description of the change or addition you are proposing -->
-
-## Possible Implementation
-
-<!--- Not obligatory, but suggest an idea for implementing addition or change -->
diff --git a/PR-guidelines.md b/PR-guidelines.md
deleted file mode 100644
index c469028b0b..0000000000
--- a/PR-guidelines.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Pull Request Guidelines
-
-:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
-
-In order to give everyone a chance to submit a pull request and contribute to the Talawa API project, we have put restrictions in place. This section outlines the guidelines that should be imposed upon pull requests in the Talawa API project.
-
-1. Do not start working on any open issue and raise a PR unless it is assigned to you.
-2. Pull requests must be based on [open issues](https://github.com/PalisadoesFoundation/talawa-admin/issues) available.
-3. [Use this method to automatically close the issue when the PR is completed.](https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue)
-4. Each contributor may only create one pull request at a time. We have this rule in place due to our limited resources - if everyone was allowed to post multiple pull requests we will not be able to review them properly. It is also better for contributors because you can focus on creating one quality PR - so spend time making sure it is as good as it can be.
-5. If the pull request's code quality is not up to par, or it would break the app, it will more likely be closed. So please be careful when creating a PR.
-6. Please follow the [PR template](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/templates/pr-template.md). Ensure the PR title clearly describes the problem it is solving. In the description, include the relevant issue number, snapshots and videos after changes added.
-7. If you are borrowing code, please disclose it. It is fine and sometimes even recommended to borrow code, but we need to know about it to assess your work. If we find out that your pull request contains a lot of code copied from elsewhere, we will close the pull request.
-8. All pull request must have test units. If for some reason it is not possible to add tests, please let us know and explain why. In that case, you'll need to tell us what steps you followed to manually test your changes.
-9. No Work In Progress. ONLY completed and working pull requests, and with test units, will be accepted. A WIP would fall under rule 4 and be closed immediately.
-10. Please do not @mention contributors and mentors. Sometimes it takes time before we can review your pull request or answer your questions but we'll get to it sooner or later. @mentioning someone just adds to the pile of notifications we get and it won't make us look at your issue faster.
-11. Do not force push. If you make changes to your pull request, please simply add a new commit as that makes it easy for us to review your new changes. If you force push, we'll have to review everything from the beginning.
-12. PR should be small, easy to review and should follow standard coding styles.
-13. If PR has conflicts because of recently added changes to the same file, resolve issues, test new changes and submit PR again for review.
-14. PRs should be atomic. That is, they should address one item (issue or feature)
-15. After submitting PR, if you are not replying within 48 hours then in that case we may need to assign issue to other contributors based on priority of the issue.
diff --git a/PR_GUIDELINES.md b/PR_GUIDELINES.md
new file mode 100644
index 0000000000..4c904c782d
--- /dev/null
+++ b/PR_GUIDELINES.md
@@ -0,0 +1,69 @@
+# Pull Request Guidelines
+
+:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
+
+In order to give everyone a chance to submit a pull request and contribute to the Talawa project, we have put restrictions in place. This section outlines the guidelines that should be imposed upon pull requests in the Talawa project.
+
+# Table of Contents
+
+<!-- toc -->
+
+- [Pull Requests and Issues](#pull-requests-and-issues)
+- [Linting and Formatting](#linting-and-formatting)
+- [Testing](#testing)
+- [Pull Request Processing](#pull-request-processing)
+  - [Only submit PRs against our `develop` branch, not the default `main` branch](#only-submit-prs-against-our-develop-branch-not-the-default-main-branch)
+
+<!-- tocstop -->
+
+## Pull Requests and Issues
+
+1. Do not start working on any open issue and raise a PR unless the issue is assigned to you. PRs that don't meet these guidelines will be closed.
+1. Pull requests must be based on [open issues](https://github.com/PalisadoesFoundation/talawa-admin/issues) available.
+1. [Use this method to automatically close the issue when the PR is completed.](https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue)
+
+## Linting and Formatting
+
+All the pull requests must have code that is properly linted and formatted, so that uniformity across the repository can be ensured.
+
+Before opening a PR, you can run the following scripts to automatically lint and format the code properly:
+
+```
+npm run lint:fix
+npm run format:fix
+```
+
+Both of these scripts also have a `check` counterpart, which would be used by the GitHub CI to ensure that the code is properly formatted.
+You can run the following scripts yourself to ensure that your pull request doesn't fail due to linting and formatting errors:
+
+```
+npm run lint:check
+npm run format:check
+```
+
+## Testing
+
+1. All pull requests must have test units. If, for some reason, it is not possible to add tests, please let us know and explain why. In that case, you'll need to tell us what steps you followed to manually test your changes.
+1. Please read our [CONTRIBUTING.md](CONTRIBUTING.md) document for details on our testing policy.
+
+## Pull Request Processing
+These are key guidelines for the procedure:
+
+### Only submit PRs against our `develop` branch, not the default `main` branch
+
+1. Only submit PRs against our `develop` branch. The default is `main`, so you will have to modify this before submitting your PR for review. PRs made against `main` will be closed.
+1. We do not accept draft Pull Requests. They will be closed if submitted. We focus on work that is ready for immediate review.
+1. Removing assigned reviewers from your Pull Request will cause it to be closed. The quality of our code is very important to us. Therefore we make experienced maintainers of our code base review your code. Removing these assigned persons is not in the best interest of this goal.
+1. If you have not done so already, please read the `Pull Requests and Issues` and `Testing` sections above.
+1. Each contributor may only create one pull request at a time. We have this rule in place due to our limited resources - if everyone was allowed to post multiple pull requests, we would not be able to review them properly. It is also better for contributors because you can focus on creating one quality PR - so spend time making sure it is as good as it can be.
+1. Upon successful push to the fork, check if all tests are passing; if not, fix the issues and then create a pull request.
+1. If the pull request's code quality is not up to par, or it would break the app, it will more likely be closed. So please be careful when creating a PR.
+1. Please follow the PR template provided. Ensure the PR title clearly describes the problem it is solving. In the description, include the relevant issue number, snapshots, and videos after changes are added.
+1. If you are borrowing a code, please disclose it. It is fine and sometimes even recommended to borrow code, but we need to know about it to assess your work. If we find out that your pull request contains a lot of code copied from elsewhere, we will close the pull request.
+1. No Work In Progress. ONLY completed and working pull requests and with respective test units will be accepted. A WIP would fall under rule 4 and be closed immediately.
+1. Please do not @mention contributors and mentors. Sometimes it takes time before we can review your pull request or answer your questions, but we'll get to it sooner or later. @mentioning someone just adds to the pile of notifications we get and it won't make us look at your issue faster.
+1. Do not force push. If you make changes to your pull request, please simply add a new commit, as that makes it easy for us to review your new changes. If you force push, we'll have to review everything from the beginning.
+1. PR should be small, easy to review and should follow standard coding styles.
+1. If PR has conflicts because of recently added changes to the same file, resolve issues, test new changes, and submit PR again for review.
+1. PRs should be atomic. That is, they should address one item (issue or feature)
+1. After submitting PR, if you are not replying within 48 hours, then in that case, we may need to assign the issue to other contributors based on the priority of the issue.
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index 435ecf4ada..0000000000
--- a/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,15 +0,0 @@
-- **Please check if the PR fulfills these requirements**
-
-* [ ] The commit message follows our guidelines
-* [ ] Tests for the changes have been added (for bug fixes / features)
-* [ ] Docs have been added / updated (for bug fixes / features)
-
-- **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
-
-- **What is the current behavior?** (You can also link to an open issue here)
-
-- **What is the new behavior (if this is a feature change)?**
-
-- **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)
-
-- **Other information**:
diff --git a/README.md b/README.md
index 66d98dd25c..cbade9e407 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,13 @@
 # Talawa Admin
 
+[💬 Join the community on Slack](https://github.com/PalisadoesFoundation/)
+
+![talawa-logo-lite-200x200](https://github.com/PalisadoesFoundation/talawa-admin/assets/16875803/26291ec5-d3c1-4135-8bc7-80885dff613d)
+
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
 [![GitHub stars](https://img.shields.io/github/stars/PalisadoesFoundation/talawa-admin.svg?style=social&label=Star&maxAge=2592000)](https://github.com/PalisadoesFoundation/talawa-admin)
 [![GitHub forks](https://img.shields.io/github/forks/PalisadoesFoundation/talawa-admin.svg?style=social&label=Fork&maxAge=2592000)](https://github.com/PalisadoesFoundation/talawa-admin)
-
-[![N|Solid](src/assets/talawa-logo-lite-200x200.png)](https://github.com/PalisadoesFoundation/talawa-admin)
+[![codecov](https://codecov.io/gh/PalisadoesFoundation/talawa-admin/branch/develop/graph/badge.svg?token=II0R0RREES)](https://codecov.io/gh/PalisadoesFoundation/talawa-admin)
 
 Talawa is a modular open source project to manage group activities of both non-profit organizations and businesses.
 
@@ -18,6 +21,16 @@ Core features include:
 
 `talawa` is based on the original `quito` code created by the [Palisadoes Foundation][pfd] as part of its annual Calico Challenge program. Calico provides paid summer internships for Jamaican university students to work on selected open source projects. They are mentored by software professionals and receive stipends based on the completion of predefined milestones. Calico was started in 2015. Visit [The Palisadoes Foundation's website](http://www.palisadoes.org/) for more details on its origin and activities.
 
+# Table of Contents
+
+<!-- toc -->
+
+- [Talawa Components](#talawa-components)
+- [Documentation](#documentation)
+- [Videos](#videos)
+
+<!-- tocstop -->
+
 # Talawa Components
 
 `talawa` has these major software components:
@@ -29,44 +42,15 @@ Core features include:
 
 # Documentation
 
-- The `talawa` documentation can be found [here](https://palisadoesfoundation.github.io/talawa-docs/).
-- Want to contribute? Look at [CONTRIBUTING.md](CONTRIBUTING.md) to get started.
-- Visit the [Talawa-Docs GitHub](https://github.com/PalisadoesFoundation/talawa-docs) to see the code.
-
-# Project Setup
-
-```
-yarn install
-```
-
-## Compiles and hot-reloads for development
-
-```
-yarn serve
-```
-
-## Compiles and minifies for production
-
-```
-yarn build
-```
-
-## Run your end-to-end tests
-
-```
-yarn test:e2e
-```
-
-## Lints and fixes files
-
-```
-yarn lint
-```
-
-## Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
+1. You can install the software for this repository using the steps in our [INSTALLATION.md](INSTALLATION.md) file.
+1. Do you want to contribute to our code base? Look at our [CONTRIBUTING.md](CONTRIBUTING.md) file to get started. There you'll also find links to:
+    1. Our code of conduct documentation in the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) file.
+    1. How we handle the processing of new and existing issues in our [ISSUE_GUIDELINES.md](ISSUE_GUIDELINES.md) file.
+    1. The methodologies we use to manage our pull requests in our [PR_GUIDELINES.md](PR_GUIDELINES.md) file.
+1. The `talawa` documentation can be found at our [docs.talawa.io](https://docs.talawa.io) site.
+    1. It is automatically generated from the markdown files stored in our [Talawa-Docs GitHub repository](https://github.com/PalisadoesFoundation/talawa-docs). This makes it easy for you to update our documenation.
 
-## Project setup using docker
+#  Videos
 
-See [Docker Container](Docker_Container/README.md)
+1. Visit our [YouTube Channel playlists](https://www.youtube.com/@PalisadoesOrganization/playlists) for more insights
+   1. The "[Getting Started - Developers](https://www.youtube.com/watch?v=YpBUoHxEeyg&list=PLv50qHwThlJUIzscg9a80a9-HmAlmUdCF&index=1)" videos are extremely helpful for new open source contributors.
diff --git a/config/babel.config.cjs b/config/babel.config.cjs
new file mode 100644
index 0000000000..10cfe1914a
--- /dev/null
+++ b/config/babel.config.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env', // Transforms modern JavaScript
+    '@babel/preset-typescript', // Transforms TypeScript
+    '@babel/preset-react', // Transforms JSX
+  ],
+  plugins: ['babel-plugin-transform-import-meta'],
+};
diff --git a/config/vite.config.ts b/config/vite.config.ts
new file mode 100644
index 0000000000..71ce6c6f47
--- /dev/null
+++ b/config/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgrPlugin from 'vite-plugin-svgr';
+import EnvironmentPlugin from 'vite-plugin-environment';
+
+export default defineConfig({
+  // depending on your application, base can also be "/"
+  build: {
+    outDir: 'build',
+  },
+  base: '',
+  plugins: [
+    react(),
+    viteTsconfigPaths(),
+    EnvironmentPlugin('all'),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+        // ...svgr options (https://react-svgr.com/docs/options/)
+      },
+    }),
+  ],
+  server: {
+    // this ensures that the browser opens upon server start
+    open: true,
+    // this sets a default port to 3000
+    port: 4321,
+  },
+});
diff --git a/dump.rdb b/dump.rdb
new file mode 100644
index 0000000000..6d49ca7f96
Binary files /dev/null and b/dump.rdb differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000..4375f88592
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon_palisadoes.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      referrerpolicy="no-referrer"
+    />
+    <title>Talawa Admin</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/issue-guidelines.md b/issue-guidelines.md
deleted file mode 100644
index 5d626c332d..0000000000
--- a/issue-guidelines.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Issue Report Guidelines
-
-:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
-
-In order to give everyone a chance to submit a issues reports and contribute to the Talawa API project, we have put restrictions in place. This section outlines the guidelines that should be imposed upon issue reports in the Talawa API project.
-
-1. Use the [GitHub open issue search](https://github.com/PalisadoesFoundation/talawa-admin/issues) — check if the issue has already been reported.
-2. If the issue is already reported and not assigned to anyone, if you are interested to work on the issue then ask mentors to assign issign to you in #talawa-api slack channel.
-3. Check if the issue has been fixed — try to reproduce it using the latest master or development branch in the repository.
-4. For newly found unfixed issues or features, start discussing it in #gsoc-newissues channel with mentors. Please do not derail or troll issues. Keep the discussion on topic and respect the opinions of others.
-5. After mentor approval you can create a new issue by following [issue template](https://github.com/PalisadoesFoundation/talawa-admin/blob/master/templates/issue-template.md) available here.
-6. Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the mentors of the merits of this feature. Please provide as much detail and context as possible.
diff --git a/jest-preview.config.ts b/jest-preview.config.ts
new file mode 100644
index 0000000000..0bcc13d4c7
--- /dev/null
+++ b/jest-preview.config.ts
@@ -0,0 +1,5 @@
+export default {
+  moduleNameMapper: {
+    '^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1',
+  },
+};
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..bd17983c75
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,71 @@
+export default {
+  roots: ['<rootDir>/src'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.tsx'],
+  // setupFiles: ['react-app-polyfill/jsdom'],
+  setupFiles: ['whatwg-fetch'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+  ],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': [
+      'babel-jest',
+      { configFile: './config/babel.config.cjs' },
+    ], // Use babel-jest for JavaScript and TypeScript files
+    '^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css', // CSS transformations
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': 'jest-preview/transforms/file', // File transformations
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+  ],
+  modulePaths: [
+    '/Users/prathamesh/Desktop/Open-Source/palisadoes/talawa-admin/src',
+    '<rootDir>/src',
+  ],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+    '^@dicebear/core$': '<rootDir>/scripts/__mocks__/@dicebear/core.ts',
+    '^@dicebear/collection$':
+      '<rootDir>/scripts/__mocks__/@dicebear/collection.ts',
+    '\\.svg\\?react$': '<rootDir>/scripts/__mocks__/fileMock.js',
+    '\\.svg$': '<rootDir>/scripts/__mocks__/fileMock.js', 
+    '^@pdfme/generator$': '<rootDir>/scripts/__mocks__/@pdfme/generator.ts'
+  },
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+  ],
+  // watchPlugins: [
+  //   'jest-watch-typeahead/filename',
+  //   'jest-watch-typeahead/testname',
+  // ],
+  resetMocks: false,
+  coveragePathIgnorePatterns: [
+    'src/state/index.ts',
+    'src/components/plugins/index.ts',
+    'src/components/AddOn/support/services/Render.helper.ts',
+    'src/components/SecuredRoute/SecuredRoute.tsx',
+    'src/reportWebVitals.ts',
+  ],
+  coverageThreshold: {
+    global: {
+      lines: 20,
+      statements: 20,
+    },
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/build/',
+    '<rootDir>/public/',
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..0add51da52
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,19051 @@
+{
+  "name": "talawa-admin",
+  "version": "3.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "talawa-admin",
+      "version": "3.0.0",
+      "dependencies": {
+        "@apollo/client": "^3.11.8",
+        "@apollo/link-error": "^2.0.0-beta.3",
+        "@apollo/react-testing": "^4.0.0",
+        "@dicebear/collection": "^9.2.2",
+        "@dicebear/core": "^9.2.2",
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
+        "@mui/base": "^5.0.0-beta.61",
+        "@mui/icons-material": "^6.1.6",
+        "@mui/material": "^6.1.6",
+        "@mui/private-theming": "^6.1.6",
+        "@mui/system": "^6.1.6",
+        "@mui/x-charts": "^7.22.1",
+        "@mui/x-data-grid": "^7.22.1",
+        "@mui/x-date-pickers": "^7.22.1",
+        "@pdfme/generator": "^5.1.7",
+        "@pdfme/schemas": "^5.1.6",
+        "@reduxjs/toolkit": "^2.3.0",
+        "@vitejs/plugin-react": "^4.3.2",
+        "babel-plugin-transform-import-meta": "^2.2.1",
+        "bootstrap": "^5.3.3",
+        "chart.js": "^4.4.6",
+        "customize-cra": "^1.0.0",
+        "dayjs": "^1.11.13",
+        "dotenv": "^16.4.5",
+        "flag-icons": "^7.2.3",
+        "graphql": "^16.9.0",
+        "graphql-tag": "^2.12.6",
+        "graphql-ws": "^5.16.0",
+        "history": "^5.3.0",
+        "i18next": "^23.15.1",
+        "i18next-browser-languagedetector": "^8.0.0",
+        "i18next-http-backend": "^2.6.1",
+        "inquirer": "^8.0.0",
+        "js-cookie": "^3.0.1",
+        "markdown-toc": "^1.2.0",
+        "prettier": "^3.3.3",
+        "prop-types": "^15.8.1",
+        "react": "^18.3.1",
+        "react-beautiful-dnd": "^13.1.1",
+        "react-bootstrap": "^2.10.5",
+        "react-chartjs-2": "^5.2.0",
+        "react-datepicker": "^7.5.0",
+        "react-dom": "^18.3.1",
+        "react-google-recaptcha": "^3.1.0",
+        "react-i18next": "^15.0.2",
+        "react-icons": "^5.2.1",
+        "react-infinite-scroll-component": "^6.1.0",
+        "react-multi-carousel": "^2.8.5",
+        "react-redux": "^9.1.2",
+        "react-router-dom": "^6.27.0",
+        "react-toastify": "^10.0.6",
+        "react-tooltip": "^5.28.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "sanitize-html": "^2.13.0",
+        "typedoc": "^0.26.10",
+        "typedoc-plugin-markdown": "^4.2.10",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.8",
+        "vite-plugin-environment": "^1.1.3",
+        "vite-tsconfig-paths": "^5.1.2",
+        "web-vitals": "^4.2.4"
+      },
+      "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.25.4",
+        "@babel/preset-react": "^7.25.7",
+        "@babel/preset-typescript": "^7.26.0",
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/inquirer": "^9.0.7",
+        "@types/jest": "^26.0.24",
+        "@types/js-cookie": "^3.0.6",
+        "@types/node": "^22.5.4",
+        "@types/node-fetch": "^2.6.10",
+        "@types/react": "^18.3.3",
+        "@types/react-beautiful-dnd": "^13.1.8",
+        "@types/react-bootstrap": "^0.32.37",
+        "@types/react-chartjs-2": "^2.5.7",
+        "@types/react-datepicker": "^7.0.0",
+        "@types/react-dom": "^18.3.1",
+        "@types/react-google-recaptcha": "^2.1.9",
+        "@types/react-router-dom": "^5.1.8",
+        "@types/sanitize-html": "^2.13.0",
+        "@typescript-eslint/eslint-plugin": "^8.11.0",
+        "@typescript-eslint/parser": "^8.5.0",
+        "babel-jest": "^29.7.0",
+        "cross-env": "^7.0.3",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.30.0",
+        "eslint-plugin-jest": "^28.8.0",
+        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-react": "^7.37.1",
+        "eslint-plugin-tsdoc": "^0.3.0",
+        "husky": "^9.1.6",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^27.4.5",
+        "jest-localstorage-mock": "^2.4.19",
+        "jest-location-mock": "^2.0.0",
+        "jest-preview": "^0.3.1",
+        "lint-staged": "^15.2.8",
+        "postcss-modules": "^6.0.0",
+        "sass": "^1.80.6",
+        "tsx": "^4.19.1",
+        "vite-plugin-svgr": "^4.2.0",
+        "whatwg-fetch": "^3.6.20"
+      },
+      "engines": {
+        "node": ">=20.x"
+      }
+    },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@apollo/client": {
+      "version": "3.11.8",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.11.8.tgz",
+      "integrity": "sha512-CgG1wbtMjsV2pRGe/eYITmV5B8lXUCYljB2gB/6jWTFQcrvirUVvKg7qtFdjYkQSFbIffU1IDyxgeaN81eTjbA==",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.1.1",
+        "@wry/caches": "^1.0.0",
+        "@wry/equality": "^0.5.6",
+        "@wry/trie": "^0.5.0",
+        "graphql-tag": "^2.12.6",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.18.0",
+        "prop-types": "^15.7.2",
+        "rehackt": "^0.1.0",
+        "response-iterator": "^0.2.6",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.10.3",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.2.5"
+      },
+      "peerDependencies": {
+        "graphql": "^15.0.0 || ^16.0.0",
+        "graphql-ws": "^5.5.5",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0",
+        "subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
+      },
+      "peerDependenciesMeta": {
+        "graphql-ws": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "subscriptions-transport-ws": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@apollo/link-error": {
+      "version": "2.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@apollo/link-error/-/link-error-2.0.0-beta.3.tgz",
+      "integrity": "sha512-blNBBi9+4SEfb4Bhn8cYqGFhb0C7MjqLiRwNdUqwGefl1w+G8Ze8pCLHAyPxXLcslirtht9LY0i6ZOpCzSXHCg==",
+      "dependencies": {
+        "@apollo/client": "^3.0.0-beta.23",
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/@apollo/link-error/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@apollo/react-testing": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@apollo/react-testing/-/react-testing-4.0.0.tgz",
+      "integrity": "sha512-P7Z/flUHpRRZYc3FkIqxZH9XD3FuP2Sgks1IXqGq2Zb7qI0aaTfVeRsLYmZNUcFOh2pTHxs0NXgPnH1VfYOpig==",
+      "dependencies": {
+        "@apollo/client": "latest"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
+      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
+      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-module-transforms": "^7.25.2",
+        "@babel/helpers": "^7.25.0",
+        "@babel/parser": "^7.25.0",
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.2",
+        "@babel/types": "^7.25.2",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
+      "dependencies": {
+        "@babel/parser": "^7.26.2",
+        "@babel/types": "^7.26.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
+      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.7.tgz",
+      "integrity": "sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
+      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "dependencies": {
+        "@babel/compat-data": "^7.25.2",
+        "@babel/helper-validator-option": "^7.24.8",
+        "browserslist": "^4.23.1",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz",
+      "integrity": "sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-member-expression-to-functions": "^7.25.9",
+        "@babel/helper-optimise-call-expression": "^7.25.9",
+        "@babel/helper-replace-supers": "^7.25.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+        "@babel/traverse": "^7.25.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz",
+      "integrity": "sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
+      "integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
+      "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
+      "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
+      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.0.tgz",
+      "integrity": "sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-wrap-function": "^7.25.0",
+        "@babel/traverse": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz",
+      "integrity": "sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.25.9",
+        "@babel/helper-optimise-call-expression": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz",
+      "integrity": "sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
+      "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.0.tgz",
+      "integrity": "sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.0",
+        "@babel/types": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
+      "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
+      "dependencies": {
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.3.tgz",
+      "integrity": "sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.0.tgz",
+      "integrity": "sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.0.tgz",
+      "integrity": "sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.7.tgz",
+      "integrity": "sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.0.tgz",
+      "integrity": "sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.6.tgz",
+      "integrity": "sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.6.tgz",
+      "integrity": "sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
+      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
+      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz",
+      "integrity": "sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.4.tgz",
+      "integrity": "sha512-jz8cV2XDDTqjKPwVPJBIjORVEmSGYhdRa8e5k5+vN+uwcjSrSxUaebBRa4ko1jqNF2uxyg8G6XYk30Jv285xzg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-remap-async-to-generator": "^7.25.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/traverse": "^7.25.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz",
+      "integrity": "sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-remap-async-to-generator": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.7.tgz",
+      "integrity": "sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz",
+      "integrity": "sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz",
+      "integrity": "sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.25.4",
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.7.tgz",
+      "integrity": "sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.4.tgz",
+      "integrity": "sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/traverse": "^7.25.4",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.7.tgz",
+      "integrity": "sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/template": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.8.tgz",
+      "integrity": "sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.7.tgz",
+      "integrity": "sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.7.tgz",
+      "integrity": "sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.0.tgz",
+      "integrity": "sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz",
+      "integrity": "sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.7.tgz",
+      "integrity": "sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.7.tgz",
+      "integrity": "sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.7.tgz",
+      "integrity": "sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.25.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.1.tgz",
+      "integrity": "sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.7.tgz",
+      "integrity": "sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.2.tgz",
+      "integrity": "sha512-HQI+HcTbm9ur3Z2DkO+jgESMAMcYLuN/A7NRw9juzxAezN9AvqvUTnpKP/9kkYANz6u7dFlAyOu44ejuGySlfw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.7.tgz",
+      "integrity": "sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.7.tgz",
+      "integrity": "sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.7.tgz",
+      "integrity": "sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz",
+      "integrity": "sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-simple-access": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.0.tgz",
+      "integrity": "sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.7.tgz",
+      "integrity": "sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.7.tgz",
+      "integrity": "sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.7.tgz",
+      "integrity": "sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
+      "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.7.tgz",
+      "integrity": "sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.7.tgz",
+      "integrity": "sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.7.tgz",
+      "integrity": "sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.7.tgz",
+      "integrity": "sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz",
+      "integrity": "sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz",
+      "integrity": "sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.4.tgz",
+      "integrity": "sha512-ao8BG7E2b/URaUQGqN3Tlsg+M3KlHY6rJ1O1gXAEUnZoyNQnvKyH87Kfg+FoxSeyWUB8ISZZsC91C44ZuBFytw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.25.4",
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz",
+      "integrity": "sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.7.tgz",
+      "integrity": "sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.7.tgz",
+      "integrity": "sha512-r0QY7NVU8OnrwE+w2IWiRom0wwsTbjx4+xH2RTd7AVdof3uurXOF+/mXHQDRk+2jIvWgSaCHKMgggfvM4dyUGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.7.tgz",
+      "integrity": "sha512-vILAg5nwGlR9EXE8JIOX4NHXd49lrYbN8hnjffDtoULwpL9hUx/N55nqh2qd0q6FyNDfjl9V79ecKGvFbcSA0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "@babel/helper-module-imports": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/plugin-syntax-jsx": "^7.25.7",
+        "@babel/types": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.7.tgz",
+      "integrity": "sha512-5yd3lH1PWxzW6IZj+p+Y4OLQzz0/LzlOG8vGqonHfVR3euf1vyzyMUJk9Ac+m97BH46mFc/98t9PmYLyvgL3qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/plugin-transform-react-jsx": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
+      "integrity": "sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz",
+      "integrity": "sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.7.tgz",
+      "integrity": "sha512-6YTHJ7yjjgYqGc8S+CbEXhLICODk0Tn92j+vNJo07HFk9t3bjFgAKxPLFhHwF2NjmQVSI1zBRfBWUeVBa2osfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.7",
+        "@babel/helper-plugin-utils": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz",
+      "integrity": "sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "regenerator-transform": "^0.15.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz",
+      "integrity": "sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz",
+      "integrity": "sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.7.tgz",
+      "integrity": "sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.7.tgz",
+      "integrity": "sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz",
+      "integrity": "sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.8.tgz",
+      "integrity": "sha512-adNTUpDCVnmAE58VEqKlAA6ZBlNkMnWD0ZcW76lyNFN3MJniyGFZfNwERVk8Ap56MCnXztmDr19T4mPTztcuaw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz",
+      "integrity": "sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-create-class-features-plugin": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+        "@babel/plugin-syntax-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
+      "integrity": "sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.7.tgz",
+      "integrity": "sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz",
+      "integrity": "sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.4.tgz",
+      "integrity": "sha512-qesBxiWkgN1Q+31xUE9RcMk79eOXXDCv6tfyGMRSs4RGlioSg2WVyQAm07k726cSE56pa+Kb0y9epX2qaXzTvA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.4.tgz",
+      "integrity": "sha512-W9Gyo+KmcxjGahtt3t9fb14vFRWvPpu5pT6GBlovAK6BTBcxgjfVMSQCfJl4oi35ODrxP6xx2Wr8LNST57Mraw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.25.4",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-option": "^7.24.8",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.3",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.0",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.0",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.7",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.0",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.24.7",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.24.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.25.4",
+        "@babel/plugin-transform-async-to-generator": "^7.24.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.24.7",
+        "@babel/plugin-transform-block-scoping": "^7.25.0",
+        "@babel/plugin-transform-class-properties": "^7.25.4",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@babel/plugin-transform-classes": "^7.25.4",
+        "@babel/plugin-transform-computed-properties": "^7.24.7",
+        "@babel/plugin-transform-destructuring": "^7.24.8",
+        "@babel/plugin-transform-dotall-regex": "^7.24.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.24.7",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.0",
+        "@babel/plugin-transform-dynamic-import": "^7.24.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.24.7",
+        "@babel/plugin-transform-export-namespace-from": "^7.24.7",
+        "@babel/plugin-transform-for-of": "^7.24.7",
+        "@babel/plugin-transform-function-name": "^7.25.1",
+        "@babel/plugin-transform-json-strings": "^7.24.7",
+        "@babel/plugin-transform-literals": "^7.25.2",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.24.7",
+        "@babel/plugin-transform-modules-amd": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
+        "@babel/plugin-transform-modules-systemjs": "^7.25.0",
+        "@babel/plugin-transform-modules-umd": "^7.24.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+        "@babel/plugin-transform-new-target": "^7.24.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+        "@babel/plugin-transform-numeric-separator": "^7.24.7",
+        "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+        "@babel/plugin-transform-object-super": "^7.24.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.8",
+        "@babel/plugin-transform-parameters": "^7.24.7",
+        "@babel/plugin-transform-private-methods": "^7.25.4",
+        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+        "@babel/plugin-transform-property-literals": "^7.24.7",
+        "@babel/plugin-transform-regenerator": "^7.24.7",
+        "@babel/plugin-transform-reserved-words": "^7.24.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.24.7",
+        "@babel/plugin-transform-spread": "^7.24.7",
+        "@babel/plugin-transform-sticky-regex": "^7.24.7",
+        "@babel/plugin-transform-template-literals": "^7.24.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.24.8",
+        "@babel/plugin-transform-unicode-escapes": "^7.24.7",
+        "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.25.4",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.10",
+        "babel-plugin-polyfill-corejs3": "^0.10.6",
+        "babel-plugin-polyfill-regenerator": "^0.6.1",
+        "core-js-compat": "^3.37.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/preset-react": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.25.7.tgz",
+      "integrity": "sha512-GjV0/mUEEXpi1U5ZgDprMRRgajGMRW3G5FjMr5KLKD8nT2fTG8+h/klV3+6Dm5739QE+K5+2e91qFKAYI3pmRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.7",
+        "@babel/helper-validator-option": "^7.25.7",
+        "@babel/plugin-transform-react-display-name": "^7.25.7",
+        "@babel/plugin-transform-react-jsx": "^7.25.7",
+        "@babel/plugin-transform-react-jsx-development": "^7.25.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.25.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz",
+      "integrity": "sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "@babel/plugin-syntax-jsx": "^7.25.9",
+        "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+        "@babel/plugin-transform-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "dev": true
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+      "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/generator": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.25.9",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "node_modules/@dicebear/adventurer": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/adventurer/-/adventurer-9.2.2.tgz",
+      "integrity": "sha512-WjBXCP9EXbUul2zC3BS2/R3/4diw1uh/lU4jTEnujK1mhqwIwanFboIMzQsasNNL/xf+m3OHN7MUNJfHZ1fLZA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/adventurer-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/adventurer-neutral/-/adventurer-neutral-9.2.2.tgz",
+      "integrity": "sha512-XVAjhUWjav6luTZ7txz8zVJU/H0DiUy4uU1Z7IO5MDO6kWvum+If1+0OUgEWYZwM+RDI7rt2CgVP910DyZGd1w==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/avataaars": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/avataaars/-/avataaars-9.2.2.tgz",
+      "integrity": "sha512-WqJPQEt0OhBybTpI0TqU1uD1pSk9M2+VPIwvBye/dXo46b+0jHGpftmxjQwk6tX8z0+mRko8pwV5n+cWht1/+w==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/avataaars-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/avataaars-neutral/-/avataaars-neutral-9.2.2.tgz",
+      "integrity": "sha512-pRj16P27dFDBI3LtdiHUDwIXIGndHAbZf5AxaMkn6/+0X93mVQ/btVJDXyW0G96WCsyC88wKAWr6/KJotPxU6Q==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-ears": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-ears/-/big-ears-9.2.2.tgz",
+      "integrity": "sha512-hz4UXdPq4qqZpu0YVvlqM4RDFhk5i0WgPcuwj/MOLlgTjuj63uHUhCQSk6ZiW1DQOs12qpwUBMGWVHxBRBas9g==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-ears-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-ears-neutral/-/big-ears-neutral-9.2.2.tgz",
+      "integrity": "sha512-IPHt8fi3dv9cyfBJBZ4s8T+PhFCrQvOCf91iRHBT3iOLNPdyZpI5GNLmGiV0XMAvIDP5NvA5+f6wdoBLhYhbDA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-smile": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-smile/-/big-smile-9.2.2.tgz",
+      "integrity": "sha512-D4td0GL8or1nTNnXvZqkEXlzyqzGPWs3znOnm1HIohtFTeIwXm72Ob2lNDsaQJSJvXmVlwaQQ0CCTvyCl8Stjw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/bottts": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/bottts/-/bottts-9.2.2.tgz",
+      "integrity": "sha512-wugFkzw8JNWV1nftq/Wp/vmQsLAXDxrMtRK3AoMODuUpSVoP3EHRUfKS043xggOsQFvoj0HZ7kadmhn0AMLf5A==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/bottts-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/bottts-neutral/-/bottts-neutral-9.2.2.tgz",
+      "integrity": "sha512-lSgpqmSJtlnyxVuUgNdBwyzuA0O9xa5zRJtz7x2KyWbicXir5iYdX0MVMCkp1EDvlcxm9rGJsclktugOyakTlw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/collection": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/collection/-/collection-9.2.2.tgz",
+      "integrity": "sha512-vZAmXhPWCK3sf8Fj9/QflFC6XOLroJOT5K1HdnzHaPboEvffUQideGCrrEamnJtlH0iF0ZDXh8gqmwy2fu+yHA==",
+      "dependencies": {
+        "@dicebear/adventurer": "9.2.2",
+        "@dicebear/adventurer-neutral": "9.2.2",
+        "@dicebear/avataaars": "9.2.2",
+        "@dicebear/avataaars-neutral": "9.2.2",
+        "@dicebear/big-ears": "9.2.2",
+        "@dicebear/big-ears-neutral": "9.2.2",
+        "@dicebear/big-smile": "9.2.2",
+        "@dicebear/bottts": "9.2.2",
+        "@dicebear/bottts-neutral": "9.2.2",
+        "@dicebear/croodles": "9.2.2",
+        "@dicebear/croodles-neutral": "9.2.2",
+        "@dicebear/dylan": "9.2.2",
+        "@dicebear/fun-emoji": "9.2.2",
+        "@dicebear/glass": "9.2.2",
+        "@dicebear/icons": "9.2.2",
+        "@dicebear/identicon": "9.2.2",
+        "@dicebear/initials": "9.2.2",
+        "@dicebear/lorelei": "9.2.2",
+        "@dicebear/lorelei-neutral": "9.2.2",
+        "@dicebear/micah": "9.2.2",
+        "@dicebear/miniavs": "9.2.2",
+        "@dicebear/notionists": "9.2.2",
+        "@dicebear/notionists-neutral": "9.2.2",
+        "@dicebear/open-peeps": "9.2.2",
+        "@dicebear/personas": "9.2.2",
+        "@dicebear/pixel-art": "9.2.2",
+        "@dicebear/pixel-art-neutral": "9.2.2",
+        "@dicebear/rings": "9.2.2",
+        "@dicebear/shapes": "9.2.2",
+        "@dicebear/thumbs": "9.2.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/core": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/core/-/core-9.2.2.tgz",
+      "integrity": "sha512-ROhgHG249dPtcXgBHcqPEsDeAPRPRD/9d+tZCjLYyueO+cXDlIA8dUlxpwIVcOuZFvCyW6RJtqo8BhNAi16pIQ==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.11"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@dicebear/croodles": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/croodles/-/croodles-9.2.2.tgz",
+      "integrity": "sha512-OzvAXQWsOgMwL3Sl+lBxCubqSOWoBJpC78c4TKnNTS21rR63TtXUyVdLLzgKVN4YHRnvMgtPf8F/W9YAgIDK4w==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/croodles-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/croodles-neutral/-/croodles-neutral-9.2.2.tgz",
+      "integrity": "sha512-/4mNirxoQ+z1kHXnpDRbJ1JV1ZgXogeTeNp0MaFYxocCgHfJ7ckNM23EE1I7akoo9pqPxrKlaeNzGAjKHdS9vA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/dylan": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/dylan/-/dylan-9.2.2.tgz",
+      "integrity": "sha512-s7e3XliC1YXP+Wykj+j5kwdOWFRXFzYHYk/PB4oZ1F3sJandXiG0HS4chaNu4EoP0yZgKyFMUVTGZx+o6tMaYg==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/fun-emoji": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/fun-emoji/-/fun-emoji-9.2.2.tgz",
+      "integrity": "sha512-M+rYTpB3lfwz18f+/i+ggNwNWUoEj58SJqXJ1wr7Jh/4E5uL+NmJg9JGwYNaVtGbCFrKAjSaILNUWGQSFgMfog==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/glass": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/glass/-/glass-9.2.2.tgz",
+      "integrity": "sha512-imCMxcg+XScHYtQq2MUv1lCzhQSCUglMlPSezKEpXhTxgbgUpmGlSGVkOfmX5EEc7SQowKkF1W/1gNk6CXvBaQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/icons": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/icons/-/icons-9.2.2.tgz",
+      "integrity": "sha512-Tqq2OVCdS7J02DNw58xwlgLGl40sWEckbqXT3qRvIF63FfVq+wQZBGuhuiyAURcSgvsc3h2oQeYFi9iXh7HTOA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/identicon": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/identicon/-/identicon-9.2.2.tgz",
+      "integrity": "sha512-POVKFulIrcuZf3rdAgxYaSm2XUg/TJg3tg9zq9150reEGPpzWR7ijyJ03dzAADPzS3DExfdYVT9+z3JKwwJnTQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/initials": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/initials/-/initials-9.2.2.tgz",
+      "integrity": "sha512-/xNnsEmsstWjmF77htAOuwOMhFlP6eBVXgcgFlTl/CCH/Oc6H7t0vwX1he8KLQBBzjGpvJcvIAn4Wh9rE4D5/A==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/lorelei": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/lorelei/-/lorelei-9.2.2.tgz",
+      "integrity": "sha512-koXqVr/vcWUPo00VP5H6Czsit+uF1tmwd2NK7Q/e34/9Sd1f4QLLxHjjBNm/iNjCI1+UNTOvZ2Qqu0N5eo7Flw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/lorelei-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/lorelei-neutral/-/lorelei-neutral-9.2.2.tgz",
+      "integrity": "sha512-Eys9Os6nt2Xll7Mvu66CfRR2YggTopWcmFcRZ9pPdohS96kT0MsLI2iTcfZXQ51K8hvT3IbwoGc86W8n0cDxAQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/micah": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/micah/-/micah-9.2.2.tgz",
+      "integrity": "sha512-NCajcJV5yw8uMKiACp694w1T/UyYme2CUEzyTzWHgWnQ+drAuCcH8gpAoLWd67viNdQB/MTpNlaelUgTjmI4AQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/miniavs": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/miniavs/-/miniavs-9.2.2.tgz",
+      "integrity": "sha512-vvkWXttdw+KHF3j+9qcUFzK+P0nbNnImGjvN48wwkPIh2h08WWFq0MnoOls4IHwUJC4GXBjWtiyVoCxz6hhtOA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/notionists": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/notionists/-/notionists-9.2.2.tgz",
+      "integrity": "sha512-Z9orRaHoj7Y9Ap4wEu8XOrFACsG1KbbBQUPV1R50uh6AHwsyNrm4cS84ICoGLvxgLNHHOae3YCjd8aMu2z19zg==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/notionists-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/notionists-neutral/-/notionists-neutral-9.2.2.tgz",
+      "integrity": "sha512-AhOzk+lz6kB4uxGun8AJhV+W1nttnMlxmxd+5KbQ/txCIziYIaeD3il44wsAGegEpGFvAZyMYtR/jjfHcem3TA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/open-peeps": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/open-peeps/-/open-peeps-9.2.2.tgz",
+      "integrity": "sha512-6PeQDHYyjvKrGSl/gP+RE5dSYAQGKpcGnM65HorgyTIugZK7STo0W4hvEycedupZ3MCCEH8x/XyiChKM2sHXog==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/personas": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/personas/-/personas-9.2.2.tgz",
+      "integrity": "sha512-705+ObNLC0w1fcgE/Utav+8bqO+Esu53TXegpX5j7trGEoIMf2bThqJGHuhknZ3+T2az3Wr89cGyOGlI0KLzLA==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/pixel-art": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/pixel-art/-/pixel-art-9.2.2.tgz",
+      "integrity": "sha512-BvbFdrpzQl04+Y9UsWP63YGug+ENGC7GMG88qbEFWxb/IqRavGa4H3D0T4Zl2PSLiw7f2Ctv98bsCQZ1PtCznQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/pixel-art-neutral": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/pixel-art-neutral/-/pixel-art-neutral-9.2.2.tgz",
+      "integrity": "sha512-CdUY77H6Aj7dKLW3hdkv7tu0XQJArUjaWoXihQxlhl3oVYplWaoyu9omYy5pl8HTqs8YgVTGljjMXYoFuK0JUw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/rings": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/rings/-/rings-9.2.2.tgz",
+      "integrity": "sha512-eD1J1k364Arny+UlvGrk12HP/XGG6WxPSm4BarFqdJGSV45XOZlwqoi7FlcMr9r9yvE/nGL8OizbwMYusEEdjw==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/shapes": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/shapes/-/shapes-9.2.2.tgz",
+      "integrity": "sha512-e741NNWBa7fg0BjomxXa0fFPME2XCIR0FA+VHdq9AD2taTGHEPsg5x1QJhCRdK6ww85yeu3V3ucpZXdSrHVw5Q==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@dicebear/thumbs": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@dicebear/thumbs/-/thumbs-9.2.2.tgz",
+      "integrity": "sha512-FkPLDNu7n5kThLSk7lR/0cz/NkUqgGdZGfLZv6fLkGNGtv6W+e2vZaO7HCXVwIgJ+II+kImN41zVIZ6Jlll7pQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^9.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
+      "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
+      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0",
+      "peer": true
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
+      "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz",
+      "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.25",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.25.tgz",
+      "integrity": "sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
+    "node_modules/@graphql-typed-document-node/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jedmao/location": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@jedmao/location/-/location-3.0.0.tgz",
+      "integrity": "sha512-p7mzNlgJbCioUYLUEKds3cQG4CHONVFJNYqMe6ocEtENCL/jYmMo1Q3ApwsMmU+L0ZkaDJEyv4HokaByLoPwlQ==",
+      "dev": true
+    },
+    "node_modules/@jest/console": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
+      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/console/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/core": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
+      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/reporters": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^27.5.1",
+        "jest-config": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-resolve-dependencies": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "jest-watcher": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/core/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
+      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
+      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@sinonjs/fake-timers": "^8.0.1",
+        "@types/node": "*",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/globals": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
+      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "expect": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/reporters": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
+      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
+      "dev": true,
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.2",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^5.1.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-haste-map": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.0",
+        "string-length": "^4.0.1",
+        "terminal-link": "^2.0.0",
+        "v8-to-istanbul": "^8.1.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@jest/source-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
+      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9",
+        "source-map": "^0.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/source-map/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@jest/test-result": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
+      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
+      "dev": true,
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/test-sequencer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
+      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/test-result": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-runtime": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/transform": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
+      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.1.0",
+        "@jest/types": "^27.5.1",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^1.4.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "source-map": "^0.6.1",
+        "write-file-atomic": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^16.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@jest/types/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
+    },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.0.tgz",
+      "integrity": "sha512-HZpPoABogPvjeJOdzCOSJsXeL/SMCBgBZMVC3X3d7YYp2gf31MfxhUoYUNwf1ERPJOnQc0wkFn9trqI6ZEdZuA==",
+      "dev": true
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.17.0.tgz",
+      "integrity": "sha512-v/EYRXnCAIHxOHW+Plb6OWuUoMotxTN0GLatnpOb1xq0KuTNw/WI3pamJx/UbsoJP5k9MCw1QxvvhPcF9pH3Zg==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "0.15.0",
+        "ajv": "~8.12.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.2"
+      }
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.61",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.61.tgz",
+      "integrity": "sha512-YaMOTXS3ecDNGsPKa6UdlJ8loFLvcL9+VbpCK3hfk71OaNauZRp4Yf7KeXDYr7Ms3M/XBD3SaiR6JMr6vYtfDg==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@floating-ui/react-dom": "^2.1.1",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
+      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
+      "integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.1.6",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
+      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.1.6",
+        "@mui/system": "^6.1.6",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^6.1.6",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
+      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/utils": "^6.1.6",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
+      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@emotion/cache": "^11.13.1",
+        "@emotion/serialize": "^1.3.2",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
+      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.1.6",
+        "@mui/styled-engine": "^6.1.6",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.19",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
+      "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
+      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/types": "^7.2.19",
+        "@types/prop-types": "^15.7.13",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-charts": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.22.1.tgz",
+      "integrity": "sha512-zgr8CN4yLen5puqaX7Haj5+AoVG7E13HHsIiDoEAuQvuFDF0gKTxTTdLSKXqhd1qJUIIzJaztZtrr3YCVrENqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^5.16.6 || ^6.0.0",
+        "@mui/x-charts-vendor": "7.20.0",
+        "@mui/x-internals": "7.21.0",
+        "@react-spring/rafz": "^9.7.5",
+        "@react-spring/web": "^9.7.5",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-charts-vendor": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-7.20.0.tgz",
+      "integrity": "sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@types/d3-color": "^3.1.3",
+        "@types/d3-delaunay": "^6.0.4",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-shape": "^3.1.6",
+        "@types/d3-time": "^3.0.3",
+        "d3-color": "^3.1.0",
+        "d3-delaunay": "^6.0.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.2.0",
+        "d3-time": "^3.1.0",
+        "delaunator": "^5.0.1",
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/@mui/x-data-grid": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.22.1.tgz",
+      "integrity": "sha512-YHF96MEv7ACG/VuiycZjEAPH7cZLNuV2+bi/MyR1t/e6E6LTolYFykvjSFq+Imz1mYbW4+9mEvrHZsIKL5KKIQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^5.16.6 || ^6.0.0",
+        "@mui/x-internals": "7.21.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "reselect": "^5.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.1.tgz",
+      "integrity": "sha512-VBgicE+7PvJrdHSL6HyieHT6a/0dENH8RaMIM2VwUFrGoZzvik50WNwY5U+Hip1BwZLIEvlqtNRQIIj6kgBR6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^5.16.6 || ^6.0.0",
+        "@mui/x-internals": "7.21.0",
+        "@types/react-transition-group": "^4.4.11",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-internals": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz",
+      "integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "@mui/utils": "^5.16.6 || ^6.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
+      "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.0",
+        "@parcel/watcher-darwin-arm64": "2.5.0",
+        "@parcel/watcher-darwin-x64": "2.5.0",
+        "@parcel/watcher-freebsd-x64": "2.5.0",
+        "@parcel/watcher-linux-arm-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm-musl": "2.5.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm64-musl": "2.5.0",
+        "@parcel/watcher-linux-x64-glibc": "2.5.0",
+        "@parcel/watcher-linux-x64-musl": "2.5.0",
+        "@parcel/watcher-win32-arm64": "2.5.0",
+        "@parcel/watcher-win32-ia32": "2.5.0",
+        "@parcel/watcher-win32-x64": "2.5.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
+      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
+      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
+      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
+      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
+      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
+      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
+      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
+      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
+      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
+      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
+      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
+      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
+      "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@pdf-lib/standard-fonts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+      "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.6"
+      }
+    },
+    "node_modules/@pdf-lib/upng": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+      "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.10"
+      }
+    },
+    "node_modules/@pdfme/common": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@pdfme/common/-/common-1.2.6.tgz",
+      "integrity": "sha512-ROmQ/iMUdmFS2QXD/kKDdcU5T6H3azDs2b1hE/OXs8531BPZ9ABbu9+1NRZQoNK4U/zP2F+Osb/B8ckr9lAmGg==",
+      "peer": true,
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "fontkit": "^2.0.2",
+        "zod": "^3.20.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pdfme/generator": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/@pdfme/generator/-/generator-5.1.7.tgz",
+      "integrity": "sha512-dVbVWzuiTL6c0HcGmKiuTp77ClZIQOneKXc6ysYpY518kbR6YlxPstdqigFJfFL02P09kIStLrugrS18B3aVuA==",
+      "dependencies": {
+        "@pdfme/pdf-lib": "^1.18.3",
+        "atob": "^2.1.2",
+        "fontkit": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@pdfme/common": "latest",
+        "@pdfme/schemas": "latest"
+      }
+    },
+    "node_modules/@pdfme/pdf-lib": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/@pdfme/pdf-lib/-/pdf-lib-1.18.3.tgz",
+      "integrity": "sha512-Zy4lRrxhDo7pbexNCvn+nzO5gLRc1XOXQyFOHC1FJoaHzrZ3GDd4OZwR5AaGIlCwV7ocPP2+iiLFA5wQcx3s9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@pdf-lib/standard-fonts": "^1.0.0",
+        "@pdf-lib/upng": "^1.0.1",
+        "color": "^4.2.3",
+        "node-html-better-parser": "^1.4.0",
+        "pako": "^1.0.11"
+      }
+    },
+    "node_modules/@pdfme/schemas": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/@pdfme/schemas/-/schemas-5.1.6.tgz",
+      "integrity": "sha512-QAsWZEfe8tB3xmaj35xsGf5kSjFzMJc4F90kBbudEq8/Pkcx+0yznD7+zQK0OEj7uLD3frmXyR1OVX6dBWHBpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@pdfme/pdf-lib": "^1.18.3",
+        "air-datepicker": "^3.5.3",
+        "bwip-js": "^4.1.1",
+        "date-fns": "^4.1.0",
+        "fast-xml-parser": "^4.3.2",
+        "fontkit": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@pdfme/common": "latest"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr/node_modules/@swc/helpers": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+      "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
+      "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+      "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz",
+      "integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz",
+      "integrity": "sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz",
+      "integrity": "sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz",
+      "integrity": "sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz",
+      "integrity": "sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz",
+      "integrity": "sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz",
+      "integrity": "sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz",
+      "integrity": "sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz",
+      "integrity": "sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz",
+      "integrity": "sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz",
+      "integrity": "sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz",
+      "integrity": "sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz",
+      "integrity": "sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz",
+      "integrity": "sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz",
+      "integrity": "sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz",
+      "integrity": "sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true
+    },
+    "node_modules/@shikijs/core": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.17.6.tgz",
+      "integrity": "sha512-9ztslig6/YmCg/XwESAXbKjAjOhaq6HVced9NY6qcbDz1X5g/S90Wco2vMjBNX/6V71ASkzri76JewSGPa7kiQ==",
+      "dependencies": {
+        "@shikijs/engine-javascript": "1.17.6",
+        "@shikijs/engine-oniguruma": "1.17.6",
+        "@shikijs/types": "1.17.6",
+        "@shikijs/vscode-textmate": "^9.2.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.2"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.17.6.tgz",
+      "integrity": "sha512-5EEZj8tVcierNxm4V0UMS2PVoflb0UJPalWWV8l9rRg+oOfnr5VivqBJbkyq5grltVPvByIXvVbY8GSM/356jQ==",
+      "dependencies": {
+        "@shikijs/types": "1.17.6",
+        "oniguruma-to-js": "0.4.3"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.17.6.tgz",
+      "integrity": "sha512-NLfWDMXFYe0nDHFbEoyZdz89aIIey3bTfF3zLYSUNTXks5s4uinZVmuPOFf1HfTeGqIn8uErJSBc3VnpJO7Alw==",
+      "dependencies": {
+        "@shikijs/types": "1.17.6",
+        "@shikijs/vscode-textmate": "^9.2.2"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.17.6.tgz",
+      "integrity": "sha512-ndTFa2TJi2w51ddKQDn3Jy8f6K4E5Q2x3dA3Hmsd3+YmxDQ10UWHjcw7VbVbKzv3VcUvYPLy+z9neqytSzUMUg==",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^9.2.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.2.2.tgz",
+      "integrity": "sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg=="
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
+      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
+      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
+      "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
+      "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
+      "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
+      "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
+      "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
+      "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.5.1.tgz",
+      "integrity": "sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.5.1",
+        "@svgr/babel-plugin-remove-jsx-attribute": "*",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "*",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.5.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.5.1",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.5.1",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.5.1",
+        "@svgr/babel-plugin-transform-svg-component": "^6.5.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@svgr/babel-preset": "^6.5.1",
+        "@svgr/plugin-jsx": "^6.5.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz",
+      "integrity": "sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.0",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz",
+      "integrity": "sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@svgr/babel-preset": "^6.5.1",
+        "@svgr/hast-util-to-babel-ast": "^6.5.1",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "^6.0.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "dev": true,
+      "dependencies": {
+        "defer-to-connect": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
+      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz",
+      "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "12.8.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
+      "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+      "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+      "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.1.tgz",
+      "integrity": "sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
+    "node_modules/@types/graceful-fs": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
+      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true
+    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
+    "node_modules/@types/inquirer": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/@types/inquirer/-/inquirer-9.0.7.tgz",
+      "integrity": "sha512-Q0zyBupO6NxGRZut/JdmqYKOnN95Eg5V8Csg3PGKkP+FnvsUZx1jAyK7fztIszxxMuoBA6E3KXWvdZVXIpx60g==",
+      "dev": true,
+      "dependencies": {
+        "@types/through": "*",
+        "rxjs": "^7.2.0"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "dev": true
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "26.0.24",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
+      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "dev": true,
+      "dependencies": {
+        "jest-diff": "^26.0.0",
+        "pretty-format": "^26.0.0"
+      }
+    },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.5.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
+      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
+      "integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/@types/node-fetch/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
+    "node_modules/@types/prettier": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
+      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
+      "dev": true
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.13",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-beautiful-dnd": {
+      "version": "13.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz",
+      "integrity": "sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-bootstrap": {
+      "version": "0.32.37",
+      "resolved": "https://registry.npmjs.org/@types/react-bootstrap/-/react-bootstrap-0.32.37.tgz",
+      "integrity": "sha512-CVHj++uxsj1pRnM3RQ/NAXcWj+JwJZ3MqQ28sS1OQUD1sI2gRlbeAjRT+ak2nuwL+CY+gtnIsMaIDq0RNfN0PA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-chartjs-2": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/@types/react-chartjs-2/-/react-chartjs-2-2.5.7.tgz",
+      "integrity": "sha512-waqYqiNULIVUqaKO7MGUpFmWrVtH7gVPOzqwV4y4zgUyu/JiDwC005PpveO442HKnby9kLgp3t1SB2sld+ACLw==",
+      "deprecated": "This is a stub types definition for react-chartjs-2 (https://github.com/gor181/react-chartjs-2). react-chartjs-2 provides its own type definitions, so you don't need @types/react-chartjs-2 installed!",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "react-chartjs-2": "*"
+      }
+    },
+    "node_modules/@types/react-datepicker": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-7.0.0.tgz",
+      "integrity": "sha512-4tWwOUq589tozyQPBVEqGNng5DaZkomx5IVNuur868yYdgjH6RaL373/HKiVt1IDoNNXYiTGspm1F7kjrarM8Q==",
+      "deprecated": "This is a stub types definition. react-datepicker provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "react-datepicker": "*"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-google-recaptcha": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.9.tgz",
+      "integrity": "sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.34",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
+      "integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
+    "node_modules/@types/react-redux/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/sanitize-html": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@types/sanitize-html/-/sanitize-html-2.13.0.tgz",
+      "integrity": "sha512-X31WxbvW9TjIhZZNyNBZ/p5ax4ti7qsNDBDEnH4zAgmEh35YnFD1UiS6z9Cd34kKm0LslFW0KPmTQzu/oGtsqQ==",
+      "dev": true,
+      "dependencies": {
+        "htmlparser2": "^8.0.0"
+      }
+    },
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
+      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "dev": true
+    },
+    "node_modules/@types/through": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@types/through/-/through-0.0.33.tgz",
+      "integrity": "sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
+    "node_modules/@types/yargs": {
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
+      "integrity": "sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "dev": true
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz",
+      "integrity": "sha512-KhGn2LjW1PJT2A/GfDpiyOfS4a8xHQv2myUagTM5+zsormOmBlYsnQ6pobJ8XxJmh6hnHwa2Mbe3fPrDJoDhbA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.11.0",
+        "@typescript-eslint/type-utils": "8.11.0",
+        "@typescript-eslint/utils": "8.11.0",
+        "@typescript-eslint/visitor-keys": "8.11.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.5.0.tgz",
+      "integrity": "sha512-gF77eNv0Xz2UJg/NbpWJ0kqAm35UMsvZf1GHj8D9MRFTj/V3tAciIWXfmPLsAAF/vUlpWPvUDyH1jjsr0cMVWw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.5.0",
+        "@typescript-eslint/types": "8.5.0",
+        "@typescript-eslint/typescript-estree": "8.5.0",
+        "@typescript-eslint/visitor-keys": "8.5.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.5.0.tgz",
+      "integrity": "sha512-06JOQ9Qgj33yvBEx6tpC8ecP9o860rsR22hWMEd12WcTRrfaFgHr2RB/CA/B+7BMhHkXT4chg2MyboGdFGawYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.5.0",
+        "@typescript-eslint/visitor-keys": "8.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.5.0.tgz",
+      "integrity": "sha512-qjkormnQS5wF9pjSi6q60bKUHH44j2APxfh9TQRXK8wbYVeDYYdYJGIROL87LGZZ2gz3Rbmjc736qyL8deVtdw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.5.0.tgz",
+      "integrity": "sha512-vEG2Sf9P8BPQ+d0pxdfndw3xIXaoSjliG0/Ejk7UggByZPKXmJmw3GW5jV2gHNQNawBUyfahoSiCFVov0Ruf7Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "8.5.0",
+        "@typescript-eslint/visitor-keys": "8.5.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.5.0.tgz",
+      "integrity": "sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.5.0",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
+      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.11.0",
+        "@typescript-eslint/visitor-keys": "8.11.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.11.0.tgz",
+      "integrity": "sha512-ItiMfJS6pQU0NIKAaybBKkuVzo6IdnAhPFZA/2Mba/uBjuPQPet/8+zh5GtLHwmuFRShZx+8lhIs7/QeDHflOg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.11.0",
+        "@typescript-eslint/utils": "8.11.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
+      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
+      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.11.0",
+        "@typescript-eslint/visitor-keys": "8.11.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.11.0.tgz",
+      "integrity": "sha512-CYiX6WZcbXNJV7UNB4PLDIBtSdRmRI/nb0FMyqHPTQD1rMjA0foPLaPUV39C/MxkTd/QKSeX+Gb34PPsDVC35g==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.11.0",
+        "@typescript-eslint/types": "8.11.0",
+        "@typescript-eslint/typescript-estree": "8.11.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
+      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.11.0",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "license": "ISC"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.2.tgz",
+      "integrity": "sha512-hieu+o05v4glEBucTcKMK3dlES0OeJlD9YVOAPraVMOInBCwzumaIFiUjr4bHK7NPgnAHgiskUoceKercrN8vg==",
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react/node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@wry/caches": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
+      "integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/context": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
+      "integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/equality": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
+      "integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/trie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
+      "integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+      "dev": true
+    },
+    "node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "devOptional": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
+      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/air-datepicker": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/air-datepicker/-/air-datepicker-3.5.3.tgz",
+      "integrity": "sha512-Elf9gLhv/jidN1+TfeRJYMQRUfYx5apXw2dY5DuAMPRnNtQ4Iw9fTTJK772osmXSUB9xQ2Y8Q1Pt6pgBOQLPQw==",
+      "license": "MIT"
+    },
+    "node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-align": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.1.0"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-red": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz",
+      "integrity": "sha512-ewaIr5y+9CUTGFwZfpECUbFlGcC0GCw1oqR9RI6h1gQCd9Aj2GxSckCnPsVJnmfMZbwFYE+leZGASgkWl06Jow==",
+      "dependencies": {
+        "ansi-wrap": "0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
+    },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
+    "node_modules/autolinker": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-0.28.1.tgz",
+      "integrity": "sha512-zQAFO1Dlsn69eXaO6+7YZc+v84aquQKbwpzCE3L0stj56ERn9hutFxPopViLjo9G+rWwjozRhgS5KJ25Xy19cQ==",
+      "dependencies": {
+        "gulp-header": "^1.7.1"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/babel-jest": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
+      "integrity": "sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/transform": "^29.7.0",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^29.6.3",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/@jest/transform": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
+      "integrity": "sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.11.6",
+        "@jest/types": "^29.6.3",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^2.0.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-util": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "write-file-atomic": "^4.0.2"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/@jest/types": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
+    "node_modules/babel-jest/node_modules/@types/yargs": {
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/babel-jest/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/babel-jest/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "node_modules/babel-jest/node_modules/jest-haste-map": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz",
+      "integrity": "sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/graceful-fs": "^4.1.3",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^29.6.3",
+        "jest-util": "^29.7.0",
+        "jest-worker": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      }
+    },
+    "node_modules/babel-jest/node_modules/jest-regex-util": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
+      "integrity": "sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/jest-util": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/jest-worker": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
+      "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "jest-util": "^29.7.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/babel-jest/node_modules/write-file-atomic": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
+      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.7"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz",
+      "integrity": "sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.1.14",
+        "@types/babel__traverse": "^7.0.6"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
+      "integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz",
+      "integrity": "sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-transform-import-meta": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-import-meta/-/babel-plugin-transform-import-meta-2.2.1.tgz",
+      "integrity": "sha512-AxNh27Pcg8Kt112RGa3Vod2QS2YXKKJ6+nSvRtv7qQTJAdx0MZa4UHZ4lnxHUWA2MNbLuZQv5FVab4P1CoLOWw==",
+      "dependencies": {
+        "@babel/template": "^7.4.4",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.10.0"
+      }
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-jest": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz",
+      "integrity": "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==",
+      "dev": true,
+      "dependencies": {
+        "babel-plugin-jest-hoist": "^29.6.3",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/boxen": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
+      "integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-align": "^3.0.0",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.0",
+        "cli-boxes": "^2.2.1",
+        "string-width": "^4.2.2",
+        "type-fest": "^0.20.2",
+        "widest-line": "^3.1.0",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "devOptional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+      "dev": true
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dev": true,
+      "dependencies": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "node_modules/bwip-js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/bwip-js/-/bwip-js-4.5.1.tgz",
+      "integrity": "sha512-83yQCKiIftz5YonnsTh6wIkFoHHWl+B/XaGWD1UdRw7aB6XP9JtyYP9n8sRy3m5rzL+Ch/RUPnu28UW0RrPZUA==",
+      "license": "MIT",
+      "bin": {
+        "bwip-js": "bin/bwip-js.js"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "dev": true,
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^3.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^4.1.0",
+        "responselike": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/normalize-url": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001660",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz",
+      "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+    },
+    "node_modules/chart.js": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.6.tgz",
+      "integrity": "sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
+      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cjs-module-lexer": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
+      "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
+      "dev": true
+    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
+    "node_modules/cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cli-width": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "dev": true,
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "dev": true,
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/coffee-script": {
+      "version": "1.12.7",
+      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.12.7.tgz",
+      "integrity": "sha512-fLeEhqwymYat/MpTPUjSKHVYYl0ec2mOyALEMLmzr5i1isuG+6jfI2j2d5oBO3VIzgUXgBVIcOT9uH1TFxBckw==",
+      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
+      "bin": {
+        "cake": "bin/cake",
+        "coffee": "bin/coffee"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
+      "dev": true
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/concat-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+      "dependencies": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/concat-with-sourcemaps/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "dev": true,
+      "dependencies": {
+        "dot-prop": "^5.2.0",
+        "graceful-fs": "^4.1.2",
+        "make-dir": "^3.0.0",
+        "unique-string": "^2.0.0",
+        "write-file-atomic": "^3.0.0",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/connect/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/connect/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
+      "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.23.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+      "dev": true
+    },
+    "node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "dev": true
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/customize-cra": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
+      "integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
+      "dependencies": {
+        "lodash.flow": "^3.5.0"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
+    "node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "dev": true
+    },
+    "node_modules/decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==",
+      "dev": true,
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+      "dev": true
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defaults/node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
+      "dev": true
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q=="
+    },
+    "node_modules/diacritics-map": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/diacritics-map/-/diacritics-map-0.1.0.tgz",
+      "integrity": "sha512-3omnDTYrGigU0i4cJjvaKwD52B8aoqyX/NEIkukFFkogBemsIbhSa1O414fpTp5nuszJG6lvQ5vBvDVNCbSsaQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/diff-sequences": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domexception": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
+      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+      "dev": true,
+      "dependencies": {
+        "webidl-conversions": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/domexception/node_modules/webidl-conversions": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dev": true,
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/duplexer3": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.5.tgz",
+      "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==",
+      "dev": true
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.19",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.19.tgz",
+      "integrity": "sha512-kpLJJi3zxTR1U828P+LIUDZ5ohixyo68/IcYOHLqnbTPr/wdgn4i1ECvmALN9E16JPA6cvCG5UG79gVwVdEK5w=="
+    },
+    "node_modules/emittery": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
+      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.3",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.13",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
+      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "globalthis": "^1.0.3",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "iterator.prototype": "^1.1.2",
+        "safe-array-concat": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/esbuild/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
+      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.30.0.tgz",
+      "integrity": "sha512-/mHNE9jINJfiD2EKkg1BKyPyUk4zdnT54YgbOgfjSakWT5oyX/qQLVNTkehyfpcMxZXMy1zyonZ2v7hZTX43Yw==",
+      "dev": true,
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlastindex": "^1.2.5",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.9.0",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.15.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.0",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jest": {
+      "version": "28.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.8.0.tgz",
+      "integrity": "sha512-Tubj1hooFxCl52G4qQu0edzV/+EZzPUeN8p2NnW5uu4fbDs+Yo7+qDVDc4/oG3FbCqEBmu/OC3LSsyiU22oghw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/utils": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "engines": {
+        "node": "^16.10.0 || ^18.12.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
+        "jest": "*"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.1.tgz",
+      "integrity": "sha512-xwTnwDqzbDRA8uJ7BMxPs/EXRB3i8ZfnOIp8BsxEQkT0nHPp+WWceqGgo6rKb9ctNi8GJLDT4Go5HAWELa/WMg==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.0.19",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.0",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-tsdoc": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.3.0.tgz",
+      "integrity": "sha512-0MuFdBrrJVBjT/gyhkP2BqpD0np1NxNLfQ38xXDlSs/KVVpKI2A6vN7jx2Rve/CyUsvOsMGwp9KKrinv7q9g3A==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "0.15.0",
+        "@microsoft/tsdoc-config": "0.17.0"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/eslint/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha512-AFASGfIlnIbkKPQwX1yHaDjFvh/1gyKJODme52V6IORh69uEYgZp0o9C+qsIGNVEiuuhQU0CSSl++Rlegg1qvA==",
+      "dependencies": {
+        "fill-range": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/fill-range": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
+      "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
+      "dependencies": {
+        "is-number": "^2.1.0",
+        "isobject": "^2.0.0",
+        "randomatic": "^3.0.0",
+        "repeat-element": "^1.1.2",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/expand-range/node_modules/isobject": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
+      "dependencies": {
+        "isarray": "1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-range/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+      "dev": true,
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expect": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
+      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dependencies": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/external-editor/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz",
+      "integrity": "sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/naturalintelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "strnum": "^1.0.5"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fb-watchman": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+      "dev": true,
+      "dependencies": {
+        "bser": "2.1.1"
+      }
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/figures/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "devOptional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/find-node-modules": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/find-node-modules/-/find-node-modules-2.1.3.tgz",
+      "integrity": "sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==",
+      "dev": true,
+      "dependencies": {
+        "findup-sync": "^4.0.0",
+        "merge": "^2.1.1"
+      }
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/findup-sync": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
+      "dev": true,
+      "dependencies": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^4.0.2",
+        "resolve-dir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/flag-icons": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz",
+      "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg=="
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/fontkit": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.2.tgz",
+      "integrity": "sha512-jc4k5Yr8iov8QfS6u8w2CnHWVmbOGtdBtOXMze5Y+QD966Rx6PEVWXSEGwXlsDlKtu1G12cJjcsybnqhSk/+LA==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.2",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "node_modules/for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generic-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz",
+      "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^3.2.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
+      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz",
+      "integrity": "sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==",
+      "dev": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "dev": true,
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/global-dirs/node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "dev": true,
+      "dependencies": {
+        "@sindresorhus/is": "^0.14.0",
+        "@szmarczak/http-timer": "^1.1.2",
+        "cacheable-request": "^6.0.0",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^4.1.0",
+        "lowercase-keys": "^1.0.1",
+        "mimic-response": "^1.0.1",
+        "p-cancelable": "^1.0.0",
+        "to-readable-stream": "^1.0.0",
+        "url-parse-lax": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/got/node_modules/get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
+    "node_modules/graphql": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
+      "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
+    "node_modules/graphql-tag": {
+      "version": "2.12.6",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
+      "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/graphql-ws": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.16.0.tgz",
+      "integrity": "sha512-Ju2RCU2dQMgSKtArPbEtsK5gNLnsQyTNIo/T7cZNp96niC1x0KdJNZV0TIoilceBPQwfb5itrGl8pkFeOUMl4A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": ">=0.11 <=16"
+      }
+    },
+    "node_modules/gray-matter": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-2.1.1.tgz",
+      "integrity": "sha512-vbmvP1Fe/fxuT2QuLVcqb2BfK7upGhhbLIt9/owWEvPYrZZEkelLcq2HqzxosV+PQ67dUFLaAeNpH7C4hhICAA==",
+      "dependencies": {
+        "ansi-red": "^0.1.1",
+        "coffee-script": "^1.12.4",
+        "extend-shallow": "^2.0.1",
+        "js-yaml": "^3.8.1",
+        "toml": "^2.3.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gulp-header": {
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/gulp-header/-/gulp-header-1.8.12.tgz",
+      "integrity": "sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==",
+      "deprecated": "Removed event-stream from gulp-header",
+      "dependencies": {
+        "concat-with-sourcemaps": "*",
+        "lodash.template": "^4.4.0",
+        "through2": "^2.0.0"
+      }
+    },
+    "node_modules/harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+      "dev": true
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.2.tgz",
+      "integrity": "sha512-RP5wNpj5nm1Z8cloDv4Sl4RS8jH5HYa0v93YB6Wb4poEzgMo/dAAL0KcT4974dCjcNG5pkLqTImeFHHCwwfY3g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "dependencies": {
+        "parse-passwd": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-encoding": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/html-entities": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
+      "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ]
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
+      "dev": true
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "dev": true,
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.6.tgz",
+      "integrity": "sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.15.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.15.1.tgz",
+      "integrity": "sha512-wB4abZ3uK7EWodYisHl/asf8UYEhrI/vj/8aoSsrj/ZDxj4/UXPOa1KvFt1Fq5hkUHquNqwFlDprmjZ8iySgYA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.1.tgz",
+      "integrity": "sha512-rCilMAnlEQNeKOZY1+x8wLM5IpYOj10guGvEpeC59tNjj6MMreLIjIW8D1RclhD3ifLwn6d/Y9HEM1RUE6DSog==",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
+      "dev": true,
+      "dependencies": {
+        "harmony-reflect": "^1.4.6"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "devOptional": true
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+      "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dev": true,
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "node_modules/inquirer": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
+      "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==",
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.1",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.21",
+        "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
+        "run-async": "^2.4.0",
+        "rxjs": "^7.5.5",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6",
+        "wrap-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/inquirer/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/inquirer/node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inquirer/node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inquirer/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "node_modules/is-async-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
+      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "dev": true,
+      "dependencies": {
+        "ci-info": "^2.0.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-ci/node_modules/ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "dev": true
+    },
+    "node_modules/is-core-module": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
+      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "devOptional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dev": true,
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-npm": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz",
+      "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "dev": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
+      "dev": true
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "dev": true,
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+      "dev": true,
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
+      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "reflect.getprototypeof": "^1.0.4",
+        "set-function-name": "^2.0.1"
+      }
+    },
+    "node_modules/jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/core": "^27.5.1",
+        "import-local": "^3.0.2",
+        "jest-cli": "^27.5.1"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-changed-files": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
+      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "execa": "^5.0.0",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-circus": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
+      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "dedent": "^0.7.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-circus/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-circus/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-circus/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-circus/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-cli": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
+      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/core": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "import-local": "^3.0.2",
+        "jest-config": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "prompts": "^2.0.1",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-cli/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-config": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
+      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.8.0",
+        "@jest/test-sequencer": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "babel-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.1",
+        "graceful-fs": "^4.2.9",
+        "jest-circus": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-jasmine2": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runner": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "parse-json": "^5.2.0",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config/node_modules/babel-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
+      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/babel-plugin-jest-hoist": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
+      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.0.0",
+        "@types/babel__traverse": "^7.0.6"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/babel-preset-jest": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
+      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
+      "dev": true,
+      "dependencies": {
+        "babel-plugin-jest-hoist": "^27.5.1",
+        "babel-preset-current-node-syntax": "^1.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-config/node_modules/jest-environment-node": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
+      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-config/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-diff": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
+      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/jest-diff/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-diff/node_modules/jest-get-type": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/jest-docblock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
+      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
+      "dev": true,
+      "dependencies": {
+        "detect-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-docblock/node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-each": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
+      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-each/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-each/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-each/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-each/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-environment-jsdom": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
+      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jsdom": "^16.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
+      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
+      "dev": true,
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-haste-map": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
+      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/graceful-fs": "^4.1.2",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^27.5.1",
+        "jest-serializer": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.7"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
+      }
+    },
+    "node_modules/jest-jasmine2": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
+      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "expect": "^27.5.1",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "pretty-format": "^27.5.1",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-jasmine2/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-leak-detector": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
+      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
+      "dev": true,
+      "dependencies": {
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-leak-detector/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-leak-detector/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-leak-detector/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-localstorage-mock": {
+      "version": "2.4.26",
+      "resolved": "https://registry.npmjs.org/jest-localstorage-mock/-/jest-localstorage-mock-2.4.26.tgz",
+      "integrity": "sha512-owAJrYnjulVlMIXOYQIPRCCn3MmqI3GzgfZCXdD3/pmwrIvFMXcKVWZ+aMc44IzaASapg0Z4SEFxR+v5qxDA2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.16.0"
+      }
+    },
+    "node_modules/jest-location-mock": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/jest-location-mock/-/jest-location-mock-2.0.0.tgz",
+      "integrity": "sha512-loakfclgY/y65/2i4s0fcdlZY3hRPfwNnmzRsGFQYQryiaow2DEIGTLXIPI8cAO1Is36xsVLVkIzgvhQ+FXHdw==",
+      "dev": true,
+      "dependencies": {
+        "@jedmao/location": "^3.0.0",
+        "jest-diff": "^29.6.4"
+      },
+      "engines": {
+        "node": "^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
+    "node_modules/jest-location-mock/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/jest-diff": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^29.6.3",
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/jest-get-type": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
+      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-location-mock/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
+      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/diff-sequences": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
+      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
+      "dev": true,
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/jest-diff": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
+      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-message-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
+      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^27.5.1",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^27.5.1",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-mock": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
+      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "jest-resolve": "*"
+      },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-preview": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/jest-preview/-/jest-preview-0.3.1.tgz",
+      "integrity": "sha512-gRR4shnXFSh8tdNaIncJC98d1zXD7w7LA52HQC0bu0DsPb+FXVEg+NQh9GTbO+n6/SCgcZNQAVt4MeCfsIkBPA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@svgr/core": "^6.2.1",
+        "camelcase": "^6.3.0",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.3",
+        "commander": "^9.2.0",
+        "connect": "^3.7.0",
+        "find-node-modules": "^2.1.3",
+        "open": "^8.4.0",
+        "postcss-import": "^14.1.0",
+        "postcss-load-config": "^4.0.1",
+        "sirv": "^2.0.2",
+        "slash": "^3.0.0",
+        "string-hash": "^1.1.3",
+        "update-notifier": "^5.1.0",
+        "ws": "^8.5.0"
+      },
+      "bin": {
+        "jest-preview": "cli/index.js"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/jest-preview"
+      }
+    },
+    "node_modules/jest-preview/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-preview/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-regex-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
+      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
+      "dev": true,
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
+      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^27.5.1",
+        "jest-validate": "^27.5.1",
+        "resolve": "^1.20.0",
+        "resolve.exports": "^1.1.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve-dependencies": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
+      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-snapshot": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-resolve/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-runner": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
+      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/console": "^27.5.1",
+        "@jest/environment": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.8.1",
+        "graceful-fs": "^4.2.9",
+        "jest-docblock": "^27.5.1",
+        "jest-environment-jsdom": "^27.5.1",
+        "jest-environment-node": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-leak-detector": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-runtime": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jest-worker": "^27.5.1",
+        "source-map-support": "^0.5.6",
+        "throat": "^6.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-runner/node_modules/jest-environment-node": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
+      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runtime": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
+      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
+      "dev": true,
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/globals": "^27.5.1",
+        "@jest/source-map": "^27.5.1",
+        "@jest/test-result": "^27.5.1",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^1.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "execa": "^5.0.0",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-mock": "^27.5.1",
+        "jest-regex-util": "^27.5.1",
+        "jest-resolve": "^27.5.1",
+        "jest-snapshot": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-serializer": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
+      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "graceful-fs": "^4.2.9"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
+      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.7.2",
+        "@babel/generator": "^7.7.2",
+        "@babel/plugin-syntax-typescript": "^7.7.2",
+        "@babel/traverse": "^7.7.2",
+        "@babel/types": "^7.0.0",
+        "@jest/transform": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/babel__traverse": "^7.0.4",
+        "@types/prettier": "^2.1.5",
+        "babel-preset-current-node-syntax": "^1.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^27.5.1",
+        "graceful-fs": "^4.2.9",
+        "jest-diff": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "jest-haste-map": "^27.5.1",
+        "jest-matcher-utils": "^27.5.1",
+        "jest-message-util": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^27.5.1",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/diff-sequences": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
+      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
+      "dev": true,
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/jest-diff": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
+      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^27.5.1",
+        "jest-get-type": "^27.5.1",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-snapshot/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-util": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
+      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-util/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-validate": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
+      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^27.5.1",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^27.5.1",
+        "leven": "^3.1.0",
+        "pretty-format": "^27.5.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-validate/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-validate/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-validate/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/jest-watcher": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
+      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
+      "dev": true,
+      "dependencies": {
+        "@jest/test-result": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "jest-util": "^27.5.1",
+        "string-length": "^4.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
+      "dev": true
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "dev": true
+    },
+    "node_modules/jsdom/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==",
+      "dev": true
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/latest-version": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "dev": true,
+      "dependencies": {
+        "package-json": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lazy-cache": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz",
+      "integrity": "sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==",
+      "dependencies": {
+        "set-getter": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/lint-staged": {
+      "version": "15.2.8",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.8.tgz",
+      "integrity": "sha512-PUWFf2zQzsd9EFU+kM1d7UP+AZDbKFKuj+9JNVTBkhUFhbg4MAt6WfyMMwBfM4lYqd4D2Jwac5iuTu9rVj4zCQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "~5.3.0",
+        "commander": "~12.1.0",
+        "debug": "~4.3.6",
+        "execa": "~8.0.1",
+        "lilconfig": "~3.1.2",
+        "listr2": "~8.2.4",
+        "micromatch": "~4.0.7",
+        "pidtree": "~0.6.0",
+        "string-argv": "~0.3.2",
+        "yaml": "~2.5.0"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/lint-staged/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/lint-staged/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lint-staged/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/npm-run-path": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
+      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/lint-staged/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/yaml": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
+      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/list-item": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/list-item/-/list-item-1.1.1.tgz",
+      "integrity": "sha512-S3D0WZ4J6hyM8o5SNKWaMYB1ALSacPZ2nHGEuCjmHZ+dc03gFeNZoNDcqfcnO4vDhTZmNrqrpYZCdXsRh22bzw==",
+      "dependencies": {
+        "expand-range": "^1.8.1",
+        "extend-shallow": "^2.0.1",
+        "is-number": "^2.1.0",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/list-item/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/list-item/node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/list-item/node_modules/is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/list-item/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.4.tgz",
+      "integrity": "sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==",
+      "dev": true,
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA=="
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
+    "node_modules/lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw=="
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "dependencies": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "node_modules/lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "dependencies": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-symbols/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-escapes": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
+      "dev": true,
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/markdown-link": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-link/-/markdown-link-0.1.1.tgz",
+      "integrity": "sha512-TurLymbyLyo+kAUUAV9ggR9EPcDjP/ctlv9QAFiqUH7c+t6FlsbivPo9OKTU8xdOx9oNd2drW/Fi5RRElQbUqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/markdown-toc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-toc/-/markdown-toc-1.2.0.tgz",
+      "integrity": "sha512-eOsq7EGd3asV0oBfmyqngeEIhrbkc7XVP63OwcJBIhH2EpG2PzFcbZdhy1jutXSlRBBVMNXHvMtSr5LAxSUvUg==",
+      "dependencies": {
+        "concat-stream": "^1.5.2",
+        "diacritics-map": "^0.1.0",
+        "gray-matter": "^2.1.0",
+        "lazy-cache": "^2.0.2",
+        "list-item": "^1.1.1",
+        "markdown-link": "^0.1.1",
+        "minimist": "^1.2.0",
+        "mixin-deep": "^1.1.3",
+        "object.pick": "^1.2.0",
+        "remarkable": "^1.7.1",
+        "repeat-string": "^1.6.1",
+        "strip-color": "^0.1.0"
+      },
+      "bin": {
+        "markdown-toc": "cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/math-random": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
+      "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A=="
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
+    "node_modules/merge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz",
+      "integrity": "sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==",
+      "dev": true
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "devOptional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "dependencies": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "optional": true
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/node-html-better-parser": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/node-html-better-parser/-/node-html-better-parser-1.4.4.tgz",
+      "integrity": "sha512-uvlqL1uMU7m/aIY9WsGM0jDW7gVFIuFSWS6f2rlJeL7K1ZzKnA3B8cNbUGw9ywwYm9W7W2ooi0iQ7aI29aQmPw==",
+      "license": "MIT",
+      "dependencies": {
+        "html-entities": "^2.3.2"
+      }
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "dev": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
+      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+      "dev": true
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "dev": true,
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/oniguruma-to-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+      "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+      "dependencies": {
+        "regex": "^4.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optimism": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.0.tgz",
+      "integrity": "sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==",
+      "dependencies": {
+        "@wry/caches": "^1.0.0",
+        "@wry/context": "^0.7.0",
+        "@wry/trie": "^0.4.3",
+        "tslib": "^2.3.0"
+      }
+    },
+    "node_modules/optimism/node_modules/@wry/trie": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
+      "integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ora/node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "dev": true,
+      "dependencies": {
+        "got": "^9.6.0",
+        "registry-auth-token": "^4.0.0",
+        "registry-url": "^5.0.0",
+        "semver": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/package-json/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/postcss-modules": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-6.0.0.tgz",
+      "integrity": "sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==",
+      "dev": true,
+      "dependencies": {
+        "generic-names": "^4.0.0",
+        "icss-utils": "^5.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz",
+      "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz",
+      "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^26.6.2",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/pretty-format/node_modules/@jest/types": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/pretty-format/node_modules/@types/yargs": {
+      "version": "15.0.15",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
+      "integrity": "sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/pretty-format/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "dev": true,
+      "dependencies": {
+        "escape-goat": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
+    "node_modules/randomatic": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
+      "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==",
+      "dependencies": {
+        "is-number": "^4.0.0",
+        "kind-of": "^6.0.0",
+        "math-random": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/randomatic/node_modules/is-number": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+      "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-beautiful-dnd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+      "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/react-beautiful-dnd/node_modules/react-redux": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.5",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.5.tgz",
+      "integrity": "sha512-XueAOEn64RRkZ0s6yzUTdpFtdUXs5L5491QU//8ZcODKJNDLt/r01tNyriZccjgRImH1REynUc9pqjiRMpDLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.9",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-datepicker": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz",
+      "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.23",
+        "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-i18next": {
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz",
+      "integrity": "sha512-z0W3/RES9Idv3MmJUcf0mDNeeMOUXe+xoL0kPfQPbDoZHmni/XsIoq5zgT2MCFUiau283GuBUK578uD/mkAbLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-infinite-scroll-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
+      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
+      "dependencies": {
+        "throttle-debounce": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-multi-carousel": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz",
+      "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-tooltip": {
+      "version": "5.28.0",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.28.0.tgz",
+      "integrity": "sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
+      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.1",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "globalthis": "^1.0.3",
+        "which-builtin-type": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+      "dev": true,
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regex": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.2.tgz",
+      "integrity": "sha512-kK/AA3A9K6q2js89+VMymcboLOlF5lZRCYJv3gzszXFHBr6kO6qLGzbm+UIugBEV8SMMKCTR59txoY6ctRHYVw=="
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.2.tgz",
+      "integrity": "sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==",
+      "dev": true,
+      "dependencies": {
+        "rc": "1.2.8"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dev": true,
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/rehackt": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz",
+      "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/remarkable": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.4.tgz",
+      "integrity": "sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==",
+      "dependencies": {
+        "argparse": "^1.0.10",
+        "autolinker": "~0.28.0"
+      },
+      "bin": {
+        "remarkable": "bin/remarkable.js"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/repeat-element": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-dir/node_modules/global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "dev": true,
+      "dependencies": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-dir/node_modules/global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+      "dev": true,
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-dir/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/resolve.exports": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
+      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/response-iterator": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.6.tgz",
+      "integrity": "sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==",
+      "dev": true,
+      "dependencies": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/restructure": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.0.tgz",
+      "integrity": "sha512-Xj8/MEIhhfj9X2rmD9iJ4Gga9EFqVlpMj3vfLnV2r/Mh5jRMryNV+6lWh9GdJtDBcBSPIqzRdfBQ3wDtNFv/uw=="
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
+    "node_modules/rollup": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.3.tgz",
+      "integrity": "sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==",
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.21.3",
+        "@rollup/rollup-android-arm64": "4.21.3",
+        "@rollup/rollup-darwin-arm64": "4.21.3",
+        "@rollup/rollup-darwin-x64": "4.21.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.3",
+        "@rollup/rollup-linux-arm64-musl": "4.21.3",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.3",
+        "@rollup/rollup-linux-x64-gnu": "4.21.3",
+        "@rollup/rollup-linux-x64-musl": "4.21.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.3",
+        "@rollup/rollup-win32-x64-msvc": "4.21.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz",
+      "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.1.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/sanitize-html": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.13.0.tgz",
+      "integrity": "sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.80.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz",
+      "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "devOptional": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "dev": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver-diff/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-getter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.1.tgz",
+      "integrity": "sha512-9sVWOy+gthr+0G9DzqqLaYNA7+5OKkSmcqjL9cBpDEaZrr3ShQlyX2cZ/O/ozE41oxn/Tt0LGEM/w4Rub3A3gw==",
+      "dependencies": {
+        "to-object-path": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shiki": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.17.6.tgz",
+      "integrity": "sha512-RejGugKpDM75vh6YtF9R771acxHRDikC/01kxsUGW+Pnaz3pTY+c8aZB5CnD7p0vuFPs1HaoAIU/4E+NCfS+mQ==",
+      "dependencies": {
+        "@shikijs/core": "1.17.6",
+        "@shikijs/engine-javascript": "1.17.6",
+        "@shikijs/engine-oniguruma": "1.17.6",
+        "@shikijs/types": "1.17.6",
+        "@shikijs/vscode-textmate": "^9.2.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
+    "node_modules/sirv": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
+      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "devOptional": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
+      "dev": true
+    },
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dev": true,
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-color": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/strip-color/-/strip-color-0.1.0.tgz",
+      "integrity": "sha512-p9LsUieSjWNNAxVCXLeilaDlmuUOrDS5/dF9znM1nZc7EGX5+zEFC0bEevsNIaldjlks+2jns5Siz6F9iK6jwA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strnum": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+      "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
+      "license": "MIT"
+    },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
+    "node_modules/symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "node_modules/synckit": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
+      "integrity": "sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
+    "node_modules/terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.32.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz",
+      "integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/throat": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
+      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==",
+      "dev": true
+    },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
+    "node_modules/tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dependencies": {
+        "os-tmpdir": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+      "dev": true
+    },
+    "node_modules/to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-object-path/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "devOptional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toml": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-2.3.6.tgz",
+      "integrity": "sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ=="
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+      "dev": true,
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
+    "node_modules/ts-invariant": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
+      "integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/tsx": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.1.tgz",
+      "integrity": "sha512-0flMz1lh74BR4wOvBjuh9olbnwqCPc35OOlfyzHba0Dc+QNUeWX/Gq2YTbnwcWPO3BMd8fkzRVrHcsR+a7z7rA==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "~0.23.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
+      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
+      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
+      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
+      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
+      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
+      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
+      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
+      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
+      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
+      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
+      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
+      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
+      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
+      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
+      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
+      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
+      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
+      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
+      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
+      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/esbuild": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
+      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.23.1",
+        "@esbuild/android-arm": "0.23.1",
+        "@esbuild/android-arm64": "0.23.1",
+        "@esbuild/android-x64": "0.23.1",
+        "@esbuild/darwin-arm64": "0.23.1",
+        "@esbuild/darwin-x64": "0.23.1",
+        "@esbuild/freebsd-arm64": "0.23.1",
+        "@esbuild/freebsd-x64": "0.23.1",
+        "@esbuild/linux-arm": "0.23.1",
+        "@esbuild/linux-arm64": "0.23.1",
+        "@esbuild/linux-ia32": "0.23.1",
+        "@esbuild/linux-loong64": "0.23.1",
+        "@esbuild/linux-mips64el": "0.23.1",
+        "@esbuild/linux-ppc64": "0.23.1",
+        "@esbuild/linux-riscv64": "0.23.1",
+        "@esbuild/linux-s390x": "0.23.1",
+        "@esbuild/linux-x64": "0.23.1",
+        "@esbuild/netbsd-x64": "0.23.1",
+        "@esbuild/openbsd-arm64": "0.23.1",
+        "@esbuild/openbsd-x64": "0.23.1",
+        "@esbuild/sunos-x64": "0.23.1",
+        "@esbuild/win32-arm64": "0.23.1",
+        "@esbuild/win32-ia32": "0.23.1",
+        "@esbuild/win32-x64": "0.23.1"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dev": true,
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typedoc": {
+      "version": "0.26.10",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.10.tgz",
+      "integrity": "sha512-xLmVKJ8S21t+JeuQLNueebEuTVphx6IrP06CdV7+0WVflUSW3SPmR+h1fnWVdAR/FQePEgsSWCUHXqKKjzuUAw==",
+      "dependencies": {
+        "lunr": "^2.3.9",
+        "markdown-it": "^14.1.0",
+        "minimatch": "^9.0.5",
+        "shiki": "^1.16.2",
+        "yaml": "^2.5.1"
+      },
+      "bin": {
+        "typedoc": "bin/typedoc"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x"
+      }
+    },
+    "node_modules/typedoc-plugin-markdown": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-4.2.10.tgz",
+      "integrity": "sha512-PLX3pc1/7z13UJm4TDE9vo9jWGcClFUErXXtd5LdnoLjV6mynPpqZLU992DwMGFSRqJFZeKbVyqlNNeNHnk2tQ==",
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "typedoc": "0.26.x"
+      }
+    },
+    "node_modules/typedoc/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/typedoc/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/typedoc/node_modules/yaml": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
+      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "devOptional": true
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/update-notifier": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
+      "integrity": "sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==",
+      "dev": true,
+      "dependencies": {
+        "boxen": "^5.0.0",
+        "chalk": "^4.1.0",
+        "configstore": "^5.0.1",
+        "has-yarn": "^2.1.0",
+        "import-lazy": "^2.1.0",
+        "is-ci": "^2.0.0",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^5.0.0",
+        "is-yarn-global": "^0.3.0",
+        "latest-version": "^5.1.0",
+        "pupa": "^2.1.1",
+        "semver": "^7.3.4",
+        "semver-diff": "^3.1.1",
+        "xdg-basedir": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "node_modules/url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==",
+      "dev": true,
+      "dependencies": {
+        "prepend-http": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/use-memo-one": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
+      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^1.6.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/v8-to-istanbul/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-environment": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-environment/-/vite-plugin-environment-1.1.3.tgz",
+      "integrity": "sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==",
+      "peerDependencies": {
+        "vite": ">= 2.7"
+      }
+    },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz",
+      "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.5",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || 3 || 4 || 5"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@rollup/pluginutils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/vite-plugin-svgr/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-svgr/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/vite-plugin-svgr/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/vite-tsconfig-paths": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.2.tgz",
+      "integrity": "sha512-gEIbKfJzSEv0yR3XS2QEocKetONoWkbROj6hGx0FHM18qKUojhvcokQsxQx5nMkelZq2n37zbSGCJn+FSODSjA==",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-tsconfig-paths/node_modules/tsconfck": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.3.tgz",
+      "integrity": "sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==",
+      "bin": {
+        "tsconfck": "bin/tsconfck.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
+      "dev": true,
+      "dependencies": {
+        "browser-process-hrtime": "^1.0.0"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "dev": true,
+      "dependencies": {
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dev": true,
+      "dependencies": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="
+    },
+    "node_modules/webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.4"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dev": true,
+      "dependencies": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.20",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
+      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
+      "dev": true
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "dev": true
+    },
+    "node_modules/whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
+      "dev": true,
+      "dependencies": {
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.0.5",
+        "is-finalizationregistry": "^1.0.2",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.1.4",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "dev": true
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
+      "integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
+      "dependencies": {
+        "zen-observable": "0.8.15"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 6526d77a59..892a1331e4 100644
--- a/package.json
+++ b/package.json
@@ -1,34 +1,92 @@
 {
-  "name": "my-app",
-  "version": "0.1.0",
+  "name": "talawa-admin",
+  "version": "3.0.0",
   "private": true,
+  "type": "module",
+  "config-overrides-path": "scripts/config-overrides",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "prettier": "^2.3.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.5.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.0.1"
+    "@apollo/client": "^3.11.8",
+    "@apollo/link-error": "^2.0.0-beta.3",
+    "@apollo/react-testing": "^4.0.0",
+    "@dicebear/collection": "^9.2.2",
+    "@dicebear/core": "^9.2.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.61",
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
+    "@mui/private-theming": "^6.1.6",
+    "@mui/system": "^6.1.6",
+    "@mui/x-charts": "^7.22.1",
+    "@mui/x-data-grid": "^7.22.1",
+    "@mui/x-date-pickers": "^7.22.1",
+    "@pdfme/schemas": "^5.1.6",
+    "chart.js": "^4.4.6",
+    "@pdfme/generator": "^5.1.7",
+    "@reduxjs/toolkit": "^2.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "babel-plugin-transform-import-meta": "^2.2.1",
+    "bootstrap": "^5.3.3",
+    "customize-cra": "^1.0.0",
+    "dayjs": "^1.11.13",
+    "dotenv": "^16.4.5",
+    "flag-icons": "^7.2.3",
+    "graphql": "^16.9.0",
+    "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.16.0",
+    "history": "^5.3.0",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.6.1",
+    "inquirer": "^8.0.0",
+    "js-cookie": "^3.0.1",
+    "markdown-toc": "^1.2.0",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-bootstrap": "^2.10.5",
+    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^7.5.0",
+    "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-i18next": "^15.0.2",
+    "react-icons": "^5.2.1",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-multi-carousel": "^2.8.5",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.27.0",
+    "react-toastify": "^10.0.6",
+    "react-tooltip": "^5.28.0",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
+    "sanitize-html": "^2.13.0",
+    "typedoc": "^0.26.10",
+    "typedoc-plugin-markdown": "^4.2.10",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-tsconfig-paths": "^5.1.2",
+    "web-vitals": "^4.2.4"
   },
   "scripts": {
-    "serve": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "serve": "cross-env ESLINT_NO_DEV_ERRORS=true vite --config config/vite.config.ts",
+    "build": "tsc && vite build --config config/vite.config.ts",
+    "preview": "vite preview --config config/vite.config.ts",
+    "test": "cross-env NODE_ENV=test jest --env=./scripts/custom-test-env.js --watchAll --coverage",
     "eject": "react-scripts eject",
-    "lint": "eslint 'src/*.{ts,tsx}'",
-    "lint-fix": "eslint 'src/*.{ts,tsx}' --fix",
-    "format": "prettier --write \"**/*.{ts,tsx,json,scss,css}\""
+    "lint:check": "eslint \"**/*.{ts,tsx}\" --max-warnings=0 && python .github/workflows/eslint_disable_check.py",
+    "lint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
+    "format:fix": "prettier --write \"**/*.{ts,tsx,json,scss,css}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,json,scss,css}\"",
+    "check-tsdoc": "node .github/workflows/check-tsdoc.js",
+    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "prepare": "husky install",
+    "jest-preview": "jest-preview",
+    "update:toc": "node scripts/githooks/update-toc.js",
+    "lint-staged": "lint-staged --concurrent false",
+    "setup": "tsx setup.ts",
+    "check-localstorage": "node scripts/githooks/check-localstorage-usage.js"
   },
   "eslintConfig": {
     "extends": [
@@ -49,8 +107,63 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.24.0",
-    "@typescript-eslint/parser": "^4.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.26.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/inquirer": "^9.0.7",
+    "@types/jest": "^26.0.24",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^22.5.4",
+    "@types/node-fetch": "^2.6.10",
+    "@types/react": "^18.3.3",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-chartjs-2": "^2.5.7",
+    "@types/react-bootstrap": "^0.32.37",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "@types/react-router-dom": "^5.1.8",
+    "@types/sanitize-html": "^2.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.5.0",
+    "babel-jest": "^29.7.0",
+    "cross-env": "^7.0.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jest": "^28.8.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-tsdoc": "^0.3.0",
+    "husky": "^9.1.6",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.5",
+    "jest-localstorage-mock": "^2.4.19",
+    "jest-location-mock": "^2.0.0",
+    "jest-preview": "^0.3.1",
+    "lint-staged": "^15.2.8",
+    "postcss-modules": "^6.0.0",
+    "sass": "^1.80.6",
+    "tsx": "^4.19.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "whatwg-fetch": "^3.6.20"
+  },
+  "resolutions": {
+    "@apollo/client": "^3.4.0-beta.19",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "graphql": "^16.5.0"
+  },
+  "engines": {
+    "node": ">=20.x"
+  },
+  "lint-staged": {
+    "**/*.{ts, tsx, json, scss, css}": [
+      "prettier --write"
+    ],
+    "**/*.{ts, tsx, json}": "eslint --fix"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777cc47..0675af2934 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon_palisadoes.ico b/public/favicon_palisadoes.ico
new file mode 100644
index 0000000000..0675af2934
Binary files /dev/null and b/public/favicon_palisadoes.ico differ
diff --git a/public/images/REACT_SITE_KEY.webp b/public/images/REACT_SITE_KEY.webp
new file mode 100644
index 0000000000..9afe77c4d5
Binary files /dev/null and b/public/images/REACT_SITE_KEY.webp differ
diff --git a/public/images/jest-preview.webp b/public/images/jest-preview.webp
new file mode 100644
index 0000000000..a5810192af
Binary files /dev/null and b/public/images/jest-preview.webp differ
diff --git a/public/logo512.png b/public/images/logo512.png
similarity index 100%
rename from public/logo512.png
rename to public/images/logo512.png
diff --git a/public/images/svg/angleDown.svg b/public/images/svg/angleDown.svg
new file mode 100644
index 0000000000..0dfea5e56c
--- /dev/null
+++ b/public/images/svg/angleDown.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.79 9.72749L19.71 8.64749L12 16.3605L4.29004 8.64749L3.21004 9.72749L11.46 17.9775L12 18.492L12.54 17.9767L20.79 9.72674V9.72749Z" fill="#808080"/>
+</svg>
diff --git a/public/images/svg/arrow-left.svg b/public/images/svg/arrow-left.svg
new file mode 100644
index 0000000000..395c38fc25
--- /dev/null
+++ b/public/images/svg/arrow-left.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="40.001" cy="40" r="40" transform="rotate(-180 40.001 40)" fill="#31BB6B"/>
+<rect x="66.001" y="66" width="53" height="53" transform="rotate(-180 66.001 66)" fill="url(#pattern0_7544_441)"/>
+<defs>
+<pattern id="pattern0_7544_441" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_7544_441" transform="scale(0.0111111)"/>
+</pattern>
+<image id="image0_7544_441" width="90" height="90" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVR4nO2dv2qUQRRHv2WDBotAwCZgvwTLNNnCeiH6CknlM7g+QKz8kzxBqqSyTgrfII2dTQobBQUjJhbignJkiZaRvRfmJrrnvMD3cXaYnd/cO/N1nYiIiIiIiHQdcBN4AZxyOe+AbWBBZ0m4kDwr+4rOiz4lxljZNaJ/AhvKjoveIc4ZsKrsmOhF4Dgh+y1wW9kx2SvA+4TsV65EggBrwLeE7OeO6rjsTXI8VHbbdfUfJsA9ZcdE94FD4nwA7ig7JnsJeJOQ/Rq4peyY7AHwJSH7JdBTdkz2CPiRkG1MjwKME6KnMf2Bozouey8h+ytwV9kBjOmFYEwvlb1mTK+TvUkOY3oUY3oRGNPrwJheKntgTK+TPTKm18keJ1YhxvQMxvQisJpeB8b0UtnrwPfEnG01PYoxvRCsppeJ7ltNr5O9DJwk5mur6VGmXae/u0+jPA0/bN4hF9M/XfV7z4voj1f93v8UOHW0xz/DGsl9l3fX92zMxPbfAMAWOayUzwowdFOpMbhN2h7c+C+R3AMOEnOyHacRgMcJyRZni9oNHoUeNM9w0UCT2ZnznMusGK/r4vVRYiR7FjGC8boAjNclkofG6/aSV7zTo73kRW+paS+5Z7wuAON1ieSR8bq95IHxur3kZVu52kvuG68LwOp1ieQtcli9DkgeGq8bg/G6PRivawB2E3Pyudcax0V/TlSv77f52f9j8Or56/kxBbylMS36BvBsembkL4Kn08sTL+UWERERERHpavgFcdaDjHIlu5EAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/public/images/svg/arrow-right.svg b/public/images/svg/arrow-right.svg
new file mode 100644
index 0000000000..bf754cec86
--- /dev/null
+++ b/public/images/svg/arrow-right.svg
@@ -0,0 +1,10 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="40" cy="40" r="40" fill="#31BB6B"/>
+<rect x="14" y="14" width="53" height="53" fill="url(#pattern0_7544_440)"/>
+<defs>
+<pattern id="pattern0_7544_440" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_7544_440" transform="scale(0.0111111)"/>
+</pattern>
+<image id="image0_7544_440" width="90" height="90" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVR4nO2dv2qUQRRHv2WDBotAwCZgvwTLNNnCeiH6CknlM7g+QKz8kzxBqqSyTgrfII2dTQobBQUjJhbignJkiZaRvRfmJrrnvMD3cXaYnd/cO/N1nYiIiIiIiHQdcBN4AZxyOe+AbWBBZ0m4kDwr+4rOiz4lxljZNaJ/AhvKjoveIc4ZsKrsmOhF4Dgh+y1wW9kx2SvA+4TsV65EggBrwLeE7OeO6rjsTXI8VHbbdfUfJsA9ZcdE94FD4nwA7ig7JnsJeJOQ/Rq4peyY7AHwJSH7JdBTdkz2CPiRkG1MjwKME6KnMf2Bozouey8h+ytwV9kBjOmFYEwvlb1mTK+TvUkOY3oUY3oRGNPrwJheKntgTK+TPTKm18keJ1YhxvQMxvQisJpeB8b0UtnrwPfEnG01PYoxvRCsppeJ7ltNr5O9DJwk5mur6VGmXae/u0+jPA0/bN4hF9M/XfV7z4voj1f93v8UOHW0xz/DGsl9l3fX92zMxPbfAMAWOayUzwowdFOpMbhN2h7c+C+R3AMOEnOyHacRgMcJyRZni9oNHoUeNM9w0UCT2ZnznMusGK/r4vVRYiR7FjGC8boAjNclkofG6/aSV7zTo73kRW+paS+5Z7wuAON1ieSR8bq95IHxur3kZVu52kvuG68LwOp1ieQtcli9DkgeGq8bg/G6PRivawB2E3Pyudcax0V/TlSv77f52f9j8Or56/kxBbylMS36BvBsembkL4Kn08sTL+UWERERERHpavgFcdaDjHIlu5EAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/public/images/svg/attendees.svg b/public/images/svg/attendees.svg
new file mode 100644
index 0000000000..3864a85b7e
--- /dev/null
+++ b/public/images/svg/attendees.svg
@@ -0,0 +1,4 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64.9183" height="65" rx="32.4592" fill="#31BB6B" fill-opacity="0.1"/>
+<path d="M48.6598 36.4369C48.5753 36.4958 48.479 36.5387 48.3767 36.5631C48.2743 36.5874 48.1678 36.5928 48.0631 36.5789C47.9585 36.5651 47.8579 36.5322 47.7669 36.4821C47.676 36.4321 47.5965 36.3659 47.5331 36.2874C46.8616 35.4485 45.9874 34.7679 44.981 34.3003C43.9746 33.8327 42.8641 33.5913 41.7389 33.5954C41.5254 33.5954 41.3207 33.5166 41.1698 33.3763C41.0189 33.2361 40.9341 33.0459 40.9341 32.8476C40.9341 32.6493 41.0189 32.4591 41.1698 32.3188C41.3207 32.1786 41.5254 32.0998 41.7389 32.0998C42.3911 32.0997 43.0302 31.9296 43.5836 31.6089C44.137 31.2882 44.5825 30.8297 44.8695 30.2855C45.1566 29.7414 45.2736 29.1333 45.2074 28.5304C45.1411 27.9275 44.8943 27.354 44.4948 26.8749C44.0954 26.3958 43.5594 26.0304 42.9476 25.8203C42.3359 25.6101 41.673 25.5635 41.0342 25.6858C40.3954 25.8081 39.8064 26.0945 39.3339 26.5123C38.8615 26.9301 38.5246 27.4626 38.3616 28.0494C38.3082 28.2414 38.1749 28.4059 37.9911 28.5066C37.8072 28.6074 37.5878 28.6361 37.3811 28.5865C37.1744 28.5369 36.9974 28.4131 36.889 28.2423C36.7806 28.0714 36.7497 27.8675 36.803 27.6755C37.0053 26.9445 37.3927 26.2689 37.933 25.7052C38.4732 25.1415 39.1506 24.706 39.9087 24.4349C40.6669 24.1638 41.4838 24.065 42.2913 24.1468C43.0989 24.2285 43.8737 24.4885 44.5512 24.9049C45.2287 25.3213 45.7893 25.8822 46.1862 26.5408C46.5831 27.1994 46.8049 27.9366 46.833 28.6909C46.8611 29.4453 46.6948 30.195 46.3478 30.8775C46.0009 31.56 45.4834 32.1555 44.8385 32.6145C46.4255 33.1648 47.8081 34.1284 48.8207 35.39C48.8842 35.4686 48.9303 35.558 48.9565 35.6531C48.9827 35.7482 48.9886 35.8472 48.9736 35.9444C48.9587 36.0416 48.9233 36.1352 48.8694 36.2197C48.8156 36.3042 48.7443 36.378 48.6598 36.4369ZM41.362 44.4381C41.4149 44.5231 41.4493 44.617 41.4632 44.7144C41.4771 44.8117 41.4703 44.9107 41.443 45.0056C41.4157 45.1005 41.3686 45.1895 41.3043 45.2675C41.24 45.3454 41.1598 45.4109 41.0682 45.46C40.9462 45.5265 40.8073 45.5613 40.6659 45.561C40.5245 45.5611 40.3856 45.5266 40.2632 45.4609C40.1408 45.3953 40.0391 45.3008 39.9684 45.1871C39.2689 44.0858 38.2724 43.1731 37.0772 42.5391C35.8821 41.905 34.5297 41.5715 33.1534 41.5715C31.7772 41.5715 30.4248 41.905 29.2297 42.5391C28.0345 43.1731 27.038 44.0858 26.3385 45.1871C26.2882 45.2765 26.2189 45.3554 26.1349 45.4193C26.0509 45.4832 25.9539 45.5306 25.8496 45.5587C25.7454 45.5868 25.6361 45.595 25.5284 45.5828C25.4206 45.5706 25.3166 45.5384 25.2227 45.4879C25.1287 45.4374 25.0467 45.3698 24.9816 45.2891C24.9165 45.2084 24.8696 45.1163 24.8438 45.0184C24.8179 44.9204 24.8137 44.8186 24.8313 44.7191C24.8489 44.6196 24.888 44.5244 24.9463 44.4393C26.0424 42.6894 27.7586 41.3475 29.8016 40.6431C28.6856 39.9698 27.8338 38.9794 27.3732 37.8194C26.9125 36.6595 26.8678 35.3923 27.2457 34.2068C27.6235 33.0213 28.4037 31.9811 29.4698 31.2414C30.536 30.5016 31.8309 30.1019 33.1615 30.1019C34.4921 30.1019 35.787 30.5016 36.8532 31.2414C37.9193 31.9811 38.6995 33.0213 39.0773 34.2068C39.4552 35.3923 39.4104 36.6595 38.9498 37.8194C38.4892 38.9794 37.6374 39.9698 36.5214 40.6431C38.5587 41.3499 40.2693 42.691 41.362 44.4381ZM33.1548 40.0761C34.0567 40.0761 34.9384 39.8276 35.6884 39.3619C36.4383 38.8963 37.0228 38.2345 37.368 37.4603C37.7131 36.686 37.8034 35.834 37.6275 35.012C37.4515 34.19 37.0172 33.435 36.3794 32.8424C35.7416 32.2498 34.9291 31.8462 34.0445 31.6827C33.1598 31.5192 32.2429 31.6031 31.4096 31.9239C30.5764 32.2446 29.8641 32.7877 29.363 33.4845C28.862 34.1814 28.5945 35.0006 28.5945 35.8387C28.5945 36.9625 29.075 38.0403 29.9302 38.835C30.7854 39.6296 31.9453 40.0761 33.1548 40.0761ZM25.3755 32.8476C25.3755 32.6493 25.2907 32.4591 25.1398 32.3188C24.9888 32.1786 24.7841 32.0998 24.5707 32.0998C23.9186 32.0996 23.2796 31.9295 22.7262 31.6088C22.1729 31.2882 21.7275 30.8297 21.4404 30.2856C21.1534 29.7415 21.0363 29.1335 21.1025 28.5307C21.1687 27.9278 21.4154 27.3543 21.8148 26.8753C22.2141 26.3962 22.75 26.0308 23.3616 25.8205C23.9732 25.6102 24.636 25.5635 25.2748 25.6856C25.9135 25.8078 26.5026 26.0939 26.9751 26.5115C27.4477 26.9291 27.7847 27.4615 27.948 28.0481C27.9744 28.1432 28.0207 28.2325 28.0843 28.311C28.1479 28.3895 28.2275 28.4555 28.3185 28.5054C28.4096 28.5553 28.5103 28.588 28.6149 28.6017C28.7196 28.6154 28.8261 28.6098 28.9285 28.5853C29.0308 28.5607 29.1269 28.5177 29.2114 28.4586C29.2958 28.3996 29.3669 28.3256 29.4206 28.241C29.4743 28.1564 29.5095 28.0628 29.5242 27.9656C29.539 27.8683 29.533 27.7693 29.5066 27.6742C29.3043 26.9432 28.9169 26.2677 28.3766 25.704C27.8364 25.1403 27.159 24.7048 26.4008 24.4337C25.6427 24.1626 24.8258 24.0638 24.0183 24.1455C23.2107 24.2273 22.4359 24.4872 21.7584 24.9037C21.0808 25.3201 20.5203 25.881 20.1233 26.5396C19.7264 27.1981 19.5047 27.9353 19.4766 28.6897C19.4484 29.444 19.6148 30.1937 19.9617 30.8762C20.3087 31.5587 20.8262 32.1543 21.471 32.6133C19.884 33.1639 18.5013 34.128 17.4888 35.39C17.4254 35.4686 17.3793 35.558 17.3531 35.6531C17.3268 35.7482 17.321 35.8472 17.336 35.9444C17.3509 36.0416 17.3863 36.1352 17.4402 36.2197C17.494 36.3042 17.5652 36.378 17.6498 36.4369C17.7343 36.4958 17.8305 36.5387 17.9329 36.5631C18.0353 36.5874 18.1418 36.5928 18.2464 36.5789C18.3511 36.5651 18.4517 36.5322 18.5427 36.4821C18.6336 36.4321 18.713 36.3659 18.7764 36.2874C19.448 35.4485 20.3222 34.7679 21.3286 34.3003C22.335 33.8327 23.4455 33.5913 24.5707 33.5954C24.7841 33.5954 24.9888 33.5166 25.1398 33.3763C25.2907 33.2361 25.3755 33.0459 25.3755 32.8476Z" fill="#31BB6B"/>
+</svg>
diff --git a/public/images/svg/feedback.svg b/public/images/svg/feedback.svg
new file mode 100644
index 0000000000..649e84a1c9
--- /dev/null
+++ b/public/images/svg/feedback.svg
@@ -0,0 +1,5 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64.9183" height="65" rx="32.4592" fill="#31BB6B" fill-opacity="0.1"/>
+<path d="M37.6475 26.4706L36.8052 26.3259C36.7849 26.4522 36.7914 26.5816 36.8244 26.7051C36.8573 26.8286 36.9159 26.9432 36.9961 27.0409C37.0762 27.1386 37.176 27.2172 37.2885 27.2711C37.401 27.3249 37.5235 27.3529 37.6475 27.3529V26.4706ZM18.8542 26.4706V25.5882C18.6277 25.5882 18.4104 25.6812 18.2502 25.8467C18.09 26.0121 18 26.2366 18 26.4706H18.8542ZM22.2712 45H41.6795V43.2353H22.2712V45ZM43.7297 25.5882H37.6475V27.3529H43.7297V25.5882ZM38.4898 26.6153L39.8668 18.0829L38.1822 17.7918L36.8052 26.3259L38.4898 26.6153ZM37.34 15H36.9761V16.7647H37.34V15ZM31.9993 17.7512L27.7007 24.4094L29.1222 25.3888L33.419 18.7288L31.9993 17.7512ZM25.5686 25.5882H18.8542V27.3529H25.5686V25.5882ZM18 26.4706V40.5882H19.7085V26.4706H18ZM45.8687 41.4529L47.9189 30.8647L46.2446 30.5188L44.1944 41.1071L45.8687 41.4529ZM27.7007 24.4094C27.4667 24.772 27.1497 25.0693 26.7777 25.275C26.4058 25.4806 25.9904 25.5882 25.5686 25.5882V27.3529C26.2716 27.353 26.9639 27.1737 27.5838 26.8311C28.2037 26.4884 28.7321 25.993 29.1222 25.3888L27.7007 24.4094ZM39.8668 18.0829C39.9281 17.7038 39.9087 17.3154 39.8099 16.9447C39.7112 16.5741 39.5355 16.2301 39.295 15.9367C39.0545 15.6433 38.7551 15.4075 38.4174 15.2458C38.0798 15.084 37.7121 15.0001 37.34 15V16.7647C37.4641 16.7645 37.5868 16.7923 37.6995 16.846C37.8122 16.8998 37.9122 16.9783 37.9925 17.0761C38.0729 17.1738 38.1316 17.2885 38.1647 17.4121C38.1977 17.5357 38.2043 17.6653 38.184 17.7918L39.8668 18.0829ZM43.7297 27.3529C44.1088 27.3529 44.4833 27.4398 44.826 27.6073C45.1687 27.7748 45.4711 28.0188 45.7115 28.3216C45.9519 28.6244 46.1243 28.9786 46.2162 29.3586C46.3081 29.7385 46.3189 30.1348 46.2446 30.5188L47.9189 30.8647C48.0427 30.2249 48.0258 29.5647 47.8729 28.9317C47.7199 28.2986 47.4329 27.7085 47.0326 27.2038C46.6322 26.6991 46.1285 26.2925 45.5576 26.0131C44.9868 25.7337 44.3631 25.5886 43.7314 25.5882L43.7297 27.3529ZM41.6795 45C42.6671 45.0002 43.6243 44.6469 44.3881 44.0001C45.1519 43.3534 45.6751 42.4533 45.8687 41.4529L44.1944 41.1071C44.0782 41.7075 43.7641 42.2478 43.3055 42.6358C42.8469 43.0239 42.2723 43.2357 41.6795 43.2353V45ZM36.9744 15C35.9896 14.9998 35.0201 15.2509 34.1519 15.7308C33.2837 16.2108 32.5437 16.9048 31.9976 17.7512L33.419 18.7288C33.8091 18.1246 34.3375 17.6292 34.9574 17.2866C35.5774 16.944 36.2696 16.7647 36.9726 16.7647L36.9744 15ZM22.2712 43.2353C21.5915 43.2353 20.9397 42.9564 20.4591 42.46C19.9785 41.9636 19.7085 41.2903 19.7085 40.5882H18C18 41.1676 18.1105 41.7413 18.3251 42.2765C18.5398 42.8118 18.8544 43.2982 19.251 43.7078C19.6476 44.1175 20.1185 44.4425 20.6367 44.6642C21.1549 44.8859 21.7103 45 22.2712 45V43.2353Z" fill="#31BB6B"/>
+<path d="M25.6882 26.4707V44.1178" stroke="#31BB6B"/>
+</svg>
diff --git a/public/images/svg/profiledefault.svg b/public/images/svg/profiledefault.svg
new file mode 100644
index 0000000000..a321caaeab
--- /dev/null
+++ b/public/images/svg/profiledefault.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="42" viewBox="0 0 48 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.864624" width="47.0144" height="42" rx="21" fill="#31BB6B" fill-opacity="0.12"/>
+</svg>
diff --git a/public/images/svg/up-down.svg b/public/images/svg/up-down.svg
new file mode 100644
index 0000000000..1dd7fdab1d
--- /dev/null
+++ b/public/images/svg/up-down.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7249 9.275L10.3963 10.9247L8.01346 7.966V23.3333H6.13426V7.966L3.75332 10.9247L2.42285 9.275L7.07386 3.5L11.7249 9.275ZM21.1208 18.725L16.4698 24.5L11.8188 18.725L13.1474 17.0753L15.5312 20.034L15.5302 4.66667H17.4094V20.034L19.7922 17.0753L21.1208 18.725Z" fill="white"/>
+</svg>
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 72527d8e95..0000000000
--- a/public/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Talawa Admin</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
new file mode 100644
index 0000000000..6c8882bcfd
--- /dev/null
+++ b/public/locales/en/common.json
@@ -0,0 +1,98 @@
+{
+  "firstName": "First Name",
+  "lastName": "Last Name",
+  "searchByName": "Search By Name",
+  "loading": "Loading...",
+  "endOfResults": "End of results",
+  "noResultsFoundFor": "No results found for ",
+  "edit": "Edit",
+  "admins": "Admins",
+  "admin": "ADMIN",
+  "user": "USER",
+  "superAdmin": "SUPERADMIN",
+  "members": "Members",
+  "logout": "Logout",
+  "login": "Login",
+  "register": "Register",
+  "menu": "Menu",
+  "settings": "Settings",
+  "users": "Users",
+  "requests": "Requests",
+  "OR": "OR",
+  "cancel": "Cancel",
+  "close": "Close",
+  "create": "Create",
+  "delete": "Delete",
+  "done": "Done",
+  "yes": "Yes",
+  "no": "No",
+  "filter": "Filter",
+  "search": "Search",
+  "description": "Description",
+  "saveChanges": "Save Changes",
+  "gender": "Gender",
+  "resetChanges": "Reset Changes",
+  "displayImage": "Display Image",
+  "enterEmail": "Enter Email",
+  "emailAddress": "Email Address",
+  "email": "Email",
+  "name": "Name",
+  "desc": "Description",
+  "enterPassword": "Enter Password",
+  "password": "Password",
+  "confirmPassword": "Confirm Password",
+  "forgotPassword": "Forgot Password ?",
+  "talawaAdminPortal": "Talawa Admin Portal",
+  "address": "Address",
+  "location": "Location",
+  "enterLocation": "Enter Location",
+  "joined": "Joined",
+  "startDate": "Start Date",
+  "endDate": "End Date",
+  "startTime": "Start Time",
+  "endTime": "End Time",
+  "My Organizations": "My Organizations",
+  "Dashboard": "Dashboard",
+  "People": "People",
+  "Events": "Events",
+  "Venues": "Venues",
+  "Action Items": "Action Items",
+  "Posts": "Posts",
+  "Block/Unblock": "Block/Unblock",
+  "Advertisement": "Advertisement",
+  "Funds": "Funds",
+  "Membership Requests": "Membership Requests",
+  "Plugins": "Plugins",
+  "Plugin Store": "Plugin Store",
+  "Settings": "Settings",
+  "createdOn": "Created On",
+  "createdBy": "Created By",
+  "usersRole": "User's Role",
+  "changeRole": "Change Role",
+  "action": "Action",
+  "removeUser": "Remove User",
+  "remove": "Remove",
+  "viewProfile": "View Profile",
+  "profile": "Profile",
+  "noFiltersApplied": "No filters applied",
+  "manage": "Manage",
+  "searchResultsFor": "Search results for {{text}}",
+  "none": "None",
+  "Donate": "Donate",
+  "addedSuccessfully": "{{item}} added Successfully",
+  "updatedSuccessfully": "{{item}} updated Successfully",
+  "removedSuccessfully": "{{item}} removed Successfully",
+  "successfullyUpdated": "Successfully Updated",
+  "sessionWarning": "Your session will expire soon due to inactivity. Please interact with the page to extend your session.",
+  "sessionLogOut": "Your session has expired due to inactivity. Please log in again to continue.",
+  "sort": "Sort",
+  "all": "All",
+  "active": "Active",
+  "disabled": "Disabled",
+  "pending": "Pending",
+  "completed": "Completed",
+  "late": "Late",
+  "createdLatest": "Created Latest",
+  "createdEarliest": "Created Earliest",
+  "searchBy": "Search by {{item}}"
+}
diff --git a/public/locales/en/errors.json b/public/locales/en/errors.json
new file mode 100644
index 0000000000..752c0db750
--- /dev/null
+++ b/public/locales/en/errors.json
@@ -0,0 +1,11 @@
+{
+  "talawaApiUnavailable": "Talawa-API service is unavailable!. Is it running? Check your network connectivity too.",
+  "notFound": "Not found",
+  "unknownError": "An unknown error occurred. Please try again later. {{msg}}",
+  "notAuthorised": "Sorry! you are not Authorised!",
+  "errorSendingMail": "Error sending mail",
+  "emailNotRegistered": "Email not registered",
+  "notFoundMsg": "Oops! The Page you requested was not found!",
+  "errorOccurredCouldntCreate": "An error occurred. Couldn't create {{entity}}",
+  "errorLoading": "Error occured while loading {{entity}} data"
+}
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
new file mode 100644
index 0000000000..5da5ef49ee
--- /dev/null
+++ b/public/locales/en/translation.json
@@ -0,0 +1,1483 @@
+{
+  "leaderboard": {
+    "title": "Leaderboard",
+    "searchByVolunteer": "Search By Volunteer",
+    "mostHours": "Most Hours",
+    "leastHours": "Least Hours",
+    "timeFrame": "Time Frame",
+    "allTime": "All Time",
+    "weekly": "This Week",
+    "monthly": "This Month",
+    "yearly": "This Year",
+    "noVolunteers": "No Volunteers Found!"
+  },
+  "loginPage": {
+    "title": "Talawa Admin",
+    "fromPalisadoes": "An open source application by Palisadoes Foundation volunteers",
+    "userLogin": "User Login",
+    "atleast_8_char_long": "Atleast 8 Character long",
+    "atleast_6_char_long": "Atleast 6 Character long",
+    "firstName_invalid": "First name should contain only lower and upper case letters",
+    "lastName_invalid": "Last name should contain only lower and upper case letters",
+    "password_invalid": "Password should contain atleast one lowercase letter, one uppercase letter, one numeric value and one special character",
+    "email_invalid": "Email should have atleast 8 characters",
+    "Password_and_Confirm_password_mismatches.": "Password and Confirm password mismatches.",
+    "doNotOwnAnAccount": "Do not own an account?",
+    "captchaError": "Captcha Error!",
+    "Please_check_the_captcha": "Please, check the captcha.",
+    "Something_went_wrong": "Something went wrong, Please try after sometime.",
+    "passwordMismatches": "Password and Confirm password mismatches.",
+    "fillCorrectly": "Fill all the Details Correctly.",
+    "successfullyRegistered": "Successfully Registered. Please wait until you will be approved.",
+    "lowercase_check": "Atleast one lowercase letter",
+    "uppercase_check": "Atleast one uppercase letter",
+    "numeric_value_check": "Atleaset one numeric value",
+    "special_char_check": "Atleast one special character",
+    "selectOrg": "Select an organization",
+    "afterRegister": "Successfully registered. Please wait for admin to approve your request.",
+    "talawa_portal": "talawa_portal",
+    "login": "login",
+    "register": "register",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "email": "email",
+    "password": "password",
+    "confirmPassword": "confirmPassword",
+    "forgotPassword": "forgotPassword",
+    "enterEmail": "enterEmail",
+    "enterPassword": "enterPassword",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "notAuthorised": "notAuthorised",
+    "notFound": "notFound",
+    "OR": "OR",
+    "admin": "admin",
+    "user": "user",
+    "loading": "loading"
+  },
+  "userLoginPage": {
+    "title": "Talawa Admin",
+    "fromPalisadoes": "An open source application by Palisadoes Foundation volunteers",
+    "atleast_8_char_long": "Atleast 8 Character long",
+    "Password_and_Confirm_password_mismatches.": "Password and Confirm password mismatches.",
+    "doNotOwnAnAccount": "Do not own an account?",
+    "captchaError": "Captcha Error!",
+    "Please_check_the_captcha": "Please, check the captcha.",
+    "Something_went_wrong": "Something went wrong, Please try after sometime.",
+    "passwordMismatches": "Password and Confirm password mismatches.",
+    "fillCorrectly": "Fill all the Details Correctly.",
+    "successfullyRegistered": "Successfully Registered. Please wait until you will be approved.",
+    "userLogin": "User Login",
+    "afterRegister": "Successfully registered. Please wait for admin to approve your request.",
+    "selectOrg": "Select an organization",
+    "talawa_portal": "talawa_portal",
+    "login": "login",
+    "register": "register",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "email": "email",
+    "password": "password",
+    "confirmPassword": "confirmPassword",
+    "forgotPassword": "forgotPassword",
+    "enterEmail": "enterEmail",
+    "enterPassword": "enterPassword",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "notAuthorised": "notAuthorised",
+    "notFound": "notFound",
+    "OR": "OR",
+    "loading": "loading"
+  },
+  "latestEvents": {
+    "eventCardTitle": "Upcoming Events",
+    "eventCardSeeAll": "See All",
+    "noEvents": "No Upcoming Events"
+  },
+  "latestPosts": {
+    "latestPostsTitle": "Latest Posts",
+    "seeAllLink": "See All",
+    "noPostsCreated": "No Posts Created"
+  },
+  "listNavbar": {
+    "roles": "Roles",
+    "talawa_portal": "talawa_portal",
+    "requests": "requests",
+    "logout": "logout"
+  },
+  "leftDrawer": {
+    "my organizations": "My Organizations",
+    "requests": "Membership Requests",
+    "communityProfile": "Community Profile",
+    "talawaAdminPortal": "talawaAdminPortal",
+    "menu": "menu",
+    "users": "users",
+    "logout": "logout"
+  },
+  "leftDrawerOrg": {
+    "Dashboard": "Dashboard",
+    "People": "People",
+    "Events": "Events",
+    "Contributions": "Contributions",
+    "Posts": "Posts",
+    "Block/Unblock": "Block/Unblock",
+    "Plugins": "Plugins",
+    "Plugin Store": "Plugin Store",
+    "Advertisement": "Advertisements",
+    "allOrganizations": "All Organizations",
+    "yourOrganization": "Your Organization",
+    "notification": "Notification",
+    "language": "Language",
+    "notifications": "Notifications",
+    "spamsThe": "spams the",
+    "group": "group",
+    "noNotifications": "No Notifications",
+    "talawaAdminPortal": "talawaAdminPortal",
+    "menu": "menu",
+    "talawa_portal": "talawa_portal",
+    "settings": "settings",
+    "logout": "logout",
+    "close": "close"
+  },
+  "orgList": {
+    "title": "Talawa Organizations",
+    "you": "You",
+    "designation": "Designation",
+    "my organizations": "My Organizations",
+    "createOrganization": "Create Organization",
+    "createSampleOrganization": "Create Sample Organization",
+    "city": "City",
+    "countryCode": "Country Code",
+    "dependentLocality": "Dependent Locality",
+    "line1": "Line 1",
+    "line2": "Line 2",
+    "postalCode": "Postal Code",
+    "sortingCode": "Sorting code",
+    "state": "State / Province",
+    "userRegistrationRequired": "User Registration Required",
+    "visibleInSearch": "Visible In Search",
+    "enterName": "Enter Name",
+    "sort": "Sort",
+    "Latest": "Latest",
+    "Earliest": "Earliest",
+    "noOrgErrorTitle": "Organizations Not Found",
+    "sampleOrgDuplicate": "Only one sample organization allowed",
+    "noOrgErrorDescription": "Please create an organization through dashboard",
+    "manageFeatures": "Manage Features",
+    "manageFeaturesInfo": "Creation Successful ! Please select features that you want to enale for this organization from the plugin store.",
+    "goToStore": "Go to Plugin Store",
+    "enableEverything": "Enable Everything",
+    "sampleOrgSuccess": "Sample Organization Successfully Created",
+    "name": "name",
+    "email": "email",
+    "searchByName": "searchByName",
+    "description": "description",
+    "location": "location",
+    "address": "address",
+    "displayImage": "displayImage",
+    "filter": "filter",
+    "cancel": "cancel",
+    "endOfResults": "endOfResults",
+    "noResultsFoundFor": "noResultsFoundFor",
+    "OR": "OR"
+  },
+  "orgListCard": {
+    "manage": "Manage",
+    "sampleOrganization": "Sample Organization",
+    "admins": "admins",
+    "members": "members"
+  },
+  "paginationList": {
+    "rowsPerPage": "rows per page",
+    "all": "All"
+  },
+  "requests": {
+    "title": "Membership Requests",
+    "sl_no": "Sl. No.",
+    "accept": "Accept",
+    "reject": "Reject",
+    "searchRequests": "Search membership requests",
+    "noOrgError": "Organizations not found, please create an organization through dashboard",
+    "noRequestsFound": "No Membership Requests Found",
+    "acceptedSuccessfully": "Request accepted successfully",
+    "rejectedSuccessfully": "Request rejected successfully",
+    "noOrgErrorTitle": "Organizations Not Found",
+    "noOrgErrorDescription": "Please create an organization through dashboard",
+    "name": "name",
+    "email": "email",
+    "endOfResults": "endOfResults",
+    "noResultsFoundFor": "noResultsFoundFor"
+  },
+  "users": {
+    "title": "Talawa Roles",
+    "joined_organizations": "Joined Organizations",
+    "blocked_organizations": "Blocked Organizations",
+    "orgJoinedBy": "Organizations Joined By",
+    "orgThatBlocked": "Organizations That Blocked",
+    "hasNotJoinedAnyOrg": "has not joined any organization",
+    "isNotBlockedByAnyOrg": "is not blocked by any organization",
+    "searchByOrgName": "Search By Organization Name",
+    "view": "View",
+    "enterName": "Enter Name",
+    "loadingUsers": "Loading Users...",
+    "noUserFound": "No User Found",
+    "sort": "Sort",
+    "Newest": "Newest First",
+    "Oldest": "Oldest First",
+    "noOrgError": "Organizations not found, please create an organization through dashboard",
+    "roleUpdated": "Role Updated.",
+    "joinNow": "Join Now",
+    "visit": "Visit",
+    "withdraw": "Widthdraw",
+    "removeUserFrom": "Remove User from {{org}}",
+    "removeConfirmation": "Are you sure you want to remove '{{name}}' from organization '{{org}}'?",
+    "searchByName": "searchByName",
+    "users": "users",
+    "name": "name",
+    "email": "email",
+    "endOfResults": "endOfResults",
+    "admin": "admin",
+    "superAdmin": "superAdmin",
+    "user": "user",
+    "filter": "filter",
+    "noResultsFoundFor": "noResultsFoundFor",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "cancel": "cancel",
+    "admins": "admins",
+    "members": "members",
+    "orgJoined": "orgJoined",
+    "MembershipRequestSent": "MembershipRequestSent",
+    "AlreadyJoined": "AlreadyJoined",
+    "errorOccured": "errorOccured"
+  },
+  "communityProfile": {
+    "title": "Community Profile",
+    "editProfile": "Edit Profile",
+    "communityProfileInfo": "These details will appear on the login/signup screen for you and your community members",
+    "communityName": "Community Name",
+    "wesiteLink": "Website Link",
+    "logo": "Logo",
+    "social": "Social Media Links",
+    "url": "Enter url",
+    "profileChangedMsg": "Successfully updated the Profile Details.",
+    "resetData": "Successfully reset the Profile Details."
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "about": "About",
+    "deleteThisOrganization": "Delete This Organization",
+    "statistics": "Statistics",
+    "posts": "Posts",
+    "events": "Events",
+    "blockedUsers": "Blocked Users",
+    "viewAll": "View All",
+    "upcomingEvents": "Upcoming Events",
+    "noUpcomingEvents": "No Upcoming Events",
+    "latestPosts": "Latest Posts",
+    "noPostsPresent": "No Posts Present",
+    "membershipRequests": "Membership requests",
+    "noMembershipRequests": "No Membership requests present",
+    "location": "location",
+    "members": "members",
+    "admins": "admins",
+    "requests": "requests",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "volunteerRankings": "Volunteer Rankings",
+    "noVolunteers": "No Volunteers Found!"
+  },
+  "organizationPeople": {
+    "title": "Talawa Members",
+    "filterByName": "Filter by Name",
+    "filterByLocation": "Filter by Location",
+    "filterByEvent": "Filter by Event",
+    "searchName": "Enter Name",
+    "searchevent": "Enter Event",
+    "searchFullName": "Enter Full Name",
+    "people": "People",
+    "sort": "Search by Role",
+    "actions": "Actions",
+    "addMembers": "Add Members",
+    "existingUser": "Existing User",
+    "newUser": "New User",
+    "enterFirstName": "Enter your first name",
+    "enterLastName": "Enter your last name",
+    "enterConfirmPassword": "Enter Password to confirm",
+    "organization": "Organization",
+    "invalidDetailsMessage": "Please enter valid details.",
+    "members": "members",
+    "admins": "admins",
+    "users": "users",
+    "searchFirstName": "searchFirstName",
+    "searchLastName": "searchLastName",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "emailAddress": "emailAddress",
+    "enterEmail": "enterEmail",
+    "password": "password",
+    "enterPassword": "enterPassword",
+    "confirmPassword": "confirmPassword",
+    "create": "create",
+    "cancel": "cancel",
+    "user": "user",
+    "profile": "profile"
+  },
+  "organizationTags": {
+    "title": "Organization Tags",
+    "createTag": "Create a new tag",
+    "manageTag": "Manage",
+    "editTag": "Edit",
+    "removeTag": "Remove",
+    "tagDetails": "Tag Details",
+    "tagName": "Name",
+    "tagType": "Type",
+    "tagNamePlaceholder": "Write the name of the tag",
+    "tagCreationSuccess": "New tag created successfully",
+    "tagUpdationSuccess": "Tag updated successfully",
+    "tagRemovalSuccess": "Tag deleted successfully",
+    "noTagsFound": "No tags found",
+    "removeUserTag": "Delete Tag",
+    "removeUserTagMessage": "Do you want to delete this tag?",
+    "addChildTag": "Add a Sub Tag",
+    "enterTagName": "Enter Tag Name"
+  },
+  "manageTag": {
+    "title": "Tag Details",
+    "addPeopleToTag": "Add People to tag",
+    "viewProfile": "View",
+    "noAssignedMembersFound": "No one assigned",
+    "unassignUserTag": "Unassign Tag",
+    "unassignUserTagMessage": "Do you want to remove the tag from this user?",
+    "successfullyUnassigned": "Tag unassigned from user",
+    "addPeople": "Add People",
+    "add": "Add",
+    "subTags": "Sub Tags",
+    "successfullyAssignedToPeople": "Tag assigned successfully",
+    "errorOccurredWhileLoadingMembers": "Error occured while loading members",
+    "userName": "User Name",
+    "actions": "Actions",
+    "noOneSelected": "No One Selected",
+    "assignToTags": "Assign to Tags",
+    "removeFromTags": "Remove from Tags",
+    "assign": "Assign",
+    "remove": "Remove",
+    "successfullyAssignedToTags": "Successfully Assigned to Tags",
+    "successfullyRemovedFromTags": "Successfully Removed from Tags",
+    "errorOccurredWhileLoadingOrganizationUserTags": "Error occurred while loading organization tags",
+    "errorOccurredWhileLoadingSubTags": "Error occurred while loading subTags tags",
+    "removeUserTag": "Delete Tag",
+    "removeUserTagMessage": "Do you want to delete this tag? It delete all the sub tags and all the associations.",
+    "tagDetails": "Tag Details",
+    "tagName": "Name",
+    "tagUpdationSuccess": "Tag updated successfully",
+    "tagRemovalSuccess": "Tag deleted successfully",
+    "noTagSelected": "No Tag Selected",
+    "changeNameToEdit": "Change the name to make an update",
+    "selectTag": "Select Tag",
+    "collapse": "Collapse",
+    "expand": "Expand",
+    "tagNamePlaceholder": "Write the name of the tag",
+    "allTags": "All Tags",
+    "noMoreMembersFound": "No more members found"
+  },
+  "userListCard": {
+    "addAdmin": "Add Admin",
+    "addedAsAdmin": "User is added as admin.",
+    "joined": "joined",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "orgAdminListCard": {
+    "remove": "Remove",
+    "removeAdmin": "Remove Admin",
+    "removeAdminMsg": "Do you want to remove this admin?",
+    "adminRemoved": "The admin is removed.",
+    "joined": "joined",
+    "no": "no",
+    "yes": "yes",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "orgPeopleListCard": {
+    "remove": "Remove",
+    "removeMember": "Remove Member",
+    "removeMemberMsg": "Do you want to remove this member?",
+    "memberRemoved": "The Member is removed",
+    "joined": "joined",
+    "no": "no",
+    "yes": "yes",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "organizationEvents": {
+    "title": "Events",
+    "filterByTitle": "Filter by Title",
+    "filterByLocation": "Filter by Location",
+    "filterByDescription": "Filter by Description",
+    "addEvent": "Add Event",
+    "eventDetails": "Event Details",
+    "eventTitle": "Title",
+    "allDay": "All Day",
+    "recurringEvent": "Recurring Event",
+    "isPublic": "Is Public",
+    "isRegistrable": "Is Registrable",
+    "createEvent": "Create Event",
+    "enterFilter": "Enter Filter",
+    "enterTitle": "Enter Title",
+    "enterDescrip": "Enter Description",
+    "searchEventName": "Search Event Name",
+    "searchMemberName": "Search Member Name",
+    "eventType": "Event Type",
+    "eventCreated": "Congratulations! The Event is created.",
+    "customRecurrence": "Custom Recurrence",
+    "repeatsEvery": "Repeats Every",
+    "repeatsOn": "Repeats On",
+    "ends": "Ends",
+    "never": "Never",
+    "on": "On",
+    "after": "After",
+    "occurences": "occurences",
+    "startTime": "startTime",
+    "endTime": "endTime",
+    "eventLocation": "eventLocation",
+    "events": "events",
+    "description": "description",
+    "location": "location",
+    "startDate": "startDate",
+    "endDate": "endDate",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "done": "done"
+  },
+  "organizationActionItems": {
+    "actionItemCategory": "Action Item Category",
+    "actionItemDetails": "Action Item Details",
+    "actionItemCompleted": "Action Item Completed",
+    "assignee": "Assignee",
+    "assigner": "Assigner",
+    "assignmentDate": "Assignment Date",
+    "active": "Active",
+    "clearFilters": "Clear Filters",
+    "completionDate": "Completion Date",
+    "createActionItem": "Create Action Item",
+    "deleteActionItem": "Delete Action Item",
+    "deleteActionItemMsg": "Do you want to remove this action item?",
+    "details": "Details",
+    "dueDate": "Due Date",
+    "earliest": "Earliest",
+    "editActionItem": "Edit Action Item",
+    "isCompleted": "Completed",
+    "latest": "Latest",
+    "makeActive": "Active",
+    "noActionItems": "No Action Items",
+    "options": "Options",
+    "preCompletionNotes": "Notes",
+    "actionItemActive": "Active",
+    "markCompletion": "Mark Completion",
+    "actionItemStatus": "Action Item Status",
+    "postCompletionNotes": "Completion Notes",
+    "selectActionItemCategory": "Select an action item category",
+    "selectAssignee": "Select an assignee",
+    "status": "Status",
+    "successfulCreation": "Action Item created successfully",
+    "successfulUpdation": "Action Item updated successfully",
+    "successfulDeletion": "Action Item deleted successfully",
+    "title": "Action Items",
+    "category": "Category",
+    "allottedHours": "Allotted Hours",
+    "latestDueDate": "Latest Due Date",
+    "earliestDueDate": "Earliest Due Date",
+    "updateActionItem": "Update Action Item",
+    "noneUpdated": "None of the fields were updated",
+    "updateStatusMsg": "Are you sure you want to mark this action item as pending?",
+    "close": "close",
+    "eventActionItems": "eventActionItems",
+    "no": "no",
+    "yes": "yes",
+    "individuals": "Individuals",
+    "groups": "Groups",
+    "assignTo": "Assign To",
+    "volunteers": "Volunteers",
+    "volunteerGroups": "Volunteer Groups"
+  },
+  "organizationAgendaCategory": {
+    "agendaCategoryDetails": "Agenda Category Details",
+    "updateAgendaCategory": "Update Agenda Category",
+    "title": "Agenda Categories",
+    "name": "Category",
+    "description": "Description",
+    "createdBy": "Created By",
+    "options": "Options",
+    "createAgendaCategory": "Create Agenda Category",
+    "noAgendaCategories": "No Agenda Categories",
+    "update": "Update",
+    "agendaCategoryCreated": "Agenda Category created successfully",
+    "agendaCategoryUpdated": "Agenda Category updated successfully",
+    "agendaCategoryDeleted": "Agenda Category deleted successfully",
+    "deleteAgendaCategory": "Delete Agenda Category",
+    "deleteAgendaCategoryMsg": "Do you want to remove this agenda category?"
+  },
+  "agendaItems": {
+    "agendaItemDetails": "Agenda Item Details",
+    "updateAgendaItem": "Update Agenda Item",
+    "title": "Title",
+    "enterTitle": "Enter Title",
+    "sequence": "Sequence",
+    "description": "Description",
+    "enterDescription": "Enter Description",
+    "category": "Agenda Category",
+    "attachments": "Attachments",
+    "attachmentLimit": "Add any image file or video file upto 10MB",
+    "fileSizeExceedsLimit": "File size exceeds the limit which is 10MB",
+    "urls": "URLs",
+    "url": "add link to URL",
+    "enterUrl": "https://example.com",
+    "invalidUrl": "Please enter a valid URL",
+    "link": "Link",
+    "createdBy": "Created By",
+    "regular": "Regular",
+    "note": "Note",
+    "duration": "Duration",
+    "enterDuration": "mm:ss",
+    "options": "Options",
+    "createAgendaItem": "Create Agenda Item",
+    "noAgendaItems": "No Agenda Items",
+    "selectAgendaItemCategory": "Select an agenda item category",
+    "update": "Update",
+    "delete": "Delete",
+    "agendaItemCreated": "Agenda Item created successfully",
+    "agendaItemUpdated": "Agenda Item updated successfully",
+    "agendaItemDeleted": "Agenda Item deleted successfully",
+    "deleteAgendaItem": "Delete Agenda Item",
+    "deleteAgendaItemMsg": "Do you want to remove this agenda item?"
+  },
+  "eventListCard": {
+    "deleteEvent": "Delete Event",
+    "deleteEventMsg": "Do you want to remove this event?",
+    "editEvent": "Edit Event",
+    "eventTitle": "Title",
+    "alreadyRegistered": "Already registered",
+    "allDay": "All Day",
+    "recurringEvent": "Recurring Event",
+    "isPublic": "Is Public",
+    "isRegistrable": "Is Registrable",
+    "updatePost": "Update Post",
+    "eventDetails": "Event Details",
+    "eventDeleted": "Event deleted successfully.",
+    "eventUpdated": "Event updated successfully.",
+    "thisInstance": "This Instance",
+    "thisAndFollowingInstances": "This & Following Instances",
+    "allInstances": "All Instances",
+    "customRecurrence": "Custom Recurrence",
+    "repeatsEvery": "Repeats Every",
+    "repeatsOn": "Repeats On",
+    "ends": "Ends",
+    "never": "Never",
+    "on": "On",
+    "after": "After",
+    "occurences": "occurences",
+    "startTime": "startTime",
+    "endTime": "endTime",
+    "location": "location",
+    "no": "no",
+    "yes": "yes",
+    "description": "description",
+    "startDate": "startDate",
+    "endDate": "endDate",
+    "registerEvent": "registerEvent",
+    "close": "close",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "done": "done"
+  },
+  "funds": {
+    "title": "Funds",
+    "createFund": "Create Fund",
+    "fundName": "Fund Name",
+    "fundId": "Fund (Reference) ID",
+    "taxDeductible": "Tax Deductible",
+    "default": "Default",
+    "archived": "Archived",
+    "fundCreate": "Create Fund",
+    "fundUpdate": "Update Fund",
+    "fundDelete": "Delete Fund",
+    "noFundsFound": "No Funds Found",
+    "createdBy": "Created By",
+    "createdOn": "Created On",
+    "status": "Status",
+    "fundCreated": "Fund created successfully",
+    "fundUpdated": "Fund updated successfully",
+    "fundDeleted": "Fund deleted successfully",
+    "deleteFundMsg": "Are you sure you want to delete this fund?",
+    "createdLatest": "Created Latest",
+    "createdEarliest": "Created Earliest",
+    "viewCampaigns": "View Campaigns",
+    "searchByName": "searchByName"
+  },
+  "fundCampaign": {
+    "title": "Fundraising Campaigns",
+    "campaignName": "Campaign Name",
+    "campaignOptions": "Options",
+    "fundingGoal": "Funding Goal",
+    "addCampaign": "Add Campaign",
+    "createdCampaign": "Campaign created successfully",
+    "updatedCampaign": "Campaign updated successfully",
+    "deletedCampaign": "Campaign deleted successfully",
+    "deleteCampaignMsg": "Are you sure you want to delete this campaign?",
+    "noCampaigns": "No Campaigns Found",
+    "createCampaign": "Create Campaign",
+    "updateCampaign": "Update Campaign",
+    "deleteCampaign": "Delete Campaign",
+    "currency": "Currency",
+    "selectCurrency": "Select Currency",
+    "searchFullName": "Search By Name",
+    "viewPledges": "View Pledges",
+    "noCampaignsFound": "No Campaigns Found",
+    "latestEndDate": "Latest End Date",
+    "earliestEndDate": "Earliest End Date",
+    "lowestGoal": "Lowest Goal",
+    "highestGoal": "Highest Goal"
+  },
+  "pledges": {
+    "title": "Fund Campaign Pledges",
+    "pledgeAmount": "Pledge Amount",
+    "pledgeOptions": "Options",
+    "pledgeCreated": "Pledge created successfully",
+    "pledgeUpdated": "Pledge updated successfully",
+    "pledgeDeleted": "Pledge deleted successfully",
+    "addPledge": "Add Pledge",
+    "createPledge": "Create Pledge",
+    "currency": "Currency",
+    "selectCurrency": "Select Currency",
+    "updatePledge": "Update Pledge",
+    "deletePledge": "Delete Pledge",
+    "amount": "Amount",
+    "editPledge": "Edit Pledge",
+    "deletePledgeMsg": "Are you sure you want to delete this pledge?",
+    "noPledges": "No Pledges Found",
+    "searchPledger": "Search By Pledgers",
+    "highestAmount": "Highest Amount",
+    "lowestAmount": "Lowest Amount",
+    "latestEndDate": "Latest End Date",
+    "earliestEndDate": "Earliest End Date",
+    "campaigns": "Campaigns",
+    "pledges": "Pledges",
+    "endsOn": "Ends on",
+    "raisedAmount": "Raised amount ",
+    "pledgedAmount": "Pledged amount",
+    "startDate": "startDate",
+    "endDate": "endDate"
+  },
+  "orgPost": {
+    "title": "Posts",
+    "searchPost": "Search Post",
+    "posts": "Posts",
+    "createPost": "Create Post",
+    "postDetails": "Post Details",
+    "postTitle1": "Write title of the post",
+    "postTitle": "Title",
+    "addMedia": "Upload Media",
+    "information": "Information",
+    "information1": "Write information of the post",
+    "addPost": "Add Post",
+    "searchTitle": "Search By Title",
+    "searchText": "Search By Text",
+    "ptitle": "Post Title",
+    "postDes": "What do you to talk about?",
+    "Title": "Title",
+    "Text": "Text",
+    "searchBy": "Search By",
+    "Oldest": "Oldest First",
+    "Latest": "Latest First",
+    "sortPost": "Sort Post",
+    "tag": " Your browser does not support the video tag",
+    "postCreatedSuccess": "Congratulations! You have Posted Something.",
+    "pinPost": "Pin post",
+    "Next": "Next Page",
+    "Previous": "Previous Page",
+    "cancel": "cancel"
+  },
+  "postNotFound": {
+    "post": "Post",
+    "not found!": "Not Found!",
+    "organization": "Organization",
+    "post not found!": "Post Not Found!",
+    "organization not found!": "Organization Not Found!"
+  },
+  "userNotFound": {
+    "not found!": "Not Found!",
+    "roles": "Roles",
+    "user not found!": "User Not Found!",
+    "member not found!": "Member Not Found!",
+    "admin not found!": "Admin Not Found!",
+    "roles not found!": "Roles Not Found!",
+    "user": "user"
+  },
+  "orgPostCard": {
+    "author": "Author",
+    "imageURL": "Image URL",
+    "videoURL": "Video URL",
+    "deletePost": "Delete Post",
+    "deletePostMsg": "Do you want to remove this post?",
+    "editPost": "Edit Post",
+    "postTitle": "Title",
+    "postTitle1": "Edit title of the post",
+    "information1": "Edit information of the post",
+    "information": "Information",
+    "image": "Image",
+    "video": "Video",
+    "updatePost": "Update Post",
+    "postDeleted": "Post deleted successfully.",
+    "postUpdated": "Post Updated successfully.",
+    "tag": " Your browser does not support the video tag",
+    "pin": "Pin Post",
+    "edit": "edit",
+    "no": "no",
+    "yes": "yes",
+    "close": "close",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "blockUnblockUser": {
+    "title": "Block/Unblock User",
+    "pageName": "Block/Unblock",
+    "listOfUsers": "List of Users who spammed",
+    "block_unblock": "Block/Unblock",
+    "unblock": "UnBlock",
+    "block": "Block",
+    "orgName": "Enter Name",
+    "blockedSuccessfully": "User blocked successfully",
+    "Un-BlockedSuccessfully": "User Un-Blocked successfully",
+    "allMembers": "All Members",
+    "blockedUsers": "Blocked Users",
+    "searchByFirstName": "Search By First Name",
+    "searchByLastName": "Search By Last Name",
+    "noSpammerFound": "No spammer found",
+    "searchByName": "searchByName",
+    "name": "name",
+    "email": "email",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "noResultsFoundFor": "noResultsFoundFor"
+  },
+  "eventManagement": {
+    "title": "Event Management Dashboard",
+    "dashboard": "Dashboard",
+    "registrants": "Registrants",
+    "attendance": "Attendance",
+    "actions": "Actions",
+    "agendas": "Agendas",
+    "statistics": "Statistics",
+    "to": "TO",
+    "volunteers": "Volunteers"
+  },
+  "eventAttendance": {
+    "historical_statistics": "Historical Statistics",
+    "Search member": "Search member",
+    "Member Name": "Member Name",
+    "Status": "Status",
+    "Events Attended": "Events Attended",
+    "Task Assigned": "Task Assigned",
+    "Member": "Member",
+    "Admin": "Admin",
+    "loading": "Loading...",
+    "noAttendees": "Attendees not Found"
+  },
+  "onSpotAttendee": {
+    "title": "On-spot Attendee",
+    "enterFirstName": "Enter First Name",
+    "enterLastName": "Enter Last Name",
+    "enterEmail": "Enter Email",
+    "enterPhoneNo": "Enter Phone Number",
+    "selectGender": "Select Gender",
+    "invalidDetailsMessage": "Please fill in all required fields",
+    "orgIdMissing": "Organization ID is missing. Please try again.",
+    "attendeeAddedSuccess": "Attendee added successfully!",
+    "addAttendee": "Add",
+    "phoneNumber": "Phone No.",
+    "addingAttendee": "Adding...",
+    "male": "Male",
+    "female": "Female",
+    "other": "Other"
+  },
+  "forgotPassword": {
+    "title": "Talawa Forgot Password",
+    "registeredEmail": "Registered Email",
+    "getOtp": "Get OTP",
+    "enterOtp": "Enter OTP",
+    "enterNewPassword": "Enter New Password",
+    "cofirmNewPassword": "Confirm New Password",
+    "changePassword": "Change Password",
+    "backToLogin": "Back to Login",
+    "userOtp": "e.g. 12345",
+    "emailNotRegistered": "Email is not registered.",
+    "errorSendingMail": "Error in sending mail.",
+    "passwordMismatches": "Password and Confirm password mismatches.",
+    "passwordChanges": "Password changes successfully.",
+    "OTPsent": "OTP is sent to your registered email.",
+    "forgotPassword": "forgotPassword",
+    "password": "password",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "pageNotFound": {
+    "title": "404 Not Found",
+    "talawaAdmin": "Talawa Admin",
+    "talawaUser": "Talawa User",
+    "404": "404",
+    "notFoundMsg": "Oops! The Page you requested was not found!",
+    "backToHome": "Back to Home"
+  },
+  "orgContribution": {
+    "title": "Talawa Contributions",
+    "filterByName": "Filter by Name",
+    "filterByTransId": "Filter by Trans. ID",
+    "recentStats": "Recent Stats",
+    "contribution": "Contribution",
+    "orgname": "Enter Name",
+    "searchtransaction": "Enter Transaction ID"
+  },
+  "contriStats": {
+    "recentContribution": "Recent Contribution",
+    "highestContribution": "Highest Contribution",
+    "totalContribution": "Total Contribution"
+  },
+  "orgContriCards": {
+    "date": "Date",
+    "transactionId": "Transaction ID",
+    "amount": "Amount"
+  },
+  "orgSettings": {
+    "title": "Settings",
+    "general": "General",
+    "actionItemCategories": "Action Item Categories",
+    "updateOrganization": "Update Organization",
+    "seeRequest": "See Request",
+    "noData": "No data",
+    "otherSettings": "Other Settings",
+    "changeLanguage": "Change Language",
+    "manageCustomFields": "Manage Custom Fields",
+    "agendaItemCategories": "Agenda Item Categories"
+  },
+  "deleteOrg": {
+    "deleteOrganization": "Delete Organization",
+    "deleteSampleOrganization": "Delete Sample Organization",
+    "deleteMsg": "Do you want to delete this organization?",
+    "confirmDelete": "Confirm Delete",
+    "longDelOrgMsg": "By clicking on Delete Organization button the organization will be permanently deleted along with its events, tags and all related data.",
+    "successfullyDeletedSampleOrganization": "Successfully deleted sample Organization",
+    "cancel": "cancel"
+  },
+  "userUpdate": {
+    "appLanguageCode": "Default Language",
+    "userType": "User Type",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "email": "email",
+    "password": "password",
+    "admin": "admin",
+    "superAdmin": "superAdmin",
+    "displayImage": "displayImage",
+    "saveChanges": "saveChanges",
+    "cancel": "cancel"
+  },
+  "userPasswordUpdate": {
+    "previousPassword": "Previous Password",
+    "newPassword": "New Password",
+    "confirmNewPassword": "Confirm New Password",
+    "passCantBeEmpty": "Password can't be empty",
+    "passNoMatch": "New and Confirm password do not match.",
+    "saveChanges": "saveChanges",
+    "cancel": "cancel"
+  },
+  "orgDelete": {
+    "deleteOrg": "Delete Org"
+  },
+  "membershipRequest": {
+    "accept": "Accept",
+    "reject": "Reject",
+    "memberAdded": "it is accepted",
+    "joined": "joined",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "orgUpdate": {
+    "city": "City",
+    "countryCode": "Country Code",
+    "line1": "Line 1",
+    "line2": "Line 2",
+    "postalCode": "Postal Code",
+    "dependentLocality": "Dependent Locality",
+    "sortingCode": "Sorting code",
+    "state": "State / Province",
+    "userRegistrationRequired": "User Registration Required",
+    "isVisibleInSearch": "Visible in Search",
+    "enterNameOrganization": "Enter Organization Name",
+    "successfulUpdated": "Organization updated successfully",
+    "name": "name",
+    "description": "description",
+    "location": "location",
+    "address": "address",
+    "displayImage": "displayImage",
+    "saveChanges": "saveChanges",
+    "cancel": "cancel",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "addOnRegister": {
+    "addNew": "Add New",
+    "addPlugin": "Add Plugin",
+    "pluginName": "Plugin Name",
+    "creatorName": "Creator Name",
+    "pluginDesc": "Plugin Description",
+    "pName": "Ex: Donations",
+    "cName": "Ex: john Doe",
+    "pDesc": "This Plugin enables UI for",
+    "close": "close",
+    "register": "register"
+  },
+  "addOnStore": {
+    "title": "Add On Store",
+    "searchName": "Ex: Donations",
+    "search": "Search",
+    "enable": "Enabled",
+    "disable": "Disabled",
+    "pHeading": "Plugins",
+    "install": "Installed",
+    "available": "Available",
+    "pMessage": "Plugin does not exists",
+    "filter": "Filters"
+  },
+  "addOnEntry": {
+    "enable": "Enabled",
+    "install": "Install",
+    "uninstall": "Uninstall",
+    "uninstallMsg": "This feature is now removed from your organization",
+    "installMsg": "This feature is now enabled in your organization"
+  },
+  "memberDetail": {
+    "title": "User Details",
+    "addAdmin": "Add Admin",
+    "noeventsAttended": "No Events Attended",
+    "alreadyIsAdmin": "Member is already an Admin",
+    "organizations": "Organizations",
+    "events": "Events",
+    "role": "Role",
+    "createdOn": "Created on",
+    "main": "Main",
+    "firstName": "First name",
+    "lastName": "Last name",
+    "language": "Language",
+    "gender": "Gender",
+    "birthDate": "Birth Date",
+    "educationGrade": "Educational Grade",
+    "employmentStatus": "Employment Status",
+    "maritalStatus": "Marital Status",
+    "phone": "Phone",
+    "countryCode": "Country Code",
+    "state": "State",
+    "city": "City",
+    "personalInfoHeading": "Personal Information",
+    "viewAll": "View All",
+    "eventsAttended": "Events Attended",
+    "contactInfoHeading": "Contact Information",
+    "actionsHeading": "Actions",
+    "personalDetailsHeading": "Profile Details",
+    "appLanguageCode": "Choose Language",
+    "deleteUser": "Delete User",
+    "pluginCreationAllowed": "Plugin creation allowed",
+    "created": "Created",
+    "adminForOrganizations": "Admin for organizations",
+    "membershipRequests": "Membership requests",
+    "adminForEvents": "Admin for events",
+    "addedAsAdmin": "User is added as admin.",
+    "userType": "User Type",
+    "email": "email",
+    "displayImage": "displayImage",
+    "address": "address",
+    "delete": "delete",
+    "saveChanges": "saveChanges",
+    "joined": "joined",
+    "talawaApiUnavailable": "talawaApiUnavailable",
+    "unassignUserTag": "Unassign Tag",
+    "unassignUserTagMessage": "Do you want to remove the tag from this user?",
+    "successfullyUnassigned": "Tag unassigned from user",
+    "tagsAssigned": "Tags Assigned",
+    "noTagsAssigned": "No Tags Assigned"
+  },
+  "people": {
+    "title": "People",
+    "searchUsers": "Search users"
+  },
+  "userLogin": {
+    "login": "Login",
+    "loginIntoYourAccount": "Login into your account",
+    "invalidDetailsMessage": "Please enter a valid email and password.",
+    "notAuthorised": "Sorry! you are not Authorised!",
+    "invalidCredentials": "Entered credentials are incorrect. Please enter valid credentials.",
+    "forgotPassword": "forgotPassword",
+    "emailAddress": "emailAddress",
+    "enterEmail": "enterEmail",
+    "password": "password",
+    "enterPassword": "enterPassword",
+    "register": "register",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "userRegister": {
+    "enterFirstName": "Enter your first name",
+    "enterLastName": "Enter your last name",
+    "enterConfirmPassword": "Enter Password to confirm",
+    "alreadyhaveAnAccount": "Already have an account?",
+    "login": "Login",
+    "afterRegister": "Successfully registered. Please wait for admin to approve your request.",
+    "passwordNotMatch": "Password doesn't match. Confirm Password and try again.",
+    "invalidDetailsMessage": "Please enter valid details.",
+    "register": "register",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "emailAddress": "emailAddress",
+    "enterEmail": "enterEmail",
+    "password": "password",
+    "enterPassword": "enterPassword",
+    "confirmPassword": "confirmPassword",
+    "talawaApiUnavailable": "talawaApiUnavailable"
+  },
+  "userNavbar": {
+    "talawa": "Talawa",
+    "home": "Home",
+    "people": "People",
+    "events": "Events",
+    "chat": "Chat",
+    "donate": "Donate",
+    "language": "Language",
+    "settings": "settings",
+    "logout": "logout",
+    "close": "close"
+  },
+  "userOrganizations": {
+    "allOrganizations": "All Organizations",
+    "joinedOrganizations": "Joined Organizations",
+    "createdOrganizations": "Created Organizations",
+    "selectOrganization": "Select an organization",
+    "searchUsers": "Search users",
+    "nothingToShow": "Nothing to show here.",
+    "organizations": "Organizations",
+    "search": "search",
+    "filter": "filter",
+    "searchByName": "searchByName",
+    "searchOrganizations": "Search Organization"
+  },
+  "userSidebarOrg": {
+    "yourOrganizations": "Your Organizations",
+    "noOrganizations": "You haven't joined any organization yet.",
+    "viewAll": "View all",
+    "talawaUserPortal": "Talawa User Portal",
+    "my organizations": "My Organizations",
+    "users": "Users",
+    "requests": "Requests",
+    "communityProfile": "Community Profile",
+    "logout": "Logout",
+    "settings": "Settings",
+    "chat": "Chat",
+    "menu": "menu"
+  },
+  "organizationSidebar": {
+    "viewAll": "View all",
+    "events": "Events",
+    "noEvents": "No Events to show",
+    "noMembers": "No Members to show",
+    "members": "members"
+  },
+  "postCard": {
+    "likes": "Likes",
+    "comments": "Comments",
+    "viewPost": "View Post",
+    "editPost": "Edit Post",
+    "postedOn": "Posted on {{date}}"
+  },
+  "home": {
+    "posts": "Posts",
+    "post": "Post",
+    "title": "Posts",
+    "textArea": "Something on your mind?",
+    "feed": "Feed",
+    "loading": "Loading",
+    "pinnedPosts": "Pinned Posts",
+    "yourFeed": "Your Feed",
+    "nothingToShowHere": "Nothing to show here",
+    "somethingOnYourMind": "Something on your mind?",
+    "addPost": "Add Post",
+    "startPost": "Start a post",
+    "media": "Media",
+    "event": "Event",
+    "article": "Article",
+    "postNowVisibleInFeed": "Post now visible in feed"
+  },
+  "settings": {
+    "eventAttended": "Events Attended",
+    "noeventsAttended": "No Events Attended",
+    "profileSettings": "Profile Settings",
+    "gender": "Gender",
+    "phoneNumber": "Phone Number",
+    "chooseFile": "Choose File",
+    "birthDate": "Birth Date",
+    "grade": "Educational Grade",
+    "empStatus": "Employment Status",
+    "maritalStatus": "Marital Status",
+    "state": "City/State",
+    "country": "Country",
+    "resetChanges": "Reset Changes",
+    "profileDetails": "Profile Details",
+    "deleteUserMessage": "By clicking on Delete User button your user will be permanently deleted along with its events, tags and all related data.",
+    "copyLink": "Copy Profile Link",
+    "deleteUser": "Delete User",
+    "otherSettings": "Other Settings",
+    "changeLanguage": "Change Language",
+    "sgender": "Select gender",
+    "gradePlaceholder": "Enter Grade",
+    "sEmpStatus": "Select employement status",
+    "female": "Female",
+    "male": "Male",
+    "employed": "Employed",
+    "other": "Other",
+    "sMaritalStatus": "Select marital status",
+    "unemployed": "Unemployed",
+    "married": "Married",
+    "single": "Single",
+    "widowed": "Widowed",
+    "divorced": "Divorced",
+    "engaged": "Engaged",
+    "separated": "Separated",
+    "grade1": "Grade 1",
+    "grade2": "Grade 2",
+    "grade3": "Grade 3",
+    "grade4": "Grade 4",
+    "grade5": "Grade 5",
+    "grade6": "Grade 6",
+    "grade7": "Grade 7",
+    "grade8": "Grade 8",
+    "grade9": "Grade 9",
+    "grade10": "Grade 10",
+    "grade11": "Grade 11",
+    "grade12": "Grade 12",
+    "graduate": "Graduate",
+    "kg": "KG",
+    "preKg": "Pre-KG",
+    "noGrade": "No Grade",
+    "fullTime": "Full Time",
+    "partTime": "Part Time",
+    "selectCountry": "Select a country",
+    "enterState": "Enter City or State",
+    "settings": "settings",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "emailAddress": "emailAddress",
+    "displayImage": "displayImage",
+    "address": "address",
+    "saveChanges": "saveChanges",
+    "joined": "joined"
+  },
+  "donate": {
+    "title": "Donations",
+    "donations": "Donations",
+    "searchDonations": "Search donations",
+    "donateForThe": "Donate for the",
+    "amount": "Amount",
+    "yourPreviousDonations": "Your Previous Donations",
+    "donate": "Donate",
+    "nothingToShow": "Nothing to show here.",
+    "success": "Donation Successful",
+    "invalidAmount": "Please enter a numerical value for the donation amount.",
+    "donationAmountDescription": "Please enter the numerical value for the donation amount.",
+    "donationOutOfRange": "Donation amount must be between {{min}} and {{max}}.",
+    "donateTo": "donateTo"
+  },
+  "userEvents": {
+    "title": "Events",
+    "nothingToShow": "Nothing to show here.",
+    "createEvent": "Create Event",
+    "recurring": "Recurring Event",
+    "listView": "List View",
+    "calendarView": "Calendar View",
+    "allDay": "All Day",
+    "eventCreated": "Event created and posted successfully.",
+    "eventDetails": "Event Details",
+    "eventTitle": "Title",
+    "enterTitle": "Enter Title",
+    "enterDescription": "Enter Description",
+    "publicEvent": "Is Public",
+    "registerable": "Is Registerable",
+    "monthlyCalendarView": "Monthly Calendar",
+    "yearlyCalendarView": "Yearly Calender",
+    "startTime": "startTime",
+    "endTime": "endTime",
+    "enterLocation": "enterLocation",
+    "search": "search",
+    "cancel": "cancel",
+    "create": "create",
+    "eventDescription": "eventDescription",
+    "eventLocation": "eventLocation",
+    "startDate": "startDate",
+    "endDate": "endDate"
+  },
+  "userEventCard": {
+    "starts": "Starts",
+    "ends": "Ends",
+    "creator": "Creator",
+    "alreadyRegistered": "Already registered",
+    "location": "location",
+    "register": "register"
+  },
+  "advertisement": {
+    "title": "Advertisements",
+    "activeAds": "Active Campaigns",
+    "archievedAds": "Completed Campaigns",
+    "pMessage": "Ads not present for this campaign.",
+    "validLink": "Link is valid",
+    "invalidLink": "Link is invalid",
+    "Rname": "Enter name of Advertisement",
+    "Rtype": "Select type of Advertisement",
+    "Rmedia": "Provide media content to be displayed",
+    "RstartDate": "Select Start Date",
+    "RendDate": "Select End Date",
+    "RClose": "Close the window",
+    "addNew": "Create new advertisement",
+    "EXname": "Ex. Cookie Shop",
+    "EXlink": "Ex. http://yourwebsite.com/photo",
+    "createAdvertisement": "Create Advertisement",
+    "deleteAdvertisement": "Delete Advertisement",
+    "deleteAdvertisementMsg": "Do you want to remove this advertisement?",
+    "view": "View",
+    "editAdvertisement": "Edit Advertisement",
+    "advertisementDeleted": "Advertisement deleted successfully.",
+    "endDateGreaterOrEqual": "End Date should be greater than or equal to Start Date",
+    "advertisementCreated": "Advertisement created successfully.",
+    "pHeading": "pHeading",
+    "delete": "delete",
+    "close": "close",
+    "no": "no",
+    "yes": "yes",
+    "edit": "edit",
+    "saveChanges": "saveChanges",
+    "endOfResults": "endOfResults"
+  },
+  "userChat": {
+    "chat": "Chat",
+    "search": "Search",
+    "messages": "Messages",
+    "contacts": "Contacts"
+  },
+  "userChatRoom": {
+    "selectContact": "Select a contact to start conversation",
+    "sendMessage": "Send Message"
+  },
+  "orgProfileField": {
+    "loading": "Loading...",
+    "noCustomField": "No custom fields available",
+    "customFieldName": "Field Name",
+    "enterCustomFieldName": "Enter Field name",
+    "customFieldType": "Field Type",
+    "Remove Custom Field": "Remove Custom Field",
+    "fieldSuccessMessage": "Field added successfully",
+    "fieldRemovalSuccess": "Field removed successfully",
+    "String": "String",
+    "Boolean": "Boolean",
+    "Date": "Date",
+    "Number": "Number",
+    "saveChanges": "saveChanges"
+  },
+  "orgActionItemCategories": {
+    "enableButton": "Enable",
+    "disableButton": "Disable",
+    "updateActionItemCategory": "Update",
+    "actionItemCategoryName": "Name",
+    "categoryDetails": "Category Details",
+    "enterName": "Enter Name",
+    "successfulCreation": "Action Item Category created successfully",
+    "successfulUpdation": "Action Item Category updated successfully",
+    "sameNameConflict": "Please change the name to make an update",
+    "categoryEnabled": "Action Item Category Enabled",
+    "categoryDisabled": "Action Item Category Disabled",
+    "noActionItemCategories": "No Action Item Categories",
+    "status": "Status",
+    "categoryDeleted": "Action Item Category deleted successfully",
+    "deleteCategory": "Delete Category",
+    "deleteCategoryMsg": "Are you sure you want to delete this Action Item Category?",
+    "createButton": "createButton",
+    "editButton": "editButton"
+  },
+  "organizationVenues": {
+    "title": "Venues",
+    "addVenue": "Add Venue",
+    "venueDetails": "Venue Details",
+    "venueName": "Name of the Venue",
+    "enterVenueName": "Enter Venue Name",
+    "enterVenueDesc": "Enter Venue Description",
+    "capacity": "Capacity",
+    "enterVenueCapacity": "Enter Venue Capacity",
+    "image": "Venue Image",
+    "uploadVenueImage": "Upload Venue Image",
+    "createVenue": "Create Venue",
+    "venueAdded": "Venue added Successfully",
+    "editVenue": "Update Venue",
+    "venueUpdated": "Venue details updated successfully",
+    "sort": "Sort",
+    "highestCapacity": "Highest Capacity",
+    "lowestCapacity": "Lowest Capacity",
+    "noVenues": "No Venues Found!",
+    "view": "View",
+    "venueTitleError": "Venue title cannot be empty!",
+    "venueCapacityError": "Capacity must be a positive number!",
+    "searchBy": "Search By",
+    "description": "description",
+    "edit": "edit",
+    "delete": "delete",
+    "name": "name",
+    "desc": "desc"
+  },
+  "addMember": {
+    "title": "Add Member",
+    "addMembers": "Add Members",
+    "existingUser": "Existing User",
+    "newUser": "New User",
+    "searchFullName": "Search by Full Name",
+    "enterFirstName": "Enter First Name",
+    "enterLastName": "Enter Last Name",
+    "enterConfirmPassword": "Enter Confirm Password",
+    "organization": "Organization",
+    "invalidDetailsMessage": "Please provide all required details.",
+    "passwordNotMatch": "Passwords do not match.",
+    "addMember": "Add Member",
+    "firstName": "firstName",
+    "lastName": "lastName",
+    "emailAddress": "emailAddress",
+    "enterEmail": "enterEmail",
+    "password": "password",
+    "enterPassword": "enterPassword",
+    "confirmPassword": "confirmPassword",
+    "cancel": "cancel",
+    "create": "create",
+    "user": "user",
+    "profile": "profile"
+  },
+  "eventActionItems": {
+    "title": "Action Items",
+    "createActionItem": "Create Action Item",
+    "actionItemCategory": "Action Item Category",
+    "selectActionItemCategory": "Select an action item category",
+    "selectAssignee": "Select an assignee",
+    "assignee": "Assignee",
+    "assigner": "Assigner",
+    "preCompletionNotes": "Notes",
+    "postCompletionNotes": "Completion Notes",
+    "assignmentDate": "Assignment Date",
+    "status": "Status",
+    "actionItemActive": "Active",
+    "actionItemStatus": "Action Item Status",
+    "actionItemCompleted": "Action Item Completed",
+    "markCompletion": "Mark Completion",
+    "actionItemDetails": "Action Item Details",
+    "dueDate": "Due Date",
+    "completionDate": "Completion Date",
+    "editActionItem": "Edit Action Item",
+    "deleteActionItem": "Delete Action Item",
+    "deleteActionItemMsg": "Do you want to remove this action item?",
+    "successfulDeletion": "Action Item deleted successfully",
+    "successfulCreation": "Action Item created successfully",
+    "successfulUpdation": "Action Item updated successfully",
+    "notes": "Notes",
+    "save": "Save",
+    "yes": "yes",
+    "no": "no"
+  },
+  "checkIn": {
+    "errorCheckingIn": "Error checking in",
+    "checkedInSuccessfully": "Checked in successfully"
+  },
+  "eventRegistrantsModal": {
+    "errorAddingAttendee": "Error adding attendee",
+    "errorRemovingAttendee": "Error removing attendee"
+  },
+  "userCampaigns": {
+    "title": "Fundraising Campaigns",
+    "searchByName": "Search by Name...",
+    "searchBy": "Search by",
+    "pledgers": "Pledgers",
+    "campaigns": "Campaigns",
+    "myPledges": "My Pledges",
+    "lowestAmount": "Lowest Amount",
+    "highestAmount": "Highest Amount",
+    "lowestGoal": "Lowest Goal",
+    "highestGoal": "Highest Goal",
+    "latestEndDate": "Latest End Date",
+    "earliestEndDate": "Earliest End Date",
+    "addPledge": "Add Pledge",
+    "viewPledges": "View Pledges",
+    "noPledges": "No Pledges Found",
+    "noCampaigns": "No Campaigns Found"
+  },
+  "userPledges": {
+    "title": "My Pledges"
+  },
+  "eventVolunteers": {
+    "volunteers": "Volunteers",
+    "volunteer": "Volunteer",
+    "volunteerGroups": "Volunteer Groups",
+    "individuals": "Individuals",
+    "groups": "Groups",
+    "status": "Status",
+    "noVolunteers": "No Volunteers",
+    "noVolunteerGroups": "No Volunteer Groups",
+    "add": "Add",
+    "mostHoursVolunteered": "Most Hours Volunteered",
+    "leastHoursVolunteered": "Least Hours Volunteered",
+    "accepted": "Accepted",
+    "addVolunteer": "Add Volunteer",
+    "removeVolunteer": "Remove Volunteer",
+    "volunteerAdded": "Volunteer added successfully",
+    "volunteerRemoved": "Volunteer removed successfully",
+    "volunteerGroupCreated": "Volunteer group created successfully",
+    "volunteerGroupUpdated": "Volunteer group updated successfully",
+    "volunteerGroupDeleted": "Volunteer group deleted successfully",
+    "removeVolunteerMsg": "Are you sure you want to remove this Volunteer?",
+    "deleteVolunteerGroupMsg": "Are you sure you want to delete this Volunteer Group?",
+    "leader": "Leader",
+    "group": "Group",
+    "createGroup": "Create Group",
+    "updateGroup": "Update Group",
+    "deleteGroup": "Delete Group",
+    "volunteersRequired": "Volunteers Required",
+    "volunteerDetails": "Volunteer Details",
+    "hoursVolunteered": "Hours Volunteered",
+    "groupDetails": "Group Details",
+    "creator": "Creator",
+    "requests": "Requests",
+    "noRequests": "No Requests",
+    "latest": "Latest",
+    "earliest": "Earliest",
+    "requestAccepted": "Request accepted successfully",
+    "requestRejected": "Request rejected successfully",
+    "details": "Details",
+    "manageGroup": "Manage Group",
+    "mostVolunteers": "Most Volunteers",
+    "leastVolunteers": "Least Volunteers"
+  },
+  "userVolunteer": {
+    "title": "Volunteership",
+    "name": "Title",
+    "upcomingEvents": "Upcoming Events",
+    "requests": "Requests",
+    "invitations": "Invitations",
+    "groups": "Volunteer Groups",
+    "actions": "Actions",
+    "searchByName": "Search by Name",
+    "latestEndDate": "Latest End Date",
+    "earliestEndDate": "Earliest End Date",
+    "noEvents": "No Upcoming Events",
+    "volunteer": "Volunteer",
+    "volunteered": "Volunteered",
+    "join": "Join",
+    "joined": "Joined",
+    "searchByEventName": "Search by Event title",
+    "filter": "Filter",
+    "groupInvite": "Group Invite",
+    "individualInvite": "Individual Invite",
+    "noInvitations": "No Invitations",
+    "accept": "Accept",
+    "reject": "Reject",
+    "receivedLatest": "Received Latest",
+    "receivedEarliest": "Received Earliest",
+    "invitationAccepted": "Invitation accepted successfully",
+    "invitationRejected": "Invitation rejected successfully",
+    "volunteerSuccess": "Requested to volunteer successfully",
+    "recurring": "Recurring",
+    "groupInvitationSubject": "Invitation to join volunteer group",
+    "eventInvitationSubject": "Invitation to volunteer for event"
+  }
+}
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
new file mode 100644
index 0000000000..132a913c7d
--- /dev/null
+++ b/public/locales/fr/common.json
@@ -0,0 +1,98 @@
+{
+  "firstName": "Prénom",
+  "lastName": "Nom de famille",
+  "searchByName": "Rechercher par nom",
+  "loading": "Chargement...",
+  "endOfResults": "Fin des résultats",
+  "noResultsFoundFor": "Aucun résultat trouvé pour ",
+  "edit": "Modifier",
+  "admins": "Administrateurs",
+  "admin": "ADMINISTRATEUR",
+  "user": "UTILISATEUR",
+  "superAdmin": "SUPERADMIN",
+  "members": "Membres",
+  "logout": "Se déconnecter",
+  "login": "Se connecter",
+  "register": "Registre",
+  "menu": "Menu",
+  "settings": "Paramètres",
+  "users": "Utilisateurs",
+  "requests": "Demandes",
+  "OR": "OU",
+  "cancel": "Annuler",
+  "close": "Fermer",
+  "create": "Créer",
+  "delete": "Supprimer",
+  "done": "Fait",
+  "yes": "Oui",
+  "no": "Non",
+  "filter": "Filtre",
+  "search": "Recherche",
+  "description": "Description",
+  "saveChanges": "Sauvegarder les modifications",
+  "resetChanges": "Réinitialiser les modifications",
+  "displayImage": "Afficher l'image",
+  "enterEmail": "Entrez l'e-mail",
+  "emailAddress": "Adresse e-mail",
+  "email": "E-mail",
+  "name": "Nom",
+  "gender": "Genre",
+  "desc": "Description",
+  "enterPassword": "Entrer le mot de passe",
+  "password": "Mot de passe",
+  "confirmPassword": "Confirmez le mot de passe",
+  "forgotPassword": "Mot de passe oublié ?",
+  "talawaAdminPortal": "Portail d'administration Talawa",
+  "address": "Adresse",
+  "location": "Emplacement",
+  "enterLocation": "Entrez l'emplacement",
+  "joined": "Rejoint",
+  "startDate": "Date de début",
+  "endDate": "Date de fin",
+  "startTime": "Heure de début",
+  "endTime": "Heure de fin",
+  "My Organizations": "Mes Organisations",
+  "Dashboard": "Tableau de Bord",
+  "People": "Personnes",
+  "Events": "Événements",
+  "Venues": "Lieux",
+  "Action Items": "Éléments d'Action",
+  "Posts": "Publications",
+  "Block/Unblock": "Bloquer/Débloquer",
+  "Advertisement": "Publicité",
+  "Funds": "Fonds",
+  "Membership Requests": "Demandes d'Adhésion",
+  "Plugins": "Plugins",
+  "Plugin Store": "Magasin de Plugins",
+  "Settings": "Paramètres",
+  "createdOn": "Créé Le",
+  "createdBy": "Créé Par",
+  "usersRole": "Rôle de l'Utilisateur",
+  "changeRole": "Changer de Rôle",
+  "action": "Action",
+  "removeUser": "Supprimer l'Utilisateur",
+  "remove": "Supprimer",
+  "viewProfile": "Voir le Profil",
+  "profile": "Profil",
+  "noFiltersApplied": "Aucun filtre appliqué",
+  "manage": "Gérer",
+  "searchResultsFor": "Résultats de recherche pour {{text}}",
+  "none": "Aucun",
+  "sort": "Trier",
+  "Donate": "Faire un don",
+  "addedSuccessfully": "{{item}} ajouté avec succès",
+  "updatedSuccessfully": "{{item}} mis à jour avec succès",
+  "removedSuccessfully": "{{item}} supprimé avec succès",
+  "successfullyUpdated": "Mis à jour avec succès",
+  "sessionWarning": "Votre session expirera bientôt en raison de l'inactivité. Veuillez interagir avec la page pour prolonger votre session.",
+  "sessionLogOut": "Votre session a expiré en raison de l'inactivité. Veuillez vous reconnecter pour continuer.",
+  "all": "Tous",
+  "active": "Actif",
+  "disabled": "Désactivé",
+  "pending": "En attente",
+  "completed": "Complété",
+  "late": "En retard",
+  "createdLatest": "Créé le plus récemment",
+  "createdEarliest": "Créé le plus tôt",
+  "searchBy": "Rechercher par {{item}}"
+}
diff --git a/public/locales/fr/errors.json b/public/locales/fr/errors.json
new file mode 100644
index 0000000000..e9a7cf4fd9
--- /dev/null
+++ b/public/locales/fr/errors.json
@@ -0,0 +1,11 @@
+{
+  "talawaApiUnavailable": "Le service Talawa-API n'est pas disponible !. ",
+  "notFound": "Pas trouvé",
+  "unknownError": "Une erreur inconnue est survenue.  {{msg}}",
+  "notAuthorised": "Désolé! ",
+  "errorSendingMail": "Erreur lors de l'envoi du courrier",
+  "emailNotRegistered": "Email non enregistré",
+  "notFoundMsg": "Oops! ",
+  "errorOccurredCouldntCreate": "Une erreur s'est produite. Impossible de créer {{entity}}",
+  "errorLoading": "Une erreur s'est produite lors du chargement des données {{entity}}"
+}
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
new file mode 100644
index 0000000000..d089aefeb5
--- /dev/null
+++ b/public/locales/fr/translation.json
@@ -0,0 +1,1483 @@
+{
+  "leaderboard": {
+    "title": "Tableau des Leaders",
+    "searchByVolunteer": "Recherche par Bénévole",
+    "mostHours": "Le Plus d'Heures",
+    "leastHours": "Le Moins d'Heures",
+    "timeFrame": "Période",
+    "allTime": "Tout le Temps",
+    "weekly": "Cette Semaine",
+    "monthly": "Ce Mois",
+    "yearly": "Cette Année",
+    "noVolunteers": "Aucun Bénévole Trouvé!"
+  },
+  "loginPage": {
+    "title": "Administrateur Talawa",
+    "fromPalisadoes": "Une application open source réalisée par les bénévoles de la Fondation Palisadoes",
+    "userLogin": "Utilisateur en ligne",
+    "atleast_8_char_long": "Au moins 8 caractères",
+    "atleast_6_char_long": "Au moins 6 caractères",
+    "firstName_invalid": "Le prénom ne doit contenir que des lettres minuscules et majuscules",
+    "lastName_invalid": "Le nom de famille ne doit contenir que des lettres minuscules et majuscules",
+    "password_invalid": "Le mot de passe doit contenir au moins une lettre minuscule, une lettre majuscule, une valeur numérique et un caractère spécial",
+    "email_invalid": "L'e-mail doit contenir au moins 8 caractères",
+    "Password_and_Confirm_password_mismatches.": "Mot de passe et Confirmer les incompatibilités de mot de passe.",
+    "doNotOwnAnAccount": "Vous ne possédez pas de compte ?",
+    "captchaError": "Erreur CAPTCHA!",
+    "Please_check_the_captcha": "S'il vous plaît, vérifiez le captcha.",
+    "Something_went_wrong": "Quelque chose s'est mal passé. Veuillez réessayer plus tard.",
+    "passwordMismatches": "Mot de passe et Confirmer les incompatibilités de mot de passe.",
+    "fillCorrectly": "Remplissez correctement tous les détails.",
+    "successfullyRegistered": "Enregistré avec succès. ",
+    "lowercase_check": "Au moins une lettre minuscule",
+    "uppercase_check": "Au moins une lettre majuscule",
+    "numeric_value_check": "Au moins une valeur numérique",
+    "special_char_check": "Au moins un caractère spécial",
+    "selectOrg": "Sélectionnez une organisation",
+    "afterRegister": "Enregistré avec succès. ",
+    "talawa_portal": "Portail Talawa",
+    "login": "Connexion",
+    "register": "S'inscrire",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "email": "E-mail",
+    "password": "Mot de passe",
+    "confirmPassword": "Confirmer le mot de passe",
+    "forgotPassword": "Mot de passe oublié",
+    "enterEmail": "Entrer l'e-mail",
+    "enterPassword": "Entrer le mot de passe",
+    "talawaApiUnavailable": "API Talawa indisponible",
+    "notAuthorised": "Non autorisé",
+    "notFound": "Non trouvé",
+    "OR": "OU",
+    "admin": "Administrateur",
+    "user": "Utilisateur",
+    "loading": "Chargement"
+  },
+  "userLoginPage": {
+    "title": "Administrateur Talawa",
+    "fromPalisadoes": "Une application open source réalisée par les bénévoles de la Fondation Palisadoes",
+    "atleast_8_char_long": "Au moins 8 caractères",
+    "Password_and_Confirm_password_mismatches.": "Mot de passe et Confirmer les incompatibilités de mot de passe.",
+    "doNotOwnAnAccount": "Vous ne possédez pas de compte ?",
+    "captchaError": "Erreur CAPTCHA!",
+    "Please_check_the_captcha": "S'il vous plaît, vérifiez le captcha.",
+    "Something_went_wrong": "Quelque chose s'est mal passé. Veuillez réessayer plus tard.",
+    "passwordMismatches": "Mot de passe et Confirmer les incompatibilités de mot de passe.",
+    "fillCorrectly": "Remplissez correctement tous les détails.",
+    "successfullyRegistered": "Enregistré avec succès. ",
+    "userLogin": "Utilisateur en ligne",
+    "afterRegister": "Enregistré avec succès. ",
+    "selectOrg": "Sélectionnez une organisation",
+    "talawa_portal": "Portail Talawa",
+    "login": "Connexion",
+    "register": "S'inscrire",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "email": "E-mail",
+    "password": "Mot de passe",
+    "confirmPassword": "Confirmer le mot de passe",
+    "forgotPassword": "Mot de passe oublié",
+    "enterEmail": "Entrer l'e-mail",
+    "enterPassword": "Entrer le mot de passe",
+    "talawaApiUnavailable": "API Talawa indisponible",
+    "notAuthorised": "Non autorisé",
+    "notFound": "Non trouvé",
+    "OR": "OU",
+    "loading": "Chargement"
+  },
+  "latestEvents": {
+    "eventCardTitle": "évènements à venir",
+    "eventCardSeeAll": "Voir tout",
+    "noEvents": "Aucun événement à venir"
+  },
+  "latestPosts": {
+    "latestPostsTitle": "Derniers messages",
+    "seeAllLink": "Voir tout",
+    "noPostsCreated": "Aucun message créé"
+  },
+  "listNavbar": {
+    "roles": "Les rôles",
+    "talawa_portal": "Portail Talawa",
+    "requests": "Demandes",
+    "logout": "Déconnexion"
+  },
+  "leftDrawer": {
+    "my organizations": "Mes organisations",
+    "requests": "Demandes d'adhésion",
+    "communityProfile": "Profil de la communauté",
+    "talawaAdminPortal": "Portail Administrateur Talawa",
+    "menu": "Menu",
+    "users": "Utilisateurs",
+    "logout": "Déconnexion"
+  },
+  "leftDrawerOrg": {
+    "Dashboard": "Tableau de bord",
+    "People": "Personnes",
+    "Events": "Événements",
+    "Contributions": "Contributions",
+    "Posts": "Des postes",
+    "Block/Unblock": "Bloquer/Débloquer",
+    "Plugins": "Plugins",
+    "Plugin Store": "Magasin de plugins",
+    "Advertisement": "Annonces",
+    "allOrganizations": "Toutes les organisations",
+    "yourOrganization": "Ton organisation",
+    "notification": "Notification",
+    "language": "Langue",
+    "notifications": "Notifications",
+    "spamsThe": "spamme le",
+    "group": "groupe",
+    "noNotifications": "Aucune notification",
+    "talawaAdminPortal": "Portail Administrateur Talawa",
+    "menu": "Menu",
+    "talawa_portal": "Portail Talawa",
+    "settings": "Paramètres",
+    "logout": "Déconnexion",
+    "close": "Fermer"
+  },
+  "orgList": {
+    "title": "Organisations Talawa",
+    "you": "Toi",
+    "designation": "Désignation",
+    "my organizations": "Mes organisations",
+    "createOrganization": "Créer une organisation",
+    "createSampleOrganization": "Créer un exemple d'organisation",
+    "city": "Ville",
+    "countryCode": "Code postal",
+    "dependentLocality": "Localité dépendante",
+    "line1": "Ligne 1",
+    "line2": "Ligne 2",
+    "postalCode": "Code Postal",
+    "sortingCode": "Code de tri",
+    "state": "État/Province",
+    "userRegistrationRequired": "Inscription de l'utilisateur requise",
+    "visibleInSearch": "Visible dans la recherche",
+    "enterName": "Entrez le nom",
+    "sort": "Trier",
+    "Latest": "Dernier",
+    "Earliest": "Le plus tôt",
+    "noOrgErrorTitle": "Organisations introuvables",
+    "sampleOrgDuplicate": "Un seul échantillon d’organisation autorisé",
+    "noOrgErrorDescription": "Veuillez créer une organisation via le tableau de bord",
+    "manageFeatures": "Gérer les fonctionnalités",
+    "manageFeaturesInfo": "Création réussie ! ",
+    "goToStore": "Accédez à la boutique de plugins",
+    "enableEverything": "Activer tout",
+    "sampleOrgSuccess": "Exemple d'organisation créée avec succès",
+    "name": "Nom",
+    "email": "E-mail",
+    "searchByName": "Rechercher par nom",
+    "description": "Description",
+    "location": "Emplacement",
+    "address": "Adresse",
+    "displayImage": "Image d'affichage",
+    "filter": "Filtrer",
+    "cancel": "Annuler",
+    "endOfResults": "Fin des résultats",
+    "noResultsFoundFor": "Aucun résultat trouvé pour",
+    "OR": "OU"
+  },
+  "orgListCard": {
+    "manage": "Gérer",
+    "sampleOrganization": "Exemple d'organisation",
+    "admins": "Administrateurs",
+    "members": "Membres"
+  },
+  "paginationList": {
+    "rowsPerPage": "lignes par page",
+    "all": "Tous"
+  },
+  "requests": {
+    "title": "Demandes d'adhésion",
+    "sl_no": "Sl. ",
+    "accept": "Accepter",
+    "reject": "Rejeter",
+    "searchRequests": "Rechercher des demandes d'adhésion",
+    "noOrgError": "Organisations introuvables, veuillez créer une organisation via le tableau de bord",
+    "noRequestsFound": "Aucune demande d'adhésion trouvée",
+    "acceptedSuccessfully": "Demande acceptée avec succès",
+    "rejectedSuccessfully": "Demande rejetée avec succès",
+    "noOrgErrorTitle": "Organisations introuvables",
+    "noOrgErrorDescription": "Veuillez créer une organisation via le tableau de bord",
+    "name": "Nom",
+    "email": "E-mail",
+    "endOfResults": "Fin des résultats",
+    "noResultsFoundFor": "Aucun résultat trouvé pour"
+  },
+  "users": {
+    "title": "Rôles Talawa",
+    "joined_organizations": "Organisations rejointes",
+    "blocked_organizations": "Organisations bloquées",
+    "orgJoinedBy": "Organisations rejointes par",
+    "orgThatBlocked": "Organisations qui ont bloqué",
+    "hasNotJoinedAnyOrg": "n'a rejoint aucune organisation",
+    "isNotBlockedByAnyOrg": "n'est bloqué par aucune organisation",
+    "searchByOrgName": "Rechercher par nom d'organisation",
+    "view": "Voir",
+    "enterName": "Entrez le nom",
+    "loadingUsers": "Chargement des utilisateurs...",
+    "noUserFound": "Aucun utilisateur trouvé",
+    "sort": "Trier",
+    "Newest": "Le plus récent d'abord",
+    "Oldest": "Le plus âgé en premier",
+    "noOrgError": "Organisations introuvables, veuillez créer une organisation via le tableau de bord",
+    "roleUpdated": "Rôle mis à jour.",
+    "joinNow": "Adhérer maintenant",
+    "visit": "Visite",
+    "withdraw": "Largeur de tirage",
+    "removeUserFrom": "Supprimer l'Utilisateur de {{org}}",
+    "removeConfirmation": "Êtes-vous sûr de vouloir supprimer '{{name}}' de l'organisation '{{org}}' ?",
+    "searchByName": "Rechercher par nom",
+    "users": "Utilisateurs",
+    "name": "Nom",
+    "email": "E-mail",
+    "endOfResults": "Fin des résultats",
+    "admin": "Administrateur",
+    "superAdmin": "Super Administrateur",
+    "user": "Utilisateur",
+    "filter": "Filtrer",
+    "noResultsFoundFor": "Aucun résultat trouvé pour",
+    "talawaApiUnavailable": "API Talawa indisponible",
+    "cancel": "Annuler",
+    "admins": "Administrateurs",
+    "members": "Membres",
+    "orgJoined": "Organisation Rejointe",
+    "MembershipRequestSent": "Demande d'adhésion envoyée",
+    "AlreadyJoined": "Déjà rejoint",
+    "errorOccured": "Une erreur s'est produite"
+  },
+  "communityProfile": {
+    "title": "Profil de la communauté",
+    "editProfile": "Editer le profil",
+    "communityProfileInfo": "Ces détails apparaîtront sur l'écran de connexion/inscription pour vous et les membres de votre communauté.",
+    "communityName": "Nom de la communauté",
+    "wesiteLink": "Lien de site Web",
+    "logo": "Logo",
+    "social": "Liens vers les réseaux sociaux",
+    "url": "Entrer l'URL",
+    "profileChangedMsg": "Les détails du profil ont été mis à jour avec succès.",
+    "resetData": "Réinitialisez avec succès les détails du profil."
+  },
+  "dashboard": {
+    "title": "Tableau de bord",
+    "about": "À propos",
+    "deleteThisOrganization": "Supprimer cette organisation",
+    "statistics": "Statistiques",
+    "posts": "Des postes",
+    "events": "Événements",
+    "blockedUsers": "Utilisateurs bloqués",
+    "viewAll": "Voir tout",
+    "upcomingEvents": "évènements à venir",
+    "noUpcomingEvents": "Aucun événement à venir",
+    "latestPosts": "Derniers messages",
+    "noPostsPresent": "Aucun message présent",
+    "membershipRequests": "Demandes d'adhésion",
+    "noMembershipRequests": "Aucune demande d'adhésion présente",
+    "location": "Emplacement",
+    "members": "Membres",
+    "admins": "Administrateurs",
+    "requests": "Demandes",
+    "talawaApiUnavailable": "API Talawa indisponible",
+    "volunteerRankings": "Classement des Bénévoles",
+    "noVolunteers": "Aucun Bénévole Trouvé!"
+  },
+  "organizationPeople": {
+    "title": "Membres Talawa",
+    "filterByName": "Filtrer par nom",
+    "filterByLocation": "Filtrer par emplacement",
+    "filterByEvent": "Filtrer par événement",
+    "searchName": "Entrez le nom",
+    "searchevent": "Entrer l'événement",
+    "searchFullName": "Entrez le nom complet",
+    "people": "Personnes",
+    "sort": "Recherche par rôle",
+    "actions": "Actions",
+    "addMembers": "Ajouter des membres",
+    "existingUser": "Utilisateur existant",
+    "newUser": "Nouvel utilisateur",
+    "enterFirstName": "Entrez votre prénom",
+    "enterLastName": "Entrez votre nom de famille",
+    "enterConfirmPassword": "Entrez votre mot de passe pour confirmer",
+    "organization": "Organisation",
+    "user": "Utilisateur",
+    "profile": "Profil",
+    "invalidDetailsMessage": "Veuillez saisir des informations valides.",
+    "members": "Membres",
+    "admins": "Administrateurs",
+    "users": "Utilisateurs",
+    "searchFirstName": "Rechercher par prénom",
+    "searchLastName": "Rechercher par nom de famille",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "emailAddress": "Adresse e-mail",
+    "enterEmail": "Entrer l'e-mail",
+    "password": "Mot de passe",
+    "enterPassword": "Entrer le mot de passe",
+    "confirmPassword": "Confirmer le mot de passe",
+    "create": "Créer",
+    "cancel": "Annuler"
+  },
+  "organizationTags": {
+    "title": "Étiquettes d'Organisation",
+    "createTag": "Créer une nouvelle étiquette",
+    "manageTag": "Gérer",
+    "editTag": "Modifier",
+    "removeTag": "Supprimer",
+    "tagDetails": "Détails de l'Étiquette",
+    "tagName": "Nom",
+    "tagType": "Type",
+    "tagNamePlaceholder": "Écrire le nom de l'étiquette",
+    "tagCreationSuccess": "Nouvelle étiquette créée avec succès",
+    "tagUpdationSuccess": "Étiquette mise à jour avec succès",
+    "tagRemovalSuccess": "Étiquette supprimée avec succès",
+    "noTagsFound": "Aucune étiquette trouvée",
+    "removeUserTag": "Supprimer l'Étiquette",
+    "removeUserTagMessage": "Voulez-vous supprimer cette étiquette ?",
+    "addChildTag": "Ajouter une Sous-Étiquette",
+    "enterTagName": "Entrez le nom de l'étiquette"
+  },
+  "manageTag": {
+    "title": "Détails de l'étiquette",
+    "addPeopleToTag": "Ajouter des personnes à l'étiquette",
+    "viewProfile": "Voir",
+    "noAssignedMembersFound": "Aucun membre assigné",
+    "unassignUserTag": "Désassigner l'étiquette",
+    "unassignUserTagMessage": "Voulez-vous retirer l'étiquette de cet utilisateur?",
+    "successfullyUnassigned": "Étiquette retirée de l'utilisateur",
+    "addPeople": "Ajouter des personnes",
+    "add": "Ajouter",
+    "subTags": "Sous-étiquettes",
+    "successfullyAssignedToPeople": "Étiquette attribuée avec succès",
+    "errorOccurredWhileLoadingMembers": "Erreur survenue lors du chargement des membres",
+    "userName": "Nom d'utilisateur",
+    "actions": "Actions",
+    "noOneSelected": "Personne sélectionnée",
+    "assignToTags": "Attribuer aux étiquettes",
+    "removeFromTags": "Retirer des étiquettes",
+    "assign": "Attribuer",
+    "remove": "Retirer",
+    "successfullyAssignedToTags": "Attribué aux étiquettes avec succès",
+    "successfullyRemovedFromTags": "Retiré des étiquettes avec succès",
+    "errorOccurredWhileLoadingOrganizationUserTags": "Erreur lors du chargement des étiquettes de l'organisation",
+    "errorOccurredWhileLoadingSubTags": "Une erreur s'est produite lors du chargement des sous-étiquettes",
+    "removeUserTag": "Supprimer l'étiquette",
+    "removeUserTagMessage": "Voulez-vous supprimer cette étiquette ? Cela supprimera toutes les sous-étiquettes et toutes les associations.",
+    "tagDetails": "Détails de l'étiquette",
+    "tagName": "Nom de l'étiquette",
+    "tagUpdationSuccess": "Étiquette mise à jour avec succès",
+    "tagRemovalSuccess": "Étiquette supprimée avec succès",
+    "noTagSelected": "Aucune étiquette sélectionnée",
+    "changeNameToEdit": "Modifiez le nom pour faire une mise à jour",
+    "selectTag": "Sélectionner l'étiquette",
+    "collapse": "Réduire",
+    "expand": "Développer",
+    "tagNamePlaceholder": "Écrire le nom de l'étiquette",
+    "allTags": "Toutes les étiquettes",
+    "noMoreMembersFound": "Aucun autre membre trouvé"
+  },
+  "userListCard": {
+    "addAdmin": "Ajouter un administrateur",
+    "addedAsAdmin": "L'utilisateur est ajouté en tant qu'administrateur.",
+    "joined": "Rejoint",
+    "talawaApiUnavailable": "API Talawa indisponible"
+  },
+  "orgAdminListCard": {
+    "remove": "Retirer",
+    "removeAdmin": "Supprimer l'administrateur",
+    "removeAdminMsg": "Voulez-vous supprimer cet administrateur ?",
+    "adminRemoved": "L'administrateur est supprimé.",
+    "joined": "Rejoint",
+    "no": "Non",
+    "yes": "Oui",
+    "talawaApiUnavailable": "API Talawa indisponible"
+  },
+  "orgPeopleListCard": {
+    "remove": "Retirer",
+    "removeMember": "Supprimer un membre",
+    "removeMemberMsg": "Voulez-vous supprimer ce membre ?",
+    "memberRemoved": "Le membre est supprimé",
+    "joined": "Rejoint",
+    "no": "Non",
+    "yes": "Oui",
+    "talawaApiUnavailable": "API Talawa indisponible"
+  },
+  "organizationEvents": {
+    "title": "Événements",
+    "filterByTitle": "Filtrer par titre",
+    "filterByLocation": "Filtrer par emplacement",
+    "filterByDescription": "Filtrer par description",
+    "addEvent": "Ajouter un évènement",
+    "eventDetails": "Détails de l'évènement",
+    "eventTitle": "Titre",
+    "startTime": "Heure de début",
+    "endTime": "Heure de fin",
+    "allDay": "Toute la journée",
+    "recurringEvent": "Événement récurrent",
+    "searchMemberName": "Rechercher le nom du membre",
+    "isPublic": "est public",
+    "isRegistrable": "Est enregistrable",
+    "createEvent": "Créer un évènement",
+    "enterFilter": "Entrer le filtre",
+    "enterTitle": "Entrez le titre",
+    "enterDescrip": "Entrez la description",
+    "eventLocation": "Entrez l'emplacement",
+    "searchEventName": "Rechercher le nom de l'événement",
+    "eventType": "Type d'événement",
+    "eventCreated": "Toutes nos félicitations! ",
+    "customRecurrence": "Récurrence personnalisée",
+    "repeatsEvery": "Se répète tous les",
+    "repeatsOn": "Répétition activée",
+    "ends": "Prend fin",
+    "never": "Jamais",
+    "on": "Sur",
+    "after": "Après",
+    "occurences": "événements",
+    "events": "Événements",
+    "description": "Description",
+    "location": "Emplacement",
+    "startDate": "Date de début",
+    "endDate": "Date de fin",
+    "talawaApiUnavailable": "API Talawa indisponible",
+    "done": "Fait"
+  },
+  "organizationActionItems": {
+    "actionItemCategory": "Catégorie de l'Action",
+    "actionItemDetails": "Détails de l'Action",
+    "actionItemCompleted": "Action Terminée",
+    "assignee": "Attribué à",
+    "assigner": "Assignateur",
+    "assignmentDate": "Date d'Attribution",
+    "active": "Actif",
+    "clearFilters": "Effacer les Filtres",
+    "completionDate": "Date de Complétion",
+    "createActionItem": "Créer une Action",
+    "deleteActionItem": "Supprimer l'Action",
+    "deleteActionItemMsg": "Voulez-vous supprimer cette action?",
+    "details": "Détails",
+    "dueDate": "Date d'Échéance",
+    "earliest": "Le Plus Ancien",
+    "editActionItem": "Modifier l'Action",
+    "isCompleted": "Terminé",
+    "latest": "Le Plus Récent",
+    "makeActive": "Rendre Actif",
+    "noActionItems": "Aucune Action",
+    "options": "Options",
+    "preCompletionNotes": "Notes Pré-Complétion",
+    "actionItemActive": "Action Active",
+    "markCompletion": "Marquer comme Terminé",
+    "actionItemStatus": "État de l'Action",
+    "postCompletionNotes": "Notes Post-Complétion",
+    "selectActionItemCategory": "Sélectionnez une Catégorie d'Action",
+    "selectAssignee": "Sélectionner un Attribué",
+    "status": "Statut",
+    "successfulCreation": "Action créée avec succès",
+    "successfulUpdation": "Action mise à jour avec succès",
+    "successfulDeletion": "Action supprimée avec succès",
+    "title": "Actions",
+    "category": "Catégorie",
+    "allottedHours": "Heures Attribuées",
+    "latestDueDate": "Date d'Échéance la Plus Récente",
+    "earliestDueDate": "Date d'Échéance la Plus Ancienne",
+    "updateActionItem": "Mettre à Jour l'Action",
+    "noneUpdated": "Aucun champ n'a été mis à jour",
+    "updateStatusMsg": "Voulez-vous vraiment marquer cette action comme en attente?",
+    "close": "Fermer",
+    "eventActionItems": "Actions de l'Événement",
+    "no": "Non",
+    "yes": "Oui",
+    "individuals": "Individus",
+    "groups": "Groupes",
+    "assignTo": "Attribuer à",
+    "volunteers": "Bénévoles",
+    "volunteerGroups": "Groupes de Bénévoles"
+  },
+  "organizationAgendaCategory": {
+    "agendaCategoryDetails": "Détails de la catégorie d'ordre du jour",
+    "updateAgendaCategory": "Mettre à jour la catégorie d'ordre du jour",
+    "title": "Catégories d'ordre du jour",
+    "name": "Catégorie",
+    "description": "Description",
+    "createdBy": "Créé par",
+    "options": "Options",
+    "createAgendaCategory": "Créer une catégorie d'ordre du jour",
+    "noAgendaCategories": "Aucune catégorie d'ordre du jour",
+    "update": "Mettre à jour",
+    "agendaCategoryCreated": "Catégorie d'ordre du jour créée avec succès",
+    "agendaCategoryUpdated": "Catégorie d'ordre du jour mise à jour avec succès",
+    "agendaCategoryDeleted": "Catégorie d'ordre du jour supprimée avec succès",
+    "deleteAgendaCategory": "Supprimer la catégorie d'ordre du jour",
+    "deleteAgendaCategoryMsg": "Souhaitez-vous supprimer cette catégorie d'ordre du jour ?"
+  },
+  "agendaItems": {
+    "agendaItemDetails": "Détails du point de l'ordre du jour",
+    "updateAgendaItem": "Mettre à jour le point de l'ordre du jour",
+    "title": "Titre",
+    "enterTitle": "Entrer le titre",
+    "sequence": "Ordre",
+    "description": "Description",
+    "enterDescription": "Entrer la description",
+    "category": "Catégorie de l'ordre du jour",
+    "attachments": "Pièces jointes",
+    "attachmentLimit": "Ajouter un fichier image ou vidéo jusqu'à 10 Mo",
+    "fileSizeExceedsLimit": "La taille du fichier dépasse la limite de 10 Mo",
+    "urls": "URL",
+    "url": "Ajouter un lien vers l'URL",
+    "enterUrl": "https://example.com",
+    "invalidUrl": "Veuillez saisir une URL valide",
+    "link": "Lien",
+    "createdBy": "Créé par",
+    "regular": "Régulier",
+    "note": "Note",
+    "duration": "Durée",
+    "enterDuration": "mm:ss",
+    "options": "Options",
+    "createAgendaItem": "Créer un point à l'ordre du jour",
+    "noAgendaItems": "Aucun point à l'ordre du jour",
+    "selectAgendaItemCategory": "Sélectionner une catégorie de point de l'ordre du jour",
+    "update": "Mettre à jour",
+    "delete": "Supprimer",
+    "agendaItemCreated": "Point de l'ordre du jour créé avec succès",
+    "agendaItemUpdated": "Point de l'ordre du jour mis à jour avec succès",
+    "agendaItemDeleted": "Point de l'ordre du jour supprimé avec succès",
+    "deleteAgendaItem": "Supprimer le point de l'ordre du jour",
+    "deleteAgendaItemMsg": "Voulez-vous supprimer ce point de l'ordre du jour ?"
+  },
+  "eventListCard": {
+    "deleteEvent": "Supprimer l'événement",
+    "deleteEventMsg": "Voulez-vous supprimer cet événement ?",
+    "editEvent": "Modifier l'événement",
+    "eventTitle": "Titre",
+    "alreadyRegistered": "Déjà enregistré",
+    "startTime": "Heure de début",
+    "endTime": "Heure de fin",
+    "allDay": "Toute la journée",
+    "recurringEvent": "Événement récurrent",
+    "isPublic": "est public",
+    "isRegistrable": "Est enregistrable",
+    "updatePost": "Mettre à jour le message",
+    "eventDetails": "Détails de l'évènement",
+    "eventDeleted": "Événement supprimé avec succès.",
+    "eventUpdated": "Événement mis à jour avec succès.",
+    "thisInstance": "Cette instance",
+    "thisAndFollowingInstances": "Instances présentes et suivantes",
+    "allInstances": "Toutes les instances",
+    "customRecurrence": "Récurrence personnalisée",
+    "repeatsEvery": "Se répète tous les",
+    "repeatsOn": "Répétition activée",
+    "ends": "Prend fin",
+    "never": "Jamais",
+    "on": "Sur",
+    "after": "Après",
+    "occurences": "événements",
+    "location": "Lieu",
+    "no": "Non",
+    "yes": "Oui",
+    "description": "Description",
+    "startDate": "Date de début",
+    "endDate": "Date de fin",
+    "registerEvent": "Inscrire à l'événement",
+    "close": "Fermer",
+    "talawaApiUnavailable": "API Talawa non disponible",
+    "done": "Terminé"
+  },
+  "funds": {
+    "title": "Fonds",
+    "createFund": "Créer un fonds",
+    "fundName": "Nom du fonds",
+    "fundId": "ID de référence du fonds",
+    "taxDeductible": "Déductible d'impôt",
+    "default": "Par défaut",
+    "archived": "Archivé",
+    "fundCreate": "Créer un fonds",
+    "fundUpdate": "Mettre à jour le fonds",
+    "fundDelete": "Supprimer le fonds",
+    "searchByName": "Rechercher par nom",
+    "noFundsFound": "Aucun fonds trouvé",
+    "createdBy": "Créé par",
+    "createdOn": "Créé le",
+    "status": "Statut",
+    "fundCreated": "Fonds créé avec succès",
+    "fundUpdated": "Fonds mis à jour avec succès",
+    "fundDeleted": "Fonds supprimé avec succès",
+    "deleteFundMsg": "Êtes-vous sûr de vouloir supprimer ce fonds ?",
+    "createdLatest": "Créé le plus récemment",
+    "createdEarliest": "Créé le plus tôt",
+    "viewCampaigns": "Voir les campagnes"
+  },
+  "fundCampaign": {
+    "title": "Campagnes de collecte de fonds",
+    "campaignName": "Nom de la campagne",
+    "campaignOptions": "Options",
+    "fundingGoal": "Objectif de financement",
+    "addCampaign": "Ajouter une campagne",
+    "createdCampaign": "Campagne créée avec succès",
+    "updatedCampaign": "Campagne mise à jour avec succès",
+    "deletedCampaign": "Campagne supprimée avec succès",
+    "deleteCampaignMsg": "Êtes-vous sûr de vouloir supprimer cette campagne ?",
+    "noCampaigns": "Aucune campagne trouvée",
+    "createCampaign": "Créer une campagne",
+    "updateCampaign": "Mettre à jour la campagne",
+    "deleteCampaign": "Supprimer la campagne",
+    "currency": "Devise",
+    "selectCurrency": "Sélectionner la devise",
+    "searchFullName": "Rechercher par nom",
+    "viewPledges": "Voir les promesses de dons",
+    "noCampaignsFound": "Aucune campagne trouvée",
+    "latestEndDate": "Dernière date de fin",
+    "earliestEndDate": "Date de fin la plus ancienne",
+    "lowestGoal": "Objectif le plus bas",
+    "highestGoal": "Objectif le plus élevé"
+  },
+  "pledges": {
+    "title": "Engagements de campagne de financement",
+    "pledgeAmount": "Montant de la promesse de don",
+    "pledgeOptions": "Possibilités",
+    "pledgeCreated": "Engagement créé avec succès",
+    "pledgeUpdated": "Engagement mis à jour avec succès",
+    "pledgeDeleted": "Engagement supprimé avec succès",
+    "addPledge": "Ajouter un engagement",
+    "createPledge": "Créer un engagement",
+    "currency": "Devise",
+    "selectCurrency": "Sélectionnez la devise",
+    "updatePledge": "Engagement de mise à jour",
+    "deletePledge": "Supprimer l'engagement",
+    "amount": "Montant",
+    "editPledge": "Modifier l'engagement",
+    "deletePledgeMsg": "Etes-vous sûr de vouloir supprimer cet engagement ?",
+    "noPledges": "Aucun engagement trouvé",
+    "searchPledger": "Rechercher par les bailleurs de fonds",
+    "highestAmount": "Montant le plus élevé",
+    "lowestAmount": "Montant le plus bas",
+    "latestEndDate": "Date de fin la plus récente",
+    "earliestEndDate": "Date de fin la plus proche",
+    "campaigns": "Campagnes",
+    "pledges": "Promesses de dons",
+    "endsOn": "Se termine le",
+    "raisedAmount": "Montant collecté",
+    "pledgedAmount": "Montant promis",
+    "startDate": "Date de début",
+    "endDate": "Date de fin"
+  },
+  "orgPost": {
+    "title": "Des postes",
+    "searchPost": "Rechercher un article",
+    "posts": "Des postes",
+    "createPost": "Créer un message",
+    "postDetails": "Détails du message",
+    "postTitle1": "Écrivez le titre du message",
+    "postTitle": "Titre",
+    "addMedia": "Télécharger des médias",
+    "information": "Information",
+    "information1": "Écrire les informations du message",
+    "addPost": "Ajouter un message",
+    "searchTitle": "Recherche par titre",
+    "searchText": "Recherche par texte",
+    "ptitle": "Titre de l'article",
+    "postDes": "De quoi veux-tu parler ?",
+    "Title": "Titre",
+    "Text": "Texte",
+    "searchBy": "Recherché par",
+    "Oldest": "Le plus âgé en premier",
+    "Latest": "Dernier premier",
+    "sortPost": "Trier le message",
+    "tag": " Votre navigateur ne prend pas en charge la balise vidéo",
+    "postCreatedSuccess": "Toutes nos félicitations! ",
+    "pinPost": "Épingler le message",
+    "Next": "Page suivante",
+    "Previous": "Page précédente",
+    "cancel": "Annuler"
+  },
+  "postNotFound": {
+    "post": "Poste",
+    "not found!": "Pas trouvé!",
+    "organization": "Organisation",
+    "post not found!": "Message introuvable !",
+    "organization not found!": "Organisation introuvable !"
+  },
+  "userNotFound": {
+    "not found!": "Pas trouvé!",
+    "roles": "Les rôles",
+    "user not found!": "Utilisateur non trouvé!",
+    "member not found!": "Membre introuvable!",
+    "admin not found!": "Administrateur introuvable !",
+    "roles not found!": "Rôles introuvables !",
+    "user": "Utilisateur"
+  },
+  "orgPostCard": {
+    "author": "Auteur",
+    "imageURL": "URL de l'image",
+    "videoURL": "URL de la vidéo",
+    "deletePost": "Supprimer le message",
+    "deletePostMsg": "Voulez-vous supprimer ce message?",
+    "editPost": "Modifier le message",
+    "postTitle": "Titre",
+    "postTitle1": "Modifier le titre du message",
+    "information1": "Modifier les informations du message",
+    "information": "Information",
+    "image": "Image",
+    "video": "Vidéo",
+    "updatePost": "Mettre à jour le message",
+    "postDeleted": "Message supprimé avec succès.",
+    "postUpdated": "Post mis à jour avec succès.",
+    "tag": " Votre navigateur ne prend pas en charge la balise vidéo",
+    "pin": "Épingler le message",
+    "edit": "Modifier",
+    "no": "Non",
+    "yes": "Oui",
+    "close": "Fermer",
+    "talawaApiUnavailable": "API Talawa non disponible"
+  },
+  "blockUnblockUser": {
+    "title": "Bloquer/débloquer un utilisateur",
+    "pageName": "Bloquer/Débloquer",
+    "listOfUsers": "Liste des utilisateurs qui ont spammé",
+    "block_unblock": "Bloquer/Débloquer",
+    "unblock": "Débloquer",
+    "block": "Bloc",
+    "orgName": "Entrez le nom",
+    "blockedSuccessfully": "Utilisateur bloqué avec succès",
+    "Un-BlockedSuccessfully": "Utilisateur débloqué avec succès",
+    "allMembers": "Tous les membres",
+    "blockedUsers": "Utilisateurs bloqués",
+    "searchByFirstName": "Recherche par prénom",
+    "searchByLastName": "Rechercher par nom de famille",
+    "noSpammerFound": "Aucun spammeur trouvé",
+    "searchByName": "Rechercher par nom",
+    "name": "Nom",
+    "email": "Email",
+    "talawaApiUnavailable": "API Talawa non disponible",
+    "noResultsFoundFor": "Aucun résultat trouvé pour"
+  },
+  "eventManagement": {
+    "title": "Gestion d'événements",
+    "dashboard": "Tableau de bord",
+    "registrants": "Inscrits",
+    "attendance": "Présence",
+    "actions": "Actions",
+    "agendas": "Ordres du jour",
+    "statistics": "Statistiques",
+    "to": "À",
+    "volunteers": "Bénévoles"
+  },
+  "forgotPassword": {
+    "title": "Talawa Mot de passe oublié",
+    "registeredEmail": "Email enregistré",
+    "getOtp": "Obtenir OTP",
+    "enterOtp": "Entrez OTP",
+    "enterNewPassword": "Entrez un nouveau mot de passe",
+    "cofirmNewPassword": "Confirmer le nouveau mot de passe",
+    "changePassword": "Changer le mot de passe",
+    "backToLogin": "Retour connexion",
+    "userOtp": "par exemple. ",
+    "emailNotRegistered": "L'e-mail n'est pas enregistré.",
+    "errorSendingMail": "Erreur lors de l'envoi du courrier.",
+    "passwordMismatches": "Mot de passe et Confirmer les incompatibilités de mot de passe.",
+    "passwordChanges": "Le mot de passe a été modifié avec succès.",
+    "OTPsent": "OTP est envoyé à votre adresse e-mail enregistrée.",
+    "forgotPassword": "Mot de passe oublié",
+    "password": "Mot de passe",
+    "talawaApiUnavailable": "API Talawa non disponible"
+  },
+  "pageNotFound": {
+    "404": "404",
+    "title": "404 introuvable",
+    "talawaAdmin": "Administrateur Talawa",
+    "talawaUser": "Utilisateur Talawa",
+    "notFoundMsg": "Oops! ",
+    "backToHome": "De retour à la maison"
+  },
+  "orgContribution": {
+    "title": "Contributions de Talawa",
+    "filterByName": "Filtrer par nom",
+    "filterByTransId": "Filtrer par Trans. ",
+    "recentStats": "Statistiques récentes",
+    "contribution": "Contribution",
+    "orgname": "Entrez le nom",
+    "searchtransaction": "Entrez l'ID de la transaction"
+  },
+  "contriStats": {
+    "recentContribution": "Contribution récente",
+    "highestContribution": "Contribution la plus élevée",
+    "totalContribution": "Contribution totale"
+  },
+  "orgContriCards": {
+    "date": "Date",
+    "transactionId": "identifiant de transaction",
+    "amount": "Montant"
+  },
+  "orgSettings": {
+    "title": "Paramètres",
+    "general": "Général",
+    "actionItemCategories": "Catégories d'éléments d'action",
+    "updateOrganization": "Mettre à jour l'organisation",
+    "seeRequest": "Voir la demande",
+    "noData": "Aucune donnée",
+    "otherSettings": "Autres paramètres",
+    "changeLanguage": "Changer de langue",
+    "manageCustomFields": "Gérer les champs personnalisés",
+    "agendaItemCategories": "Catégories d'éléments d'agenda"
+  },
+  "deleteOrg": {
+    "deleteOrganization": "Supprimer l'organisation",
+    "deleteSampleOrganization": "Supprimer un exemple d'organisation",
+    "deleteMsg": "Voulez-vous supprimer cette organisation ?",
+    "confirmDelete": "Confirmation de la suppression",
+    "longDelOrgMsg": "En cliquant sur le bouton Supprimer l'organisation, l'organisation sera définitivement supprimée ainsi que ses événements, balises et toutes les données associées.",
+    "successfullyDeletedSampleOrganization": "Exemple d'organisation supprimé avec succès",
+    "cancel": "Annuler"
+  },
+  "userUpdate": {
+    "appLanguageCode": "Langage par défaut",
+    "userType": "Type d'utilisateur",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "email": "Email",
+    "password": "Mot de passe",
+    "admin": "Admin",
+    "superAdmin": "Super Admin",
+    "displayImage": "Image d'affichage",
+    "saveChanges": "Enregistrer les modifications",
+    "cancel": "Annuler"
+  },
+  "userPasswordUpdate": {
+    "previousPassword": "Mot de passe précédent",
+    "newPassword": "nouveau mot de passe",
+    "confirmNewPassword": "Confirmer le nouveau mot de passe",
+    "passCantBeEmpty": "Le mot de passe ne peut pas être vide",
+    "passNoMatch": "Le nouveau mot de passe et la confirmation du mot de passe ne correspondent pas.",
+    "saveChanges": "Enregistrer les modifications",
+    "cancel": "Annuler"
+  },
+  "orgDelete": {
+    "deleteOrg": "Supprimer l'organisation"
+  },
+  "membershipRequest": {
+    "accept": "Accepter",
+    "reject": "Rejeter",
+    "memberAdded": "c'est accepté",
+    "joined": "Rejoint",
+    "talawaApiUnavailable": "API Talawa non disponible"
+  },
+  "orgUpdate": {
+    "city": "Ville",
+    "countryCode": "Code postal",
+    "line1": "Ligne 1",
+    "line2": "Ligne 2",
+    "postalCode": "Code Postal",
+    "dependentLocality": "Localité dépendante",
+    "sortingCode": "Code de tri",
+    "state": "État/Province",
+    "userRegistrationRequired": "Inscription de l'utilisateur requise",
+    "isVisibleInSearch": "Visible dans la recherche",
+    "enterNameOrganization": "Entrez le nom de l'organisation",
+    "successfulUpdated": "Organisation mise à jour avec succès",
+    "name": "Nom",
+    "description": "Description",
+    "location": "Lieu",
+    "address": "Adresse",
+    "displayImage": "Image d'affichage",
+    "saveChanges": "Enregistrer les modifications",
+    "cancel": "Annuler",
+    "talawaApiUnavailable": "API Talawa non disponible"
+  },
+  "addOnRegister": {
+    "addNew": "Ajouter un nouveau",
+    "addPlugin": "Ajouter un plugin",
+    "pluginName": "Nom du plugin",
+    "creatorName": "Nom du créateur",
+    "pluginDesc": "Description du plugin",
+    "pName": "Ex : Dons",
+    "cName": "Ex : John Doe",
+    "pDesc": "Ce plugin active l'interface utilisateur pour",
+    "close": "Fermer",
+    "register": "Inscription"
+  },
+  "addOnStore": {
+    "title": "Ajouter sur la boutique",
+    "searchName": "Ex : Dons",
+    "search": "Rechercher",
+    "enable": "Activé",
+    "disable": "Désactivé",
+    "pHeading": "Plugins",
+    "install": "installée",
+    "available": "Disponible",
+    "pMessage": "Le plugin n'existe pas",
+    "filter": "filtrer"
+  },
+  "addOnEntry": {
+    "enable": "Activé",
+    "install": "Installer",
+    "uninstall": "Désinstaller",
+    "uninstallMsg": "Cette fonctionnalité est désormais supprimée de votre organisation",
+    "installMsg": "Cette fonctionnalité est désormais activée dans votre organisation"
+  },
+  "memberDetail": {
+    "title": "Détails de l'utilisateur",
+    "addAdmin": "Ajouter un administrateur",
+    "noeventsAttended": "Aucun événement assisté",
+    "alreadyIsAdmin": "Le membre est déjà un administrateur",
+    "organizations": "Organisations",
+    "events": "Événements",
+    "role": "Rôle",
+    "createdOn": "Créé sur",
+    "main": "Principal",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "language": "Langue",
+    "gender": "Genre",
+    "birthDate": "Date de naissance",
+    "educationGrade": "Niveau d'éducation",
+    "employmentStatus": "Statut d'emploi",
+    "maritalStatus": "État civil",
+    "phone": "Téléphone",
+    "countryCode": "Code postal",
+    "state": "État",
+    "city": "Ville",
+    "personalInfoHeading": "Informations personnelles",
+    "eventsAttended": "Événements attenus",
+    "viewAll": "Voir tout",
+    "contactInfoHeading": "Coordonnées",
+    "actionsHeading": "Actions",
+    "personalDetailsHeading": "Détails du profil",
+    "appLanguageCode": "Choisissez la langue",
+    "deleteUser": "Supprimer l'utilisateur",
+    "pluginCreationAllowed": "Création de plugin autorisée",
+    "created": "Créé",
+    "adminForOrganizations": "Administrateur pour les organisations",
+    "membershipRequests": "Demandes d'adhésion",
+    "adminForEvents": "Administrateur pour les événements",
+    "addedAsAdmin": "L'utilisateur est ajouté en tant qu'administrateur.",
+    "userType": "Type d'utilisateur",
+    "email": "Email",
+    "displayImage": "Image d'affichage",
+    "address": "Adresse",
+    "delete": "Supprimer",
+    "saveChanges": "Enregistrer les modifications",
+    "joined": "Rejoint",
+    "talawaApiUnavailable": "API Talawa non disponible",
+    "unassignUserTag": "Désassigner l'étiquette",
+    "unassignUserTagMessage": "Voulez-vous retirer l'étiquette de cet utilisateur?",
+    "successfullyUnassigned": "Étiquette retirée de l'utilisateur",
+    "tagsAssigned": "étiquettes assignées",
+    "noTagsAssigned": "Aucune étiquette assignée"
+  },
+  "people": {
+    "title": "Personnes",
+    "searchUsers": "Rechercher des utilisateurs"
+  },
+  "userLogin": {
+    "login": "Se connecter",
+    "loginIntoYourAccount": "Connectez-vous à votre compte",
+    "invalidDetailsMessage": "Veuillez entrer un email et un mot de passe valides.",
+    "notAuthorised": "Désolé! ",
+    "invalidCredentials": "Les informations d'identification saisies sont incorrectes. ",
+    "forgotPassword": "Mot de passe oublié",
+    "emailAddress": "Adresse email",
+    "enterEmail": "Entrer l'email",
+    "password": "Mot de passe",
+    "enterPassword": "Entrer le mot de passe",
+    "register": "Inscription",
+    "talawaApiUnavailable": "API Talawa non disponible"
+  },
+  "userRegister": {
+    "enterFirstName": "Entrez votre prénom",
+    "enterLastName": "Entrez votre nom de famille",
+    "enterConfirmPassword": "Entrez votre mot de passe pour confirmer",
+    "alreadyhaveAnAccount": "Vous avez déjà un compte?",
+    "login": "Se connecter",
+    "afterRegister": "Enregistré avec succès. ",
+    "passwordNotMatch": "Le mot de passe ne correspond pas. ",
+    "invalidDetailsMessage": "Veuillez saisir des informations valides.",
+    "register": "Inscription",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "emailAddress": "Adresse email",
+    "enterEmail": "Entrer l'email",
+    "password": "Mot de passe",
+    "enterPassword": "Entrer le mot de passe",
+    "confirmPassword": "Confirmer le mot de passe",
+    "talawaApiUnavailable": "API Talawa non disponible"
+  },
+  "userNavbar": {
+    "talawa": "Talawa",
+    "home": "Maison",
+    "people": "Personnes",
+    "events": "Événements",
+    "chat": "Chat",
+    "donate": "Faire un don",
+    "language": "Langue",
+    "settings": "Paramètres",
+    "logout": "Déconnexion",
+    "close": "Fermer"
+  },
+  "userOrganizations": {
+    "allOrganizations": "Toutes les organisations",
+    "joinedOrganizations": "Organisations rejointes",
+    "createdOrganizations": "Organisations créées",
+    "selectOrganization": "Sélectionnez une organisation",
+    "searchUsers": "Rechercher des utilisateurs",
+    "nothingToShow": "Rien à montrer ici.",
+    "organizations": "Organisations",
+    "search": "Rechercher",
+    "filter": "Filtrer",
+    "searchByName": "Rechercher par nom",
+    "searchOrganizations": "Rechercher Organisations"
+  },
+  "userSidebarOrg": {
+    "yourOrganizations": "Vos organisations",
+    "noOrganizations": "Vous n'avez encore rejoint aucune organisation.",
+    "viewAll": "Voir tout",
+    "talawaUserPortal": "Portail utilisateur Talawa",
+    "my organizations": "Mes organisations",
+    "communityProfile": "Profil de la communauté",
+    "users": "utilisateurs",
+    "requests": "demandes",
+    "logout": "se déconnecter",
+    "settings": "paramètres",
+    "chat": "discussion",
+    "menu": "Menu"
+  },
+  "organizationSidebar": {
+    "viewAll": "Voir tout",
+    "events": "Événements",
+    "noEvents": "Aucun événement à afficher",
+    "noMembers": "Aucun membre à afficher",
+    "members": "Membres"
+  },
+  "postCard": {
+    "likes": "Aime",
+    "comments": "commentaires",
+    "viewPost": "Voir le message",
+    "editPost": "Modifier le message",
+    "postedOn": "Publié le {{date}}"
+  },
+  "home": {
+    "posts": "Des postes",
+    "post": "Poste",
+    "title": "Titre",
+    "textArea": "Quelque chose vous préoccupe ?",
+    "feed": "Alimentation",
+    "loading": "Chargement",
+    "pinnedPosts": "Messages épinglés",
+    "yourFeed": "Votre flux",
+    "nothingToShowHere": "Rien à montrer ici",
+    "somethingOnYourMind": "Quelque chose vous préoccupe ?",
+    "addPost": "Ajouter un message",
+    "startPost": "Démarrer un message",
+    "media": "Médias",
+    "event": "Événement",
+    "article": "Article",
+    "postNowVisibleInFeed": "Le post est maintenant visible dans le fil d'actualité"
+  },
+  "eventAttendance": {
+    "historical_statistics": "Statistiques historiques",
+    "Search member": "Rechercher un membre",
+    "Member Name": "Nom du membre",
+    "Status": "Statut",
+    "Events Attended": "Événements assistés",
+    "Task Assigned": "Tâche assignée",
+    "Member": "Membre",
+    "Admin": "Administrateur",
+    "loading": "Chargement...",
+    "noAttendees": "Aucun participant trouvé"
+  },
+  "onSpotAttendee": {
+    "title": "Participant sur place",
+    "enterFirstName": "Entrez le prénom",
+    "enterLastName": "Entrez le nom de famille",
+    "enterEmail": "Entrez l'e-mail",
+    "enterPhoneNo": "Entrez le numéro de téléphone",
+    "selectGender": "Sélectionnez le sexe",
+    "invalidDetailsMessage": "Veuillez remplir tous les champs obligatoires",
+    "orgIdMissing": "L'ID de l'organisation est manquant. Veuillez réessayer.",
+    "attendeeAddedSuccess": "Participant ajouté avec succès!",
+    "addAttendee": "Ajouter",
+    "phoneNumber": "Numéro de téléphone",
+    "addingAttendee": "Ajout en cours...",
+    "male": "Homme",
+    "female": "Femme",
+    "other": "Autre"
+  },
+  "settings": {
+    "eventAttended": "Événements Assistés",
+    "noeventsAttended": "Aucun événement assisté",
+    "profileSettings": "Paramètres de profil",
+    "gender": "Genre",
+    "phoneNumber": "Numéro de téléphone",
+    "chooseFile": "Choisir le fichier",
+    "birthDate": "Date de naissance",
+    "grade": "Niveau d'éducation",
+    "empStatus": "Statut d'emploi",
+    "maritalStatus": "État civil",
+    "state": "Ville/État",
+    "country": "Pays",
+    "resetChanges": "Réinitialiser les modifications",
+    "profileDetails": "Détails du profil",
+    "deleteUserMessage": "En cliquant sur le bouton Supprimer l'utilisateur, votre utilisateur sera définitivement supprimé ainsi que ses événements, balises et toutes les données associées.",
+    "copyLink": "Copier le lien du profil",
+    "deleteUser": "Supprimer l'utilisateur",
+    "otherSettings": "Autres réglages",
+    "changeLanguage": "Changer de langue",
+    "sgender": "Sélectionnez le sexe",
+    "gradePlaceholder": "Entrez la note",
+    "sEmpStatus": "Sélectionnez le statut d'emploi",
+    "female": "Femelle",
+    "male": "Mâle",
+    "employed": "Employé",
+    "other": "Autre",
+    "sMaritalStatus": "Sélectionnez l'état civil",
+    "unemployed": "Sans emploi",
+    "married": "Marié",
+    "single": "Célibataire",
+    "widowed": "Veuf",
+    "divorced": "Divorcé",
+    "engaged": "Engagé",
+    "separated": "Séparé",
+    "grade1": "1re année",
+    "grade2": "2e année",
+    "grade3": "3e année",
+    "grade4": "Niveau 4",
+    "grade5": "Niveau 5",
+    "grade6": "6ème année",
+    "grade7": "7e année",
+    "grade8": "8e année",
+    "grade9": "9e année",
+    "grade10": "10 e année",
+    "grade11": "11e année",
+    "grade12": "12 e année",
+    "graduate": "Diplômé",
+    "kg": "KG",
+    "preKg": "Pré-KG",
+    "noGrade": "Aucune note",
+    "fullTime": "À temps plein",
+    "partTime": "À temps partiel",
+    "selectCountry": "Choisissez un pays",
+    "enterState": "Entrez la ville ou l'état",
+    "settings": "Paramètres",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "emailAddress": "Adresse email",
+    "displayImage": "Image d'affichage",
+    "address": "Adresse",
+    "saveChanges": "Enregistrer les modifications",
+    "joined": "Rejoint"
+  },
+  "donate": {
+    "title": "Des dons",
+    "donations": "Des dons",
+    "searchDonations": "Rechercher des dons",
+    "donateForThe": "Faites un don pour le",
+    "amount": "Montant",
+    "yourPreviousDonations": "Vos dons précédents",
+    "donate": "Faire un don",
+    "nothingToShow": "Rien à montrer ici.",
+    "success": "Don réussi",
+    "invalidAmount": "Veuillez saisir une valeur numérique pour le montant du don.",
+    "donationAmountDescription": "Veuillez saisir la valeur numérique du montant du don.",
+    "donationOutOfRange": "Le montant du don doit être compris entre {{min}} et {{max}}.",
+    "donateTo": "Faire un don à"
+  },
+  "userEvents": {
+    "title": "Événements",
+    "nothingToShow": "Rien à montrer ici.",
+    "createEvent": "Créer un évènement",
+    "recurring": "Événement récurrent",
+    "startTime": "Heure de début",
+    "endTime": "Heure de fin",
+    "listView": "Vue en liste",
+    "calendarView": "Vue du calendrier",
+    "allDay": "Toute la journée",
+    "eventCreated": "Événement créé et publié avec succès.",
+    "eventDetails": "Détails de l'évènement",
+    "eventTitle": "Titre",
+    "enterTitle": "Entrez le titre",
+    "enterDescription": "Entrez la description",
+    "enterLocation": "Entrez l'emplacement",
+    "publicEvent": "est public",
+    "registerable": "Est enregistrable",
+    "monthlyCalendarView": "Calendrier mensuel",
+    "yearlyCalendarView": "Calendrier annuel",
+    "search": "Rechercher",
+    "cancel": "Annuler",
+    "create": "Créer",
+    "eventDescription": "Description de l'événement",
+    "eventLocation": "Lieu de l'événement",
+    "startDate": "Date de début",
+    "endDate": "Date de fin"
+  },
+  "userEventCard": {
+    "starts": "Départs",
+    "ends": "Prend fin",
+    "creator": "Créateur",
+    "alreadyRegistered": "Déjà enregistré",
+    "location": "Lieu",
+    "register": "Inscription"
+  },
+  "advertisement": {
+    "title": "Annonces",
+    "activeAds": "Campagnes actives",
+    "archievedAds": "Campagnes terminées",
+    "pMessage": "Annonces non présentes pour cette campagne.",
+    "validLink": "Le lien est valide",
+    "invalidLink": "Le lien n'est pas valide",
+    "Rname": "Entrez le nom de l'annonce",
+    "Rtype": "Sélectionnez le type de publicité",
+    "Rmedia": "Fournir du contenu multimédia à afficher",
+    "RstartDate": "Sélectionnez la date de début",
+    "RendDate": "Sélectionnez la date de fin",
+    "RClose": "Ferme la fenêtre",
+    "addNew": "Créer une nouvelle annonce",
+    "EXname": "Ex. ",
+    "EXlink": "Ex. ",
+    "createAdvertisement": "Créer une publicité",
+    "deleteAdvertisement": "Supprimer la publicité",
+    "deleteAdvertisementMsg": "Voulez-vous supprimer cette publicité ?",
+    "view": "Voir",
+    "editAdvertisement": "Modifier l'annonce",
+    "advertisementDeleted": "Publicité supprimée avec succès.",
+    "endDateGreaterOrEqual": "La date de fin doit être supérieure ou égale à la date de début",
+    "advertisementCreated": "Publicité créée avec succès.",
+    "pHeading": "Titre principal",
+    "delete": "Supprimer",
+    "close": "Fermer",
+    "no": "Non",
+    "yes": "Oui",
+    "edit": "Modifier",
+    "saveChanges": "Enregistrer les modifications",
+    "endOfResults": "Fin des résultats"
+  },
+  "userChat": {
+    "chat": "Chat",
+    "contacts": "Contacts",
+    "search": "rechercher",
+    "messages": "messages"
+  },
+  "userChatRoom": {
+    "selectContact": "Sélectionnez un contact pour démarrer la conversation",
+    "sendMessage": "Envoyer le message"
+  },
+  "orgProfileField": {
+    "loading": "Chargement...",
+    "noCustomField": "Aucun champ personnalisé disponible",
+    "customFieldName": "Nom de domaine",
+    "enterCustomFieldName": "Entrez le nom du champ",
+    "customFieldType": "Type de champ",
+    "Remove Custom Field": "Supprimer le champ personnalisé",
+    "fieldSuccessMessage": "Champ ajouté avec succès",
+    "fieldRemovalSuccess": "Champ supprimé avec succès",
+    "String": "Chaîne",
+    "Boolean": "Booléen",
+    "Date": "Date",
+    "Number": "Nombre",
+    "saveChanges": "Enregistrer les modifications"
+  },
+  "orgActionItemCategories": {
+    "enableButton": "Activer",
+    "disableButton": "Désactiver",
+    "updateActionItemCategory": "Mise à jour",
+    "actionItemCategoryName": "Nom",
+    "categoryDetails": "Détails de la catégorie",
+    "enterName": "Entrez le nom",
+    "successfulCreation": "Catégorie d'élément d'action créée avec succès",
+    "successfulUpdation": "Catégorie d'élément d'action mise à jour avec succès",
+    "sameNameConflict": "Veuillez changer le nom pour effectuer une mise à jour",
+    "categoryEnabled": "Catégorie d'élément d'action activée",
+    "categoryDisabled": "Catégorie d'élément d'action désactivée",
+    "noActionItemCategories": "Aucune catégorie d'élément d'action",
+    "status": "Statut",
+    "categoryDeleted": "Catégorie d'élément d'action supprimée avec succès",
+    "deleteCategory": "Supprimer la catégorie",
+    "deleteCategoryMsg": "Êtes-vous sûr de vouloir supprimer cette catégorie d'élément d'action ?",
+    "createButton": "Créer",
+    "editButton": "Modifier"
+  },
+  "organizationVenues": {
+    "title": "Lieux",
+    "addVenue": "Ajouter un lieu",
+    "venueDetails": "Détails du lieu",
+    "venueName": "Nom du lieu",
+    "enterVenueName": "Entrez le nom du lieu",
+    "enterVenueDesc": "Entrez la description du lieu",
+    "capacity": "Capacité",
+    "enterVenueCapacity": "Entrez la capacité du site",
+    "image": "Image du lieu",
+    "uploadVenueImage": "Télécharger l'image du lieu",
+    "createVenue": "Créer un lieu",
+    "venueAdded": "Lieu ajouté avec succès",
+    "editVenue": "Mettre à jour le lieu",
+    "venueUpdated": "Les détails du lieu ont été mis à jour avec succès",
+    "sort": "Trier",
+    "highestCapacity": "Capacité la plus élevée",
+    "lowestCapacity": "Capacité la plus basse",
+    "noVenues": "Aucun lieu trouvé !",
+    "view": "Voir",
+    "venueTitleError": "Le titre du lieu ne peut pas être vide !",
+    "venueCapacityError": "La capacité doit être un nombre positif !",
+    "searchBy": "Recherché par",
+    "description": "Description",
+    "edit": "Modifier",
+    "delete": "Supprimer",
+    "name": "Nom",
+    "desc": "Description"
+  },
+  "addMember": {
+    "title": "Ajouter un membre",
+    "addMembers": "Ajouter des membres",
+    "existingUser": "Utilisateur existant",
+    "newUser": "Nouvel utilisateur",
+    "searchFullName": "Rechercher par nom complet",
+    "enterFirstName": "Entrez votre prénom",
+    "enterLastName": "Entrer le nom de famille",
+    "enterConfirmPassword": "Entrez Confirmer le mot de passe",
+    "organization": "Organisation",
+    "invalidDetailsMessage": "Veuillez fournir tous les détails requis.",
+    "passwordNotMatch": "Les mots de passe ne correspondent pas.",
+    "addMember": "Ajouter un membre",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "emailAddress": "Adresse email",
+    "enterEmail": "Entrer l'email",
+    "password": "Mot de passe",
+    "enterPassword": "Entrer le mot de passe",
+    "confirmPassword": "Confirmer le mot de passe",
+    "cancel": "Annuler",
+    "create": "Créer",
+    "user": "Utilisateur",
+    "profile": "Profil"
+  },
+  "eventActionItems": {
+    "title": "Éléments d'action",
+    "createActionItem": "Créer des éléments d'action",
+    "actionItemCategory": "Catégorie d'élément d'action",
+    "selectActionItemCategory": "Sélectionnez une catégorie d'élément d'action",
+    "selectAssignee": "Sélectionnez un responsable",
+    "preCompletionNotes": "Remarques",
+    "postCompletionNotes": "Notes d'achèvement",
+    "actionItemDetails": "Détails de l'action",
+    "dueDate": "Date d'échéance",
+    "completionDate": "Date d'achèvement",
+    "editActionItem": "Modifier l'élément d'action",
+    "deleteActionItem": "Supprimer l'élément d'action",
+    "deleteActionItemMsg": "Voulez-vous supprimer cette action ?",
+    "successfulDeletion": "Élément d'action supprimé avec succès",
+    "successfulCreation": "Élément d'action créé avec succès",
+    "successfulUpdation": "Élément d'action mis à jour avec succès",
+    "notes": "Remarques",
+    "assignee": "Cessionnaire",
+    "assigner": "Assigner",
+    "assignmentDate": "Date d'affectation",
+    "status": "Statut",
+    "actionItemActive": "Actif",
+    "actionItemStatus": "Statut de l'action",
+    "actionItemCompleted": "Élément d'action terminé",
+    "markCompletion": "Marquer l'achèvement",
+    "save": "Sauvegarder",
+    "yes": "Oui",
+    "no": "Non"
+  },
+  "checkIn": {
+    "errorCheckingIn": "Erreur lors de l'enregistrement",
+    "checkedInSuccessfully": "Enregistrement réussi"
+  },
+  "eventRegistrantsModal": {
+    "errorAddingAttendee": "Erreur lors de l'ajout du participant",
+    "errorRemovingAttendee": "Erreur lors de la suppression du participant"
+  },
+  "userCampaigns": {
+    "title": "Campagnes de financement",
+    "searchByName": "Rechercher par nom...",
+    "searchBy": "Rechercher par",
+    "pledgers": "Contributeurs",
+    "campaigns": "Campagnes",
+    "myPledges": "Mes Promesses",
+    "lowestAmount": "Montant le plus bas",
+    "highestAmount": "Montant le plus élevé",
+    "lowestGoal": "Objectif le plus bas",
+    "highestGoal": "Objectif le plus élevé",
+    "latestEndDate": "Date de fin la plus tardive",
+    "earliestEndDate": "Date de fin la plus proche",
+    "addPledge": "Ajouter une promesse",
+    "viewPledges": "Voir les promesses",
+    "noPledges": "Aucune promesse trouvée",
+    "noCampaigns": "Aucune campagne trouvée"
+  },
+  "userPledges": {
+    "title": "Mes Promesses"
+  },
+  "eventVolunteers": {
+    "volunteers": "Bénévoles",
+    "volunteer": "Bénévole",
+    "volunteerGroups": "Groupes de Bénévoles",
+    "individuals": "Individus",
+    "groups": "Groupes",
+    "status": "Statut",
+    "noVolunteers": "Aucun Bénévole",
+    "noVolunteerGroups": "Aucun Groupe de Bénévoles",
+    "add": "Ajouter",
+    "mostHoursVolunteered": "Le Plus d'Heures de Bénévolat",
+    "leastHoursVolunteered": "Le Moins d'Heures de Bénévolat",
+    "accepted": "Accepté",
+    "addVolunteer": "Ajouter un Bénévole",
+    "removeVolunteer": "Supprimer le Bénévole",
+    "volunteerAdded": "Bénévole ajouté avec succès",
+    "volunteerRemoved": "Bénévole supprimé avec succès",
+    "volunteerGroupCreated": "Groupe de bénévoles créé avec succès",
+    "volunteerGroupUpdated": "Groupe de bénévoles mis à jour avec succès",
+    "volunteerGroupDeleted": "Groupe de bénévoles supprimé avec succès",
+    "removeVolunteerMsg": "Êtes-vous sûr de vouloir supprimer ce bénévole?",
+    "deleteVolunteerGroupMsg": "Êtes-vous sûr de vouloir supprimer ce groupe de bénévoles?",
+    "leader": "Chef",
+    "group": "Groupe",
+    "createGroup": "Créer un Groupe",
+    "updateGroup": "Mettre à Jour le Groupe",
+    "deleteGroup": "Supprimer le Groupe",
+    "volunteersRequired": "Bénévoles Requis",
+    "volunteerDetails": "Détails du Bénévole",
+    "hoursVolunteered": "Heures de Bénévolat",
+    "groupDetails": "Détails du Groupe",
+    "creator": "Créateur",
+    "requests": "Demandes",
+    "noRequests": "Aucune Demande",
+    "latest": "Le Plus Récent",
+    "earliest": "Le Plus Ancien",
+    "requestAccepted": "Demande acceptée avec succès",
+    "requestRejected": "Demande rejetée avec succès",
+    "details": "Détails",
+    "manageGroup": "Gérer le Groupe",
+    "mostVolunteers": "Le plus de bénévoles",
+    "leastVolunteers": "Le moins de bénévoles"
+  },
+  "userVolunteer": {
+    "title": "Volontariat",
+    "name": "Titre",
+    "upcomingEvents": "Événements à Venir",
+    "requests": "Demandes",
+    "invitations": "Invitations",
+    "groups": "Groupes de Bénévoles",
+    "actions": "Actions",
+    "searchByName": "Rechercher par Nom",
+    "latestEndDate": "Date de Fin la Plus Récente",
+    "earliestEndDate": "Date de Fin la Plus Ancienne",
+    "noEvents": "Aucun Événement à Venir",
+    "volunteer": "Bénévole",
+    "volunteered": "A Bénévolé",
+    "join": "Rejoindre",
+    "joined": "Rejoint",
+    "searchByEventName": "Rechercher par Titre d'Événement",
+    "filter": "Filtrer",
+    "groupInvite": "Invitation de Groupe",
+    "individualInvite": "Invitation Individuelle",
+    "noInvitations": "Aucune Invitation",
+    "accept": "Accepter",
+    "reject": "Rejeter",
+    "receivedLatest": "Reçu le Plus Récemment",
+    "receivedEarliest": "Reçu en Premier",
+    "invitationAccepted": "Invitation acceptée avec succès",
+    "invitationRejected": "Invitation rejetée avec succès",
+    "volunteerSuccess": "Demande de bénévolat envoyée avec succès",
+    "recurring": "Récurrent",
+    "groupInvitationSubject": "Invitation à rejoindre le groupe de bénévoles",
+    "eventInvitationSubject": "Invitation à faire du bénévolat pour l'événement"
+  }
+}
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
new file mode 100644
index 0000000000..f312424f1d
--- /dev/null
+++ b/public/locales/hi/common.json
@@ -0,0 +1,98 @@
+{
+  "firstName": "पहला नाम",
+  "lastName": "उपनाम",
+  "searchByName": "नाम से खोजें",
+  "loading": "लोड हो रहा है...",
+  "endOfResults": "परिणाम का अंत",
+  "noResultsFoundFor": "का कोई परिणाम नहीं मिला ",
+  "edit": "संपादन करना",
+  "admins": "व्यवस्थापक",
+  "admin": "व्यवस्थापक",
+  "user": "उपयोगकर्ता",
+  "superAdmin": "सुपरएडमिन",
+  "members": "सदस्यों",
+  "logout": "लॉग आउट",
+  "login": "लॉग इन करें",
+  "register": "पंजीकरण करवाना",
+  "menu": "मेन्यू",
+  "settings": "समायोजन",
+  "users": "उपयोगकर्ताओं",
+  "requests": "अनुरोध",
+  "OR": "या",
+  "cancel": "रद्द करना",
+  "close": "बंद करना",
+  "create": "बनाएं",
+  "delete": "मिटाना",
+  "done": "हो गया",
+  "yes": "हाँ",
+  "no": "नहीं",
+  "filter": "फ़िल्टर",
+  "gender": "लिंग",
+  "search": "खोज",
+  "description": "विवरण",
+  "saveChanges": "परिवर्तनों को सुरक्षित करें",
+  "resetChanges": "परिवर्तनों को रीसेट करें",
+  "displayImage": "प्रदर्शन छवि",
+  "enterEmail": "ईमेल दर्ज करें",
+  "emailAddress": "मेल पता",
+  "email": "ईमेल",
+  "name": "नाम",
+  "desc": "विवरण",
+  "enterPassword": "पास वर्ड दर्ज करें",
+  "password": "पासवर्ड",
+  "confirmPassword": "पासवर्ड की पुष्टि कीजिये",
+  "forgotPassword": "पासवर्ड भूल गए ?",
+  "talawaAdminPortal": "तलावा एडमिन पोर्टल",
+  "address": "पता",
+  "location": "जगह",
+  "enterLocation": "स्थान दर्ज करें",
+  "joined": "में शामिल हो गए",
+  "startDate": "आरंभ करने की तिथि",
+  "endDate": "अंतिम तिथि",
+  "startTime": "समय शुरू",
+  "endTime": "अंत समय",
+  "My Organizations": "मेरे संगठन",
+  "Dashboard": "डैशबोर्ड",
+  "People": "लोग",
+  "Events": "कार्यक्रम",
+  "Venues": "स्थल",
+  "Action Items": "कार्य आइटम",
+  "Posts": "पोस्ट",
+  "Block/Unblock": "ब्लॉक/अनब्लॉक",
+  "Advertisement": "विज्ञापन",
+  "Funds": "निधि",
+  "Membership Requests": "सदस्यता अनुरोध",
+  "Plugins": "प्लगइन्स",
+  "Plugin Store": "प्लगइन स्टोर",
+  "Settings": "सेटिंग्स",
+  "createdOn": "बनाया गया",
+  "createdBy": "के द्वारा बनाया गया",
+  "usersRole": "उपयोगकर्ता की भूमिका",
+  "changeRole": "भूमिका बदलें",
+  "action": "क्रिया",
+  "removeUser": "उपयोगकर्ता हटाएं",
+  "remove": "हटाएं",
+  "viewProfile": "प्रोफ़ाइल देखें",
+  "profile": "प्रोफ़ाइल",
+  "noFiltersApplied": "कोई फ़िल्टर लागू नहीं हैं",
+  "manage": "प्रबंधित करें",
+  "searchResultsFor": "{{text}} के लिए खोज परिणाम",
+  "none": "कोई नहीं",
+  "sort": "क्रम से लगाना",
+  "Donate": "दान करें",
+  "addedSuccessfully": "{{item}} सफलतापूर्वक जोड़ा गया",
+  "updatedSuccessfully": "{{item}} सफलतापूर्वक अपडेट किया गया",
+  "removedSuccessfully": "{{item}} सफलतापूर्वक हटाया गया",
+  "sessionWarning": "आपका सत्र निष्क्रियता के कारण जल्द ही समाप्त हो जाएगा। कृपया अपने सत्र को बढ़ाने के लिए पृष्ठ के साथ बातचीत करें।",
+  "sessionLogOut": "निष्क्रियता के कारण आपका सत्र समाप्त हो गया है। कृपया जारी रखने के लिए पुनः लॉगिन करें।",
+  "successfullyUpdated": "सफलतापूर्वक अपडेट किया गया",
+  "all": "सभी",
+  "active": "सक्रिय",
+  "disabled": "अक्षम",
+  "pending": "लंबित",
+  "completed": "पूरा हुआ",
+  "late": "देर से",
+  "createdLatest": "नवीनतम बनाया गया",
+  "createdEarliest": "सबसे पहले बनाया गया",
+  "searchBy": "के द्वारा खोजें {{item}}"
+}
diff --git a/public/locales/hi/errors.json b/public/locales/hi/errors.json
new file mode 100644
index 0000000000..63b6c3f5d3
--- /dev/null
+++ b/public/locales/hi/errors.json
@@ -0,0 +1,11 @@
+{
+  "talawaApiUnavailable": "तलवा-एपीआई सेवा उपलब्ध नहीं है! ",
+  "notFound": "नहीं मिला",
+  "unknownError": "एक अज्ञात त्रुटि हुई।  {{msg}}",
+  "notAuthorised": "क्षमा मांगना! ",
+  "errorSendingMail": "मेल भेजने में त्रुटि",
+  "emailNotRegistered": "ईमेल पंजीकृत नहीं है",
+  "notFoundMsg": "उफ़! ",
+  "errorOccurredCouldntCreate": "एक त्रुटि हुई। {{entity}} नहीं बना सके",
+  "errorLoading": "{{entity}} डेटा लोड करते समय त्रुटि हुई"
+}
diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
new file mode 100644
index 0000000000..2645340b23
--- /dev/null
+++ b/public/locales/hi/translation.json
@@ -0,0 +1,1483 @@
+{
+  "leaderboard": {
+    "title": "लीडरबोर्ड",
+    "searchByVolunteer": "स्वयंसेवक द्वारा खोजें",
+    "mostHours": "सबसे अधिक घंटे",
+    "leastHours": "सबसे कम घंटे",
+    "timeFrame": "समय सीमा",
+    "allTime": "सभी समय",
+    "weekly": "इस सप्ताह",
+    "monthly": "इस माह",
+    "yearly": "इस वर्ष",
+    "noVolunteers": "कोई स्वयंसेवक नहीं मिला!"
+  },
+  "loginPage": {
+    "title": "तालावा व्यवस्थापक",
+    "fromPalisadoes": "Palisadoes फाउंडेशन स्वयंसेवकों द्वारा विकसित एक ओपन-सोर्स एप्लिकेशन",
+    "userLogin": "उपयोगकर्ता लॉगिन",
+    "atleast_8_char_long": "कम से कम 8 अक्षर लंबे",
+    "atleast_6_char_long": "कम से कम 6 अक्षर लंबे",
+    "firstName_invalid": "पहला नाम केवल छोटे और बड़े अक्षरों को शामिल कर सकता है",
+    "lastName_invalid": "अंतिम नाम केवल छोटे और बड़े अक्षरों को शामिल कर सकता है",
+    "password_invalid": "पासवर्ड में कम से कम 1 छोटा अक्षर, 1 बड़ा अक्षर, 1 संख्या और 1 विशेष अक्षर होना चाहिए",
+    "email_invalid": "ईमेल में कम से कम 8 अक्षर होने चाहिए",
+    "Password_and_Confirm_password_mismatches.": "पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।",
+    "doNotOwnAnAccount": "कोई खाता नहीं है?",
+    "captchaError": "कैप्चा त्रुटि!",
+    "Please_check_the_captcha": "कृपया कैप्चा जांचें।",
+    "Something_went_wrong": "कुछ गलत हो गया, कृपया बाद में पुनः प्रयास करें।",
+    "passwordMismatches": "पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।",
+    "fillCorrectly": "सभी विवरण सही ढंग से भरें।",
+    "successfullyRegistered": "सफलतापूर्वक पंजीकृत।",
+    "lowercase_check": "कम से कम एक छोटा अक्षर",
+    "uppercase_check": "कम से कम एक बड़ा अक्षर",
+    "numeric_value_check": "कम से कम एक संख्या",
+    "special_char_check": "कम से कम एक विशेष अक्षर",
+    "selectOrg": "एक संगठन चुनें",
+    "afterRegister": "सफलतापूर्वक पंजीकृत।",
+    "talawa_portal": "तालावा पोर्टल",
+    "login": "लॉगिन",
+    "register": "पंजीकरण",
+    "firstName": "पहला नाम",
+    "lastName": "अंतिम नाम",
+    "email": "ईमेल",
+    "password": "पासवर्ड",
+    "confirmPassword": "पुष्टि पासवर्ड",
+    "forgotPassword": "पासवर्ड भूल गए",
+    "enterEmail": "ईमेल दर्ज करें",
+    "enterPassword": "पासवर्ड दर्ज करें",
+    "talawaApiUnavailable": "तालावा एपीआई अनुपलब्ध",
+    "notAuthorised": "अनधिकृत",
+    "notFound": "नहीं मिला",
+    "OR": "या",
+    "admin": "व्यवस्थापक",
+    "user": "उपयोगकर्ता",
+    "loading": "लोड हो रहा है"
+  },
+  "userLoginPage": {
+    "title": "तालावा व्यवस्थापक",
+    "fromPalisadoes": "Palisadoes फाउंडेशन स्वयंसेवकों द्वारा विकसित एक ओपन-सोर्स एप्लिकेशन",
+    "atleast_8_char_long": "कम से कम 8 अक्षर लंबे",
+    "Password_and_Confirm_password_mismatches.": "पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।",
+    "doNotOwnAnAccount": "कोई खाता नहीं है?",
+    "captchaError": "कैप्चा त्रुटि!",
+    "Please_check_the_captcha": "कृपया कैप्चा जांचें।",
+    "Something_went_wrong": "कुछ गलत हो गया, कृपया बाद में पुनः प्रयास करें।",
+    "passwordMismatches": "पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।",
+    "fillCorrectly": "सभी विवरण सही ढंग से भरें।",
+    "successfullyRegistered": "सफलतापूर्वक पंजीकृत।",
+    "userLogin": "उपयोगकर्ता लॉगिन",
+    "afterRegister": "सफलतापूर्वक पंजीकृत।",
+    "selectOrg": "एक संगठन चुनें",
+    "talawa_portal": "तालावा पोर्टल",
+    "login": "लॉगिन",
+    "register": "पंजीकरण",
+    "firstName": "पहला नाम",
+    "lastName": "अंतिम नाम",
+    "email": "ईमेल",
+    "password": "पासवर्ड",
+    "confirmPassword": "पुष्टि पासवर्ड",
+    "forgotPassword": "पासवर्ड भूल गए",
+    "enterEmail": "ईमेल दर्ज करें",
+    "enterPassword": "पासवर्ड दर्ज करें",
+    "talawaApiUnavailable": "तालावा एपीआई अनुपलब्ध",
+    "notAuthorised": "अनधिकृत",
+    "notFound": "नहीं मिला",
+    "OR": "या",
+    "loading": "लोड हो रहा है"
+  },
+  "latestEvents": {
+    "eventCardTitle": "आगामी घटनाएँ",
+    "eventCardSeeAll": "सभी देखें",
+    "noEvents": "कोई आगामी घटनाएँ नहीं हैं"
+  },
+  "latestPosts": {
+    "latestPostsTitle": "नवीनतम पोस्ट",
+    "seeAllLink": "सभी देखें",
+    "noPostsCreated": "कोई पोस्ट नहीं बनाई गई"
+  },
+  "listNavbar": {
+    "roles": "भूमिकाएँ",
+    "talawa_portal": "तालावा पोर्टल",
+    "requests": "अनुरोध",
+    "logout": "लॉगआउट"
+  },
+  "leftDrawer": {
+    "my organizations": "मेरे संगठन",
+    "requests": "सदस्यता अनुरोध",
+    "communityProfile": "समुदाय प्रोफ़ाइल",
+    "talawaAdminPortal": "तालावा व्यवस्थापक पोर्टल",
+    "menu": "मेनू",
+    "users": "उपयोगकर्ता",
+    "logout": "लॉगआउट"
+  },
+  "leftDrawerOrg": {
+    "Dashboard": "डैशबोर्ड",
+    "People": "लोग",
+    "Events": "घटनाएँ",
+    "Contributions": "योगदान",
+    "Posts": "पोस्ट",
+    "Block/Unblock": "ब्लॉक/अनब्लॉक",
+    "Plugins": "प्लगइन्स",
+    "Plugin Store": "प्लगइन स्टोर",
+    "Advertisement": "विज्ञापन",
+    "allOrganizations": "सभी संगठन",
+    "yourOrganization": "आपका संगठन",
+    "notification": "सूचना",
+    "language": "भाषा",
+    "notifications": "सूचनाएँ",
+    "spamsThe": "स्पैम",
+    "group": "समूह",
+    "noNotifications": "कोई सूचनाएँ नहीं",
+    "talawaAdminPortal": "तालावा व्यवस्थापक पोर्टल",
+    "menu": "मेनू",
+    "talawa_portal": "तालावा पोर्टल",
+    "settings": "सेटिंग्स",
+    "logout": "लॉगआउट",
+    "close": "बंद करें"
+  },
+  "orgList": {
+    "title": "तालावा संगठन",
+    "you": "आप",
+    "designation": "पदनाम",
+    "my organizations": "मेरे संगठन",
+    "createOrganization": "संगठन बनाएं",
+    "createSampleOrganization": "नमूना संगठन बनाएं",
+    "city": "शहर",
+    "countryCode": "देश कोड",
+    "dependentLocality": "निर्भर स्थान",
+    "line1": "लाइन 1",
+    "line2": "लाइन 2",
+    "postalCode": "पोस्टल कोड",
+    "sortingCode": "सॉर्टिंग कोड",
+    "state": "राज्य",
+    "userRegistrationRequired": "उपयोगकर्ता पंजीकरण आवश्यक",
+    "visibleInSearch": "खोज में दिखाई दे",
+    "enterName": "नाम दर्ज करें",
+    "sort": "प्रकार",
+    "Latest": "नवीनतम",
+    "Earliest": "सबसे पहले",
+    "noOrgErrorTitle": "संगठन नहीं मिला",
+    "sampleOrgDuplicate": "केवल एक नमूना संगठन की अनुमति है",
+    "noOrgErrorDescription": "कृपया डैशबोर्ड के माध्यम से संगठन बनाएं",
+    "manageFeatures": "विशेषताएं प्रबंधित करें",
+    "manageFeaturesInfo": "सफलतापूर्वक बनाया गया!",
+    "goToStore": "प्लगइन स्टोर पर जाएं",
+    "enableEverything": "सब कुछ सक्षम करें",
+    "sampleOrgSuccess": "नमूना संगठन सफलतापूर्वक बनाया गया",
+    "name": "नाम",
+    "email": "ईमेल",
+    "searchByName": "नाम से खोजें",
+    "description": "विवरण",
+    "location": "स्थान",
+    "address": "पता",
+    "displayImage": "छवि प्रदर्शित करें",
+    "filter": "फ़िल्टर",
+    "cancel": "रद्द करें",
+    "endOfResults": "परिणाम समाप्त",
+    "noResultsFoundFor": "कोई परिणाम नहीं मिला",
+    "OR": "या"
+  },
+  "orgListCard": {
+    "manage": "प्रबंधित करें",
+    "sampleOrganization": "संगठन नमूना",
+    "admins": "प्रशासक",
+    "members": "सदस्य"
+  },
+  "paginationList": {
+    "rowsPerPage": "प्रति पृष्ठ पंक्तियाँ",
+    "all": "सभी"
+  },
+  "requests": {
+    "title": "सदस्यता अनुरोध",
+    "sl_no": "क्रम संख्या",
+    "accept": "स्वीकार करें",
+    "reject": "अस्वीकार करें",
+    "searchRequests": "सदस्यता अनुरोध खोजें",
+    "noOrgError": "संगठन नहीं मिला, कृपया डैशबोर्ड के माध्यम से संगठन बनाएं",
+    "noRequestsFound": "कोई सदस्यता अनुरोध नहीं मिला",
+    "acceptedSuccessfully": "अनुरोध सफलतापूर्वक स्वीकार किया गया",
+    "rejectedSuccessfully": "अनुरोध सफलतापूर्वक अस्वीकार किया गया",
+    "noOrgErrorTitle": "संगठन नहीं मिला",
+    "noOrgErrorDescription": "कृपया डैशबोर्ड के माध्यम से संगठन बनाएं",
+    "name": "नाम",
+    "email": "ईमेल",
+    "endOfResults": "परिणाम समाप्त",
+    "noResultsFoundFor": "कोई परिणाम नहीं मिला"
+  },
+  "users": {
+    "title": "तालावा भूमिकाएँ",
+    "joined_organizations": "संगठनों में शामिल हुए",
+    "blocked_organizations": "अवरुद्ध संगठन",
+    "orgJoinedBy": "द्वारा शामिल संगठन",
+    "orgThatBlocked": "अवरुद्ध संगठन",
+    "hasNotJoinedAnyOrg": "किसी भी संगठन में शामिल नहीं हुआ",
+    "isNotBlockedByAnyOrg": "किसी भी संगठन द्वारा अवरुद्ध नहीं किया गया",
+    "searchByOrgName": "संगठन के नाम से खोजें",
+    "view": "दृश्य",
+    "enterName": "नाम दर्ज करें",
+    "loadingUsers": "उपयोगकर्ताओं को लोड कर रहा है...",
+    "noUserFound": "कोई उपयोगकर्ता नहीं मिला",
+    "sort": "प्रकार",
+    "Newest": "नवीनतम",
+    "Oldest": "सबसे पुराना",
+    "noOrgError": "संगठन नहीं मिला, कृपया डैशबोर्ड के माध्यम से संगठन बनाएं",
+    "roleUpdated": "भूमिका अपडेट की गई।",
+    "joinNow": "अभी शामिल हों",
+    "visit": "यात्रा",
+    "withdraw": "वापस लें",
+    "removeUserFrom": "{{org}} से उपयोगकर्ता को हटाएं",
+    "removeConfirmation": "क्या आप वाकई '{{name}}' को संगठन '{{org}}' से हटाना चाहते हैं?",
+    "searchByName": "नाम से खोजें",
+    "users": "उपयोगकर्ता",
+    "name": "नाम",
+    "email": "ईमेल",
+    "endOfResults": "परिणाम समाप्त",
+    "admin": "प्रशासक",
+    "superAdmin": "सुपर प्रशासक",
+    "user": "उपयोगकर्ता",
+    "filter": "फ़िल्टर",
+    "noResultsFoundFor": "कोई परिणाम नहीं मिला",
+    "talawaApiUnavailable": "तालावा एपीआई अनुपलब्ध",
+    "cancel": "रद्द करें",
+    "admins": "प्रशासक",
+    "members": "सदस्य",
+    "orgJoined": "संगठन में शामिल",
+    "MembershipRequestSent": "सदस्यता अनुरोध भेजा गया",
+    "AlreadyJoined": "पहले से शामिल",
+    "errorOccured": "त्रुटि हुई"
+  },
+  "communityProfile": {
+    "title": "समुदाय प्रोफ़ाइल",
+    "editProfile": "प्रोफ़ाइल संपादित करें",
+    "communityProfileInfo": "ये विवरण आपके और आपके समुदाय के सदस्यों के लॉगिन/पंजीकरण स्क्रीन पर दिखाई देंगे",
+    "communityName": "समुदाय का नाम",
+    "wesiteLink": "वेबसाइट लिंक",
+    "logo": "लोगो",
+    "social": "सोशल मीडिया लिंक",
+    "url": "यूआरएल दर्ज करें",
+    "profileChangedMsg": "प्रोफ़ाइल विवरण सफलतापूर्वक अपडेट किया गया।",
+    "resetData": "प्रोफ़ाइल विवरण सफलतापूर्वक रीसेट किया गया।"
+  },
+  "dashboard": {
+    "title": "डैशबोर्ड",
+    "about": "के बारे में",
+    "deleteThisOrganization": "इस संगठन को हटाएं",
+    "statistics": "आंकड़े",
+    "posts": "पोस्ट",
+    "events": "घटनाएँ",
+    "blockedUsers": "अवरुद्ध उपयोगकर्ता",
+    "viewAll": "सभी देखें",
+    "upcomingEvents": "आगामी घटनाएँ",
+    "noUpcomingEvents": "कोई आगामी घटनाएँ नहीं हैं",
+    "latestPosts": "नवीनतम पोस्ट",
+    "noPostsPresent": "कोई पोस्ट नहीं हैं",
+    "membershipRequests": "सदस्यता अनुरोध",
+    "noMembershipRequests": "कोई सदस्यता अनुरोध नहीं हैं",
+    "location": "स्थान",
+    "members": "सदस्य",
+    "admins": "प्रशासक",
+    "requests": "अनुरोध",
+    "talawaApiUnavailable": "तालावा एपीआई अनुपलब्ध",
+    "volunteerRankings": "स्वयंसेवक रैंकिंग",
+    "noVolunteers": "कोई स्वयंसेवक नहीं मिला!"
+  },
+  "organizationPeople": {
+    "title": "तालावा सदस्य",
+    "filterByName": "नाम से फ़िल्टर करें",
+    "filterByLocation": "स्थान से फ़िल्टर करें",
+    "filterByEvent": "घटना से फ़िल्टर करें",
+    "searchName": "नाम दर्ज करें",
+    "searchevent": "घटना दर्ज करें",
+    "searchFullName": "पूरा नाम दर्ज करें",
+    "people": "लोग",
+    "sort": "भूमिका से खोजें",
+    "actions": "क्रियाएँ",
+    "addMembers": "सदस्य जोड़ें",
+    "existingUser": "मौजूदा उपयोगकर्ता",
+    "newUser": "नया उपयोगकर्ता",
+    "enterFirstName": "अपना पहला नाम दर्ज करें",
+    "enterLastName": "अपना अंतिम नाम दर्ज करें",
+    "enterConfirmPassword": "अपना पासवर्ड पुष्टि के लिए दर्ज करें",
+    "organization": "संगठन",
+    "invalidDetailsMessage": "कृपया मान्य विवरण दर्ज करें।",
+    "members": "सदस्य",
+    "admins": "प्रशासक",
+    "users": "उपयोगकर्ता",
+    "searchFirstName": "प्रथम नाम खोजें",
+    "searchLastName": "अंतिम नाम खोजें",
+    "firstName": "प्रथम नाम",
+    "lastName": "अंतिम नाम",
+    "emailAddress": "ईमेल पता",
+    "enterEmail": "ईमेल दर्ज करें",
+    "password": "पासवर्ड",
+    "enterPassword": "पासवर्ड दर्ज करें",
+    "confirmPassword": "पासवर्ड की पुष्टि करें",
+    "user": "उपयोगकर्ता",
+    "profile": "प्रोफ़ाइल",
+    "create": "बनाएं",
+    "cancel": "रद्द करें"
+  },
+  "organizationTags": {
+    "title": "संस्थान टैग",
+    "createTag": "नया टैग बनाएँ",
+    "manageTag": "प्रबंधित करें",
+    "editTag": "संपादित करें",
+    "removeTag": "हटाएँ",
+    "tagDetails": "टैग विवरण",
+    "tagName": "नाम",
+    "tagType": "प्रकार",
+    "tagNamePlaceholder": "टैग का नाम लिखें",
+    "tagCreationSuccess": "नई टैग सफलतापूर्वक बनाई गई",
+    "tagUpdationSuccess": "टैग सफलतापूर्वक अपडेट की गई",
+    "tagRemovalSuccess": "टैग सफलतापूर्वक हटाई गई",
+    "noTagsFound": "कोई टैग नहीं मिला",
+    "removeUserTag": "टैग हटाएँ",
+    "removeUserTagMessage": "क्या आप इस टैग को हटाना चाहते हैं?",
+    "addChildTag": "उप-टैग जोड़ें",
+    "enterTagName": "टैग का नाम दर्ज करें"
+  },
+  "manageTag": {
+    "title": "टैग विवरण",
+    "addPeopleToTag": "टैग में लोगों को जोड़ें",
+    "viewProfile": "देखें",
+    "noAssignedMembersFound": "कोई असाइन किए गए सदस्य नहीं मिले",
+    "unassignUserTag": "टैग को हटाएं",
+    "unassignUserTagMessage": "क्या आप इस उपयोगकर्ता से टैग हटाना चाहते हैं?",
+    "successfullyUnassigned": "उपयोगकर्ता से टैग हटा दिया गया",
+    "addPeople": "लोगों को जोड़ें",
+    "add": "जोड़ें",
+    "subTags": "उप-टैग्स",
+    "successfullyAssignedToPeople": "टैग सफलतापूर्वक असाइन किया गया",
+    "errorOccurredWhileLoadingMembers": "सदस्यों को लोड करते समय त्रुटि हुई",
+    "userName": "उपयोगकर्ता नाम",
+    "actions": "क्रियाएँ",
+    "noOneSelected": "कोई चयनित नहीं",
+    "assignToTags": "टैग्स को असाइन करें",
+    "removeFromTags": "टैग्स से हटाएं",
+    "assign": "असाइन करें",
+    "remove": "हटाएं",
+    "successfullyAssignedToTags": "सफलतापूर्वक टैग्स को असाइन किया गया",
+    "successfullyRemovedFromTags": "सफलतापूर्वक टैग्स से हटाया गया",
+    "errorOccurredWhileLoadingOrganizationUserTags": "संगठन टैग्स को लोड करते समय त्रुटि हुई",
+    "errorOccurredWhileLoadingSubTags": "उप-टैग लोड करते समय त्रुटि हुई",
+    "removeUserTag": "टैग हटाएं",
+    "removeUserTagMessage": "क्या आप इस टैग को हटाना चाहते हैं? यह सभी उप-टैग्स और सभी संबंधों को हटा देगा।",
+    "tagDetails": "टैग विवरण",
+    "tagName": "नाम",
+    "tagUpdationSuccess": "टैग सफलतापूर्वक अपडेट की गई",
+    "tagRemovalSuccess": "टैग सफलतापूर्वक हटाई गई",
+    "noTagSelected": "कोई टैग चयनित नहीं",
+    "changeNameToEdit": "अपडेट करने के लिए नाम बदलें",
+    "selectTag": "टैग चुनें",
+    "collapse": "संक्षिप्त करें",
+    "expand": "विस्तारित करें",
+    "tagNamePlaceholder": "टैग का नाम लिखें",
+    "allTags": "सभी टैग",
+    "noMoreMembersFound": "कोई और सदस्य नहीं मिला"
+  },
+  "userListCard": {
+    "addAdmin": "व्यवस्थापक जोड़ें",
+    "addedAsAdmin": "उपयोगकर्ता को व्यवस्थापक के रूप में जोड़ा गया है.",
+    "joined": "शामिल हुए",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "orgAdminListCard": {
+    "remove": "निकालना",
+    "removeAdmin": "व्यवस्थापक हटाएँ",
+    "removeAdminMsg": "क्या आप इस व्यवस्थापक को हटाना चाहते हैं?",
+    "adminRemoved": "व्यवस्थापक को हटा दिया गया है.",
+    "joined": "शामिल हुए",
+    "no": "नहीं",
+    "yes": "हाँ",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "orgPeopleListCard": {
+    "remove": "निकालना",
+    "removeMember": "सदस्य हटाएँ",
+    "removeMemberMsg": "क्या आप इस सदस्य को हटाना चाहते हैं?",
+    "memberRemoved": "सदस्य को हटा दिया गया है",
+    "joined": "शामिल हुए",
+    "no": "नहीं",
+    "yes": "हाँ",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "organizationEvents": {
+    "title": "आयोजन",
+    "filterByTitle": "शीर्षक के अनुसार फ़िल्टर करें",
+    "filterByLocation": "स्थान के अनुसार फ़िल्टर करें",
+    "filterByDescription": "विवरण के अनुसार फ़िल्टर करें",
+    "addEvent": "कार्यक्रम जोड़ें",
+    "eventDetails": "घटना की जानकारी",
+    "searchMemberName": "सदस्य का नाम खोजें",
+    "eventTitle": "शीर्षक",
+    "startTime": "समय शुरू",
+    "endTime": "अंत समय",
+    "allDay": "पूरे दिन",
+    "recurringEvent": "पुनरावर्ती ईवेंट",
+    "isPublic": "सार्वजनिक है",
+    "isRegistrable": "पंजीकरण योग्य है",
+    "createEvent": "कार्यक्रम बनाएँ",
+    "enterFilter": "फ़िल्टर दर्ज करें",
+    "enterTitle": "शीर्षक दर्ज करें",
+    "enterDescrip": "विवरण दर्ज करें",
+    "eventLocation": "स्थान दर्ज करें",
+    "searchEventName": "ईवेंट का नाम खोजें",
+    "eventType": "घटना प्रकार",
+    "eventCreated": "बधाई हो! ",
+    "customRecurrence": "कस्टम पुनरावृत्ति",
+    "repeatsEvery": "प्रत्येक को दोहराता है",
+    "repeatsOn": "पर दोहराता है",
+    "ends": "समाप्त होता है",
+    "never": "कभी नहीं",
+    "on": "पर",
+    "after": "बाद",
+    "occurences": "घटनाओं",
+    "events": "कार्यक्रम",
+    "description": "विवरण",
+    "location": "स्थान",
+    "startDate": "प्रारंभ तिथि",
+    "endDate": "समाप्ति तिथि",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध",
+    "done": "पूर्ण"
+  },
+  "organizationActionItems": {
+    "actionItemCategory": "क्रिया वस्तु श्रेणी",
+    "actionItemDetails": "क्रिया वस्तु विवरण",
+    "actionItemCompleted": "क्रिया वस्तु पूरी",
+    "assignee": "प्राप्तकर्ता",
+    "assigner": "सौंपने वाला",
+    "assignmentDate": "आवंटन तिथि",
+    "active": "सक्रिय",
+    "clearFilters": "फ़िल्टर साफ़ करें",
+    "completionDate": "पूर्णता तिथि",
+    "createActionItem": "क्रिया वस्तु बनाएँ",
+    "deleteActionItem": "क्रिया वस्तु हटाएँ",
+    "deleteActionItemMsg": "क्या आप इस क्रिया वस्तु को हटाना चाहते हैं?",
+    "details": "विवरण",
+    "dueDate": "समाप्ति तिथि",
+    "earliest": "सबसे पहले",
+    "editActionItem": "क्रिया वस्तु संपादित करें",
+    "isCompleted": "पूर्ण",
+    "latest": "नवीनतम",
+    "makeActive": "सक्रिय बनाएं",
+    "noActionItems": "कोई क्रिया वस्तु नहीं",
+    "options": "विकल्प",
+    "preCompletionNotes": "पूर्व-पूर्णता नोट्स",
+    "actionItemActive": "सक्रिय क्रिया वस्तु",
+    "markCompletion": "पूर्णता को चिह्नित करें",
+    "actionItemStatus": "क्रिया वस्तु स्थिति",
+    "postCompletionNotes": "पूर्णता के बाद नोट्स",
+    "selectActionItemCategory": "क्रिया वस्तु श्रेणी चुनें",
+    "selectAssignee": "प्राप्तकर्ता चुनें",
+    "status": "स्थिति",
+    "successfulCreation": "क्रिया वस्तु सफलतापूर्वक बनाई गई",
+    "successfulUpdation": "क्रिया वस्तु सफलतापूर्वक अद्यतन की गई",
+    "successfulDeletion": "क्रिया वस्तु सफलतापूर्वक हटाई गई",
+    "title": "क्रिया वस्तुएँ",
+    "category": "श्रेणी",
+    "allottedHours": "आवंटित घंटे",
+    "latestDueDate": "नवीनतम समाप्ति तिथि",
+    "earliestDueDate": "प्रारंभिक समाप्ति तिथि",
+    "updateActionItem": "क्रिया वस्तु अपडेट करें",
+    "noneUpdated": "कोई फ़ील्ड अपडेट नहीं की गई",
+    "updateStatusMsg": "क्या आप वाकई इस क्रिया वस्तु को लंबित के रूप में चिह्नित करना चाहते हैं?",
+    "close": "बंद करें",
+    "eventActionItems": "घटना क्रिया वस्तुएं",
+    "no": "नहीं",
+    "yes": "हाँ",
+    "individuals": "व्यक्तियों",
+    "groups": "समूहों",
+    "assignTo": "सौंपें",
+    "volunteers": "स्वयंसेवक",
+    "volunteerGroups": "स्वयंसेवक समूह"
+  },
+  "organizationAgendaCategory": {
+    "agendaCategoryDetails": "एजेंडा श्रेणी विवरण",
+    "updateAgendaCategory": "एजेंडा श्रेणी अपडेट करें",
+    "title": "एजेंडा श्रेणियाँ",
+    "name": "श्रेणी",
+    "description": "विवरण",
+    "createdBy": "द्वारा बनाया गया",
+    "options": "विकल्प",
+    "createAgendaCategory": "एजेंडा श्रेणी बनाएं",
+    "noAgendaCategories": "कोई एजेंडा श्रेणी नहीं",
+    "update": "अपडेट करें",
+    "agendaCategoryCreated": "एजेंडा श्रेणी सफलतापूर्वक बनाई गई",
+    "agendaCategoryUpdated": "एजेंडा श्रेणी सफलतापूर्वक अपडेट की गई",
+    "agendaCategoryDeleted": "एजेंडा श्रेणी सफलतापूर्वक हटा दी गई",
+    "deleteAgendaCategory": "एजेंडा श्रेणी हटाएं",
+    "deleteAgendaCategoryMsg": "क्या आप इस एजेंडा श्रेणी को हटाना चाहते हैं?"
+  },
+  "agendaItems": {
+    "agendaItemDetails": "एजेंडा आइटम विवरण",
+    "updateAgendaItem": "एजेंडा आइटम अपडेट करें",
+    "title": "शीर्षक",
+    "enterTitle": "शीर्षक दर्ज करें",
+    "sequence": "क्रम",
+    "description": "विवरण",
+    "enterDescription": "विवरण दर्ज करें",
+    "category": "एजेंडा श्रेणी",
+    "attachments": "संलग्नक",
+    "attachmentLimit": "10MB तक कोई भी छवि फ़ाइल या वीडियो फ़ाइल जोड़ें",
+    "fileSizeExceedsLimit": "फ़ाइल का आकार सीमा 10MB से अधिक है",
+    "urls": "URL",
+    "url": "URL में लिंक जोड़ें",
+    "enterUrl": "https://example.com",
+    "invalidUrl": "कृपया एक वैध URL दर्ज करें",
+    "link": "लिंक",
+    "createdBy": "बनाया गया द्वारा",
+    "regular": "नियमित",
+    "note": "नोट",
+    "duration": "अवधि",
+    "enterDuration": "मिमी:से",
+    "options": "विकल्प",
+    "createAgendaItem": "एजेंडा आइटम बनाएं",
+    "noAgendaItems": "कोई एजेंडा आइटम नहीं",
+    "selectAgendaItemCategory": "एजेंडा आइटम श्रेणी चुनें",
+    "update": "अपडेट करें",
+    "delete": "हटाएं",
+    "agendaItemCreated": "एजेंडा आइटम सफलतापूर्वक बनाया गया",
+    "agendaItemUpdated": "एजेंडा आइटम सफलतापूर्वक अपडेट किया गया",
+    "agendaItemDeleted": "एजेंडा आइटम सफलतापूर्वक हटा दिया गया",
+    "deleteAgendaItem": "एजेंडा आइटम हटाएं",
+    "deleteAgendaItemMsg": "क्या आप इस एजेंडा आइटम को हटाना चाहते हैं?"
+  },
+  "eventListCard": {
+    "deleteEvent": "ईवेंट हटाएँ",
+    "deleteEventMsg": "क्या आप इस ईवेंट को हटाना चाहते हैं?",
+    "editEvent": "इवेंट संपादित करें",
+    "eventTitle": "शीर्षक",
+    "alreadyRegistered": "पहले से ही पंजीकृत",
+    "startTime": "समय शुरू",
+    "endTime": "अंत समय",
+    "allDay": "पूरे दिन",
+    "recurringEvent": "पुनरावर्ती ईवेंट",
+    "isPublic": "सार्वजनिक है",
+    "isRegistrable": "पंजीकरण योग्य है",
+    "updatePost": "पोस्ट अपडेट करें",
+    "eventDetails": "घटना की जानकारी",
+    "eventDeleted": "ईवेंट सफलतापूर्वक हटा दिया गया.",
+    "eventUpdated": "इवेंट सफलतापूर्वक अपडेट किया गया.",
+    "thisInstance": "यह उदाहरण",
+    "thisAndFollowingInstances": "यह और निम्नलिखित उदाहरण",
+    "allInstances": "सभी उदाहरण",
+    "customRecurrence": "कस्टम पुनरावृत्ति",
+    "repeatsEvery": "प्रत्येक को दोहराता है",
+    "repeatsOn": "पर दोहराता है",
+    "ends": "समाप्त होता है",
+    "never": "कभी नहीं",
+    "on": "पर",
+    "after": "बाद",
+    "occurences": "घटनाओं",
+    "location": "स्थान",
+    "no": "नहीं",
+    "yes": "हाँ",
+    "description": "विवरण",
+    "startDate": "प्रारंभ तिथि",
+    "endDate": "समाप्ति तिथि",
+    "registerEvent": "कार्यक्रम के लिए पंजीकरण करें",
+    "close": "बंद करें",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध",
+    "done": "समाप्त"
+  },
+  "funds": {
+    "title": "फंड",
+    "createFund": "फंड बनाएँ",
+    "fundName": "फंड का नाम",
+    "fundId": "फंड (संदर्भ) आईडी",
+    "taxDeductible": "कर ड्यूटी कटाई",
+    "default": "डिफ़ॉल्ट",
+    "archived": "आर्काइव",
+    "fundCreate": "फंड बनाएँ",
+    "fundUpdate": "फंड अपडेट करें",
+    "fundDelete": "फंड को हटाएँ",
+    "searchByName": "नाम से खोजें",
+    "noFundsFound": "कोई फंड नहीं मिला",
+    "createdBy": "द्वारा बनाया गया",
+    "createdOn": "पर बनाया गया",
+    "status": "स्थिति",
+    "fundCreated": "फंड सफलतापूर्वक बनाया गया",
+    "fundUpdated": "फंड सफलतापूर्वक अपडेट किया गया",
+    "fundDeleted": "फंड सफलतापूर्वक हटाया गया",
+    "deleteFundMsg": "क्या आप वाकई इस फंड को हटाना चाहते हैं?",
+    "createdLatest": "सबसे पहले बनाया",
+    "createdEarliest": "सबसे जल्दी बनाया",
+    "viewCampaigns": "कैम्पेंस देखें"
+  },
+  "fundCampaign": {
+    "title": "फंडरेजिंग कैंपेन",
+    "campaignName": "कैंपेन का नाम",
+    "campaignOptions": "विकल्प",
+    "fundingGoal": "फंडिंग उद्देश्य",
+    "addCampaign": "कैंपेन जोड़ें",
+    "createdCampaign": "कैंपेन सफलतापूर्वक बनाई गई",
+    "updatedCampaign": "कैंपेन सफलतापूर्वक अपडेट की गई",
+    "deletedCampaign": "कैंपेन सफलतापूर्वक हटा दी गई",
+    "deleteCampaignMsg": "क्या आप वाकई इस कैंपेन को हटाना चाहते हैं?",
+    "noCampaigns": "कोई कैंपेन नहीं मिली",
+    "createCampaign": "कैंपेन बनाएँ",
+    "updateCampaign": "कैंपेन अपडेट करें",
+    "deleteCampaign": "कैंपेन को हटाएं",
+    "currency": "मुद्रा",
+    "selectCurrency": "मुद्रा का चयन करें",
+    "searchFullName": "नाम से खोजें",
+    "viewPledges": "प्लेज देखें",
+    "noCampaignsFound": "कोई कैंपेन नहीं मिली",
+    "latestEndDate": "अंतिम समाप्ति तिथि",
+    "earliestEndDate": "सबसे पहली समाप्ति तिथि",
+    "lowestGoal": "सबसे कम उद्देश्य",
+    "highestGoal": "सबसे ऊंचा उद्देश्य"
+  },
+  "pledges": {
+    "title": "निधि अभियान प्रतिज्ञाएँ",
+    "pledgeAmount": "प्रतिज्ञा राशि",
+    "pledgeOptions": "विकल्प",
+    "pledgeCreated": "प्रतिज्ञा सफलतापूर्वक बनाई गई",
+    "pledgeUpdated": "प्रतिज्ञा सफलतापूर्वक अद्यतन की गई",
+    "pledgeDeleted": "प्रतिज्ञा सफलतापूर्वक हटा दी गई",
+    "addPledge": "प्रतिज्ञा जोड़ें",
+    "createPledge": "प्रतिज्ञा बनाएँ",
+    "currency": "मुद्रा",
+    "selectCurrency": "मुद्रा चुनें",
+    "updatePledge": "प्रतिज्ञा अद्यतन करें",
+    "deletePledge": "प्रतिज्ञा हटाएँ",
+    "amount": "मात्रा",
+    "editPledge": "प्रतिज्ञा संपादित करें",
+    "deletePledgeMsg": "क्या आप वाकई इस प्रतिज्ञा को हटाना चाहते हैं?",
+    "noPledges": "कोई प्रतिज्ञा नहीं मिली",
+    "searchPledger": "प्लेजर्स के द्वारा खोजें",
+    "highestAmount": "सबसे अधिक राशि",
+    "lowestAmount": "सबसे कम राशि",
+    "latestEndDate": "नवीनतम समाप्ति तिथि",
+    "earliestEndDate": "सबसे प्रारंभिक समाप्ति तिथि",
+    "campaigns": "अभियान",
+    "pledges": "प्रतिज्ञाएँ",
+    "endsOn": "पर समाप्त होता है",
+    "raisedAmount": "उठाया गया राशि",
+    "pledgedAmount": "प्रतिबद्ध राशि",
+    "startDate": "प्रारंभ तिथि",
+    "endDate": "समाप्ति तिथि"
+  },
+  "orgPost": {
+    "title": "पदों",
+    "searchPost": "पोस्ट खोजें",
+    "posts": "पदों",
+    "createPost": "पोस्ट बनाएं",
+    "postDetails": "पोस्ट विवरण",
+    "postTitle1": "पोस्ट का शीर्षक लिखें",
+    "postTitle": "शीर्षक",
+    "addMedia": "मीडिया अपलोड करें",
+    "information": "जानकारी",
+    "information1": "पोस्ट की जानकारी लिखें",
+    "addPost": "पोस्ट जोड़ें",
+    "searchTitle": "शीर्षक से खोजें",
+    "searchText": "पाठ द्वारा खोजें",
+    "ptitle": "शीर्षक पोस्ट करें",
+    "postDes": "तुम्हें किस बारे में बात करनी है?",
+    "Title": "शीर्षक",
+    "Text": "मूलपाठ",
+    "searchBy": "खोज से",
+    "Oldest": "सबसे पुराना पहले",
+    "Latest": "नवीनतम प्रथम",
+    "sortPost": "पोस्ट क्रमबद्ध करें",
+    "tag": " आपका ब्राउज़र में वीडियो टैग समर्थित नहीं है",
+    "postCreatedSuccess": "बधाई हो! ",
+    "pinPost": "पिन पद",
+    "Next": "अगला पृष्ठ",
+    "Previous": "पिछला पृष्ठ",
+    "cancel": "रद्द करें"
+  },
+  "postNotFound": {
+    "post": "डाक",
+    "not found!": "नहीं मिला!",
+    "organization": "संगठन",
+    "post not found!": "पोस्ट नहीं मिली!",
+    "organization not found!": "संगठन नहीं मिला!"
+  },
+  "userNotFound": {
+    "not found!": "नहीं मिला!",
+    "roles": "भूमिकाएँ",
+    "user not found!": "उपयोगकर्ता नहीं मिला!",
+    "member not found!": "सदस्य अनुपस्थित!",
+    "admin not found!": "व्यवस्थापक नहीं मिला!",
+    "roles not found!": "भूमिकाएँ नहीं मिलीं!",
+    "user": "उपयोगकर्ता"
+  },
+  "orgPostCard": {
+    "author": "लेखक",
+    "imageURL": "छवि यूआरएल",
+    "videoURL": "वीडियो यूआरएल",
+    "deletePost": "पोस्ट को हटाएं",
+    "deletePostMsg": "क्या आप इस पोस्ट को हटाना चाहते हैं?",
+    "editPost": "संपादित पोस्ट",
+    "postTitle": "शीर्षक",
+    "postTitle1": "पोस्ट का शीर्षक संपादित करें",
+    "information1": "पोस्ट की जानकारी संपादित करें",
+    "information": "जानकारी",
+    "image": "छवि",
+    "video": "वीडियो",
+    "updatePost": "पोस्ट अपडेट करें",
+    "postDeleted": "पोस्ट सफलतापूर्वक हटा दी गई.",
+    "postUpdated": "पोस्ट सफलतापूर्वक अपडेट किया गया.",
+    "tag": " आपका ब्राउज़र में वीडियो टैग समर्थित नहीं है",
+    "pin": "पिन पद",
+    "edit": "संपादित करें",
+    "no": "नहीं",
+    "yes": "हाँ",
+    "close": "बंद करें",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "blockUnblockUser": {
+    "title": "उपयोगकर्ता को ब्लॉक/अनब्लॉक करें",
+    "pageName": "ब्लॉक/अनब्लॉक करें",
+    "listOfUsers": "स्पैम भेजने वाले उपयोगकर्ताओं की सूची",
+    "block_unblock": "ब्लॉक/अनब्लॉक करें",
+    "unblock": "अनवरोधित",
+    "block": "अवरोध पैदा करना",
+    "orgName": "नाम दर्ज करें",
+    "blockedSuccessfully": "उपयोगकर्ता को सफलतापूर्वक अवरोधित किया गया",
+    "Un-BlockedSuccessfully": "उपयोगकर्ता को सफलतापूर्वक अन-अवरुद्ध किया गया",
+    "allMembers": "सभी सदस्य",
+    "blockedUsers": "रोके गए उपयोगकर्ता",
+    "searchByFirstName": "प्रथम नाम से खोजें",
+    "searchByLastName": "अंतिम नाम से खोजें",
+    "noSpammerFound": "कोई स्पैमर नहीं मिला",
+    "searchByName": "नाम से खोजें",
+    "name": "नाम",
+    "email": "ईमेल",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध",
+    "noResultsFoundFor": "के लिए कोई परिणाम नहीं मिला"
+  },
+  "eventManagement": {
+    "title": "इवेंट मैनेजमेंट",
+    "dashboard": "डैशबोर्ड",
+    "registrants": "कुलसचिव",
+    "attendance": "उपस्थिति",
+    "actions": "कार्य",
+    "agendas": "एजेंडे",
+    "statistics": "आँकड़े",
+    "to": "को",
+    "volunteers": "स्वयंसेवक"
+  },
+  "forgotPassword": {
+    "title": "तलावा पासवर्ड भूल गए",
+    "registeredEmail": "पंजीकृत ईमेल",
+    "getOtp": "ओटीपी प्राप्त करें",
+    "enterOtp": "ओटीपी दर्ज करें",
+    "enterNewPassword": "नया पासवर्ड दर्ज करें",
+    "cofirmNewPassword": "नए पासवर्ड की पुष्टि करें",
+    "changePassword": "पासवर्ड बदलें",
+    "backToLogin": "लॉगिन पर वापस जाएं",
+    "userOtp": "जैसे ",
+    "emailNotRegistered": "ईमेल पंजीकृत नहीं है.",
+    "errorSendingMail": "मेल भेजने में त्रुटि.",
+    "passwordMismatches": "पासवर्ड और पासवर्ड बेमेल होने की पुष्टि करें।",
+    "passwordChanges": "पासवर्ड सफलतापूर्वक बदल गया.",
+    "OTPsent": "ओटीपी आपके पंजीकृत ईमेल पर भेजा जाता है।",
+    "forgotPassword": "पासवर्ड भूल गए",
+    "password": "पासवर्ड",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "pageNotFound": {
+    "404": "404",
+    "title": "404 नहीं मिला",
+    "talawaAdmin": "तलावा प्रशासन",
+    "talawaUser": "तलावा उपयोगकर्ता",
+    "notFoundMsg": "उफ़! ",
+    "backToHome": "घर वापिस जा रहा हूँ"
+  },
+  "orgContribution": {
+    "title": "तलावा योगदान",
+    "filterByName": "नाम से फ़िल्टर करें",
+    "filterByTransId": "ट्रांस द्वारा फ़िल्टर करें। ",
+    "recentStats": "हाल के आँकड़े",
+    "contribution": "योगदान",
+    "orgname": "नाम दर्ज करें",
+    "searchtransaction": "लेनदेन आईडी दर्ज करें"
+  },
+  "contriStats": {
+    "recentContribution": "हालिया योगदान",
+    "highestContribution": "सर्वोच्च योगदान",
+    "totalContribution": "कुल योगदान"
+  },
+  "orgContriCards": {
+    "date": "तारीख",
+    "transactionId": "लेन-देन आईडी",
+    "amount": "मात्रा"
+  },
+  "orgSettings": {
+    "title": "सेटिंग्स",
+    "general": "सामान्य",
+    "actionItemCategories": "कार्य आइटम श्रेणियाँ",
+    "updateOrganization": "संगठन अपडेट करें",
+    "seeRequest": "अनुरोध देखें",
+    "noData": "कोई डेटा नहीं",
+    "otherSettings": "अन्य सेटिंग्स",
+    "changeLanguage": "भाषा बदलें",
+    "manageCustomFields": "कस्टम फ़ील्ड प्रबंधित करें",
+    "agendaItemCategories": "एजेंडा आइटम श्रेणियाँ"
+  },
+  "deleteOrg": {
+    "deleteOrganization": "संगठन हटाएँ",
+    "deleteSampleOrganization": "नमूना संगठन हटाएँ",
+    "deleteMsg": "क्या आप इस संगठन को हटाना चाहते हैं?",
+    "confirmDelete": "हटाने की पुष्टि करें",
+    "longDelOrgMsg": "संगठन हटाएं बटन पर क्लिक करने से संगठन अपने ईवेंट, टैग और सभी संबंधित डेटा के साथ स्थायी रूप से हटा दिया जाएगा।",
+    "successfullyDeletedSampleOrganization": "नमूना संगठन सफलतापूर्वक हटा दिया गया",
+    "cancel": "रद्द करें"
+  },
+  "userUpdate": {
+    "appLanguageCode": "डिफ़ॉल्ट भाषा",
+    "userType": "उपयोगकर्ता का प्रकार",
+    "firstName": "प्रथम नाम",
+    "lastName": "अंतिम नाम",
+    "email": "ईमेल",
+    "password": "पासवर्ड",
+    "admin": "प्रशासक",
+    "superAdmin": "सुपर प्रशासक",
+    "displayImage": "प्रदर्शन छवि",
+    "saveChanges": "परिवर्तन सहेजें",
+    "cancel": "रद्द करें"
+  },
+  "userPasswordUpdate": {
+    "previousPassword": "पिछला पासवर्ड",
+    "newPassword": "नया पासवर्ड",
+    "confirmNewPassword": "नए पासवर्ड की पुष्टि करें",
+    "passCantBeEmpty": "पासवर्ड खाली नहीं हो सकता",
+    "passNoMatch": "नया पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।",
+    "saveChanges": "परिवर्तन सहेजें",
+    "cancel": "रद्द करें"
+  },
+  "orgDelete": {
+    "deleteOrg": "संगठन हटाएं"
+  },
+  "membershipRequest": {
+    "accept": "स्वीकार करना",
+    "reject": "अस्वीकार करना",
+    "memberAdded": "यह स्वीकृत है",
+    "joined": "शामिल हुए",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "orgUpdate": {
+    "city": "शहर",
+    "countryCode": "कंट्री कोड",
+    "line1": "लाइन 1",
+    "line2": "लाइन 2",
+    "postalCode": "डाक कोड",
+    "dependentLocality": "आश्रित इलाका",
+    "sortingCode": "कोड क्रमबद्ध करना",
+    "state": "राज्य/प्रान्त",
+    "userRegistrationRequired": "उपयोगकर्ता पंजीकरण आवश्यक",
+    "isVisibleInSearch": "खोज में दृश्यमान",
+    "enterNameOrganization": "संगठन का नाम दर्ज करें",
+    "successfulUpdated": "संगठन सफलतापूर्वक अद्यतन किया गया",
+    "name": "नाम",
+    "description": "विवरण",
+    "location": "स्थान",
+    "address": "पता",
+    "displayImage": "प्रदर्शन छवि",
+    "saveChanges": "परिवर्तन सहेजें",
+    "cancel": "रद्द करें",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "addOnRegister": {
+    "addNew": "नया जोड़ो",
+    "addPlugin": "प्लगइन जोड़ें",
+    "pluginName": "प्लगइन नाम",
+    "creatorName": "निर्माता का नाम",
+    "pluginDesc": "प्लगइन विवरण",
+    "pName": "उदाहरणार्थ: दान",
+    "cName": "उदाहरण: जॉन डो",
+    "pDesc": "यह प्लगइन यूआई को सक्षम बनाता है",
+    "close": "बंद करें",
+    "register": "पंजीकरण करें"
+  },
+  "addOnStore": {
+    "title": "स्टोर पर जोड़ें",
+    "searchName": "उदाहरणार्थ: दान",
+    "search": "खोजें",
+    "enable": "सक्रिय",
+    "disable": "अक्षम",
+    "pHeading": "प्लग-इन",
+    "install": "स्थापित",
+    "available": "उपलब्ध",
+    "pMessage": "प्लगइन मौजूद नहीं है",
+    "filter": "फ़िल्टर"
+  },
+  "addOnEntry": {
+    "enable": "सक्रिय",
+    "install": "स्थापित करना",
+    "uninstall": "स्थापना रद्द करें",
+    "uninstallMsg": "यह सुविधा अब आपके संगठन से हटा दी गई है",
+    "installMsg": "यह सुविधा अब आपके संगठन में सक्षम है"
+  },
+  "memberDetail": {
+    "title": "उपयोगकर्ता विवरण",
+    "addAdmin": "व्यवस्थापक जोड़ें",
+    "noeventsAttended": "कोई कार्यक्रम में भाग नहीं लिया",
+    "alreadyIsAdmin": "सदस्य पहले से ही एक व्यवस्थापक है",
+    "organizations": "संगठनों",
+    "events": "आयोजन",
+    "role": "भूमिका",
+    "createdOn": "पर बनाया",
+    "main": "मुख्य",
+    "firstName": "पहला नाम",
+    "lastName": "उपनाम",
+    "language": "भाषा",
+    "gender": "लिंग",
+    "birthDate": "जन्म तिथि",
+    "educationGrade": "शैक्षिक ग्रेड",
+    "employmentStatus": "रोज़गार की स्थिति",
+    "maritalStatus": "वैवाहिक स्थिति",
+    "phone": "फ़ोन",
+    "countryCode": "कंट्री कोड",
+    "state": "राज्य",
+    "city": "शहर",
+    "personalInfoHeading": "व्यक्तिगत जानकारी",
+    "eventsAttended": "ईवेंट्स जिन्हें भाग लिया गया है",
+    "viewAll": "सभी को देखें",
+    "contactInfoHeading": "संपर्क जानकारी",
+    "actionsHeading": "कार्रवाई",
+    "personalDetailsHeading": "प्रोफ़ाइल विवरण",
+    "appLanguageCode": "भाषा चुनें",
+    "deleteUser": "उपभोक्ता मिटायें",
+    "pluginCreationAllowed": "प्लगइन निर्माण की अनुमति दी गई",
+    "created": "बनाया था",
+    "adminForOrganizations": "संगठनों के लिए व्यवस्थापक",
+    "membershipRequests": "सदस्यता अनुरोध",
+    "adminForEvents": "घटनाओं के लिए व्यवस्थापक",
+    "addedAsAdmin": "उपयोगकर्ता को व्यवस्थापक के रूप में जोड़ा गया है.",
+    "userType": "उपयोगकर्ता का प्रकार",
+    "email": "ईमेल",
+    "displayImage": "प्रदर्शन छवि",
+    "address": "पता",
+    "delete": "हटाएं",
+    "saveChanges": "परिवर्तन सहेजें",
+    "joined": "शामिल हुए",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध",
+    "unassignUserTag": "टैग को हटाएं",
+    "unassignUserTagMessage": "क्या आप इस उपयोगकर्ता से टैग हटाना चाहते हैं?",
+    "successfullyUnassigned": "उपयोगकर्ता से टैग हटा दिया गया",
+    "tagsAssigned": "टैग सौंपे गए",
+    "noTagsAssigned": "कोई टैग सौंपा नहीं गया"
+  },
+  "people": {
+    "title": "लोग",
+    "searchUsers": "उपयोगकर्ताओं को खोजें"
+  },
+  "userLogin": {
+    "login": "लॉग इन करें",
+    "loginIntoYourAccount": "अपने खाते में लॉगिन करें",
+    "invalidDetailsMessage": "कृपया एक वैध ईमेल और पासवर्ड दर्ज करें।",
+    "notAuthorised": "क्षमा मांगना! ",
+    "invalidCredentials": "दर्ज किए गए क्रेडेंशियल ग़लत हैं. ",
+    "forgotPassword": "पासवर्ड भूल गए",
+    "emailAddress": "ईमेल पता",
+    "enterEmail": "ईमेल दर्ज करें",
+    "password": "पासवर्ड",
+    "enterPassword": "पासवर्ड दर्ज करें",
+    "register": "पंजीकरण करें",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "userRegister": {
+    "enterFirstName": "अपना पहला नाम दर्ज करें",
+    "enterLastName": "अपना अंतिम नाम दर्ज करें",
+    "enterConfirmPassword": "पुष्टि करने के लिए अपना पासवर्ड दर्ज करें",
+    "alreadyhaveAnAccount": "क्या आपके पास पहले से एक खाता मौजूद है?",
+    "login": "लॉग इन करें",
+    "afterRegister": "पंजीकरण सफलतापूर्वक हो गया है। ",
+    "passwordNotMatch": "पासवर्ड मेल नहीं खाता. ",
+    "invalidDetailsMessage": "कृपया वैध विवरण दर्ज करें.",
+    "register": "पंजीकरण करें",
+    "firstName": "प्रथम नाम",
+    "lastName": "अंतिम नाम",
+    "emailAddress": "ईमेल पता",
+    "enterEmail": "ईमेल दर्ज करें",
+    "password": "पासवर्ड",
+    "enterPassword": "पासवर्ड दर्ज करें",
+    "confirmPassword": "पासवर्ड की पुष्टि करें",
+    "talawaApiUnavailable": "Talawa API अनुपलब्ध"
+  },
+  "userNavbar": {
+    "talawa": "तलावा",
+    "home": "घर",
+    "people": "लोग",
+    "events": "आयोजन",
+    "chat": "बात करना",
+    "donate": "दान करें",
+    "language": "भाषा",
+    "settings": "समायोजन",
+    "logout": "लॉग आउट करें",
+    "close": "बंद करें"
+  },
+  "userOrganizations": {
+    "allOrganizations": "सभी संगठन",
+    "joinedOrganizations": "संगठनों से जुड़े",
+    "createdOrganizations": "संगठन बनाये",
+    "selectOrganization": "एक संगठन चुनें",
+    "searchUsers": "उपयोगकर्ता खोजें",
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
+    "organizations": "संगठनों",
+    "search": "खोजें",
+    "filter": "फ़िल्टर",
+    "searchByName": "नाम से खोजें",
+    "searchOrganizations": "संगठनों खोजें"
+  },
+  "userSidebarOrg": {
+    "yourOrganizations": "आपके संगठन",
+    "noOrganizations": "आप अभी तक किसी संगठन में शामिल नहीं हुए हैं.",
+    "viewAll": "सभी को देखें",
+    "talawaUserPortal": "तलावा उपयोगकर्ता पोर्टल",
+    "my organizations": "मेरे संगठन",
+    "communityProfile": "सामुदायिक प्रोफ़ाइल",
+    "users": "उपयोगकर्ता",
+    "requests": "अनुरोध",
+    "logout": "लॉग आउट",
+    "settings": "सेटिंग्स",
+    "chat": "चैट",
+    "menu": "मेनू"
+  },
+  "organizationSidebar": {
+    "viewAll": "सभी को देखें",
+    "events": "आयोजन",
+    "noEvents": "दिखाने के लिए कोई ईवेंट नहीं",
+    "noMembers": "दिखाने के लिए कोई सदस्य नहीं",
+    "members": "सदस्य"
+  },
+  "postCard": {
+    "likes": "पसंद है",
+    "comments": "टिप्पणियाँ",
+    "viewPost": "पोस्ट देखें",
+    "editPost": "पोस्ट संपादित करें",
+    "postedOn": "{{date}} को पोस्ट किया गया"
+  },
+  "home": {
+    "title": "पदों",
+    "posts": "पदों",
+    "post": "डाक",
+    "textArea": "आपके मन में कुछ है?",
+    "feed": "खिलाना",
+    "loading": "लोड हो रहा है",
+    "pinnedPosts": "चिपके पत्र",
+    "yourFeed": "आपका फ़ीड",
+    "nothingToShowHere": "यहां दिखाने के लिए कुछ भी नहीं है",
+    "somethingOnYourMind": "आपके मन में कुछ है?",
+    "addPost": "पोस्ट जोड़ें",
+    "startPost": "एक पोस्ट प्रारंभ करें",
+    "media": "मिडिया",
+    "event": "आयोजन",
+    "article": "लेख",
+    "postNowVisibleInFeed": "पोस्ट अब फीड में दिखाई दे रहा है"
+  },
+  "eventAttendance": {
+    "historical_statistics": "ऐतिहासिक आंकड़े",
+    "Search member": "सदस्य खोजें",
+    "Member Name": "सदस्य का नाम",
+    "Status": "स्थिति",
+    "Events Attended": "भाग लिए गए कार्यक्रम",
+    "Task Assigned": "सौंपा गया कार्य",
+    "Member": "सदस्य",
+    "Admin": "व्यवस्थापक",
+    "loading": "लोड हो रहा है",
+    "noAttendees": "कोई प्रतिभागी नहीं मिला"
+  },
+  "onSpotAttendee": {
+    "title": "ऑन-स्पॉट प्रतिभागी",
+    "enterFirstName": "प्रथम नाम दर्ज करें",
+    "enterLastName": "अंतिम नाम दर्ज करें",
+    "enterEmail": "ईमेल दर्ज करें",
+    "enterPhoneNo": "फ़ोन नंबर दर्ज करें",
+    "selectGender": "लिंग चुनें",
+    "invalidDetailsMessage": "कृपया सभी आवश्यक फ़ील्ड भरें",
+    "orgIdMissing": "संगठन आईडी गायब है। कृपया पुनः प्रयास करें।",
+    "attendeeAddedSuccess": "प्रतिभागी सफलतापूर्वक जोड़ा गया!",
+    "addAttendee": "जोड़ें",
+    "phoneNumber": "फ़ोन नंबर",
+    "addingAttendee": "जोड़ा जा रहा है...",
+    "male": "पुरुष",
+    "female": "महिला",
+    "other": "अन्य"
+  },
+  "settings": {
+    "noeventsAttended": "कोई कार्यक्रम में उपस्थित नहीं",
+    "eventAttended": "भाग लिए गए कार्यक्रम",
+    "profileSettings": "पार्श्वचित्र समायोजन",
+    "gender": "लिंग",
+    "phoneNumber": "फ़ोन नंबर",
+    "chooseFile": "फाइलें चुनें",
+    "birthDate": "जन्म तिथि",
+    "grade": "शैक्षिक ग्रेड",
+    "empStatus": "रोज़गार की स्थिति",
+    "maritalStatus": "वैवाहिक स्थिति",
+    "state": "शहरी स्थान",
+    "country": "देश",
+    "resetChanges": "परिवर्तन रीसेट करें",
+    "profileDetails": "प्रोफ़ाइल विवरण",
+    "deleteUserMessage": "डिलीट यूजर बटन पर क्लिक करने से आपका यूजर अपने इवेंट, टैग और सभी संबंधित डेटा के साथ स्थायी रूप से हटा दिया जाएगा।",
+    "copyLink": "प्रोफ़ाइल लिंक कॉपी करें",
+    "deleteUser": "उपभोक्ता मिटायें",
+    "otherSettings": "अन्य सेटिंग",
+    "changeLanguage": "भाषा बदलें",
+    "sgender": "लिंग चुनें",
+    "gradePlaceholder": "ग्रेड दर्ज करें",
+    "sEmpStatus": "रोजगार की स्थिति चुनें",
+    "female": "महिला",
+    "male": "पुरुष",
+    "employed": "कार्यरत",
+    "other": "अन्य",
+    "sMaritalStatus": "वैवाहिक स्थिति चुनें",
+    "unemployed": "बेरोज़गार",
+    "married": "विवाहित",
+    "single": "अकेला",
+    "widowed": "विधवा",
+    "divorced": "तलाकशुदा",
+    "engaged": "काम में लगा हुआ",
+    "separated": "विभाजित",
+    "grade1": "ग्रेड 1",
+    "grade2": "ग्रेड 2",
+    "grade3": "ग्रेड 3",
+    "grade4": "ग्रेड 4",
+    "grade5": "ग्रेड 5",
+    "grade6": "वर्ग 6",
+    "grade7": "श्रेणी 7",
+    "grade8": "कक्षा 8",
+    "grade9": "श्रेणी 9",
+    "grade10": "ग्रेड 10",
+    "grade11": "ग्रेड 11",
+    "grade12": "कक्षा 12",
+    "graduate": "स्नातक",
+    "kg": "किलोग्राम",
+    "preKg": "पूर्व केजी",
+    "noGrade": "कोई ग्रेड नहीं",
+    "fullTime": "पूरा समय",
+    "partTime": "पार्ट टाईम",
+    "selectCountry": "कोई देश चुनें",
+    "enterState": "शहर या राज्य दर्ज करें",
+    "settings": "समायोजन",
+    "firstName": "प्रथम नाम",
+    "lastName": "अंतिम नाम",
+    "emailAddress": "ईमेल पता",
+    "displayImage": "प्रदर्शन छवि",
+    "address": "पता",
+    "saveChanges": "परिवर्तन सहेजें",
+    "joined": "शामिल हुए"
+  },
+  "donate": {
+    "title": "दान",
+    "donations": "दान",
+    "searchDonations": "दान खोजें",
+    "donateForThe": "के लिए दान करें",
+    "amount": "मात्रा",
+    "yourPreviousDonations": "आपका पिछला दान",
+    "donate": "दान करें",
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
+    "success": "दान सफल",
+    "invalidAmount": "कृपया दान राशि के लिए संख्यात्मक मान दर्ज करें.",
+    "donationAmountDescription": "कृपया दान राशि के लिए संख्यात्मक मान दर्ज करें.",
+    "donationOutOfRange": "दान राशि {{min}} और {{max}} के बीच होनी चाहिए.",
+    "donateTo": "दान करें"
+  },
+  "userEvents": {
+    "title": "ईवेंट",
+    "nothingToShow": "यहां दिखाने के लिए कुछ भी नहीं है.",
+    "createEvent": "कार्यक्रम बनाएँ",
+    "recurring": "पुनरावर्ती ईवेंट",
+    "startTime": "समय शुरू",
+    "endTime": "अंत समय",
+    "listView": "लिस्ट व्यू",
+    "calendarView": "कैलेंडर दृश्य",
+    "allDay": "पूरे दिन",
+    "eventCreated": "ईवेंट सफलतापूर्वक बनाया और पोस्ट किया गया.",
+    "eventDetails": "घटना की जानकारी",
+    "eventTitle": "शीर्षक",
+    "enterTitle": "शीर्षक दर्ज करें",
+    "enterDescription": "विवरण दर्ज करें",
+    "enterLocation": "स्थान दर्ज करें",
+    "publicEvent": "सार्वजनिक है",
+    "registerable": "पंजीकरण योग्य है",
+    "monthlyCalendarView": "मासिक कैलेंडर",
+    "yearlyCalendarView": "वार्षिक कैलेंडर",
+    "search": "खोजें",
+    "cancel": "रद्द करें",
+    "create": "बनाएं",
+    "eventDescription": "कार्यक्रम विवरण",
+    "eventLocation": "कार्यक्रम स्थान",
+    "startDate": "प्रारंभ तिथि",
+    "endDate": "समाप्ति तिथि"
+  },
+  "userEventCard": {
+    "starts": "प्रारंभ होगा",
+    "ends": "समाप्त होता है",
+    "creator": "निर्माता",
+    "alreadyRegistered": "पहले से ही पंजीकृत",
+    "location": "स्थान",
+    "register": "पंजीकरण करें"
+  },
+  "advertisement": {
+    "title": "विज्ञापनों",
+    "activeAds": "सक्रिय अभियान",
+    "archievedAds": "पूर्ण अभियान",
+    "pMessage": "इस अभियान के लिए विज्ञापन मौजूद नहीं हैं.",
+    "validLink": "लिंक मान्य है",
+    "invalidLink": "लिंक अमान्य है",
+    "Rname": "विज्ञापन का नाम दर्ज करें",
+    "Rtype": "विज्ञापन का प्रकार चुनें",
+    "Rmedia": "प्रदर्शित करने के लिए मीडिया सामग्री प्रदान करें",
+    "RstartDate": "आरंभ तिथि चुनें",
+    "RendDate": "अंतिम तिथि चुनें",
+    "RClose": "खिड़की बंद करो",
+    "addNew": "नया विज्ञापन बनाएं",
+    "EXname": "पूर्व। ",
+    "EXlink": "पूर्व। ",
+    "createAdvertisement": "विज्ञापन बनाएं",
+    "deleteAdvertisement": "विज्ञापन हटाएँ",
+    "deleteAdvertisementMsg": "क्या आप यह विज्ञापन हटाना चाहते हैं?",
+    "view": "देखना",
+    "editAdvertisement": "विज्ञापन संपादित करें",
+    "advertisementDeleted": "विज्ञापन सफलतापूर्वक हटाया गया।",
+    "endDateGreaterOrEqual": "समाप्ति तिथि प्रारंभ तिथि से अधिक या उसके बराबर होनी चाहिए",
+    "advertisementCreated": "विज्ञापन सफलतापूर्वक बनाया गया।",
+    "pHeading": "विज्ञापन शीर्षक",
+    "delete": "हटाएं",
+    "close": "बंद करें",
+    "no": "नहीं",
+    "yes": "हाँ",
+    "edit": "संपादित करें",
+    "saveChanges": "परिवर्तन सहेजें",
+    "endOfResults": "परिणाम समाप्त"
+  },
+  "userChat": {
+    "chat": "बात करना",
+    "contacts": "संपर्क",
+    "search": "खोज",
+    "messages": "संदेश"
+  },
+  "userChatRoom": {
+    "selectContact": "बातचीत शुरू करने के लिए एक संपर्क चुनें",
+    "sendMessage": "मेसेज भेजें"
+  },
+  "orgProfileField": {
+    "loading": "लोड हो रहा है...",
+    "noCustomField": "कोई कस्टम फ़ील्ड उपलब्ध नहीं है",
+    "customFieldName": "कार्यक्षेत्र नाम",
+    "enterCustomFieldName": "फ़ील्ड नाम दर्ज करें",
+    "customFieldType": "क्षेत्र प्रकार",
+    "Remove Custom Field": "कस्टम फ़ील्ड हटाएँ",
+    "fieldSuccessMessage": "फ़ील्ड सफलतापूर्वक जोड़ा गया",
+    "fieldRemovalSuccess": "फ़ील्ड सफलतापूर्वक हटा दी गई",
+    "String": "स्ट्रिंग",
+    "Boolean": "बूलियन",
+    "Date": "तारीख",
+    "Number": "संख्या",
+    "saveChanges": "परिवर्तन सहेजें"
+  },
+  "orgActionItemCategories": {
+    "enableButton": "सक्षम",
+    "disableButton": "अक्षम करना",
+    "updateActionItemCategory": "अद्यतन",
+    "actionItemCategoryName": "नाम",
+    "categoryDetails": "श्रेणी विवरण",
+    "enterName": "नाम दर्ज करें",
+    "successfulCreation": "कार्रवाई आइटम श्रेणी सफलतापूर्वक बनाई गई",
+    "successfulUpdation": "कार्रवाई आइटम श्रेणी सफलतापूर्वक अपडेट की गई",
+    "sameNameConflict": "अपडेट करने के लिए कृपया नाम बदलें",
+    "categoryEnabled": "कार्य आइटम श्रेणी सक्षम",
+    "categoryDisabled": "कार्रवाई आइटम श्रेणी अक्षम",
+    "noActionItemCategories": "कोई कार्रवाई आइटम श्रेणी नहीं",
+    "status": "स्थिति",
+    "categoryDeleted": "कार्रवाई आइटम श्रेणी सफलतापूर्वक हटा दी गई",
+    "deleteCategory": "श्रेणी हटाएं",
+    "deleteCategoryMsg": "क्या आप वाकई इस कार्रवाई आइटम श्रेणी को हटाना चाहते हैं?",
+    "createButton": "बटन बनाएं",
+    "editButton": "संपादित बटन"
+  },
+  "organizationVenues": {
+    "title": "स्थानों",
+    "addVenue": "स्थान जोड़ें",
+    "venueDetails": "स्थल विवरण",
+    "venueName": "आयोजन स्थल का नाम",
+    "enterVenueName": "स्थान का नाम दर्ज करें",
+    "enterVenueDesc": "स्थान विवरण दर्ज करें",
+    "capacity": "क्षमता",
+    "enterVenueCapacity": "स्थान क्षमता दर्ज करें",
+    "image": "स्थल छवि",
+    "uploadVenueImage": "स्थल छवि अपलोड करें",
+    "createVenue": "स्थान बनाएँ",
+    "venueAdded": "स्थान सफलतापूर्वक जोड़ा गया",
+    "editVenue": "स्थान अद्यतन करें",
+    "venueUpdated": "स्थान विवरण सफलतापूर्वक अपडेट किया गया",
+    "sort": "क्रम से लगाना",
+    "highestCapacity": "उच्चतम क्षमता",
+    "lowestCapacity": "सबसे कम क्षमता",
+    "noVenues": "कोई स्थान नहीं मिला!",
+    "view": "देखना",
+    "venueTitleError": "स्थान का शीर्षक खाली नहीं हो सकता!",
+    "venueCapacityError": "क्षमता एक धनात्मक संख्या होनी चाहिए!",
+    "searchBy": "खोज से",
+    "description": "विवरण",
+    "edit": "संपादित करें",
+    "delete": "हटाएं",
+    "name": "नाम",
+    "desc": "विवरण"
+  },
+  "addMember": {
+    "title": "सदस्य जोड़ें",
+    "addMembers": "सदस्य जोड़ें",
+    "existingUser": "मौजूदा उपयोगकर्ता",
+    "newUser": "नए उपयोगकर्ता",
+    "searchFullName": "पूरे नाम से खोजें",
+    "enterFirstName": "प्रथम नाम दर्ज करें",
+    "enterLastName": "अंतिम नाम दर्ज करो",
+    "enterConfirmPassword": "पासवर्ड की पुष्टि करें दर्ज करें",
+    "organization": "संगठन",
+    "invalidDetailsMessage": "कृपया सभी आवश्यक विवरण प्रदान करें।",
+    "passwordNotMatch": "सांकेतिक शब्द मेल नहीं खाते।",
+    "addMember": "सदस्य जोड़ें",
+    "firstName": "प्रथम नाम",
+    "lastName": "अंतिम नाम",
+    "emailAddress": "ईमेल पता",
+    "enterEmail": "ईमेल दर्ज करें",
+    "password": "पासवर्ड",
+    "enterPassword": "पासवर्ड दर्ज करें",
+    "confirmPassword": "पासवर्ड की पुष्टि करें",
+    "cancel": "रद्द करें",
+    "create": "बनाएं",
+    "user": "उपयोगकर्ता",
+    "profile": "प्रोफ़ाइल"
+  },
+  "eventActionItems": {
+    "title": "एक्शन आइटम्स",
+    "createActionItem": "एक्शन आइटम बनाएं",
+    "actionItemCategory": "कार्य आइटम श्रेणी",
+    "selectActionItemCategory": "एक क्रिया आइटम श्रेणी का चयन करें",
+    "selectAssignee": "एक समनुदेशिती का चयन करें",
+    "preCompletionNotes": "टिप्पणियाँ",
+    "postCompletionNotes": "समापन नोट्स",
+    "actionItemDetails": "कार्रवाई मद विवरण",
+    "dueDate": "नियत तारीख",
+    "completionDate": "पूरा करने की तिथि",
+    "editActionItem": "क्रिया आइटम संपादित करें",
+    "deleteActionItem": "क्रिया आइटम हटाएँ",
+    "deleteActionItemMsg": "क्या आप इस क्रिया आइटम को हटाना चाहते हैं?",
+    "successfulDeletion": "कार्रवाई आइटम सफलतापूर्वक हटा दिया गया",
+    "successfulCreation": "कार्रवाई आइटम सफलतापूर्वक बनाया गया",
+    "successfulUpdation": "कार्रवाई आइटम सफलतापूर्वक अपडेट किया गया",
+    "notes": "टिप्पणियाँ",
+    "assignee": "संपत्ति-भागी",
+    "assigner": "असाइनर",
+    "assignmentDate": "असाइनमेंट तिथि",
+    "status": "स्थिति",
+    "actionItemActive": "सक्रिय",
+    "actionItemStatus": "कार्रवाई आइटम स्थिति",
+    "actionItemCompleted": "कार्रवाई आइटम पूर्ण हुआ",
+    "markCompletion": "पूर्णता को चिह्नित करें",
+    "save": "बचाना",
+    "yes": "हाँ",
+    "no": "नहीं"
+  },
+  "checkIn": {
+    "errorCheckingIn": "चेक-इन में त्रुटि",
+    "checkedInSuccessfully": "सफलतापूर्वक चेक-इन किया गया"
+  },
+  "eventRegistrantsModal": {
+    "errorAddingAttendee": "उपस्थित होने वाले को जोड़ने में त्रुटि",
+    "errorRemovingAttendee": "उपस्थित होने वाले को हटाने में त्रुटि"
+  },
+  "userCampaigns": {
+    "title": "धन उगाहने के अभियान",
+    "searchByName": "नाम से खोजें...",
+    "searchBy": "द्वारा खोजें",
+    "pledgers": "प्रतिज्ञाकर्ता",
+    "campaigns": "अभियान",
+    "myPledges": "मेरी प्रतिज्ञाएँ",
+    "lowestAmount": "सबसे कम राशि",
+    "highestAmount": "सबसे अधिक राशि",
+    "lowestGoal": "सबसे कम लक्ष्य",
+    "highestGoal": "सबसे बड़ा लक्ष्य",
+    "latestEndDate": "सबसे अंतिम समाप्ति तिथि",
+    "earliestEndDate": "सबसे पहले समाप्ति तिथि",
+    "addPledge": "प्रतिज्ञा जोड़ें",
+    "viewPledges": "प्रतिज्ञाएँ देखें",
+    "noPledges": "कोई प्रतिज्ञा नहीं मिली",
+    "noCampaigns": "कोई अभियान नहीं मिला"
+  },
+  "userPledges": {
+    "title": "मेरी प्रतिज्ञाएँ"
+  },
+  "eventVolunteers": {
+    "volunteers": "स्वयंसेवक",
+    "volunteer": "स्वयंसेवक",
+    "volunteerGroups": "स्वयंसेवक समूह",
+    "individuals": "व्यक्ति",
+    "groups": "समूह",
+    "status": "स्थिति",
+    "noVolunteers": "कोई स्वयंसेवक नहीं",
+    "noVolunteerGroups": "कोई स्वयंसेवक समूह नहीं",
+    "add": "जोड़ें",
+    "mostHoursVolunteered": "सबसे अधिक घंटे स्वयंसेवा",
+    "leastHoursVolunteered": "सबसे कम घंटे स्वयंसेवा",
+    "accepted": "स्वीकृत",
+    "addVolunteer": "स्वयंसेवक जोड़ें",
+    "removeVolunteer": "स्वयंसेवक हटाएं",
+    "volunteerAdded": "स्वयंसेवक सफलतापूर्वक जोड़ा गया",
+    "volunteerRemoved": "स्वयंसेवक सफलतापूर्वक हटाया गया",
+    "volunteerGroupCreated": "स्वयंसेवक समूह सफलतापूर्वक बनाया गया",
+    "volunteerGroupUpdated": "स्वयंसेवक समूह सफलतापूर्वक अपडेट किया गया",
+    "volunteerGroupDeleted": "स्वयंसेवक समूह सफलतापूर्वक हटाया गया",
+    "removeVolunteerMsg": "क्या आप वाकई इस स्वयंसेवक को हटाना चाहते हैं?",
+    "deleteVolunteerGroupMsg": "क्या आप वाकई इस स्वयंसेवक समूह को हटाना चाहते हैं?",
+    "leader": "नेता",
+    "group": "समूह",
+    "createGroup": "समूह बनाएं",
+    "updateGroup": "समूह अपडेट करें",
+    "deleteGroup": "समूह हटाएं",
+    "volunteersRequired": "आवश्यक स्वयंसेवक",
+    "volunteerDetails": "स्वयंसेवक विवरण",
+    "hoursVolunteered": "स्वयंसेवा घंटे",
+    "groupDetails": "समूह विवरण",
+    "creator": "निर्माता",
+    "requests": "अनुरोध",
+    "noRequests": "कोई अनुरोध नहीं",
+    "latest": "नवीनतम",
+    "earliest": "प्रारंभिक",
+    "requestAccepted": "अनुरोध सफलतापूर्वक स्वीकृत",
+    "requestRejected": "अनुरोध सफलतापूर्वक अस्वीकृत",
+    "details": "विवरण",
+    "manageGroup": "समूह प्रबंधित करें",
+    "mostVolunteers": "सबसे अधिक स्वयंसेवक",
+    "leastVolunteers": "सबसे कम स्वयंसेवक"
+  },
+  "userVolunteer": {
+    "title": "स्वयंसेवकता",
+    "name": "शीर्षक",
+    "upcomingEvents": "आगामी कार्यक्रम",
+    "requests": "अनुरोध",
+    "invitations": "निमंत्रण",
+    "groups": "स्वयंसेवक समूह",
+    "actions": "क्रियाएँ",
+    "searchByName": "नाम से खोजें",
+    "latestEndDate": "नवीनतम समाप्ति तिथि",
+    "earliestEndDate": "प्रारंभिक समाप्ति तिथि",
+    "noEvents": "कोई आगामी कार्यक्रम नहीं",
+    "volunteer": "स्वयंसेवक",
+    "volunteered": "स्वयंसेवित",
+    "join": "शामिल हों",
+    "joined": "शामिल हुआ",
+    "searchByEventName": "कार्यक्रम शीर्षक से खोजें",
+    "filter": "फ़िल्टर",
+    "groupInvite": "समूह निमंत्रण",
+    "individualInvite": "व्यक्तिगत निमंत्रण",
+    "noInvitations": "कोई निमंत्रण नहीं",
+    "accept": "स्वीकारें",
+    "reject": "अस्वीकार करें",
+    "receivedLatest": "हाल में प्राप्त",
+    "receivedEarliest": "सबसे पहले प्राप्त",
+    "invitationAccepted": "निमंत्रण सफलतापूर्वक स्वीकार किया गया",
+    "invitationRejected": "निमंत्रण सफलतापूर्वक अस्वीकृत",
+    "volunteerSuccess": "स्वयंसेवक के रूप में अनुरोध सफलतापूर्वक किया गया",
+    "recurring": "पुनरावृत्ति",
+    "groupInvitationSubject": "स्वयंसेवक समूह में शामिल होने के लिए निमंत्रण",
+    "eventInvitationSubject": "कार्यक्रम के लिए स्वयंसेवक बनने का निमंत्रण"
+  }
+}
diff --git a/public/locales/sp/common.json b/public/locales/sp/common.json
new file mode 100644
index 0000000000..2c06daac5e
--- /dev/null
+++ b/public/locales/sp/common.json
@@ -0,0 +1,98 @@
+{
+  "firstName": "First Name",
+  "lastName": "Last Name",
+  "searchByName": "Search By Name",
+  "loading": "Loading...",
+  "endOfResults": "End of results",
+  "noResultsFoundFor": "No results found for ",
+  "edit": "Edit",
+  "admins": "Admins",
+  "admin": "ADMIN",
+  "user": "USER",
+  "superAdmin": "SUPERADMIN",
+  "members": "Members",
+  "logout": "Logout",
+  "login": "Login",
+  "register": "Register",
+  "menu": "Menu",
+  "settings": "Settings",
+  "gender": "Género",
+  "users": "Users",
+  "requests": "Requests",
+  "OR": "OR",
+  "cancel": "Cancel",
+  "close": "Close",
+  "create": "Create",
+  "delete": "Delete",
+  "done": "Done",
+  "yes": "Yes",
+  "no": "No",
+  "filter": "Filter",
+  "search": "Search",
+  "description": "Description",
+  "saveChanges": "Save Changes",
+  "resetChanges": "Reset Changes",
+  "displayImage": "Display Image",
+  "enterEmail": "Enter Email",
+  "emailAddress": "Email Address",
+  "email": "Email",
+  "name": "Name",
+  "desc": "Description",
+  "enterPassword": "Enter Password",
+  "password": "Password",
+  "confirmPassword": "Confirm Password",
+  "forgotPassword": "Forgot Password ?",
+  "talawaAdminPortal": "Talawa Admin Portal",
+  "address": "Address",
+  "location": "Location",
+  "enterLocation": "Enter Location",
+  "joined": "Joined",
+  "startDate": "Start Date",
+  "endDate": "End Date",
+  "startTime": "Start Time",
+  "endTime": "End Time",
+  "My Organizations": "Mis Organizaciones",
+  "Dashboard": "Tablero",
+  "People": "Gente",
+  "Events": "Eventos",
+  "Venues": "Lugares",
+  "Action Items": "Elementos de Acción",
+  "Posts": "Publicaciones",
+  "Block/Unblock": "Bloquear/Desbloquear",
+  "Advertisement": "Publicidad",
+  "Funds": "Fondos",
+  "Membership Requests": "Solicitudes de Membresía",
+  "Plugins": "Complementos",
+  "Plugin Store": "Tienda de Complementos",
+  "Settings": "Configuraciones",
+  "createdOn": "Creado En",
+  "createdBy": "Creado Por",
+  "usersRole": "Rol del Usuario",
+  "changeRole": "Cambiar Rol",
+  "action": "Acción",
+  "removeUser": "Eliminar Usuario",
+  "remove": "Eliminar",
+  "viewProfile": "Ver Perfil",
+  "profile": "Perfil",
+  "noFiltersApplied": "No se aplicaron filtros",
+  "manage": "Administrar",
+  "searchResultsFor": "Resultados de búsqueda para {{text}}",
+  "none": "Ninguno",
+  "sort": "Ordenar",
+  "Donate": "Donar",
+  "addedSuccessfully": "{{item}} agregado con éxito",
+  "updatedSuccessfully": "{{item}} actualizado con éxito",
+  "removedSuccessfully": "{{item}} eliminado con éxito",
+  "successfullyUpdated": "Actualizado con éxito",
+  "sessionWarning": "Su sesión expirará pronto debido a la inactividad. Por favor, interactúe con la página para extender su sesión.",
+  "sessionLogOut": "Su sesión ha expirado debido a la inactividad. Por favor, inicie sesión nuevamente para continuar.",
+  "all": "Todos",
+  "active": "Activo",
+  "disabled": "Deshabilitado",
+  "pending": "Pendiente",
+  "completed": "Completado",
+  "late": "Tarde",
+  "createdLatest": "Creado más reciente",
+  "createdEarliest": "Creado más temprano",
+  "searchBy": "Buscar por {{item}}"
+}
diff --git a/public/locales/sp/errors.json b/public/locales/sp/errors.json
new file mode 100644
index 0000000000..39b579abac
--- /dev/null
+++ b/public/locales/sp/errors.json
@@ -0,0 +1,11 @@
+{
+  "talawaApiUnavailable": "Talawa-API service is unavailable!. Is it running? Check your network connectivity too.",
+  "notFound": "Not found",
+  "unknownError": "An unknown error occurred. Please try again later. {{msg}}",
+  "notAuthorised": "Sorry! you are not Authorised!",
+  "errorSendingMail": "Error sending mail",
+  "emailNotRegistered": "Email not registered",
+  "notFoundMsg": "Oops! The Page you requested was not found!",
+  "errorOccurredCouldntCreate": "Ocurrió un error. No se pudo crear {{entity}}",
+  "errorLoading": "Ocurrió un error al cargar los datos de {{entity}}"
+}
diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
new file mode 100644
index 0000000000..7aa1d6ffc0
--- /dev/null
+++ b/public/locales/sp/translation.json
@@ -0,0 +1,1485 @@
+{
+  "leaderboard": {
+    "title": "Tabla de Clasificación",
+    "searchByVolunteer": "Buscar por Voluntario",
+    "mostHours": "Más Horas",
+    "leastHours": "Menos Horas",
+    "timeFrame": "Período",
+    "allTime": "Todo el Tiempo",
+    "weekly": "Esta Semana",
+    "monthly": "Este Mes",
+    "yearly": "Este Año",
+    "noVolunteers": "¡No Se Encontraron Voluntarios!"
+  },
+  "loginPage": {
+    "title": "Administrador Talawa",
+    "fromPalisadoes": "Una aplicación de código abierto de los voluntarios de la Fundación palisados",
+    "talawa_portal": "Portal De Administración Talawa",
+    "login": "Acceso",
+    "userLogin": "Inicio de sesión de usuario",
+    "register": "Registro",
+    "firstName": "Primer nombre",
+    "lastName": "Apellido",
+    "email": "Correo electrónico",
+    "password": "Clave",
+    "atleast_8_char_long": "Al menos 8 caracteres de largo",
+    "atleast_6_char_long": "Al menos 6 caracteres de largo",
+    "firstName_invalid": "El nombre debe contener solo letras minúsculas y mayúsculas.",
+    "lastName_invalid": "El apellido debe contener solo letras minúsculas y mayúsculas.",
+    "password_invalid": "La contraseña debe contener al menos una letra minúscula, una letra mayúscula, un valor numérico y un carácter especial.",
+    "email_invalid": "El correo electrónico debe tener al menos 8 caracteres.",
+    "Password_and_Confirm_password_mismatches.": "Contraseña y Confirmar contraseña no coinciden.",
+    "confirmPassword": "Confirmar contraseña",
+    "forgotPassword": "Has olvidado tu contraseña ?",
+    "enterEmail": "ingrese correo electrónico",
+    "enterPassword": "introducir la contraseña",
+    "doNotOwnAnAccount": "¿No tienes una cuenta?",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Verifica también la conectividad de tu red.",
+    "captchaError": "¡Error de captcha!",
+    "Please_check_the_captcha": "Por favor, revisa el captcha.",
+    "Something_went_wrong": "Algo salió mal. Inténtalo después de un tiempo",
+    "passwordMismatches": "Contraseña y Confirmar contraseña no coinciden.",
+    "fillCorrectly": "Complete todos los detalles correctamente.",
+    "notAuthorised": "¡Lo siento! ¡No estás autorizado!",
+    "notFound": "¡Usuario no encontrado!",
+    "successfullyRegistered": "Registrado con éxito. Espere hasta que sea aprobado",
+    "OR": "O",
+    "admin": "ADMINISTRACIÓN",
+    "user": "USUARIO",
+    "lowercase_check": "Al menos una letra mayuscula",
+    "uppercase_check": "Al menos una letra minúscula",
+    "numeric_value_check": "Al menos un valor numérico",
+    "special_char_check": "Al menos un carácter especial",
+    "loading": "Cargando...",
+    "selectOrg": "Seleccione una organización",
+    "afterRegister": "Registro exitoso. Por favor, espere a que el administrador apruebe su solicitud."
+  },
+  "userLoginPage": {
+    "title": "Administrador Talawa",
+    "fromPalisadoes": "Una aplicación de código abierto de los voluntarios de la Fundación palisados",
+    "talawa_portal": "Portal De Administración Talawa",
+    "login": "Acceso",
+    "register": "Registro",
+    "firstName": "Primer nombre",
+    "lastName": "Apellido",
+    "email": "Correo electrónico",
+    "password": "Clave",
+    "atleast_8_char_long": "Al menos 8 caracteres de largo",
+    "Password_and_Confirm_password_mismatches.": "Contraseña y Confirmar contraseña no coinciden.",
+    "confirmPassword": "Confirmar contraseña",
+    "forgotPassword": "Has olvidado tu contraseña ?",
+    "enterEmail": "ingrese correo electrónico",
+    "enterPassword": "introducir la contraseña",
+    "doNotOwnAnAccount": "¿No tienes una cuenta?",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Verifica también la conectividad de tu red.",
+    "captchaError": "¡Error de captcha!",
+    "Please_check_the_captcha": "Por favor, revisa el captcha.",
+    "Something_went_wrong": "Algo salió mal. Inténtalo después de un tiempo",
+    "passwordMismatches": "Contraseña y Confirmar contraseña no coinciden.",
+    "fillCorrectly": "Complete todos los detalles correctamente.",
+    "notAuthorised": "¡Lo siento! ¡No estás autorizado!",
+    "notFound": "¡Usuario no encontrado!",
+    "successfullyRegistered": "Registrado con éxito. Espere hasta que sea aprobado",
+    "userLogin": "Inicio de sesión de usuario",
+    "afterRegister": "Registrado exitosamente. Espere a que el administrador apruebe su solicitud.",
+    "OR": "O",
+    "loading": "Cargando...",
+    "selectOrg": "Seleccione una organización"
+  },
+  "latestEvents": {
+    "eventCardTitle": "Próximos Eventos",
+    "eventCardSeeAll": "Ver Todos",
+    "noEvents": "No Hay Eventos Próximos"
+  },
+  "latestPosts": {
+    "latestPostsTitle": "Últimas Publicaciones",
+    "seeAllLink": "Ver Todo",
+    "noPostsCreated": "No se han creado publicaciones"
+  },
+  "listNavbar": {
+    "talawa_portal": "Portal De Administración Talawa",
+    "roles": "Roles",
+    "requests": "Peticiones",
+    "logout": "Cerrar sesión"
+  },
+  "leftDrawer": {
+    "talawaAdminPortal": "Portal de administración de Talawa",
+    "menu": "Menú",
+    "my organizations": "Mis Organizaciones",
+    "users": "Usuarios",
+    "requests": "Solicitudes",
+    "communityProfile": "Perfil de la comunidad",
+    "logout": "Cerrar sesión"
+  },
+  "leftDrawerOrg": {
+    "talawaAdminPortal": "Portal de administración de Talawa",
+    "menu": "Menú",
+    "talawa_portal": "Portal De Administración Talawa",
+    "Dashboard": "Tablero",
+    "People": "Gente",
+    "Events": "Eventos",
+    "Contributions": "Contribuciones",
+    "Posts": "Publicaciones",
+    "Block/Unblock": "Bloquear/Desbloquear",
+    "Plugins": "Complementos",
+    "Plugin Store": "Tienda de complementos",
+    "allOrganizations": "Todas las organizaciones",
+    "yourOrganization": "Tu organización",
+    "notification": "Notificación",
+    "settings": "Ajustes",
+    "language": "Idioma",
+    "logout": "Cerrar sesión",
+    "notifications": "Notificaciones",
+    "spamsThe": "envía correo no deseado",
+    "group": "grupo",
+    "noNotifications": "No Notificaciones",
+    "close": "Cerca",
+    "Advertisement": "Publicidad"
+  },
+  "orgList": {
+    "title": "Organizaciones Talawa",
+    "you": "Tú",
+    "name": "Nombre",
+    "designation": "Designacion",
+    "email": "Correo electrónico",
+    "searchByName": "Buscar por nombre",
+    "my organizations": "Mis Organizaciones.",
+    "createOrganization": "Crear organización",
+    "createSampleOrganization": "Crear organización de muestra",
+    "description": "Descripción",
+    "location": "Ubicación",
+    "address": "Dirección",
+    "city": "Ciudad",
+    "countryCode": "Código de País",
+    "line1": "Línea 1",
+    "line2": "Línea 2",
+    "postalCode": "Código Postal",
+    "dependentLocality": "Localidad Dependiente",
+    "sortingCode": "Código de Ordenamiento",
+    "state": "Estado / Provincia",
+    "userRegistrationRequired": "Registro de usuario requerido",
+    "visibleInSearch": "Visible en la búsqueda",
+    "displayImage": "Mostrar imagen",
+    "enterName": "Ingrese su nombre",
+    "sort": "Ordenar",
+    "Earliest": "Más Temprano",
+    "Latest": "El último",
+    "filter": "Filtrar",
+    "cancel": "Cancelar",
+    "endOfResults": "Fin de los resultados",
+    "noOrgErrorTitle": "Organizaciones no encontradas",
+    "sampleOrgDuplicate": "Solo se permite una organización de muestra",
+    "noOrgErrorDescription": "Por favor, crea una organización a través del panel de control",
+    "noResultsFoundFor": "No se encontraron resultados para ",
+    "OR": "O",
+    "sampleOrgSuccess": "Organización de ejemplo creada exitosamente",
+    "manageFeatures": "Gestionar funciones",
+    "manageFeaturesInfo": "Información de gestión de funciones",
+    "goToStore": "Ir a la tienda",
+    "enableEverything": "Habilitar todo"
+  },
+  "orgListCard": {
+    "admins": "Administradores",
+    "members": "Miembros",
+    "manage": "Administrar",
+    "sampleOrganization": "Organización de muestra"
+  },
+  "paginationList": {
+    "rowsPerPage": "filas por página",
+    "all": "Todos"
+  },
+  "requests": {
+    "title": "Solicitudes",
+    "sl_no": "Núm.",
+    "name": "Nombre",
+    "email": "Correo electrónico",
+    "accept": "Aceptar",
+    "reject": "Rechazar",
+    "searchRequests": "Buscar solicitudes",
+    "endOfResults": "Fin de los resultados",
+    "noOrgError": "Organizaciones no encontradas, por favor crea una organización a través del panel",
+    "noResultsFoundFor": "No se encontraron resultados para ",
+    "noRequestsFound": "No se encontraron solicitudes",
+    "acceptedSuccessfully": "Solicitud aceptada exitosamente",
+    "rejectedSuccessfully": "Solicitud rechazada exitosamente",
+    "noOrgErrorTitle": "Organizaciones no encontradas",
+    "noOrgErrorDescription": "Por favor, crea una organización a través del panel de control"
+  },
+  "users": {
+    "title": "Roles Talawa",
+    "searchByName": "Buscar por nombre",
+    "users": "Usuarios",
+    "name": "Nombre",
+    "email": "Correo electrónico",
+    "joined_organizations": "Organizaciones unidas",
+    "blocked_organizations": "Organizaciones bloqueadas",
+    "endOfResults": "Fin de los resultados",
+    "orgJoinedBy": "Organizaciones unidas por",
+    "orgThatBlocked": "Organizaciones bloqueadas por",
+    "hasNotJoinedAnyOrg": "No se ha unido a ninguna organización.",
+    "isNotBlockedByAnyOrg": "No está bloqueado por ninguna organización.",
+    "searchByOrgName": "Buscar por nombre de organización",
+    "view": "Ver",
+    "admin": "ADMINISTRACIÓN",
+    "superAdmin": "SUPERADMIN",
+    "user": "USUARIO",
+    "enterName": "Ingrese su nombre",
+    "loadingUsers": "Cargando usuarios ...",
+    "noUserFound": "No se encontró ningún usuario.",
+    "sort": "Ordenar",
+    "Oldest": "Más Antiguas Primero",
+    "Newest": "Más Recientes Primero",
+    "filter": "Filtrar",
+    "roleUpdated": "Rol actualizado.",
+    "noResultsFoundFor": "No se encontraron resultados para ",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
+    "cancel": "Cancelar",
+    "admins": "Administradores",
+    "members": "Miembros",
+    "joinNow": "Únete ahora",
+    "visit": "visita",
+    "withdraw": "retirar",
+    "orgJoined": "Unido a la organización exitosamente",
+    "MembershipRequestSent": "Solicitud de membresía enviada exitosamente",
+    "AlreadyJoined": "Ya eres miembro de esta organización.",
+    "errorOccured": "Se produjo un error. Por favor, inténtalo de nuevo más tarde.",
+    "removeUserFrom": "Eliminar Usuario de {{org}}",
+    "removeConfirmation": "¿Está seguro de que desea eliminar a '{{name}}' de la organización '{{org}}'?",
+    "noOrgError": "Error sin organización"
+  },
+  "communityProfile": {
+    "title": "Perfil de la comunidad",
+    "editProfile": "Editar perfil",
+    "communityProfileInfo": "Estos detalles aparecerán en la pantalla de inicio de sesión/registro para usted y los miembros de su comunidad.",
+    "communityName": "Nombre de la comunidad",
+    "wesiteLink": "Enlace de página web",
+    "logo": "Logo",
+    "social": "Enlaces de redes sociales",
+    "url": "Introducir URL",
+    "profileChangedMsg": "Se actualizaron correctamente los detalles del perfil.",
+    "resetData": "Restablezca correctamente los detalles del perfil."
+  },
+  "dashboard": {
+    "title": "Panel de",
+    "location": "Ubicación",
+    "about": "Sobre",
+    "deleteThisOrganization": "Eliminar esta organización",
+    "statistics": "Estadísticas",
+    "members": "Miembros",
+    "admins": "Administradores",
+    "posts": "Publicaciones",
+    "events": "Eventos",
+    "blockedUsers": "Usuarios bloqueados",
+    "requests": "Solicitudes",
+    "viewAll": "Ver Todo",
+    "upcomingEvents": "Próximos Eventos",
+    "noUpcomingEvents": "No Hay Próximos Eventos",
+    "latestPosts": "Últimas Publicaciones",
+    "noPostsPresent": "No Hay Publicaciones Presentes",
+    "membershipRequests": "Solicitudes de Membresía",
+    "noMembershipRequests": "No Hay Solicitudes de Membresía",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
+    "volunteerRankings": "Clasificación de Voluntarios",
+    "noVolunteers": "¡No Se Encontraron Voluntarios!"
+  },
+  "organizationPeople": {
+    "title": "Miembros Talawa",
+    "filterByName": "Filtrar por nombre",
+    "filterByLocation": "Filtrar por Ubicación",
+    "filterByEvent": "Filtrar por Evento",
+    "members": "Miembros",
+    "admins": "Administradores",
+    "users": "Usuarios",
+    "searchName": "Ingrese su nombre",
+    "searchevent": "Ingresar evento",
+    "searchFirstName": "Ingrese el nombre",
+    "searchLastName": "Introduzca el apellido",
+    "people": "Personas",
+    "sort": "Ordenar por Rol",
+    "actions": "Acciones",
+    "existingUser": "Usuario existente",
+    "newUser": "Nuevo usuario",
+    "firstName": "Nombre de pila",
+    "enterFirstName": "Ponga su primer nombre",
+    "lastName": "Apellido",
+    "enterLastName": "Ingresa tu apellido",
+    "emailAddress": "correo electrónico",
+    "enterEmail": "Ingrese su dirección de correo electrónico",
+    "password": "Contraseña",
+    "enterPassword": "Ingresa tu contraseña",
+    "confirmPassword": "confirmar Contraseña",
+    "enterConfirmPassword": "Ingrese su contraseña para confirmar",
+    "organization": "Organización",
+    "create": "Crear",
+    "cancel": "Cancelar",
+    "invalidDetailsMessage": "Ingrese detalles válidos.",
+    "addMembers": "Agregar miembros",
+    "searchFullName": "Ingrese el nombre completo",
+    "user": "Usuario",
+    "profile": "Perfil"
+  },
+  "organizationTags": {
+    "title": "Etiquetas de Organización",
+    "createTag": "Crear una nueva etiqueta",
+    "manageTag": "Gestionar",
+    "editTag": "Editar",
+    "removeTag": "Eliminar",
+    "tagDetails": "Detalles de la Etiqueta",
+    "tagName": "Nombre",
+    "tagType": "Tipo",
+    "tagNamePlaceholder": "Escribe el nombre de la etiqueta",
+    "tagCreationSuccess": "Nueva etiqueta creada con éxito",
+    "tagUpdationSuccess": "Etiqueta actualizada con éxito",
+    "tagRemovalSuccess": "Etiqueta eliminada con éxito",
+    "noTagsFound": "No se encontraron etiquetas",
+    "removeUserTag": "Eliminar Etiqueta",
+    "removeUserTagMessage": "¿Desea eliminar esta etiqueta?",
+    "addChildTag": "Agregar una Sub Etiqueta",
+    "enterTagName": "Ingrese el nombre de la etiqueta"
+  },
+  "manageTag": {
+    "title": "Detalles de la Etiqueta",
+    "addPeopleToTag": "Agregar Personas a la etiqueta",
+    "viewProfile": "Ver",
+    "noAssignedMembersFound": "Ningún miembro asignado",
+    "unassignUserTag": "Desasignar Etiqueta",
+    "unassignUserTagMessage": "¿Desea eliminar la etiqueta de este usuario?",
+    "successfullyUnassigned": "Etiqueta desasignada del usuario",
+    "addPeople": "Agregar Personas",
+    "add": "Agregar",
+    "subTags": "Subetiquetas",
+    "successfullyAssignedToPeople": "Etiqueta asignada con éxito",
+    "errorOccurredWhileLoadingMembers": "Error al cargar los miembros",
+    "userName": "Nombre de usuario",
+    "actions": "Acciones",
+    "noOneSelected": "Nadie seleccionado",
+    "assignToTags": "Asignar a etiquetas",
+    "removeFromTags": "Eliminar de etiquetas",
+    "assign": "Asignar",
+    "remove": "Eliminar",
+    "successfullyAssignedToTags": "Asignado a etiquetas con éxito",
+    "successfullyRemovedFromTags": "Eliminado de etiquetas con éxito",
+    "errorOccurredWhileLoadingOrganizationUserTags": "Error al cargar las etiquetas de la organización",
+    "errorOccurredWhileLoadingSubTags": "Ocurrió un error al cargar las subetiquetas",
+    "removeUserTag": "Eliminar etiqueta",
+    "removeUserTagMessage": "¿Desea eliminar esta etiqueta? Esto eliminará todas las subetiquetas y todas las asociaciones.",
+    "tagDetails": "Detalles de la etiqueta",
+    "tagName": "Nombre",
+    "tagUpdationSuccess": "Etiqueta actualizada con éxito",
+    "tagRemovalSuccess": "Etiqueta eliminada con éxito",
+    "noTagSelected": "Ninguna etiqueta seleccionada",
+    "changeNameToEdit": "Cambia el nombre para hacer una actualización",
+    "selectTag": "Seleccionar etiqueta",
+    "collapse": "Colapsar",
+    "expand": "Expandir",
+    "tagNamePlaceholder": "Escribe el nombre de la etiqueta",
+    "allTags": "Todas las etiquetas",
+    "noMoreMembersFound": "No se encontraron más miembros"
+  },
+  "userListCard": {
+    "joined": "Unido",
+    "addAdmin": "Agregar administrador",
+    "addedAsAdmin": "El usuario se agrega como administrador.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
+  },
+  "orgAdminListCard": {
+    "joined": "Unido",
+    "remove": "Remover",
+    "removeAdmin": "Eliminar administrador",
+    "removeAdminMsg": "¿Quieres eliminar a este administrador?",
+    "no": "No",
+    "yes": "Sí",
+    "adminRemoved": "Se elimina el administrador.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
+  },
+  "orgPeopleListCard": {
+    "joined": "Unido",
+    "remove": "Remover",
+    "removeMember": "Eliminar miembro",
+    "removeMemberMsg": "¿Quieres eliminar a este miembro?",
+    "no": "No",
+    "yes": "Sí",
+    "memberRemoved": "El miembro es eliminado",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
+  },
+  "organizationEvents": {
+    "title": "Eventos",
+    "filterByTitle": "Filtrar por Título",
+    "filterByLocation": "Filtrar por Ubicación",
+    "filterByDescription": "Filtrar por descripción",
+    "events": "Eventos",
+    "addEvent": "Añadir evento",
+    "eventDetails": "Detalles del evento",
+    "eventTitle": "Título",
+    "description": "Descripción",
+    "location": "Ubicación",
+    "startDate": "Fecha de inicio",
+    "searchMemberName": "Buscar nombre de miembro",
+    "endDate": "Fecha final",
+    "startTime": "Hora de inicio",
+    "endTime": "Hora de finalización",
+    "allDay": "Todo el dia",
+    "recurringEvent": "Evento recurrente",
+    "isPublic": "Es público",
+    "isRegistrable": "Es registrable",
+    "createEvent": "Crear evento",
+    "enterFilter": "Introducir filtro",
+    "enterTitle": "Ingrese el título",
+    "enterDescrip": "Introduce la descripción",
+    "eventLocation": "Introducir ubicación",
+    "eventCreated": "¡Felicidades! Se crea el Evento.",
+    "eventType": "Tipo de evento",
+    "searchEventName": "Buscar nombre del evento",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
+    "customRecurrence": "Recurrencia personalizada",
+    "repeatsEvery": "Se repite cada",
+    "repeatsOn": "Se repite en",
+    "ends": "Finaliza",
+    "never": "Nunca",
+    "on": "En",
+    "after": "Después de",
+    "occurences": "ocurrencias",
+    "done": "Hecho"
+  },
+  "organizationActionItems": {
+    "actionItemCategory": "Categoría de Acción",
+    "actionItemDetails": "Detalles de la Acción",
+    "actionItemCompleted": "Acción Completada",
+    "assignee": "Asignado",
+    "assigner": "Asignador",
+    "assignmentDate": "Fecha de Asignación",
+    "active": "Activo",
+    "clearFilters": "Limpiar Filtros",
+    "completionDate": "Fecha de Finalización",
+    "createActionItem": "Crear Acción",
+    "deleteActionItem": "Eliminar Acción",
+    "deleteActionItemMsg": "¿Desea eliminar esta acción?",
+    "details": "Detalles",
+    "dueDate": "Fecha de Vencimiento",
+    "earliest": "El Más Antiguo",
+    "editActionItem": "Editar Acción",
+    "isCompleted": "Completado",
+    "latest": "El Más Reciente",
+    "makeActive": "Hacer Activo",
+    "noActionItems": "No Hay Acciones",
+    "options": "Opciones",
+    "preCompletionNotes": "Notas Pre-Compleción",
+    "actionItemActive": "Acción Activa",
+    "markCompletion": "Marcar como Completado",
+    "actionItemStatus": "Estado de la Acción",
+    "postCompletionNotes": "Notas de Finalización",
+    "selectActionItemCategory": "Seleccionar una Categoría de Acción",
+    "selectAssignee": "Seleccionar Asignado",
+    "status": "Estado",
+    "successfulCreation": "Acción creada con éxito",
+    "successfulUpdation": "Acción actualizada con éxito",
+    "successfulDeletion": "Acción eliminada con éxito",
+    "title": "Acciones",
+    "category": "Categoría",
+    "allottedHours": "Horas Asignadas",
+    "latestDueDate": "Fecha de Vencimiento Más Reciente",
+    "earliestDueDate": "Fecha de Vencimiento Más Antigua",
+    "updateActionItem": "Actualizar Acción",
+    "noneUpdated": "Ningún campo fue actualizado",
+    "updateStatusMsg": "¿Está seguro de que desea marcar esta acción como pendiente?",
+    "close": "Cerrar",
+    "eventActionItems": "Acciones del Evento",
+    "no": "No",
+    "yes": "Sí",
+    "individuals": "Individuos",
+    "groups": "Grupos",
+    "assignTo": "Asignar a",
+    "volunteers": "Voluntarios",
+    "volunteerGroups": "Grupos de Voluntarios"
+  },
+  "organizationAgendaCategory": {
+    "agendaCategoryDetails": "Detalles de la categoría de la agenda",
+    "updateAgendaCategory": "Actualizar categoría de la agenda",
+    "title": "Categorías de la agenda",
+    "name": "Categoría",
+    "description": "Descripción",
+    "createdBy": "Creado por",
+    "options": "Opciones",
+    "createAgendaCategory": "Crear categoría de la agenda",
+    "noAgendaCategories": "No hay categorías de la agenda",
+    "update": "Actualizar",
+    "agendaCategoryCreated": "Categoría de la agenda creada exitosamente",
+    "agendaCategoryUpdated": "Categoría de la agenda actualizada exitosamente",
+    "agendaCategoryDeleted": "Categoría de la agenda eliminada exitosamente",
+    "deleteAgendaCategory": "Eliminar categoría de la agenda",
+    "deleteAgendaCategoryMsg": "¿Desea eliminar esta categoría de la agenda?"
+  },
+  "agendaItems": {
+    "agendaItemDetails": "Detalles del punto del orden del día",
+    "updateAgendaItem": "Actualizar punto del orden del día",
+    "title": "Título",
+    "enterTitle": "Ingresar título",
+    "sequence": "Secuencia",
+    "description": "Descripción",
+    "enterDescription": "Ingresar descripción",
+    "category": "Categoría del orden del día",
+    "attachments": "Archivos adjuntos",
+    "attachmentLimit": "Agregar cualquier archivo de imagen o video hasta 10MB",
+    "fileSizeExceedsLimit": "El tamaño del archivo excede el límite de 10MB",
+    "urls": "URLs",
+    "url": "Agregar enlace a URL",
+    "enterUrl": "https://example.com",
+    "invalidUrl": "Ingrese una URL válida",
+    "link": "Enlace",
+    "createdBy": "Creado por",
+    "regular": "Regular",
+    "note": "Nota",
+    "duration": "Duración",
+    "enterDuration": "mm:ss",
+    "options": "Opciones",
+    "createAgendaItem": "Crear punto del orden del día",
+    "noAgendaItems": "No hay puntos del orden del día",
+    "selectAgendaItemCategory": "Seleccionar una categoría de punto del orden del día",
+    "update": "Actualizar",
+    "delete": "Eliminar",
+    "agendaItemCreated": "Punto del orden del día creado exitosamente",
+    "agendaItemUpdated": "Punto del orden del día actualizado exitosamente",
+    "agendaItemDeleted": "Punto del orden del día eliminado exitosamente",
+    "deleteAgendaItem": "Eliminar punto del orden del día",
+    "deleteAgendaItemMsg": "¿Desea eliminar este punto del orden del día?"
+  },
+  "eventListCard": {
+    "location": "Lugar del evento",
+    "deleteEvent": "Eliminar evento",
+    "deleteEventMsg": "¿Quieres eliminar este evento?",
+    "no": "No",
+    "yes": "Sí",
+    "editEvent": "Editar evento",
+    "eventTitle": "Título",
+    "description": "Descripción",
+    "startDate": "Fecha de inicio",
+    "endDate": "Fecha final",
+    "registerEvent": "Registro",
+    "alreadyRegistered": "Ya registrado",
+    "startTime": "Hora de inicio",
+    "endTime": "Hora de finalización",
+    "allDay": "Todo el dia",
+    "recurringEvent": "Evento recurrente",
+    "isPublic": "Es público",
+    "isRegistrable": "Es registrable",
+    "close": "Cerca",
+    "updatePost": "Actualizar publicación",
+    "eventDetails": "Detalles del evento",
+    "eventDeleted": "Evento eliminado con éxito.",
+    "eventUpdated": "Evento actualizado con éxito.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
+    "thisInstance": "Esta Instancia",
+    "thisAndFollowingInstances": "Esta y las Siguientes Instancias",
+    "allInstances": "Todas las Instancias",
+    "customRecurrence": "Recurrencia personalizada",
+    "repeatsEvery": "Se repite cada",
+    "repeatsOn": "Se repite en",
+    "ends": "Finaliza",
+    "never": "Nunca",
+    "on": "En",
+    "after": "Después de",
+    "occurences": "ocurrencias",
+    "done": "Hecho"
+  },
+  "funds": {
+    "title": "Fondos",
+    "createFund": "Crear fondo",
+    "fundName": "Nombre del fondo",
+    "fundId": "ID de referencia del fondo",
+    "taxDeductible": "Deducible de impuestos",
+    "default": "Predeterminado",
+    "archived": "Archivado",
+    "fundCreate": "Crear fondo",
+    "fundUpdate": "Actualizar fondo",
+    "fundDelete": "Eliminar fondo",
+    "searchByName": "Buscar por nombre",
+    "noFundsFound": "No se encontraron fondos",
+    "createdBy": "Creado por",
+    "createdOn": "Creado en",
+    "status": "Estado",
+    "fundCreated": "Fondo creado correctamente",
+    "fundUpdated": "Fondo actualizado correctamente",
+    "fundDeleted": "Fondo eliminado correctamente",
+    "deleteFundMsg": "¿Está seguro de que desea eliminar este fondo?",
+    "createdLatest": "Creado más reciente",
+    "createdEarliest": "Creado más temprano",
+    "viewCampaigns": "Ver campañas"
+  },
+  "fundCampaign": {
+    "title": "Campañas de recaudación de fondos",
+    "campaignName": "Nombre de la campaña",
+    "campaignOptions": "Opciones",
+    "fundingGoal": "Meta de financiación",
+    "addCampaign": "Agregar campaña",
+    "createdCampaign": "Campaña creada correctamente",
+    "updatedCampaign": "Campaña actualizada correctamente",
+    "deletedCampaign": "Campaña eliminada correctamente",
+    "deleteCampaignMsg": "¿Está seguro de que desea eliminar esta campaña?",
+    "noCampaigns": "No se encontraron campañas",
+    "createCampaign": "Crear campaña",
+    "updateCampaign": "Actualizar campaña",
+    "deleteCampaign": "Eliminar campaña",
+    "currency": "Moneda",
+    "selectCurrency": "Seleccionar moneda",
+    "searchFullName": "Buscar por nombre",
+    "viewPledges": "Ver compromisos",
+    "noCampaignsFound": "No se encontraron campañas",
+    "latestEndDate": "Fecha de finalización más reciente",
+    "earliestEndDate": "Fecha de finalización más temprana",
+    "lowestGoal": "Meta más baja",
+    "highestGoal": "Meta más alta"
+  },
+  "pledges": {
+    "title": "Compromisos de Campaña de Financiamiento",
+    "startDate": "Fecha de Inicio",
+    "endDate": "Fecha de Finalización",
+    "pledgeAmount": "Monto del Compromiso",
+    "pledgeOptions": "Opciones",
+    "pledgeCreated": "Compromiso creado exitosamente",
+    "pledgeUpdated": "Compromiso actualizado exitosamente",
+    "pledgeDeleted": "Compromiso eliminado exitosamente",
+    "addPledge": "Agregar Compromiso",
+    "createPledge": "Crear Compromiso",
+    "currency": "Moneda",
+    "selectCurrency": "Seleccionar Moneda",
+    "updatePledge": "Actualizar Compromiso",
+    "deletePledge": "Eliminar Compromiso",
+    "amount": "Monto",
+    "editPledge": "Editar Compromiso",
+    "deletePledgeMsg": "¿Estás seguro de que quieres eliminar este compromiso?",
+    "noPledges": "No se encontraron compromisos",
+    "searchPledger": "Buscar por compromisos",
+    "highestAmount": "Cantidad más alta",
+    "lowestAmount": "Cantidad más baja",
+    "latestEndDate": "Fecha de finalización más reciente",
+    "earliestEndDate": "Fecha de finalización más cercana",
+    "campaigns": "Campañas",
+    "pledges": "Compromisos",
+    "endsOn": "Finaliza el",
+    "raisedAmount": "Monto recaudado",
+    "pledgedAmount": "Monto comprometido"
+  },
+
+  "orgPost": {
+    "title": "Publicaciones de Talawa",
+    "searchPost": "Buscar Publicación",
+    "posts": "Publicaciones",
+    "createPost": "Crear Publicación",
+    "postDetails": "Detalles de la Publicación",
+    "postTitle1": "Escribir título de la publicación",
+    "postTitle": "Título",
+    "addMedia": "Subir foto o video",
+    "information": "Información",
+    "information1": "Escribir información de la publicación",
+    "addPost": "Agregar Publicación",
+    "searchTitle": "Buscar por Título",
+    "searchText": "Buscar por Texto",
+    "ptitle": "Título de la Publicación",
+    "postDes": "¿De qué quieres hablar?",
+    "Title": "Título",
+    "Text": "Texto",
+    "cancel": "Cancelar",
+    "searchBy": "Buscar por",
+    "Oldest": "Más Antiguas Primero",
+    "Latest": "Más Recientes Primero",
+    "sortPost": "Ordenar Publicaciones",
+    "tag": "Su navegador no admite la etiqueta de video",
+    "postCreatedSuccess": "¡Felicidades! Has publicado algo.",
+    "pinPost": "Fijar publicación",
+    "Next": "Siguiente página",
+    "Previous": "Página anterior"
+  },
+  "postNotFound": {
+    "post": "Publicaciones",
+    "not found!": "Extraviado!",
+    "organization": "Organización",
+    "post not found!": "Publicaciones Extraviado!",
+    "organization not found!": "Organización Extraviado!"
+  },
+  "userNotFound": {
+    "user": "usuari(a/o)",
+    "not found!": "extraviado!",
+    "roles": "papeles",
+    "user not found!": "usuario no encontrado!",
+    "member not found!": "Miembro no encontrado!",
+    "admin not found!": "Administrador no encontrado!",
+    "roles not found!": "roles no encontrados!"
+  },
+  "orgPostCard": {
+    "author": "Autor",
+    "imageURL": "URL de la Imagen",
+    "videoURL": "URL del Video",
+    "edit": "Editar Publicación",
+    "deletePost": "Eliminar Publicación",
+    "deletePostMsg": "¿Desea eliminar esta publicación?",
+    "no": "No",
+    "yes": "Sí",
+    "editPost": "Editar Publicación",
+    "postTitle": "Título",
+    "postTitle1": "Editar título de la publicación",
+    "information1": "Editar información de la publicación",
+    "information": "Información",
+    "image": "Imagen",
+    "video": "Video",
+    "close": "Cerrar",
+    "updatePost": "Actualizar Publicación",
+    "postDeleted": "Publicación eliminada exitosamente.",
+    "postUpdated": "Publicación actualizada exitosamente.",
+    "tag": "Su navegador no admite la etiqueta de video",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está en funcionamiento? Compruebe también su conectividad de red.",
+    "pin": "Fijar"
+  },
+  "blockUnblockUser": {
+    "title": "Usuario de bloqueo/desbloqueo de Talawa",
+    "pageName": "Bloqueo/desbloqueo",
+    "searchByName": "Buscar por nombre",
+    "listOfUsers": "Lista de Usuarios que enviaron spam",
+    "name": "Nombre",
+    "email": "Correo electrónico",
+    "block_unblock": "Bloquear/Desbloquear",
+    "unblock": "Desatascar",
+    "block": "Bloquear",
+    "orgName": "Ingrese su nombre",
+    "blockedSuccessfully": "Usuario bloqueado con éxito",
+    "Un-BlockedSuccessfully": "Usuario desbloqueado con éxito",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red.",
+    "allMembers": "Todos los miembros",
+    "blockedUsers": "Usuarios bloqueados",
+    "searchByFirstName": "Buscar por nombre de pila",
+    "searchByLastName": "Buscar por apellido",
+    "noResultsFoundFor": "No se encontraron resultados para ",
+    "noSpammerFound": "No se encontró ningún spammer"
+  },
+  "eventManagement": {
+    "title": "Gestión de eventos",
+    "dashboard": "Tablero",
+    "registrants": "Inscritos",
+    "attendance": "Asistencia",
+    "actions": "Acciones",
+    "agendas": "Agendas",
+    "statistics": "Estadísticas",
+    "to": "A",
+    "volunteers": "Voluntarios"
+  },
+  "forgotPassword": {
+    "title": "Talawa olvidó su contraseña",
+    "forgotPassword": "Has olvidado tu contraseña",
+    "registeredEmail": "Email registrado",
+    "getOtp": "Obtener OTP",
+    "enterOtp": "Ingresar OTP",
+    "enterNewPassword": "Ingrese nueva clave",
+    "cofirmNewPassword": "Confirmar nueva contraseña",
+    "changePassword": "Cambia la contraseña",
+    "backToLogin": "Volver al inicio de sesión",
+    "userOtp": "por ejemplo 12345",
+    "password": "Contraseña",
+    "emailNotRegistered": "El correo electrónico no está registrado.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Verifica también la conectividad de tu red.",
+    "errorSendingMail": "Error al enviar correo.",
+    "passwordMismatches": "Contraseña y Confirmar contraseña no coinciden.",
+    "passwordChanges": "La contraseña cambia correctamente.",
+    "OTPsent": "OTP se envía a su correo electrónico registrado"
+  },
+  "pageNotFound": {
+    "title": "404 No encontrado",
+    "talawaAdmin": "Administrador de Talawa",
+    "talawaUser": "Usuario de Talawa",
+    "404": "404",
+    "notFoundMsg": "¡Ups! ¡No se encontró la página que solicitaste!",
+    "backToHome": "De vuelta a casa"
+  },
+  "orgContribution": {
+    "title": "Contribuciones Talawa",
+    "filterByName": "Filtrar por nombre",
+    "filterByTransId": "Filtrar por ID de transacción",
+    "recentStats": "Estadísticas recientes",
+    "contribution": "Contribución",
+    "orgname": "Ingrese su nombre",
+    "searchtransaction": "Ingrese la identificación de la transacción"
+  },
+  "contriStats": {
+    "recentContribution": "Contribución reciente",
+    "highestContribution": "Contribución más alta",
+    "totalContribution": "Contribución total"
+  },
+  "orgContriCards": {
+    "date": "Fecha",
+    "transactionId": "ID de transacción",
+    "amount": "Monto"
+  },
+  "orgSettings": {
+    "title": "Configuración",
+    "general": "General",
+    "actionItemCategories": "Categorías de elementos de acción",
+    "updateOrganization": "Actualizar organización",
+    "seeRequest": "Ver solicitud",
+    "noData": "Sin datos",
+    "otherSettings": "Otras configuraciones",
+    "changeLanguage": "Cambiar idioma",
+    "manageCustomFields": "Administrar campos personalizados",
+    "agendaItemCategories": "Categorías de elementos de agenda"
+  },
+  "deleteOrg": {
+    "deleteOrganization": "Eliminar organización",
+    "deleteSampleOrganization": "Eliminar organización de muestra",
+    "deleteMsg": "¿Desea eliminar esta organización?",
+    "cancel": "Cancelar",
+    "confirmDelete": "Confirmar eliminación",
+    "longDelOrgMsg": "Al hacer clic en el botón Eliminar organización, la organización se eliminará permanentemente junto con sus eventos, etiquetas y todos los datos relacionados.",
+    "successfullyDeletedSampleOrganization": "Organización de muestra eliminada correctamente"
+  },
+  "userUpdate": {
+    "firstName": "Primer nombre",
+    "lastName": "Apellido",
+    "email": "Correo electrónico",
+    "password": "Clave",
+    "appLanguageCode": "Idioma predeterminado",
+    "userType": "Tipo de usuario",
+    "admin": "Administración",
+    "superAdmin": "Superadministrador",
+    "displayImage": "Mostrar imagen",
+    "saveChanges": "Guardar cambios",
+    "cancel": "Cancelar"
+  },
+  "userPasswordUpdate": {
+    "previousPassword": "Contraseña anterior",
+    "newPassword": "Nueva contraseña",
+    "confirmNewPassword": "Confirmar nueva contraseña",
+    "saveChanges": "Guardar cambios",
+    "cancel": "Cancelar",
+    "passCantBeEmpty": "La contraseña no puede estar vacía",
+    "passNoMatch": "La nueva contraseña y la confirmación no coinciden."
+  },
+  "orgDelete": {
+    "deleteOrg": "Eliminar organización"
+  },
+  "membershipRequest": {
+    "joined": "Unido",
+    "accept": "Aceptar",
+    "reject": "Rechazar",
+    "memberAdded": "es aceptado",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
+  },
+  "orgUpdate": {
+    "name": "Nombre",
+    "description": "Descripción",
+    "location": "ubicación",
+    "address": "Dirección",
+    "city": "Ciudad",
+    "countryCode": "Código de País",
+    "line1": "Línea 1",
+    "line2": "Línea 2",
+    "postalCode": "Código Postal",
+    "dependentLocality": "Localidad Dependiente",
+    "sortingCode": "Código de Ordenamiento",
+    "state": "Estado / Provincia",
+    "displayImage": "Mostrar imagen",
+    "userRegistrationRequired": "Registro de usuario requerido",
+    "isVisibleInSearch": "Visible en la búsqueda",
+    "saveChanges": "Guardar cambios",
+    "cancel": "Cancelar",
+    "enterNameOrganization": "Ingrese el nombre de la organización",
+    "successfulUpdated": "Exitoso actualizado",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
+  },
+  "addOnRegister": {
+    "addNew": "Agregar nueva",
+    "addPlugin": "Agregar complemento",
+    "pluginName": "Nombre del complemento",
+    "creatorName": "Nombre del creadora",
+    "pluginDesc": "Descripción del complemento",
+    "close": "Cerca",
+    "register": "Registro",
+    "pName": "Ej: Donaciones",
+    "cName": "Ej: John Doe",
+    "pDesc": "Este complemento habilita la interfaz de usuario para"
+  },
+  "addOnStore": {
+    "title": "Tienda de complementos",
+    "searchName": "Ej: Donaciones",
+    "search": "Buscar",
+    "enable": "Activada",
+    "disable": "Desactivada",
+    "pHeading": "Complementos",
+    "install": "Instalada",
+    "available": "Disponible",
+    "pMessage": "El complemento no existe",
+    "filter": "filtros"
+  },
+  "addOnEntry": {
+    "enable": "Activada",
+    "install": "Instalar",
+    "uninstall": "Desinstalar",
+    "uninstallMsg": "Mensaje de desinstalación",
+    "installMsg": "Mensaje de instalación"
+  },
+  "memberDetail": {
+    "title": "Detalles del usuario",
+    "addAdmin": "Agregar administrador",
+    "noeventsAttended": "No hay eventos asistidos",
+    "alreadyIsAdmin": "El Miembro ya es Administrador",
+    "organizations": "Organizaciones",
+    "events": "Eventos",
+    "role": "Rol",
+    "email": "Correo electrónico",
+    "createdOn": "Creado en",
+    "main": "Principal",
+    "firstName": "Nombre",
+    "lastName": "Apellido",
+    "language": "Idioma",
+    "gender": "Género",
+    "birthDate": "Fecha de Nacimiento",
+    "educationGrade": "Nivel Educativo",
+    "employmentStatus": "Estado Laboral",
+    "maritalStatus": "Estado Civil",
+    "displayImage": "Imagen de Perfil",
+    "phone": "Teléfono",
+    "address": "Dirección",
+    "countryCode": "Código de País",
+    "state": "Estado",
+    "city": "Ciudad",
+    "personalInfoHeading": "Información Personal",
+    "viewAll": "Ver todo",
+    "eventsAttended": "Eventos Asistidos",
+    "contactInfoHeading": "Información de Contacto",
+    "actionsHeading": "Acciones",
+    "personalDetailsHeading": "Detalles del perfil",
+    "appLanguageCode": "Elegir Idioma",
+    "delete": "Eliminar Usuario",
+    "saveChanges": "Guardar Cambios",
+    "pluginCreationAllowed": "Permitir creación de complementos",
+    "joined": "Unido",
+    "created": "Creado",
+    "adminForOrganizations": "Administrador de organizaciones",
+    "membershipRequests": "Solicitudes de membresía",
+    "adminForEvents": "Administrador de eventos",
+    "addedAsAdmin": "El usuario se agrega como administrador.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. Compruebe amablemente su conexión de red y espere un momento.",
+    "deleteUser": "Eliminar usuario",
+    "userType": "Tipo de usuario",
+    "unassignUserTag": "Desasignar Etiqueta",
+    "unassignUserTagMessage": "¿Desea eliminar la etiqueta de este usuario?",
+    "successfullyUnassigned": "Etiqueta desasignada del usuario",
+    "tagsAssigned": "Etiquetas asignadas",
+    "noTagsAssigned": "No se asignaron etiquetas"
+  },
+  "userLogin": {
+    "login": "Acceso",
+    "forgotPassword": "Has olvidado tu contraseña ?",
+    "loginIntoYourAccount": "Inicie sesión en su cuenta",
+    "emailAddress": "correo electrónico",
+    "enterEmail": "Ingrese su dirección de correo electrónico",
+    "password": "Contraseña",
+    "enterPassword": "Ingresa tu contraseña",
+    "register": "Registro",
+    "invalidDetailsMessage": "Por favor, introduzca un correo electrónico y una contraseña válidos.",
+    "notAuthorised": "¡Lo siento! usted no está autorizado!",
+    "invalidCredentials": "Las credenciales ingresadas son incorrectas. Ingrese credenciales válidas.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. Compruebe amablemente su conexión de red y espere un momento."
+  },
+  "people": {
+    "title": "Gente",
+    "searchUsers": "Buscar usuarios"
+  },
+  "userRegister": {
+    "register": "Registro",
+    "firstName": "Nombre de pila",
+    "enterFirstName": "Ponga su primer nombre",
+    "lastName": "Apellido",
+    "enterLastName": "Ingresa tu apellido",
+    "emailAddress": "correo electrónico",
+    "enterEmail": "Ingrese su dirección de correo electrónico",
+    "password": "Contraseña",
+    "enterPassword": "Ingresa tu contraseña",
+    "confirmPassword": "confirmar Contraseña",
+    "enterConfirmPassword": "Ingrese su contraseña para confirmar",
+    "alreadyhaveAnAccount": "¿Ya tienes una cuenta?",
+    "login": "Acceso",
+    "afterRegister": "Registrado exitosamente. Espere a que el administrador apruebe su solicitud.",
+    "passwordNotMatch": "La contraseña no coincide. Confirme la contraseña y vuelva a intentarlo.",
+    "invalidDetailsMessage": "Ingrese detalles válidos.",
+    "talawaApiUnavailable": "El servicio Talawa-API no está disponible. Compruebe amablemente su conexión de red y espere un momento."
+  },
+  "userNavbar": {
+    "talawa": "Talawa",
+    "home": "Hogar",
+    "people": "Gente",
+    "events": "Eventos",
+    "chat": "Charlar",
+    "donate": "Donar",
+    "settings": "Ajustes",
+    "language": "Idioma",
+    "logout": "Cerrar sesión",
+    "close": "Cerca"
+  },
+  "userOrganizations": {
+    "allOrganizations": "Todas las organizaciones",
+    "joinedOrganizations": "Organizaciones unidas",
+    "createdOrganizations": "Organizaciones creadas",
+    "search": "Buscar usuarios",
+    "nothingToShow": "Nada que mostrar aquí.",
+    "selectOrganization": "Seleccionar organización",
+    "filter": "Filtrar",
+    "organizations": "Organizaciones",
+    "searchByName": "Buscar por nombre",
+    "searchUsers": "Buscar usuarios",
+    "searchOrganizations": "Buscar Organizaciones"
+  },
+  "userSidebarOrg": {
+    "yourOrganizations": "Tus Organizaciones",
+    "noOrganizations": "Aún no te has unido a ninguna organización.",
+    "viewAll": "Ver todo",
+    "talawaUserPortal": "Talawa portal de usuario",
+    "menu": "Menú",
+    "my organizations": "Mis Organizaciones.",
+    "users": "Usuarios",
+    "requests": "Solicitudes",
+    "communityProfile": "Perfil de la comunidad",
+    "logout": "Cerrar sesión",
+    "settings": "Ajustes",
+    "chat": "Chat"
+  },
+  "organizationSidebar": {
+    "viewAll": "Ver todo",
+    "events": "Eventos",
+    "members": "Miembros",
+    "noEvents": "No hay eventos para mostrar",
+    "noMembers": "No hay miembros para mostrar"
+  },
+  "postCard": {
+    "likes": "Gustos",
+    "comments": "Comentarios",
+    "viewPost": "Ver publicación",
+    "editPost": "Editar publicación",
+    "postedOn": "Publicado el {{date}}"
+  },
+  "home": {
+    "posts": "Publicaciones",
+    "post": "Publicación",
+    "title": "Publicaciones",
+    "textArea": "¿Tienes algo en mente?",
+    "feed": "Feed",
+    "loading": "Cargando",
+    "pinnedPosts": "Publicaciones fijadas",
+    "yourFeed": "Tu feed",
+    "nothingToShowHere": "No hay nada que mostrar aquí",
+    "somethingOnYourMind": "¿Tienes algo en mente?",
+    "addPost": "Añadir publicación",
+    "startPost": "Comenzar una publicación",
+    "media": "Medios",
+    "event": "Evento",
+    "article": "Artículo",
+    "postNowVisibleInFeed": "Publicar ahora visible en el feed"
+  },
+
+  "eventAttendance": {
+    "historical_statistics": "Estadísticas históricas",
+    "Search member": "Buscar miembro",
+    "Member Name": "Nombre del miembro",
+    "Status": "Estado",
+    "Events Attended": "Eventos asistidos",
+    "Task Assigned": "Tarea asignada",
+    "Member": "Miembro",
+    "Admin": "Administrador",
+    "loading": "Cargando...",
+    "noAttendees": "No se encontraron asistentes"
+  },
+  "onSpotAttendee": {
+    "title": "Asistente en el lugar",
+    "enterFirstName": "Ingrese el nombre",
+    "enterLastName": "Ingrese el apellido",
+    "enterEmail": "Ingrese el correo electrónico",
+    "enterPhoneNo": "Ingrese el número de teléfono",
+    "selectGender": "Seleccione el género",
+    "invalidDetailsMessage": "Por favor complete todos los campos requeridos",
+    "orgIdMissing": "Falta el ID de la organización. Por favor, inténtelo de nuevo.",
+    "attendeeAddedSuccess": "¡Asistente agregado exitosamente!",
+    "addAttendee": "Agregar",
+    "phoneNumber": "Número de teléfono",
+    "addingAttendee": "Agregando...",
+    "male": "Masculino",
+    "female": "Femenino",
+    "other": "Otro"
+  },
+  "settings": {
+    "settings": "Ajustes",
+    "eventAttended": "Événements Assistés",
+    "noeventsAttended": "No hay eventos asistidos",
+    "profileSettings": "Configuración de perfil",
+    "firstName": "Nombre de pila",
+    "lastName": "Apellido",
+    "gender": "Género",
+    "emailAddress": "Dirección de correo electrónico",
+    "phoneNumber": "Número de teléfono",
+    "displayImage": "Imagen de perfil",
+    "chooseFile": "Elegir archivo",
+    "birthDate": "Fecha de nacimiento",
+    "grade": "Nivel educativo",
+    "empStatus": "Situación laboral",
+    "maritalStatus": "Estado civil",
+    "address": "Dirección",
+    "state": "Ciudad/Estado",
+    "country": "País",
+    "resetChanges": "Restablecer cambios",
+    "saveChanges": "Guardar cambios",
+    "profileDetails": "Detalles del perfil",
+    "deleteUserMessage": "Al hacer clic en el botón Eliminar usuario, su usuario se eliminará permanentemente junto con sus eventos, etiquetas y todos los datos relacionados.",
+    "copyLink": "Copiar enlace del perfil",
+    "deleteUser": "Eliminar usuario",
+    "otherSettings": "Otras configuraciones",
+    "changeLanguage": "Cambiar idioma",
+    "sgender": "Seleccionar género",
+    "gradePlaceholder": "Ingresar grado",
+    "sEmpStatus": "Seleccionar estado de empleo",
+    "male": "Masculino",
+    "female": "Femenino",
+    "other": "Otro",
+    "employed": "Empleado",
+    "unemployed": "Desempleado",
+    "sMaritalStatus": "Seleccionar estado civil",
+    "single": "Soltero",
+    "married": "Casado",
+    "divorced": "Divorciado",
+    "widowed": "Viudo",
+    "engaged": "Comprometido",
+    "separated": "Separado",
+    "grade1": "1er Grado",
+    "grade2": "2do Grado",
+    "grade3": "3er Grado",
+    "grade4": "4to Grado",
+    "grade5": "5to Grado",
+    "grade6": "6to Grado",
+    "grade7": "7mo Grado",
+    "grade8": "8vo Grado",
+    "grade9": "9no Grado",
+    "grade10": "10mo Grado",
+    "grade11": "11vo Grado",
+    "grade12": "12vo Grado",
+    "graduate": "Graduado",
+    "kg": "KG",
+    "preKg": "Pre-KG",
+    "noGrade": "Sin Grado",
+    "fullTime": "Tiempo Completo",
+    "partTime": "Medio Tiempo",
+    "enterState": "Ingresar ciudad o estado",
+    "selectCountry": "Seleccionar un país",
+    "joined": "Unido"
+  },
+  "donate": {
+    "title": "Donaciones",
+    "donations": "Donaciones",
+    "searchDonations": "Buscar donaciones",
+    "donateForThe": "Donar para el",
+    "donateTo": "Donar a",
+    "amount": "Cantidad",
+    "yourPreviousDonations": "Tus donaciones anteriores",
+    "donate": "Donar",
+    "nothingToShow": "Nada que mostrar aquí.",
+    "success": "Donación exitosa",
+    "invalidAmount": "Ingrese un valor numérico para el monto de la donación.",
+    "donationAmountDescription": "Ingrese el valor numérico del monto de la donación.",
+    "donationOutOfRange": "El monto de la donación debe estar entre {{min}} y {{max}}."
+  },
+  "userEvents": {
+    "title": "Eventos",
+    "nothingToShow": "No hay nada que mostrar aquí.",
+    "search": "Buscar",
+    "createEvent": "Crear evento",
+    "recurring": "Periódica",
+    "startTime": "Hora de inicio",
+    "endTime": "Hora de finalización",
+    "cancel": "Cancelar",
+    "create": "Crear",
+    "listView": "Vista de la lista",
+    "calendarView": "Vista de calendario",
+    "allDay": "Todo el dia",
+    "eventCreated": "Evento creado y publicado exitosamente.",
+    "eventDetails": "Detalles del evento",
+    "eventTitle": "Título",
+    "enterTitle": "Ingrese el título",
+    "eventDescription": "Descripción",
+    "enterDescription": "Ingresar descripción",
+    "eventLocation": "Ubicación",
+    "enterLocation": "Ingresar Ubicación",
+    "startDate": "Fecha de inicio",
+    "endDate": "Fecha de finalización",
+    "publicEvent": "Es público",
+    "registerable": "Es registrable",
+    "monthlyCalendarView": "Calendario mensual",
+    "yearlyCalendarView": "Calendario anual"
+  },
+  "userEventCard": {
+    "location": "Ubicación",
+    "starts": "Empieza",
+    "ends": "Termina",
+    "creator": "Creadora",
+    "alreadyRegistered": "Ya registrado",
+    "register": "Registro"
+  },
+  "advertisement": {
+    "title": "Anuncios",
+    "pHeading": "Gestionar anuncios",
+    "activeAds": "Campañas activas",
+    "archievedAds": "Campañas completadas",
+    "pMessage": "No hay anuncios disponibles para esta campaña.",
+    "delete": "Eliminar",
+    "validLink": "El enlace es válido.",
+    "invalidLink": "El enlace no es válido.",
+    "close": "Cerrar",
+    "deleteAdvertisement": "Eliminar anuncio",
+    "deleteAdvertisementMsg": "¿Desea eliminar este anuncio?",
+    "no": "No",
+    "yes": "Sí",
+    "Rmedia": "Proporcionar contenido multimedia para mostrar",
+    "view": "Ver",
+    "edit": "Editar",
+    "editAdvertisement": "Editar Anuncio",
+    "advertisementDeleted": "Anuncio eliminado con éxito.",
+    "endDateGreaterOrEqual": "La fecha de finalización debe ser mayor o igual a la fecha de inicio",
+    "advertisementCreated": "Anuncio creado con éxito.",
+    "saveChanges": "Guardar Cambios",
+    "endOfResults": "Fin de los resultados",
+    "Rname": "Nombre",
+    "Rtype": "Tipo",
+    "RstartDate": "Fecha de inicio",
+    "RendDate": "Fecha de finalización",
+    "RClose": "Cerrar",
+    "addNew": "Agregar nuevo",
+    "EXname": "Nombre",
+    "EXlink": "Enlace",
+    "createAdvertisement": "Crear publicidad"
+  },
+  "userChat": {
+    "chat": "Charlar",
+    "search": "Buscar",
+    "contacts": "Contactos",
+    "messages": "Mensajes"
+  },
+  "userChatRoom": {
+    "selectContact": "Seleccione un contacto para iniciar una conversación",
+    "sendMessage": "Enviar mensaje"
+  },
+  "orgProfileField": {
+    "loading": "Cargando..",
+    "noCustomField": "No hay campos personalizados disponibles",
+    "customFieldName": "Nombre del Campo",
+    "enterCustomFieldName": "Ingrese el Nombre del Campo",
+    "customFieldType": "Tipo de Campo",
+    "saveChanges": "Guardar Cambios",
+    "Remove Custom Field": "Eliminar Campo Personalizado",
+    "fieldSuccessMessage": "Campo añadido exitosamente",
+    "fieldRemovalSuccess": "Campo eliminado exitosamente",
+    "String": "Cadena",
+    "Boolean": "Booleano",
+    "Date": "Fecha",
+    "Number": "Número"
+  },
+  "orgActionItemCategories": {
+    "createButton": "Crear",
+    "editButton": "Editar",
+    "enableButton": "Habilitar",
+    "disableButton": "Inhabilitar",
+    "updateActionItemCategory": "Actualizar",
+    "actionItemCategoryName": "Nombre",
+    "categoryDetails": "Detalles de la categoría",
+    "enterName": "Introduzca el nombre",
+    "successfulCreation": "Categoría de elemento de acción creada correctamente",
+    "successfulUpdation": "Categoría de elemento de acción actualizada correctamente",
+    "sameNameConflict": "Cambie el nombre para realizar una actualización",
+    "categoryEnabled": "Categoría de elemento de acción habilitada",
+    "categoryDisabled": "Categoría de elemento de acción deshabilitada",
+    "noActionItemCategories": "No hay categorías de elementos de acción",
+    "status": "Estado",
+    "categoryDeleted": "Categoría de elemento de acción eliminada con éxito",
+    "deleteCategory": "Eliminar categoría",
+    "deleteCategoryMsg": "¿Está seguro de que desea eliminar esta categoría de elemento de acción?"
+  },
+  "organizationVenues": {
+    "title": "Lugares",
+    "addVenue": "Agregar lugar",
+    "venueDetails": "Detalles del lugar",
+    "venueName": "Nombre del lugar",
+    "enterVenueName": "Ingrese el nombre del lugar",
+    "description": "Descripción del lugar",
+    "enterVenueDesc": "Ingrese la descripción del lugar",
+    "capacity": "Capacidad",
+    "enterVenueCapacity": "Ingrese la capacidad del lugar",
+    "image": "Imagen del lugar",
+    "uploadVenueImage": "Subir imagen del lugar",
+    "createVenue": "Crear lugar",
+    "venueAdded": "Lugar agregado correctamente",
+    "editVenue": "Actualizar lugar",
+    "venueUpdated": "Detalles del lugar actualizados correctamente",
+    "sort": "Ordenar",
+    "highestCapacity": "Mayor capacidad",
+    "lowestCapacity": "Menor capacidad",
+    "noVenues": "¡No se encontraron lugares!",
+    "edit": "Editar",
+    "view": "Ver",
+    "delete": "Eliminar",
+    "venueTitleError": "¡El título del lugar no puede estar vacío!",
+    "venueCapacityError": "¡La capacidad debe ser un número positivo!",
+    "searchBy": "Buscar por",
+    "name": "Nombre",
+    "desc": "Descripción"
+  },
+  "addMember": {
+    "title": "Agregar miembro",
+    "addMembers": "Agregar miembros",
+    "existingUser": "Usuario existente",
+    "newUser": "Usuario nuevo",
+    "searchFullName": "Buscar por nombre completo",
+    "firstName": "Nombre",
+    "enterFirstName": "Ingrese el nombre",
+    "lastName": "Apellido",
+    "enterLastName": "Ingrese el apellido",
+    "emailAddress": "Dirección de correo electrónico",
+    "enterEmail": "Ingrese el correo electrónico",
+    "password": "Contraseña",
+    "enterPassword": "Ingrese la contraseña",
+    "confirmPassword": "Confirmar contraseña",
+    "enterConfirmPassword": "Ingrese la contraseña de confirmación",
+    "organization": "Organización",
+    "cancel": "Cancelar",
+    "create": "Crear",
+    "invalidDetailsMessage": "Por favor proporcione todos los detalles requeridos.",
+    "passwordNotMatch": "Las contraseñas no coinciden.",
+    "user": "Usuario",
+    "profile": "Perfil",
+    "addMember": "Agregar miembro"
+  },
+  "eventActionItems": {
+    "title": "Elementos de acción",
+    "createActionItem": "Crear elementos de acción",
+    "actionItemCategory": "Categoría de elemento de acción",
+    "selectActionItemCategory": "Seleccione una categoría de elemento de acción",
+    "selectAssignee": "Seleccione un asignado",
+    "preCompletionNotes": "Notas",
+    "postCompletionNotes": "Notas finales",
+    "actionItemDetails": "Detalles del elemento de acción",
+    "dueDate": "Fecha de vencimiento",
+    "completionDate": "Fecha de finalización",
+    "editActionItem": "Editar elemento de acción",
+    "deleteActionItem": "Eliminar elemento de acción",
+    "deleteActionItemMsg": "¿Quieres eliminar este elemento de acción?",
+    "yes": "Sí",
+    "no": "no",
+    "successfulDeletion": "Elemento de acción eliminado exitosamente",
+    "successfulCreation": "Elemento de acción creado exitosamente",
+    "successfulUpdation": "Elemento de acción actualizado correctamente",
+    "notes": "Notas",
+    "assignee": "Cesionario",
+    "assigner": "Asignador",
+    "assignmentDate": "Fecha de asignación",
+    "status": "Estado",
+    "actionItemActive": "Activo",
+    "actionItemStatus": "Estado del elemento de acción",
+    "actionItemCompleted": "Elemento de acción completado",
+    "markCompletion": "Marcar finalización",
+    "save": "Guardar"
+  },
+  "checkIn": {
+    "errorCheckingIn": "Error al registrarse",
+    "checkedInSuccessfully": "Registrado con éxito"
+  },
+  "eventRegistrantsModal": {
+    "errorAddingAttendee": "Error al agregar asistente",
+    "errorRemovingAttendee": "Error al eliminar asistente"
+  },
+  "userCampaigns": {
+    "title": "Campañas de recaudación de fondos",
+    "searchByName": "Buscar por nombre...",
+    "searchBy": "Buscar por",
+    "pledgers": "Contribuyentes",
+    "campaigns": "Campañas",
+    "myPledges": "Mis Promesas",
+    "lowestAmount": "Monto más bajo",
+    "highestAmount": "Monto más alto",
+    "lowestGoal": "Meta más baja",
+    "highestGoal": "Meta más alta",
+    "latestEndDate": "Fecha de finalización más tardía",
+    "earliestEndDate": "Fecha de finalización más temprana",
+    "addPledge": "Añadir Promesa",
+    "viewPledges": "Ver Promesas",
+    "noPledges": "No se encontraron promesas",
+    "noCampaigns": "No se encontraron campañas"
+  },
+  "userPledges": {
+    "title": "Mis Promesas"
+  },
+  "eventVolunteers": {
+    "volunteers": "Voluntarios",
+    "volunteer": "Voluntario",
+    "volunteerGroups": "Grupos de Voluntarios",
+    "individuals": "Individuos",
+    "groups": "Grupos",
+    "status": "Estado",
+    "noVolunteers": "No Hay Voluntarios",
+    "noVolunteerGroups": "No Hay Grupos de Voluntarios",
+    "add": "Agregar",
+    "mostHoursVolunteered": "Más Horas de Voluntariado",
+    "leastHoursVolunteered": "Menos Horas de Voluntariado",
+    "accepted": "Aceptado",
+    "addVolunteer": "Agregar Voluntario",
+    "removeVolunteer": "Eliminar Voluntario",
+    "volunteerAdded": "Voluntario agregado con éxito",
+    "volunteerRemoved": "Voluntario eliminado con éxito",
+    "volunteerGroupCreated": "Grupo de voluntarios creado con éxito",
+    "volunteerGroupUpdated": "Grupo de voluntarios actualizado con éxito",
+    "volunteerGroupDeleted": "Grupo de voluntarios eliminado con éxito",
+    "removeVolunteerMsg": "¿Está seguro de que desea eliminar a este Voluntario?",
+    "deleteVolunteerGroupMsg": "¿Está seguro de que desea eliminar este Grupo de Voluntarios?",
+    "leader": "Líder",
+    "group": "Grupo",
+    "createGroup": "Crear Grupo",
+    "updateGroup": "Actualizar Grupo",
+    "deleteGroup": "Eliminar Grupo",
+    "volunteersRequired": "Voluntarios Necesarios",
+    "volunteerDetails": "Detalles del Voluntario",
+    "hoursVolunteered": "Horas de Voluntariado",
+    "groupDetails": "Detalles del Grupo",
+    "creator": "Creador",
+    "requests": "Solicitudes",
+    "noRequests": "No Hay Solicitudes",
+    "latest": "Más Reciente",
+    "earliest": "Más Antiguo",
+    "requestAccepted": "Solicitud aceptada con éxito",
+    "requestRejected": "Solicitud rechazada con éxito",
+    "details": "Detalles",
+    "manageGroup": "Gestionar Grupo",
+    "mostVolunteers": "La mayoría de voluntarios",
+    "leastVolunteers": "Menos voluntarios"
+  },
+  "userVolunteer": {
+    "title": "Voluntariado",
+    "name": "Título",
+    "upcomingEvents": "Próximos Eventos",
+    "requests": "Solicitudes",
+    "invitations": "Invitaciones",
+    "groups": "Grupos de Voluntarios",
+    "actions": "Acciones",
+    "searchByName": "Buscar por Nombre",
+    "latestEndDate": "Fecha de Finalización Más Reciente",
+    "earliestEndDate": "Fecha de Finalización Más Antigua",
+    "noEvents": "No Hay Próximos Eventos",
+    "volunteer": "Voluntario",
+    "volunteered": "Voluntariado",
+    "join": "Unirse",
+    "joined": "Unido",
+    "searchByEventName": "Buscar por Título del Evento",
+    "filter": "Filtrar",
+    "groupInvite": "Invitación de Grupo",
+    "individualInvite": "Invitación Individual",
+    "noInvitations": "No Hay Invitaciones",
+    "accept": "Aceptar",
+    "reject": "Rechazar",
+    "receivedLatest": "Recibido Recientemente",
+    "receivedEarliest": "Recibido en Primer Lugar",
+    "invitationAccepted": "Invitación aceptada con éxito",
+    "invitationRejected": "Invitación rechazada con éxito",
+    "volunteerSuccess": "Solicitud de voluntariado realizada con éxito",
+    "recurring": "Recurrente",
+    "groupInvitationSubject": "Invitación a unirse al grupo de voluntarios",
+    "eventInvitationSubject": "Invitación a ser voluntario para el evento"
+  }
+}
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
new file mode 100644
index 0000000000..e3da0bc32f
--- /dev/null
+++ b/public/locales/zh/common.json
@@ -0,0 +1,98 @@
+{
+  "firstName": "名",
+  "lastName": "姓",
+  "searchByName": "按名称搜索",
+  "loading": "加载中...",
+  "endOfResults": "结果结束",
+  "noResultsFoundFor": "没有找到结果 ",
+  "edit": "编辑",
+  "admins": "管理员",
+  "admin": "行政",
+  "user": "用户",
+  "superAdmin": "超级管理员",
+  "members": "会员",
+  "logout": "登出",
+  "login": "登录",
+  "register": "登记",
+  "menu": "菜单",
+  "gender": "性别",
+  "settings": "设置",
+  "users": "用户",
+  "requests": "要求",
+  "OR": "或者",
+  "cancel": "取消",
+  "close": "关闭",
+  "create": "创造",
+  "delete": "删除",
+  "done": "完毕",
+  "yes": "是的",
+  "no": "不",
+  "filter": "筛选",
+  "search": "搜索",
+  "description": "描述",
+  "saveChanges": "保存更改",
+  "resetChanges": "重置更改",
+  "displayImage": "显示图像",
+  "enterEmail": "输入电子邮件",
+  "emailAddress": "电子邮件地址",
+  "email": "电子邮件",
+  "name": "姓名",
+  "desc": "描述",
+  "enterPassword": "输入密码",
+  "password": "密码",
+  "confirmPassword": "确认密码",
+  "forgotPassword": "忘记密码 ?",
+  "talawaAdminPortal": "塔拉瓦管理门户",
+  "address": "地址",
+  "location": "地点",
+  "enterLocation": "输入位置",
+  "joined": "已加入",
+  "startDate": "开始日期",
+  "endDate": "结束日期",
+  "startTime": "开始时间",
+  "endTime": "时间结束",
+  "My Organizations": "我的组织",
+  "Dashboard": "仪表板",
+  "People": "人们",
+  "Events": "事件",
+  "Venues": "场地",
+  "Action Items": "行动项目",
+  "Posts": "帖子",
+  "Block/Unblock": "封锁/解除封锁",
+  "Advertisement": "广告",
+  "Funds": "资金",
+  "Membership Requests": "会员请求",
+  "Plugins": "插件",
+  "Plugin Store": "插件商店",
+  "Settings": "设置",
+  "createdOn": "创建于",
+  "createdBy": "创建者",
+  "usersRole": "用户角色",
+  "changeRole": "更改角色",
+  "action": "操作",
+  "removeUser": "删除用户",
+  "remove": "删除",
+  "viewProfile": "查看个人资料",
+  "profile": "轮廓",
+  "noFiltersApplied": "未应用筛选器",
+  "manage": "管理",
+  "searchResultsFor": "搜索结果",
+  "none": "没有",
+  "sort": "种类",
+  "Donate": "捐赠",
+  "addedSuccessfully": "{{item}} 添加成功",
+  "updatedSuccessfully": "{{item}} 更新成功",
+  "removedSuccessfully": "{{item}} 删除成功",
+  "successfullyUpdated": "更新成功",
+  "sessionWarning": "由于不活动,您的会话即将过期。请与页面互动以延长您的会话。",
+  "sessionLogOut": "由于不活动,您的会话已过期。请重新登录以继续。",
+  "all": "全部",
+  "active": "活跃",
+  "disabled": "禁用",
+  "pending": "待处理",
+  "completed": "已完成",
+  "late": "迟到",
+  "createdLatest": "最近创建",
+  "createdEarliest": "最早创建",
+  "searchBy": "搜索依据 {{item}}"
+}
diff --git a/public/locales/zh/errors.json b/public/locales/zh/errors.json
new file mode 100644
index 0000000000..c872f367a5
--- /dev/null
+++ b/public/locales/zh/errors.json
@@ -0,0 +1,11 @@
+{
+  "talawaApiUnavailable": "Talawa-API 服务不可用!",
+  "notFound": "未找到",
+  "unknownError": "出现未知错误。 {{msg}}",
+  "notAuthorised": "对不起!",
+  "errorSendingMail": "发送邮件时出错",
+  "emailNotRegistered": "邮箱未注册",
+  "notFoundMsg": "哎呀!",
+  "errorOccurredCouldntCreate": "发生错误。 无法创建{{entity}}",
+  "errorLoading": "加载{{entity}}数据时出错"
+}
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
new file mode 100644
index 0000000000..adafbdbe45
--- /dev/null
+++ b/public/locales/zh/translation.json
@@ -0,0 +1,1483 @@
+{
+  "leaderboard": {
+    "title": "排行榜",
+    "searchByVolunteer": "按志愿者搜索",
+    "mostHours": "最多时数",
+    "leastHours": "最少时数",
+    "timeFrame": "时间范围",
+    "allTime": "全部时间",
+    "weekly": "本周",
+    "monthly": "本月",
+    "yearly": "今年",
+    "noVolunteers": "未找到志愿者!"
+  },
+  "loginPage": {
+    "title": "塔拉瓦管理员",
+    "fromPalisadoes": "Palisadoes 基金会志愿者开发的开源应用程序",
+    "userLogin": "用户登录",
+    "atleast_8_char_long": "至少 8 个字符长",
+    "atleast_6_char_long": "至少 6 个字符长",
+    "firstName_invalid": "名字只能包含小写和大写字母",
+    "lastName_invalid": "姓氏只能包含小写和大写字母",
+    "password_invalid": "密码应至少包含1个小写字母、1个大写字母、1个数字和1个特殊字符",
+    "email_invalid": "电子邮件应至少包含 8 个字符",
+    "Password_and_Confirm_password_mismatches.": "密码和确认密码不匹配。",
+    "doNotOwnAnAccount": "没有帐户?",
+    "captchaError": "验证码错误!",
+    "Please_check_the_captcha": "请检查验证码。",
+    "Something_went_wrong": "出了点问题,请稍后再试。",
+    "passwordMismatches": "密码和确认密码不匹配。",
+    "fillCorrectly": "正确填写所有详细信息。",
+    "successfullyRegistered": "注册成功。",
+    "lowercase_check": "至少一个小写字母",
+    "uppercase_check": "至少有一个大写字母",
+    "numeric_value_check": "至少设定一个数值",
+    "special_char_check": "至少一个特殊字符",
+    "selectOrg": "选择一个组织",
+    "afterRegister": "注册成功。",
+    "talawa_portal": "塔拉瓦门户",
+    "login": "登录",
+    "register": "注册",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "email": "电子邮件",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "forgotPassword": "忘记密码",
+    "enterEmail": "输入电子邮件",
+    "enterPassword": "输入密码",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "notAuthorised": "未授权",
+    "notFound": "未找到",
+    "OR": "或",
+    "admin": "管理员",
+    "user": "用户",
+    "loading": "加载中"
+  },
+  "userLoginPage": {
+    "title": "塔拉瓦管理员",
+    "fromPalisadoes": "Palisadoes 基金会志愿者开发的开源应用程序",
+    "atleast_8_char_long": "至少 8 个字符长",
+    "Password_and_Confirm_password_mismatches.": "密码和确认密码不匹配。",
+    "doNotOwnAnAccount": "没有帐户?",
+    "captchaError": "验证码错误!",
+    "Please_check_the_captcha": "请检查验证码。",
+    "Something_went_wrong": "出了点问题,请稍后再试。",
+    "passwordMismatches": "密码和确认密码不匹配。",
+    "fillCorrectly": "正确填写所有详细信息。",
+    "successfullyRegistered": "注册成功。",
+    "userLogin": "用户登录",
+    "afterRegister": "注册成功。",
+    "selectOrg": "选择一个组织",
+    "talawa_portal": "塔拉瓦门户",
+    "login": "登录",
+    "register": "注册",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "email": "电子邮件",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "forgotPassword": "忘记密码",
+    "enterEmail": "输入电子邮件",
+    "enterPassword": "输入密码",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "notAuthorised": "未授权",
+    "notFound": "未找到",
+    "OR": "或",
+    "loading": "加载中"
+  },
+  "latestEvents": {
+    "eventCardTitle": "即将举行的活动",
+    "eventCardSeeAll": "查看全部",
+    "noEvents": "没有即将举行的活动"
+  },
+  "latestPosts": {
+    "latestPostsTitle": "最新帖子",
+    "seeAllLink": "查看全部",
+    "noPostsCreated": "没有创建帖子"
+  },
+  "listNavbar": {
+    "roles": "角色",
+    "talawa_portal": "塔拉瓦门户",
+    "requests": "请求",
+    "logout": "退出登录"
+  },
+  "leftDrawer": {
+    "my organizations": "我的组织",
+    "requests": "会员申请",
+    "communityProfile": "社区简介",
+    "talawaAdminPortal": "塔拉瓦管理员门户",
+    "menu": "菜单",
+    "users": "用户",
+    "logout": "退出登录"
+  },
+  "leftDrawerOrg": {
+    "Dashboard": "仪表板",
+    "People": "人们",
+    "Events": "活动",
+    "Contributions": "贡献",
+    "Posts": "帖子",
+    "Block/Unblock": "阻止/解除阻止",
+    "Plugins": "插件",
+    "Plugin Store": "插件商店",
+    "Advertisement": "广告",
+    "allOrganizations": "所有组织",
+    "yourOrganization": "您的组织",
+    "notification": "通知",
+    "language": "语言",
+    "notifications": "通知",
+    "spamsThe": "垃圾邮件",
+    "group": "团体",
+    "noNotifications": "无通知",
+    "talawaAdminPortal": "塔拉瓦管理员门户",
+    "menu": "菜单",
+    "talawa_portal": "塔拉瓦门户",
+    "settings": "设置",
+    "logout": "退出登录",
+    "close": "关闭"
+  },
+  "orgList": {
+    "title": "塔拉瓦组织",
+    "you": "你",
+    "designation": "指定",
+    "my organizations": "我的组织",
+    "createOrganization": "创建组织",
+    "createSampleOrganization": "创建样本组织",
+    "city": "城市",
+    "countryCode": "国家代码",
+    "dependentLocality": "附属地点",
+    "line1": "1号线",
+    "line2": "2号线",
+    "postalCode": "邮政编码",
+    "sortingCode": "排序代码",
+    "state": "州/省",
+    "userRegistrationRequired": "需要用户注册",
+    "visibleInSearch": "在搜索中可见",
+    "enterName": "输入名字",
+    "sort": "种类",
+    "Latest": "最新的",
+    "Earliest": "最早",
+    "noOrgErrorTitle": "未找到组织",
+    "sampleOrgDuplicate": "只允许一个样本组织",
+    "noOrgErrorDescription": "请通过仪表板创建组织",
+    "manageFeatures": "管理功能",
+    "manageFeaturesInfo": "创建成功!",
+    "goToStore": "前往插件商店",
+    "enableEverything": "启用一切",
+    "sampleOrgSuccess": "样本组织已成功创建",
+    "name": "名称",
+    "email": "电子邮件",
+    "searchByName": "按名称搜索",
+    "description": "描述",
+    "location": "位置",
+    "address": "地址",
+    "displayImage": "显示图像",
+    "filter": "筛选",
+    "cancel": "取消",
+    "endOfResults": "结果结束",
+    "noResultsFoundFor": "未找到结果",
+    "OR": "或"
+  },
+  "orgListCard": {
+    "manage": "管理",
+    "sampleOrganization": "组织样本",
+    "admins": "管理员",
+    "members": "成员"
+  },
+  "paginationList": {
+    "rowsPerPage": "每页行数",
+    "all": "全部"
+  },
+  "requests": {
+    "title": "会员申请",
+    "sl_no": "SL。",
+    "accept": "接受",
+    "reject": "拒绝",
+    "searchRequests": "搜索会员请求",
+    "noOrgError": "未找到组织,请通过仪表板创建组织",
+    "noRequestsFound": "未找到会员申请",
+    "acceptedSuccessfully": "请求已成功接受",
+    "rejectedSuccessfully": "请求被成功拒绝",
+    "noOrgErrorTitle": "未找到组织",
+    "noOrgErrorDescription": "请通过仪表板创建组织",
+    "name": "名称",
+    "email": "电子邮件",
+    "endOfResults": "结果结束",
+    "noResultsFoundFor": "未找到结果"
+  },
+  "users": {
+    "title": "塔拉瓦角色",
+    "joined_organizations": "加入组织",
+    "blocked_organizations": "被阻止的组织",
+    "orgJoinedBy": "加入组织",
+    "orgThatBlocked": "阻止的组织",
+    "hasNotJoinedAnyOrg": "没有加入任何组织",
+    "isNotBlockedByAnyOrg": "没有被任何组织封锁",
+    "searchByOrgName": "按组织名称搜索",
+    "view": "看法",
+    "enterName": "输入名字",
+    "loadingUsers": "正在加载用户...",
+    "noUserFound": "未找到用户",
+    "sort": "种类",
+    "Newest": "新的先来",
+    "Oldest": "最旧的在前",
+    "noOrgError": "未找到组织,请通过仪表板创建组织",
+    "roleUpdated": "角色已更新。",
+    "joinNow": "立即加入",
+    "visit": "访问",
+    "withdraw": "拉幅",
+    "removeUserFrom": "从{{org}}中删除用户",
+    "removeConfirmation": "您确定要将'{{name}}'从组织'{{org}}'中删除吗?",
+    "searchByName": "按名称搜索",
+    "users": "用户",
+    "name": "名称",
+    "email": "电子邮件",
+    "endOfResults": "结果结束",
+    "admin": "管理员",
+    "superAdmin": "超级管理员",
+    "user": "用户",
+    "filter": "筛选",
+    "noResultsFoundFor": "未找到结果",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "cancel": "取消",
+    "admins": "管理员",
+    "members": "成员",
+    "orgJoined": "已加入组织",
+    "MembershipRequestSent": "会员请求已发送",
+    "AlreadyJoined": "已加入",
+    "errorOccured": "发生错误"
+  },
+  "communityProfile": {
+    "title": "社区简介",
+    "editProfile": "编辑个人资料",
+    "communityProfileInfo": "这些详细信息将显示在您和您的社区成员的登录/注册屏幕上",
+    "communityName": "社区名字",
+    "wesiteLink": "网站链接",
+    "logo": "标识",
+    "social": "社交媒体链接",
+    "url": "输入网址",
+    "profileChangedMsg": "已成功更新个人资料详细信息。",
+    "resetData": "成功重置个人资料详细信息。"
+  },
+  "dashboard": {
+    "title": "仪表板",
+    "about": "关于",
+    "deleteThisOrganization": "删除该组织",
+    "statistics": "统计数据",
+    "posts": "帖子",
+    "events": "活动",
+    "blockedUsers": "被阻止的用户",
+    "viewAll": "查看全部",
+    "upcomingEvents": "即将举行的活动",
+    "noUpcomingEvents": "没有即将举行的活动",
+    "latestPosts": "最新帖子",
+    "noPostsPresent": "没有帖子",
+    "membershipRequests": "会员请求",
+    "noMembershipRequests": "没有会员请求",
+    "location": "位置",
+    "members": "成员",
+    "admins": "管理员",
+    "requests": "请求",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "volunteerRankings": "志愿者排名",
+    "noVolunteers": "未找到志愿者!"
+  },
+  "organizationPeople": {
+    "title": "塔拉瓦会员",
+    "filterByName": "按名称过滤",
+    "filterByLocation": "按地点过滤",
+    "filterByEvent": "按事件过滤",
+    "searchName": "输入名字",
+    "searchevent": "输入事件",
+    "searchFullName": "输入全名",
+    "people": "人们",
+    "sort": "按角色搜索",
+    "actions": "行动",
+    "addMembers": "添加会员",
+    "existingUser": "现有用户",
+    "newUser": "新用户",
+    "enterFirstName": "输入您的名字",
+    "enterLastName": "输入您的姓氏",
+    "enterConfirmPassword": "输入您的密码进行确认",
+    "organization": "组织",
+    "invalidDetailsMessage": "请输入有效的详细信息。",
+    "members": "成员",
+    "admins": "管理员",
+    "users": "用户",
+    "searchFirstName": "按名字搜索",
+    "searchLastName": "按姓氏搜索",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "emailAddress": "电子邮件地址",
+    "enterEmail": "输入你的电子邮件地址",
+    "password": "密码",
+    "enterPassword": "输入你的密码",
+    "confirmPassword": "确认密码",
+    "cancel": "取消",
+    "create": "创建",
+    "user": "用户",
+    "profile": "个人资料"
+  },
+  "organizationTags": {
+    "title": "组织标签",
+    "createTag": "创建新标签",
+    "manageTag": "管理",
+    "editTag": "编辑",
+    "removeTag": "删除",
+    "tagDetails": "标签详情",
+    "tagName": "名称",
+    "tagType": "类型",
+    "tagNamePlaceholder": "输入标签名称",
+    "tagCreationSuccess": "新标签创建成功",
+    "tagUpdationSuccess": "标签更新成功",
+    "tagRemovalSuccess": "标签删除成功",
+    "noTagsFound": "未找到标签",
+    "removeUserTag": "删除标签",
+    "removeUserTagMessage": "您确定要删除此标签吗?",
+    "addChildTag": "添加子标签",
+    "enterTagName": "输入标签名称"
+  },
+  "manageTag": {
+    "title": "标签详情",
+    "addPeopleToTag": "将人员添加到标签",
+    "viewProfile": "查看",
+    "noAssignedMembersFound": "没有分配成员",
+    "unassignUserTag": "取消分配标签",
+    "unassignUserTagMessage": "您想从此用户中删除标签吗?",
+    "successfullyUnassigned": "标签已从用户中取消分配",
+    "addPeople": "添加人员",
+    "add": "添加",
+    "subTags": "子标签",
+    "successfullyAssignedToPeople": "标签分配成功",
+    "errorOccurredWhileLoadingMembers": "加载成员时出错",
+    "userName": "用户名",
+    "actions": "操作",
+    "noOneSelected": "未选择任何人",
+    "assignToTags": "分配到标签",
+    "removeFromTags": "从标签中移除",
+    "assign": "分配",
+    "remove": "移除",
+    "successfullyAssignedToTags": "成功分配到标签",
+    "successfullyRemovedFromTags": "成功从标签中移除",
+    "errorOccurredWhileLoadingOrganizationUserTags": "加载组织标签时出错",
+    "errorOccurredWhileLoadingSubTags": "加载子标签时发生错误",
+    "removeUserTag": "删除标签",
+    "removeUserTagMessage": "您要删除此标签吗?这将删除所有子标签和所有关联。",
+    "tagDetails": "标签详情",
+    "tagName": "名称",
+    "tagUpdationSuccess": "标签更新成功",
+    "tagRemovalSuccess": "标签删除成功",
+    "noTagSelected": "未选择标签",
+    "changeNameToEdit": "更改名称以进行更新",
+    "selectTag": "选择标签",
+    "collapse": "收起",
+    "expand": "展开",
+    "tagNamePlaceholder": "输入标签名称",
+    "allTags": "所有标签",
+    "noMoreMembersFound": "未找到更多成员"
+  },
+  "userListCard": {
+    "addAdmin": "添加管理员",
+    "addedAsAdmin": "用户被添加为管理员。",
+    "joined": "已加入",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "orgAdminListCard": {
+    "remove": "消除",
+    "removeAdmin": "删除管理员",
+    "removeAdminMsg": "您想删除该管理员吗?",
+    "adminRemoved": "管理员被删除。",
+    "joined": "已加入",
+    "no": "否",
+    "yes": "是",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "orgPeopleListCard": {
+    "remove": "消除",
+    "removeMember": "删除会员",
+    "removeMemberMsg": "您想删除该成员吗?",
+    "memberRemoved": "该会员已被删除",
+    "joined": "已加入",
+    "no": "否",
+    "yes": "是",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "organizationEvents": {
+    "title": "活动",
+    "filterByTitle": "按标题过滤",
+    "filterByLocation": "按地点过滤",
+    "filterByDescription": "按描述过滤",
+    "searchMemberName": "搜索成员名称",
+    "addEvent": "添加事件",
+    "eventDetails": "活动详情",
+    "eventTitle": "标题",
+    "startTime": "开始时间",
+    "endTime": "时间结束",
+    "allDay": "一整天",
+    "recurringEvent": "重复事件",
+    "isPublic": "是公开的",
+    "isRegistrable": "可注册",
+    "createEvent": "创建事件",
+    "enterFilter": "输入过滤器",
+    "enterTitle": "输入标题",
+    "enterDescrip": "输入描述",
+    "eventLocation": "输入位置",
+    "searchEventName": "搜索活动名称",
+    "eventType": "事件类型",
+    "eventCreated": "恭喜!",
+    "customRecurrence": "自定义重复",
+    "repeatsEvery": "重复每个",
+    "repeatsOn": "重复开启",
+    "ends": "结束",
+    "never": "绝不",
+    "on": "在",
+    "after": "后",
+    "occurences": "事件",
+    "events": "活动",
+    "description": "描述",
+    "location": "位置",
+    "startDate": "开始日期",
+    "endDate": "结束日期",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "done": "完成"
+  },
+  "organizationActionItems": {
+    "actionItemCategory": "行动项类别",
+    "actionItemDetails": "行动项详情",
+    "actionItemCompleted": "行动项已完成",
+    "assignee": "受托人",
+    "assigner": "分配人",
+    "assignmentDate": "分配日期",
+    "active": "活跃",
+    "clearFilters": "清除过滤器",
+    "completionDate": "完成日期",
+    "createActionItem": "创建行动项",
+    "deleteActionItem": "删除行动项",
+    "deleteActionItemMsg": "是否要删除此行动项?",
+    "details": "详情",
+    "dueDate": "截止日期",
+    "earliest": "最早",
+    "editActionItem": "编辑行动项",
+    "isCompleted": "已完成",
+    "latest": "最新",
+    "makeActive": "激活",
+    "noActionItems": "无行动项",
+    "options": "选项",
+    "preCompletionNotes": "预完成备注",
+    "actionItemActive": "活跃的行动项",
+    "markCompletion": "标记为完成",
+    "actionItemStatus": "行动项状态",
+    "postCompletionNotes": "完成后备注",
+    "selectActionItemCategory": "选择行动项类别",
+    "selectAssignee": "选择受托人",
+    "status": "状态",
+    "successfulCreation": "行动项创建成功",
+    "successfulUpdation": "行动项更新成功",
+    "successfulDeletion": "行动项删除成功",
+    "title": "行动项",
+    "category": "类别",
+    "allottedHours": "分配的小时",
+    "latestDueDate": "最新截止日期",
+    "earliestDueDate": "最早截止日期",
+    "updateActionItem": "更新行动项",
+    "noneUpdated": "没有字段被更新",
+    "updateStatusMsg": "您确定要将此行动项标记为待处理吗?",
+    "close": "关闭",
+    "eventActionItems": "事件行动项",
+    "no": "否",
+    "yes": "是",
+    "individuals": "个人",
+    "groups": "小组",
+    "assignTo": "分配给",
+    "volunteers": "志愿者",
+    "volunteerGroups": "志愿者小组"
+  },
+  "organizationAgendaCategory": {
+    "agendaCategoryDetails": "议程类别详情",
+    "updateAgendaCategory": "更新议程类别",
+    "title": "议程类别",
+    "name": "类别",
+    "description": "描述",
+    "createdBy": "创建人",
+    "options": "选项",
+    "createAgendaCategory": "创建议程类别",
+    "noAgendaCategories": "没有议程类别",
+    "update": "更新",
+    "agendaCategoryCreated": "议程类别创建成功",
+    "agendaCategoryUpdated": "议程类别更新成功",
+    "agendaCategoryDeleted": "议程类别删除成功",
+    "deleteAgendaCategory": "删除议程类别",
+    "deleteAgendaCategoryMsg": "是否要删除此议程类别?"
+  },
+  "agendaItems": {
+    "agendaItemDetails": "议程项目详细信息",
+    "updateAgendaItem": "更新议程项目",
+    "title": "标题",
+    "enterTitle": "输入标题",
+    "sequence": "顺序",
+    "description": "描述",
+    "enterDescription": "输入描述",
+    "category": "议程类别",
+    "attachments": "附件",
+    "attachmentLimit": "添加任何图像文件或视频文件,最大 10MB",
+    "fileSizeExceedsLimit": "文件大小超过 10MB 的限制",
+    "urls": "网址",
+    "url": "添加链接到网址",
+    "enterUrl": "https://example.com",
+    "invalidUrl": "请输入有效的网址",
+    "link": "链接",
+    "createdBy": "创建人",
+    "regular": "常规",
+    "note": "注意",
+    "duration": "持续时间",
+    "enterDuration": "分:秒",
+    "options": "选项",
+    "createAgendaItem": "创建议程项目",
+    "noAgendaItems": "没有议程项目",
+    "selectAgendaItemCategory": "选择议程项目类别",
+    "update": "更新",
+    "delete": "删除",
+    "agendaItemCreated": "议程项目已成功创建",
+    "agendaItemUpdated": "议程项目已成功更新",
+    "agendaItemDeleted": "议程项目已成功删除",
+    "deleteAgendaItem": "删除议程项目",
+    "deleteAgendaItemMsg": "您要删除此议程项目吗?"
+  },
+  "eventListCard": {
+    "deleteEvent": "删除事件",
+    "deleteEventMsg": "您想删除此事件吗?",
+    "editEvent": "编辑事件",
+    "eventTitle": "标题",
+    "alreadyRegistered": "已经注册",
+    "startTime": "开始时间",
+    "endTime": "时间结束",
+    "allDay": "一整天",
+    "recurringEvent": "重复事件",
+    "isPublic": "是公开的",
+    "isRegistrable": "可注册",
+    "updatePost": "更新帖子",
+    "eventDetails": "活动详情",
+    "eventDeleted": "活动删除成功。",
+    "eventUpdated": "活动更新成功。",
+    "thisInstance": "本实例",
+    "thisAndFollowingInstances": "本实例及后续实例",
+    "allInstances": "所有实例",
+    "customRecurrence": "自定义重复",
+    "repeatsEvery": "重复每个",
+    "repeatsOn": "重复开启",
+    "ends": "结束",
+    "never": "绝不",
+    "on": "在",
+    "after": "后",
+    "occurences": "事件",
+    "location": "位置",
+    "no": "否",
+    "yes": "是",
+    "description": "描述",
+    "startDate": "开始日期",
+    "endDate": "结束日期",
+    "registerEvent": "注册活动",
+    "close": "关闭",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "done": "完成"
+  },
+  "funds": {
+    "title": "基金",
+    "createFund": "创建基金",
+    "fundName": "基金名称",
+    "fundId": "基金(参考)ID",
+    "taxDeductible": "税前扣除",
+    "default": "默认",
+    "archived": "已归档",
+    "fundCreate": "创建基金",
+    "fundUpdate": "更新基金",
+    "fundDelete": "删除基金",
+    "searchByName": "按名称搜索",
+    "noFundsFound": "未找到基金",
+    "createdBy": "由...创建",
+    "createdOn": "创建于",
+    "status": "状态",
+    "fundCreated": "基金创建成功",
+    "fundUpdated": "基金更新成功",
+    "fundDeleted": "基金删除成功",
+    "deleteFundMsg": "您确定要删除此基金吗?",
+    "createdLatest": "最近创建",
+    "createdEarliest": "最早创建",
+    "viewCampaigns": "查看活动"
+  },
+  "fundCampaign": {
+    "title": "募捐活动",
+    "campaignName": "活动名称",
+    "campaignOptions": "选项",
+    "fundingGoal": "资金目标",
+    "addCampaign": "添加活动",
+    "createdCampaign": "活动创建成功",
+    "updatedCampaign": "活动更新成功",
+    "deletedCampaign": "活动删除成功",
+    "deleteCampaignMsg": "您确定要删除此活动吗?",
+    "noCampaigns": "未找到活动",
+    "createCampaign": "创建活动",
+    "updateCampaign": "更新活动",
+    "deleteCampaign": "删除活动",
+    "currency": "货币",
+    "selectCurrency": "选择货币",
+    "searchFullName": "按名称搜索",
+    "viewPledges": "查看承诺",
+    "noCampaignsFound": "未找到活动",
+    "latestEndDate": "最新结束日期",
+    "earliestEndDate": "最早结束日期",
+    "lowestGoal": "最低目标",
+    "highestGoal": "最高目标"
+  },
+  "pledges": {
+    "title": "基金活动承诺",
+    "pledgeAmount": "质押金额",
+    "pledgeOptions": "选项",
+    "pledgeCreated": "质押创建成功",
+    "pledgeUpdated": "承诺更新成功",
+    "pledgeDeleted": "承诺删除成功",
+    "addPledge": "添加承诺",
+    "createPledge": "创建承诺",
+    "currency": "货币",
+    "selectCurrency": "选择货币",
+    "updatePledge": "更新承诺",
+    "deletePledge": "删除承诺",
+    "amount": "数量",
+    "editPledge": "编辑承诺",
+    "deletePledgeMsg": "您确定要删除此承诺吗?",
+    "noPledges": "未找到承诺",
+    "searchPledger": "按承诺搜索",
+    "highestAmount": "最高金额",
+    "lowestAmount": "最低金额",
+    "latestEndDate": "最新结束日期",
+    "earliestEndDate": "最早结束日期",
+    "campaigns": "活动",
+    "pledges": "承诺",
+    "endsOn": "结束于",
+    "raisedAmount": "募集金額",
+    "pledgedAmount": "承诺金額",
+    "startDate": "开始日期",
+    "endDate": "结束日期"
+  },
+  "orgPost": {
+    "title": "帖子",
+    "searchPost": "搜索帖子",
+    "posts": "帖子",
+    "createPost": "创建帖子",
+    "postDetails": "帖子详情",
+    "postTitle1": "写下帖子的标题",
+    "postTitle": "标题",
+    "addMedia": "上传媒体",
+    "information": "信息",
+    "information1": "填写帖子信息",
+    "addPost": "添加帖子",
+    "searchTitle": "按标题搜索",
+    "searchText": "按文本搜索",
+    "ptitle": "帖子标题",
+    "postDes": "你要聊什么?",
+    "Title": "标题",
+    "Text": "文本",
+    "searchBy": "搜索依据",
+    "Oldest": "最旧的在前",
+    "Latest": "最新第一",
+    "sortPost": "排序帖子",
+    "tag": " 您的浏览器不支持video标签",
+    "postCreatedSuccess": "恭喜!",
+    "pinPost": "针柱",
+    "Next": "下一页",
+    "Previous": "上一页",
+    "cancel": "取消"
+  },
+  "postNotFound": {
+    "post": "邮政",
+    "not found!": "未找到!",
+    "organization": "组织",
+    "post not found!": "帖子未找到!",
+    "organization not found!": "未找到组织!"
+  },
+  "userNotFound": {
+    "not found!": "未找到!",
+    "roles": "角色",
+    "user not found!": "未找到用户!",
+    "member not found!": "未找到会员!",
+    "admin not found!": "找不到管理员!",
+    "roles not found!": "未找到角色!",
+    "user": "用户"
+  },
+  "orgPostCard": {
+    "author": "作者",
+    "imageURL": "图片网址",
+    "videoURL": "视频网址",
+    "deletePost": "删除帖子",
+    "deletePostMsg": "您想删除此帖子吗?",
+    "editPost": "编辑帖子",
+    "postTitle": "标题",
+    "postTitle1": "编辑帖子标题",
+    "information1": "编辑帖子信息",
+    "information": "信息",
+    "image": "图像",
+    "video": "视频",
+    "updatePost": "更新帖子",
+    "postDeleted": "帖子删除成功。",
+    "postUpdated": "帖子更新成功。",
+    "tag": " 您的浏览器不支持video标签",
+    "pin": "针柱",
+    "edit": "编辑",
+    "no": "否",
+    "yes": "是",
+    "close": "关闭",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "blockUnblockUser": {
+    "title": "阻止/取消阻止用户",
+    "pageName": "阻止/解除阻止",
+    "listOfUsers": "发送垃圾邮件的用户列表",
+    "block_unblock": "阻止/解除阻止",
+    "unblock": "解锁",
+    "block": "堵塞",
+    "orgName": "输入名字",
+    "blockedSuccessfully": "用户被成功屏蔽",
+    "Un-BlockedSuccessfully": "用户解封成功",
+    "allMembers": "所有会员",
+    "blockedUsers": "被阻止的用户",
+    "searchByFirstName": "按名字搜索",
+    "searchByLastName": "按姓氏搜索",
+    "noSpammerFound": "未发现垃圾邮件发送者",
+    "searchByName": "按名称搜索",
+    "name": "名称",
+    "email": "电子邮件",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "noResultsFoundFor": "未找到结果"
+  },
+  "eventManagement": {
+    "title": "事件管理",
+    "dashboard": "仪表板",
+    "registrants": "注册者",
+    "attendance": "出席",
+    "actions": "操作",
+    "agendas": "议程",
+    "statistics": "统计数据",
+    "to": "到",
+    "volunteers": "志愿者"
+  },
+  "forgotPassword": {
+    "title": "塔拉瓦 忘记密码",
+    "registeredEmail": "注册的电子邮件",
+    "getOtp": "获取一次性密码",
+    "enterOtp": "输入一次性密码",
+    "enterNewPassword": "输入新密码",
+    "cofirmNewPassword": "确认新密码",
+    "changePassword": "更改密码",
+    "backToLogin": "回到登入",
+    "userOtp": "例如",
+    "emailNotRegistered": "电子邮件未注册。",
+    "errorSendingMail": "发送邮件时出错。",
+    "passwordMismatches": "密码和确认密码不匹配。",
+    "passwordChanges": "密码修改成功。",
+    "OTPsent": "OTP 已发送至您的注册邮箱。",
+    "forgotPassword": "忘记密码",
+    "password": "密码",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "pageNotFound": {
+    "404": "404",
+    "title": "404 未找到",
+    "talawaAdmin": "塔拉瓦管理员",
+    "talawaUser": "塔拉瓦用户",
+    "notFoundMsg": "哎呀!",
+    "backToHome": "返回首页"
+  },
+  "orgContribution": {
+    "title": "塔拉瓦 贡献",
+    "filterByName": "按名称过滤",
+    "filterByTransId": "按反式过滤。 ",
+    "recentStats": "最近的统计数据",
+    "contribution": "贡献",
+    "orgname": "输入名字",
+    "searchtransaction": "输入交易ID"
+  },
+  "contriStats": {
+    "recentContribution": "最近的贡献",
+    "highestContribution": "最高贡献",
+    "totalContribution": "总贡献"
+  },
+  "orgContriCards": {
+    "date": "日期",
+    "transactionId": "交易ID",
+    "amount": "数量"
+  },
+  "orgSettings": {
+    "title": "设置",
+    "general": "一般的",
+    "actionItemCategories": "行动项目类别",
+    "updateOrganization": "更新组织",
+    "seeRequest": "查看请求",
+    "noData": "没有数据",
+    "otherSettings": "其他设置",
+    "changeLanguage": "改变语言",
+    "manageCustomFields": "管理自定义字段",
+    "agendaItemCategories": "议程项目类别"
+  },
+  "deleteOrg": {
+    "deleteOrganization": "删除组织",
+    "deleteSampleOrganization": "删除样本组织",
+    "deleteMsg": "您想删除该组织吗?",
+    "confirmDelete": "确认删除",
+    "longDelOrgMsg": "通过单击“删除组织”按钮,该组织及其事件、标签和所有相关数据将被永久删除。",
+    "successfullyDeletedSampleOrganization": "已成功删除样本组织",
+    "cancel": "取消"
+  },
+  "userUpdate": {
+    "appLanguageCode": "默认语言",
+    "userType": "用户类型",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "email": "电子邮件",
+    "password": "密码",
+    "admin": "管理员",
+    "superAdmin": "超级管理员",
+    "displayImage": "显示图像",
+    "saveChanges": "保存更改",
+    "cancel": "取消"
+  },
+  "userPasswordUpdate": {
+    "previousPassword": "旧密码",
+    "newPassword": "新密码",
+    "confirmNewPassword": "确认新密码",
+    "passCantBeEmpty": "密码不能为空",
+    "passNoMatch": "新密码和确认密码不匹配。",
+    "saveChanges": "保存更改",
+    "cancel": "取消"
+  },
+  "orgDelete": {
+    "deleteOrg": "删除组织"
+  },
+  "membershipRequest": {
+    "accept": "接受",
+    "reject": "拒绝",
+    "memberAdded": "它被接受",
+    "joined": "已加入",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "orgUpdate": {
+    "city": "城市",
+    "countryCode": "国家代码",
+    "line1": "1号线",
+    "line2": "2号线",
+    "postalCode": "邮政编码",
+    "dependentLocality": "附属地点",
+    "sortingCode": "排序代码",
+    "state": "州/省",
+    "userRegistrationRequired": "需要用户注册",
+    "isVisibleInSearch": "在搜索中可见",
+    "enterNameOrganization": "输入组织名称",
+    "successfulUpdated": "组织更新成功",
+    "name": "名称",
+    "description": "描述",
+    "location": "位置",
+    "address": "地址",
+    "displayImage": "显示图像",
+    "saveChanges": "保存更改",
+    "cancel": "取消",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "addOnRegister": {
+    "addNew": "添新",
+    "addPlugin": "添加插件",
+    "pluginName": "插件名称",
+    "creatorName": "创建者姓名",
+    "pluginDesc": "插件说明",
+    "pName": "例如:捐款",
+    "cName": "例如:约翰·多伊",
+    "pDesc": "该插件启用 UI",
+    "close": "关闭",
+    "register": "注册"
+  },
+  "addOnStore": {
+    "title": "添加商店",
+    "searchName": "例如:捐款",
+    "search": "搜索",
+    "enable": "启用",
+    "disable": "残疾人",
+    "pHeading": "插件",
+    "install": "已安装",
+    "available": "可用的",
+    "pMessage": "插件不存在",
+    "filter": "筛选"
+  },
+  "addOnEntry": {
+    "enable": "启用",
+    "install": "安装",
+    "uninstall": "卸载",
+    "uninstallMsg": "此功能现已从您的组织中删除",
+    "installMsg": "您的组织现已启用此功能"
+  },
+  "memberDetail": {
+    "title": "用户详细信息",
+    "addAdmin": "添加管理员",
+    "noeventsAttended": "未参加任何活动",
+    "alreadyIsAdmin": "会员已经是管理员",
+    "organizations": "组织机构",
+    "events": "活动",
+    "role": "角色",
+    "createdOn": "创建于",
+    "main": "主要的",
+    "firstName": "名",
+    "lastName": "姓",
+    "language": "语言",
+    "gender": "性别",
+    "birthDate": "出生日期",
+    "educationGrade": "教育等级",
+    "employmentStatus": "就业状况",
+    "maritalStatus": "婚姻状况",
+    "phone": "电话",
+    "countryCode": "国家代码",
+    "state": "状态",
+    "city": "城市",
+    "personalInfoHeading": "个人信息",
+    "viewAll": "查看全部",
+    "eventsAttended": "活动参与",
+    "contactInfoHeading": "联系信息",
+    "actionsHeading": "行动",
+    "personalDetailsHeading": "个人资料详情",
+    "appLanguageCode": "选择语言",
+    "deleteUser": "删除用户",
+    "pluginCreationAllowed": "允许创建插件",
+    "created": "已创建",
+    "adminForOrganizations": "组织管理员",
+    "membershipRequests": "会员请求",
+    "adminForEvents": "活动管理员",
+    "addedAsAdmin": "用户被添加为管理员。",
+    "userType": "用户类型",
+    "email": "电子邮件",
+    "displayImage": "显示图像",
+    "address": "地址",
+    "delete": "删除",
+    "saveChanges": "保存更改",
+    "joined": "已加入",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用",
+    "unassignUserTag": "取消分配标签",
+    "unassignUserTagMessage": "您想从此用户中删除标签吗?",
+    "successfullyUnassigned": "标签已从用户中取消分配",
+    "tagsAssigned": "已分配标签",
+    "noTagsAssigned": "未分配标签"
+  },
+  "userLogin": {
+    "login": "登录",
+    "loginIntoYourAccount": "登录您的帐户",
+    "invalidDetailsMessage": "请输入有效的电子邮件和密码。",
+    "notAuthorised": "对不起!",
+    "invalidCredentials": "输入的凭据不正确。",
+    "forgotPassword": "忘记密码",
+    "emailAddress": "电子邮件地址",
+    "enterEmail": "输入电子邮件",
+    "password": "密码",
+    "enterPassword": "输入密码",
+    "register": "注册",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "people": {
+    "title": "人们",
+    "searchUsers": "搜索用户"
+  },
+  "userRegister": {
+    "enterFirstName": "输入您的名字",
+    "enterLastName": "输入您的姓氏",
+    "enterConfirmPassword": "输入您的密码进行确认",
+    "alreadyhaveAnAccount": "已经有帐户?",
+    "login": "登录",
+    "afterRegister": "注册成功。",
+    "passwordNotMatch": "密码不匹配。",
+    "invalidDetailsMessage": "请输入有效的详细信息。",
+    "register": "注册",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "emailAddress": "电子邮件地址",
+    "enterEmail": "输入电子邮件",
+    "password": "密码",
+    "enterPassword": "输入密码",
+    "confirmPassword": "确认密码",
+    "talawaApiUnavailable": "塔拉瓦 API 不可用"
+  },
+  "userNavbar": {
+    "talawa": "塔拉瓦",
+    "home": "家",
+    "people": "人们",
+    "events": "活动",
+    "chat": "聊天",
+    "donate": "捐",
+    "language": "语言",
+    "settings": "设置",
+    "logout": "退出登录",
+    "close": "关闭"
+  },
+  "userOrganizations": {
+    "allOrganizations": "所有组织",
+    "joinedOrganizations": "加入组织",
+    "createdOrganizations": "创建组织",
+    "selectOrganization": "选择一个组织",
+    "searchUsers": "搜索用户",
+    "nothingToShow": "这里没有什么可显示的。",
+    "organizations": "组织机构",
+    "search": "搜索",
+    "filter": "筛选",
+    "searchByName": "按名称搜索",
+    "searchOrganizations": "搜索组织"
+  },
+  "userSidebarOrg": {
+    "yourOrganizations": "您的组织",
+    "noOrganizations": "您还没有加入任何组织。",
+    "viewAll": "查看全部",
+    "talawaUserPortal": "塔拉瓦用户门户",
+    "my organizations": "我的组织",
+    "communityProfile": "社区简介",
+    "users": "用户",
+    "requests": "请求",
+    "logout": "登出",
+    "settings": "设置",
+    "chat": "聊天",
+    "menu": "菜单"
+  },
+  "organizationSidebar": {
+    "viewAll": "查看全部",
+    "events": "活动",
+    "noEvents": "没有可显示的活动",
+    "noMembers": "没有可显示的会员",
+    "members": "成员"
+  },
+  "postCard": {
+    "likes": "喜欢",
+    "comments": "评论",
+    "viewPost": "查看帖子",
+    "editPost": "编辑帖子",
+    "postedOn": "发布于 {{date}}"
+  },
+  "home": {
+    "title": "帖子",
+    "posts": "帖子",
+    "post": "邮政",
+    "textArea": "你有什么心事吗?",
+    "feed": "喂养",
+    "loading": "加载中",
+    "pinnedPosts": "已标记的帖子",
+    "yourFeed": "您的动态",
+    "nothingToShowHere": "这里没有可显示的内容",
+    "somethingOnYourMind": "你有什么心事吗?",
+    "addPost": "添加帖子",
+    "startPost": "开始发帖",
+    "media": "媒体",
+    "event": "事件",
+    "article": "文章",
+    "postNowVisibleInFeed": "帖子现在在动态中可见"
+  },
+  "eventAttendance": {
+    "historical_statistics": "历史统计",
+    "Search member": "搜索成员",
+    "Member Name": "成员姓名",
+    "Status": "状态",
+    "Events Attended": "参加的活动",
+    "Task Assigned": "分配的任务",
+    "Member": "成员",
+    "Admin": "管理员",
+    "loading": "加载中...",
+    "noAttendees": "未找到参与者"
+  },
+  "onSpotAttendee": {
+    "title": "现场参与者",
+    "enterFirstName": "输入名字",
+    "enterLastName": "输入姓氏",
+    "enterEmail": "输入电子邮件",
+    "enterPhoneNo": "输入电话号码",
+    "selectGender": "选择性别",
+    "invalidDetailsMessage": "请填写所有必填字段",
+    "orgIdMissing": "组织ID缺失。请重试。",
+    "attendeeAddedSuccess": "参与者添加成功!",
+    "addAttendee": "添加",
+    "phoneNumber": "电话号码",
+    "addingAttendee": "添加中...",
+    "male": "男性",
+    "female": "女性",
+    "other": "其他"
+  },
+  "settings": {
+    "noeventsAttended": "未参加任何活动",
+    "eventAttended": "参加的活动",
+    "profileSettings": "配置文件设置",
+    "gender": "性别",
+    "phoneNumber": "电话号码",
+    "chooseFile": "选择文件",
+    "birthDate": "出生日期",
+    "grade": "教育等级",
+    "empStatus": "就业状况",
+    "maritalStatus": "婚姻状况",
+    "state": "市,州",
+    "country": "国家",
+    "resetChanges": "重置更改",
+    "profileDetails": "个人资料详情",
+    "deleteUserMessage": "通过单击“删除用户”按钮,您的用户及其事件、标签和所有相关数据将被永久删除。",
+    "copyLink": "复制个人资料链接",
+    "deleteUser": "删除用户",
+    "otherSettings": "其他设置",
+    "changeLanguage": "改变语言",
+    "sgender": "选择性别",
+    "gradePlaceholder": "输入年级",
+    "sEmpStatus": "选择就业状况",
+    "female": "女性",
+    "male": "男性",
+    "employed": "就业",
+    "other": "其他",
+    "sMaritalStatus": "选择婚姻状况",
+    "unemployed": "失业",
+    "married": "已婚",
+    "single": "单身的",
+    "widowed": "寡",
+    "divorced": "离婚",
+    "engaged": "已订婚的",
+    "separated": "分离的",
+    "grade1": "1级",
+    "grade2": "二年级",
+    "grade3": "三年级",
+    "grade4": "四年级",
+    "grade5": "五年级",
+    "grade6": "6年级",
+    "grade7": "7年级",
+    "grade8": "8级",
+    "grade9": "9年级",
+    "grade10": "10年级",
+    "grade11": "11年级",
+    "grade12": "12年级",
+    "graduate": "毕业",
+    "kg": "公斤",
+    "preKg": "预幼稚园",
+    "noGrade": "无等级",
+    "fullTime": "全职",
+    "partTime": "兼职",
+    "selectCountry": "选择一个国家",
+    "enterState": "输入城市或州",
+    "settings": "设置",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "emailAddress": "电子邮件地址",
+    "displayImage": "显示图像",
+    "address": "地址",
+    "saveChanges": "保存更改",
+    "joined": "已加入"
+  },
+  "donate": {
+    "title": "捐款",
+    "donations": "捐款",
+    "searchDonations": "搜索捐款",
+    "donateForThe": "为",
+    "amount": "数量",
+    "yourPreviousDonations": "您之前的捐款",
+    "donate": "捐",
+    "nothingToShow": "这里没有什么可显示的。",
+    "success": "捐赠成功",
+    "invalidAmount": "请输入捐赠金额的数值。",
+    "donationAmountDescription": "请输入捐款金额的数值。",
+    "donationOutOfRange": "捐款金额必须在 {{min}} 和 {{max}} 之间。",
+    "donateTo": "捐赠给"
+  },
+  "userEvents": {
+    "title": "活动",
+    "nothingToShow": "这里没有什么可显示的。",
+    "createEvent": "创建事件",
+    "recurring": "重复事件",
+    "startTime": "开始时间",
+    "endTime": "时间结束",
+    "listView": "列表显示",
+    "calendarView": "日历视图",
+    "allDay": "一整天",
+    "eventCreated": "活动已成功创建并发布。",
+    "eventDetails": "活动详情",
+    "eventTitle": "标题",
+    "enterTitle": "输入标题",
+    "enterDescription": "输入描述",
+    "enterLocation": "输入位置",
+    "publicEvent": "是公开的",
+    "registerable": "可注册",
+    "monthlyCalendarView": "月历",
+    "yearlyCalendarView": "年历",
+    "search": "搜索",
+    "cancel": "取消",
+    "create": "创建",
+    "eventDescription": "活动描述",
+    "eventLocation": "活动位置",
+    "startDate": "开始日期",
+    "endDate": "结束日期"
+  },
+  "userEventCard": {
+    "starts": "开始",
+    "ends": "结束",
+    "creator": "创作者",
+    "alreadyRegistered": "已经注册",
+    "location": "位置",
+    "register": "注册"
+  },
+  "advertisement": {
+    "title": "广告",
+    "activeAds": "活跃活动",
+    "archievedAds": "已完成的活动",
+    "pMessage": "此活动中不存在广告。",
+    "validLink": "链接有效",
+    "invalidLink": "链接无效",
+    "Rname": "输入广告名称",
+    "Rtype": "选择广告类型",
+    "Rmedia": "提供要显示的媒体内容",
+    "RstartDate": "选择开始日期",
+    "RendDate": "选择结束日期",
+    "RClose": "关上窗户",
+    "addNew": "制作新广告",
+    "EXname": "前任。",
+    "EXlink": "前任。 ",
+    "createAdvertisement": "创建广告",
+    "deleteAdvertisement": "删除广告",
+    "deleteAdvertisementMsg": "您想删除该广告吗?",
+    "view": "看法",
+    "editAdvertisement": "编辑广告",
+    "advertisementDeleted": "广告已成功删除。",
+    "endDateGreaterOrEqual": "结束日期应大于或等于开始日期",
+    "advertisementCreated": "广告已成功创建。",
+    "pHeading": "广告标题",
+    "delete": "删除",
+    "close": "关闭",
+    "no": "否",
+    "yes": "是",
+    "edit": "编辑",
+    "saveChanges": "保存更改",
+    "endOfResults": "结果结束"
+  },
+  "userChat": {
+    "chat": "聊天",
+    "contacts": "联系方式",
+    "search": "搜索",
+    "messages": "消息"
+  },
+  "userChatRoom": {
+    "selectContact": "选择联系人开始对话",
+    "sendMessage": "发信息"
+  },
+  "orgProfileField": {
+    "loading": "加载中...",
+    "noCustomField": "没有可用的自定义字段",
+    "customFieldName": "字段名称",
+    "enterCustomFieldName": "输入字段名称",
+    "customFieldType": "字段类型",
+    "Remove Custom Field": "删除自定义字段",
+    "fieldSuccessMessage": "字段添加成功",
+    "fieldRemovalSuccess": "字段删除成功",
+    "String": "字符串",
+    "Boolean": "布尔值",
+    "Date": "日期",
+    "Number": "数字",
+    "saveChanges": "保存更改"
+  },
+  "orgActionItemCategories": {
+    "enableButton": "使能够",
+    "disableButton": "禁用",
+    "updateActionItemCategory": "更新",
+    "actionItemCategoryName": "姓名",
+    "categoryDetails": "类别详情",
+    "enterName": "输入名字",
+    "successfulCreation": "操作项类别创建成功",
+    "successfulUpdation": "行动项目类别已成功更新",
+    "sameNameConflict": "请更改名称以进行更新",
+    "categoryEnabled": "已启用操作项类别",
+    "categoryDisabled": "操作项类别已禁用",
+    "noActionItemCategories": "没有操作项目类别",
+    "status": "地位",
+    "categoryDeleted": "操作项目类别已成功删除",
+    "deleteCategory": "删除类别",
+    "deleteCategoryMsg": "您确定要删除此操作项目类别吗?",
+    "createButton": "创建按钮",
+    "editButton": "编辑按钮"
+  },
+  "organizationVenues": {
+    "title": "场地",
+    "addVenue": "添加场地",
+    "venueDetails": "场地详情",
+    "venueName": "场地名称",
+    "enterVenueName": "输入场地名称",
+    "enterVenueDesc": "输入场地描述",
+    "capacity": "容量",
+    "enterVenueCapacity": "输入场地容量",
+    "image": "场地图片",
+    "uploadVenueImage": "上传场地图片",
+    "createVenue": "创建场地",
+    "venueAdded": "场地添加成功",
+    "editVenue": "更新地点",
+    "venueUpdated": "场地详情更新成功",
+    "sort": "种类",
+    "highestCapacity": "最高容量",
+    "lowestCapacity": "最低容量",
+    "noVenues": "未找到场地!",
+    "view": "看法",
+    "venueTitleError": "场地名称不能为空!",
+    "venueCapacityError": "容量必须是正数!",
+    "searchBy": "搜索依据",
+    "description": "描述",
+    "edit": "编辑",
+    "delete": "删除",
+    "name": "名称",
+    "desc": "描述"
+  },
+  "addMember": {
+    "title": "添加会员",
+    "addMembers": "添加会员",
+    "existingUser": "现有用户",
+    "newUser": "新用户",
+    "searchFullName": "按全名搜索",
+    "enterFirstName": "输入名字",
+    "enterLastName": "输入姓氏",
+    "enterConfirmPassword": "输入确认密码",
+    "organization": "组织",
+    "invalidDetailsMessage": "请提供所有必需的详细信息。",
+    "passwordNotMatch": "密码不匹配。",
+    "firstName": "名字",
+    "lastName": "姓氏",
+    "emailAddress": "电子邮件地址",
+    "enterEmail": "输入电子邮件",
+    "password": "密码",
+    "enterPassword": "输入密码",
+    "confirmPassword": "确认密码",
+    "cancel": "取消",
+    "create": "创建",
+    "addMember": "添加会员",
+    "user": "用户",
+    "profile": "个人资料"
+  },
+  "eventActionItems": {
+    "title": "行动项目",
+    "createActionItem": "创建行动项目",
+    "actionItemCategory": "行动项目类别",
+    "selectActionItemCategory": "选择操作项类别",
+    "selectAssignee": "选择受托人",
+    "preCompletionNotes": "笔记",
+    "postCompletionNotes": "完成说明",
+    "actionItemDetails": "行动项目详情",
+    "dueDate": "到期日",
+    "completionDate": "完成日期",
+    "editActionItem": "编辑操作项",
+    "deleteActionItem": "删除操作项",
+    "deleteActionItemMsg": "您想删除此操作项吗?",
+    "successfulDeletion": "操作项已成功删除",
+    "successfulCreation": "操作项创建成功",
+    "successfulUpdation": "操作项已成功更新",
+    "notes": "笔记",
+    "assignee": "受让人",
+    "assigner": "分配者",
+    "assignmentDate": "任务分配日期",
+    "status": "地位",
+    "actionItemActive": "积极的",
+    "actionItemStatus": "行动项目状态",
+    "actionItemCompleted": "行动项目已完成",
+    "markCompletion": "标记完成",
+    "save": "节省",
+    "yes": "是",
+    "no": "否"
+  },
+  "checkIn": {
+    "errorCheckingIn": "签到错误",
+    "checkedInSuccessfully": "成功签到"
+  },
+  "eventRegistrantsModal": {
+    "errorAddingAttendee": "添加与会者时出错",
+    "errorRemovingAttendee": "删除与会者时出错"
+  },
+  "userCampaigns": {
+    "title": "筹款活动",
+    "searchByName": "按名字搜索...",
+    "searchBy": "按...搜索",
+    "pledgers": "承诺者",
+    "campaigns": "活动",
+    "myPledges": "我的承诺",
+    "lowestAmount": "最低金额",
+    "highestAmount": "最高金额",
+    "lowestGoal": "最低目标",
+    "highestGoal": "最高目标",
+    "latestEndDate": "最晚结束日期",
+    "earliestEndDate": "最早结束日期",
+    "addPledge": "添加承诺",
+    "viewPledges": "查看承诺",
+    "noPledges": "未找到承诺",
+    "noCampaigns": "未找到活动"
+  },
+  "userPledges": {
+    "title": "我的承诺"
+  },
+  "eventVolunteers": {
+    "volunteers": "志愿者",
+    "volunteer": "志愿者",
+    "volunteerGroups": "志愿者小组",
+    "individuals": "个人",
+    "groups": "小组",
+    "status": "状态",
+    "noVolunteers": "无志愿者",
+    "noVolunteerGroups": "无志愿者小组",
+    "add": "添加",
+    "mostHoursVolunteered": "最多志愿时数",
+    "leastHoursVolunteered": "最少志愿时数",
+    "accepted": "已接受",
+    "addVolunteer": "添加志愿者",
+    "removeVolunteer": "移除志愿者",
+    "volunteerAdded": "志愿者已成功添加",
+    "volunteerRemoved": "志愿者已成功移除",
+    "volunteerGroupCreated": "志愿者小组已成功创建",
+    "volunteerGroupUpdated": "志愿者小组已成功更新",
+    "volunteerGroupDeleted": "志愿者小组已成功删除",
+    "removeVolunteerMsg": "您确定要移除此志愿者吗?",
+    "deleteVolunteerGroupMsg": "您确定要删除此志愿者小组吗?",
+    "leader": "领导",
+    "group": "小组",
+    "createGroup": "创建小组",
+    "updateGroup": "更新小组",
+    "deleteGroup": "删除小组",
+    "volunteersRequired": "需要志愿者",
+    "volunteerDetails": "志愿者详情",
+    "hoursVolunteered": "志愿时数",
+    "groupDetails": "小组详情",
+    "creator": "创建者",
+    "requests": "请求",
+    "noRequests": "无请求",
+    "latest": "最新",
+    "earliest": "最早",
+    "requestAccepted": "请求已成功接受",
+    "requestRejected": "请求已成功拒绝",
+    "details": "详情",
+    "manageGroup": "管理小组",
+    "mostVolunteers": "最多的志愿者",
+    "leastVolunteers": "最少的志愿者"
+  },
+  "userVolunteer": {
+    "title": "志愿服务",
+    "name": "标题",
+    "upcomingEvents": "即将举行的活动",
+    "requests": "请求",
+    "invitations": "邀请",
+    "groups": "志愿者小组",
+    "actions": "操作",
+    "searchByName": "按名称搜索",
+    "latestEndDate": "最晚结束日期",
+    "earliestEndDate": "最早结束日期",
+    "noEvents": "无即将举行的活动",
+    "volunteer": "志愿者",
+    "volunteered": "已志愿",
+    "join": "加入",
+    "joined": "已加入",
+    "searchByEventName": "按活动标题搜索",
+    "filter": "筛选",
+    "groupInvite": "小组邀请",
+    "individualInvite": "个人邀请",
+    "noInvitations": "无邀请",
+    "accept": "接受",
+    "reject": "拒绝",
+    "receivedLatest": "最近收到",
+    "receivedEarliest": "最早收到",
+    "invitationAccepted": "邀请已成功接受",
+    "invitationRejected": "邀请已成功拒绝",
+    "volunteerSuccess": "志愿请求成功",
+    "recurring": "重复",
+    "groupInvitationSubject": "邀请加入志愿者小组",
+    "eventInvitationSubject": "邀请参加活动志愿服务"
+  }
+}
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a379..0000000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77ac..23e6e6efe4 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -10,10 +10,10 @@
     {
       "src": "logo192.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "16x16"
     },
     {
-      "src": "logo512.png",
+      "src": "images/logo512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/public/markdown/images/install1.png b/public/markdown/images/install1.png
new file mode 100644
index 0000000000..632cb4f7a5
Binary files /dev/null and b/public/markdown/images/install1.png differ
diff --git a/public/markdown/images/install2.png b/public/markdown/images/install2.png
new file mode 100644
index 0000000000..308cfdbd56
Binary files /dev/null and b/public/markdown/images/install2.png differ
diff --git a/schema.graphql b/schema.graphql
new file mode 100644
index 0000000000..a0ff7bde8b
--- /dev/null
+++ b/schema.graphql
@@ -0,0 +1,1537 @@
+directive @auth on FIELD_DEFINITION
+
+directive @role(requires: UserType) on FIELD_DEFINITION
+
+type ActionItem {
+  _id: ID!
+  actionItemCategory: ActionItemCategory
+  assignee: User
+  assigner: User
+  assignmentDate: Date!
+  completionDate: Date!
+  createdAt: Date!
+  creator: User
+  dueDate: Date!
+  event: Event
+  isCompleted: Boolean!
+  postCompletionNotes: String
+  preCompletionNotes: String
+  updatedAt: Date!
+}
+
+type ActionItemCategory {
+  _id: ID!
+  createdAt: Date!
+  creator: User
+  isDisabled: Boolean!
+  name: String!
+  organization: Organization
+  updatedAt: Date!
+}
+
+type Address {
+  city: String
+  countryCode: String
+  dependentLocality: String
+  line1: String
+  line2: String
+  postalCode: String
+  sortingCode: String
+  state: String
+}
+
+input AddressInput {
+  city: String
+  countryCode: String
+  dependentLocality: String
+  line1: String
+  line2: String
+  postalCode: String
+  sortingCode: String
+  state: String
+}
+
+type Advertisement {
+  _id: ID!
+  createdAt: DateTime!
+  creator: User
+  endDate: Date!
+  mediaUrl: URL!
+  name: String!
+  orgId: ID!
+  startDate: Date!
+  type: AdvertisementType!
+  updatedAt: DateTime!
+}
+
+enum AdvertisementType {
+  BANNER
+  MENU
+  POPUP
+}
+
+type AdvertisementEdge {
+  cursor: String
+  node: Advertisement
+}
+
+type AdvertisementsConnection {
+  edges: [AdvertisementEdge]
+  pageInfo: DefaultConnectionPageInfo
+  totalCount: Int
+}
+
+type AgendaCategory {
+  _id: ID!
+  createdAt: Date!
+  createdBy: User!
+  description: String
+  name: String!
+  organization: Organization!
+  updatedAt: Date
+  updatedBy: User
+}
+
+type AggregatePost {
+  count: Int!
+}
+
+type AggregateUser {
+  count: Int!
+}
+
+scalar Any
+
+type AppUserProfile {
+  _id: ID!
+  adminFor: [Organization]
+  appLanguageCode: String!
+  createdEvents: [Event]
+  createdOrganizations: [Organization]
+  eventAdmin: [Event]
+  isSuperAdmin: Boolean!
+  pluginCreationAllowed: Boolean!
+  userId: User!
+}
+
+type AuthData {
+  accessToken: String!
+  appUserProfile: AppUserProfile!
+  refreshToken: String!
+  user: User!
+}
+
+type CheckIn {
+  _id: ID!
+  allotedRoom: String
+  allotedSeat: String
+  createdAt: DateTime!
+  event: Event!
+  feedbackSubmitted: Boolean!
+  time: DateTime!
+  updatedAt: DateTime!
+  user: User!
+}
+
+input CheckInInput {
+  allotedRoom: String
+  allotedSeat: String
+  eventId: ID!
+  userId: ID!
+}
+
+type CheckInStatus {
+  _id: ID!
+  checkIn: CheckIn
+  user: User!
+}
+
+type Comment {
+  _id: ID!
+  createdAt: DateTime!
+  creator: User
+  likeCount: Int
+  likedBy: [User]
+  post: Post!
+  text: String!
+  updatedAt: DateTime!
+}
+
+input CommentInput {
+  text: String!
+}
+
+type Community {
+  _id: ID!
+  logoUrl: String
+  name: String!
+  socialMediaUrls: SocialMediaUrls
+  timeout: Int
+  websiteLink: String
+}
+
+union ConnectionError = InvalidCursor | MaximumValueError
+
+type ConnectionPageInfo {
+  endCursor: String
+  hasNextPage: Boolean!
+  hasPreviousPage: Boolean!
+  startCursor: String
+}
+
+scalar CountryCode
+
+input CreateActionItemInput {
+  assigneeId: ID!
+  dueDate: Date
+  eventId: ID
+  preCompletionNotes: String
+}
+
+input CreateAgendaCategoryInput {
+  description: String
+  name: String!
+  organizationId: ID!
+}
+
+input CreateUserTagInput {
+  name: String!
+  organizationId: ID!
+  parentTagId: ID
+}
+
+input CursorPaginationInput {
+  cursor: String
+  direction: PaginationDirection!
+  limit: PositiveInt!
+}
+
+scalar Date
+
+scalar DateTime
+
+type DeletePayload {
+  success: Boolean!
+}
+
+type Donation {
+  _id: ID!
+  amount: Float!
+  createdAt: DateTime!
+  nameOfOrg: String!
+  nameOfUser: String!
+  orgId: ID!
+  payPalId: String!
+  updatedAt: DateTime!
+  userId: ID!
+}
+
+input DonationWhereInput {
+  id: ID
+  id_contains: ID
+  id_in: [ID!]
+  id_not: ID
+  id_not_in: [ID!]
+  id_starts_with: ID
+  name_of_user: String
+  name_of_user_contains: String
+  name_of_user_in: [String!]
+  name_of_user_not: String
+  name_of_user_not_in: [String!]
+  name_of_user_starts_with: String
+}
+
+enum EducationGrade {
+  GRADE_1
+  GRADE_2
+  GRADE_3
+  GRADE_4
+  GRADE_5
+  GRADE_6
+  GRADE_7
+  GRADE_8
+  GRADE_9
+  GRADE_10
+  GRADE_11
+  GRADE_12
+  GRADUATE
+  KG
+  NO_GRADE
+  PRE_KG
+}
+
+scalar EmailAddress
+
+enum EmploymentStatus {
+  FULL_TIME
+  PART_TIME
+  UNEMPLOYED
+}
+
+interface Error {
+  message: String!
+}
+
+type Event {
+  _id: ID!
+  actionItems: [ActionItem]
+  admins(adminId: ID): [User!]
+  allDay: Boolean!
+  attendees: [User]
+  attendeesCheckInStatus: [CheckInStatus!]!
+  averageFeedbackScore: Float
+  createdAt: DateTime!
+  creator: User
+  description: String!
+  endDate: Date
+  endTime: Time
+  feedback: [Feedback!]!
+  isPublic: Boolean!
+  isRegisterable: Boolean!
+  latitude: Latitude
+  location: String
+  longitude: Longitude
+  organization: Organization
+  recurrance: Recurrance
+  recurring: Boolean!
+  startDate: Date!
+  startTime: Time
+  status: Status!
+  title: String!
+  updatedAt: DateTime!
+}
+
+input EventAttendeeInput {
+  eventId: ID!
+  userId: ID!
+}
+
+input EventInput {
+  allDay: Boolean!
+  description: String!
+  endDate: Date
+  endTime: Time
+  isPublic: Boolean!
+  isRegisterable: Boolean!
+  latitude: Latitude
+  location: String
+  longitude: Longitude
+  organizationId: ID!
+  recurrance: Recurrance
+  recurring: Boolean!
+  startDate: Date!
+  startTime: Time
+  title: String!
+}
+
+enum EventOrderByInput {
+  allDay_ASC
+  allDay_DESC
+  description_ASC
+  description_DESC
+  endDate_ASC
+  endDate_DESC
+  endTime_ASC
+  endTime_DESC
+  id_ASC
+  id_DESC
+  location_ASC
+  location_DESC
+  recurrance_ASC
+  recurrance_DESC
+  startDate_ASC
+  startDate_DESC
+  startTime_ASC
+  startTime_DESC
+  title_ASC
+  title_DESC
+}
+
+type EventVolunteer {
+  _id: ID!
+  createdAt: DateTime!
+  creator: User
+  event: Event
+  isAssigned: Boolean
+  isInvited: Boolean
+  response: String
+  updatedAt: DateTime!
+  user: User!
+}
+
+input EventVolunteerInput {
+  eventId: ID!
+  userId: ID!
+}
+
+enum EventVolunteerResponse {
+  NO
+  YES
+}
+
+input EventWhereInput {
+  description: String
+  description_contains: String
+  description_in: [String!]
+  description_not: String
+  description_not_in: [String!]
+  description_starts_with: String
+  id: ID
+  id_contains: ID
+  id_in: [ID!]
+  id_not: ID
+  id_not_in: [ID!]
+  id_starts_with: ID
+  location: String
+  location_contains: String
+  location_in: [String!]
+  location_not: String
+  location_not_in: [String!]
+  location_starts_with: String
+  organization_id: ID
+  title: String
+  title_contains: String
+  title_in: [String!]
+  title_not: String
+  title_not_in: [String!]
+  title_starts_with: String
+}
+
+type ExtendSession {
+  accessToken: String!
+  refreshToken: String!
+}
+
+type Feedback {
+  _id: ID!
+  createdAt: DateTime!
+  event: Event!
+  rating: Int!
+  review: String
+  updatedAt: DateTime!
+}
+
+input FeedbackInput {
+  eventId: ID!
+  rating: Int!
+  review: String
+}
+
+interface FieldError {
+  message: String!
+  path: [String!]!
+}
+
+input ForgotPasswordData {
+  newPassword: String!
+  otpToken: String!
+  userOtp: String!
+}
+
+enum Frequency {
+  DAILY
+  MONTHLY
+  WEEKLY
+  YEARLY
+}
+
+enum Gender {
+  FEMALE
+  MALE
+  OTHER
+}
+
+type Group {
+  _id: ID!
+  admins: [User!]!
+  createdAt: DateTime!
+  description: String
+  organization: Organization!
+  title: String!
+  updatedAt: DateTime!
+}
+
+type InvalidCursor implements FieldError {
+  message: String!
+  path: [String!]!
+}
+
+scalar JSON
+
+type Language {
+  _id: ID!
+  createdAt: String!
+  en: String!
+  translation: [LanguageModel]
+}
+
+input LanguageInput {
+  en_value: String!
+  translation_lang_code: String!
+  translation_value: String!
+}
+
+type LanguageModel {
+  _id: ID!
+  createdAt: DateTime!
+  lang_code: String!
+  value: String!
+  verified: Boolean!
+}
+
+scalar Latitude
+
+input LoginInput {
+  email: EmailAddress!
+  password: String!
+}
+
+scalar Longitude
+
+enum MaritalStatus {
+  DIVORCED
+  ENGAGED
+  MARRIED
+  SEPERATED
+  SINGLE
+  WIDOWED
+}
+
+type Chat {
+  _id: ID!
+  isGroup: Boolean!
+  name: String
+  createdAt: DateTime!
+  creator: User
+  messages: [ChatMessage]
+  organization: Organization
+  updatedAt: DateTime!
+  users: [User!]!
+  admins: [User]
+  lastMessageId: String
+}
+
+type ChatMessage {
+  _id: ID!
+  createdAt: DateTime!
+  chatMessageBelongsTo: Chat!
+  messageContent: String!
+  type: String!
+  replyTo: ChatMessage
+  sender: User!
+  deletedBy: [User]
+  updatedAt: DateTime!
+}
+
+type MaximumLengthError implements FieldError {
+  message: String!
+  path: [String!]!
+}
+
+type MaximumValueError implements FieldError {
+  limit: Int!
+  message: String!
+  path: [String!]!
+}
+
+type MembershipRequest {
+  _id: ID!
+  organization: Organization!
+  user: User!
+}
+
+type MinimumLengthError implements FieldError {
+  limit: Int!
+  message: String!
+  path: [String!]!
+}
+
+type MinimumValueError implements FieldError {
+  message: String!
+  path: [String!]!
+}
+
+enum AdvertisementType {
+  BANNER
+  MENU
+  POPUP
+}
+
+input CreateAdvertisementInput {
+  endDate: Date!
+  name: String!
+  organizationId: ID!
+  startDate: Date!
+  type: AdvertisementType!
+  mediaFile: String!
+}
+
+type CreateAdvertisementPayload {
+  advertisement: Advertisement
+}
+
+input EditVenueInput {
+  capacity: Int
+  description: String
+  file: String
+  id: ID!
+  name: String
+}
+
+type Mutation {
+  acceptMembershipRequest(membershipRequestId: ID!): MembershipRequest!
+  addEventAttendee(data: EventAttendeeInput!): User!
+  addFeedback(data: FeedbackInput!): Feedback!
+  addLanguageTranslation(data: LanguageInput!): Language!
+  addOrganizationCustomField(
+    name: String!
+    organizationId: ID!
+    type: String!
+  ): OrganizationCustomField!
+  addOrganizationImage(file: String!, organizationId: String!): Organization!
+  addUserCustomData(
+    dataName: String!
+    dataValue: Any!
+    organizationId: ID!
+  ): UserCustomData!
+  addUserImage(file: String!): User!
+  addUserToUserFamily(familyId: ID!, userId: ID!): UserFamily!
+  adminRemoveEvent(eventId: ID!): Event!
+  assignUserTag(input: ToggleUserTagAssignInput!): User
+  blockPluginCreationBySuperadmin(
+    blockUser: Boolean!
+    userId: ID!
+  ): AppUserProfile!
+  blockUser(organizationId: ID!, userId: ID!): User!
+  cancelMembershipRequest(membershipRequestId: ID!): MembershipRequest!
+  checkIn(data: CheckInInput!): CheckIn!
+  createActionItem(
+    actionItemCategoryId: ID!
+    data: CreateActionItemInput!
+  ): ActionItem!
+  createActionItemCategory(
+    isDisabled: Boolean!
+    name: String!
+    organizationId: ID!
+  ): ActionItemCategory!
+  createAdmin(data: UserAndOrganizationInput!): AppUserProfile!
+  createAdvertisement(
+    endDate: Date!
+    link: String!
+    name: String!
+    orgId: ID!
+    startDate: Date!
+    type: String!
+  ): Advertisement!
+  createAgendaCategory(input: CreateAgendaCategoryInput!): AgendaCategory!
+  createComment(data: CommentInput!, postId: ID!): Comment
+  createChat(data: chatInput!): Chat!
+  createDonation(
+    amount: Float!
+    nameOfOrg: String!
+    nameOfUser: String!
+    orgId: ID!
+    payPalId: ID!
+    userId: ID!
+  ): Donation!
+  createEvent(
+    data: EventInput!
+    recurrenceRuleData: RecurrenceRuleInput
+  ): Event!
+  createEventVolunteer(data: EventVolunteerInput!): EventVolunteer!
+  createMember(input: UserAndOrganizationInput!): Organization!
+  createOrganization(data: OrganizationInput, file: String): Organization!
+  createPlugin(
+    pluginCreatedBy: String!
+    pluginDesc: String!
+    pluginName: String!
+    uninstalledOrgs: [ID!]
+  ): Plugin!
+  createPost(data: PostInput!, file: String): Post
+  createSampleOrganization: Boolean!
+  createUserFamily(data: createUserFamilyInput!): UserFamily!
+  createUserTag(input: CreateUserTagInput!): UserTag
+  createVenue(data: VenueInput!): Venue
+  deleteAdvertisement(id: ID!): DeletePayload!
+  deleteAdvertisementById(id: ID!): DeletePayload!
+  deleteAgendaCategory(id: ID!): ID!
+  deleteDonationById(id: ID!): DeletePayload!
+  deleteVenue(id: ID!): Venue
+  editVenue(data: EditVenueInput!): Venue
+  forgotPassword(data: ForgotPasswordData!): Boolean!
+  joinPublicOrganization(organizationId: ID!): User!
+  leaveOrganization(organizationId: ID!): User!
+  likeComment(id: ID!): Comment
+  likePost(id: ID!): Post
+  login(data: LoginInput!): AuthData!
+  logout: Boolean!
+  otp(data: OTPInput!): OtpData!
+  recaptcha(data: RecaptchaVerification!): Boolean!
+  refreshToken(refreshToken: String!): ExtendSession!
+  registerForEvent(id: ID!): Event!
+  rejectMembershipRequest(membershipRequestId: ID!): MembershipRequest!
+  removeActionItem(id: ID!): ActionItem!
+  removeAdmin(data: UserAndOrganizationInput!): AppUserProfile!
+  removeAdvertisement(id: ID!): Advertisement
+  removeComment(id: ID!): Comment
+  removeEvent(id: ID!): Event!
+  removeEventAttendee(data: EventAttendeeInput!): User!
+  removeEventVolunteer(id: ID!): EventVolunteer!
+  removeMember(data: UserAndOrganizationInput!): Organization!
+  removeOrganization(id: ID!): UserData!
+  removeOrganizationCustomField(
+    customFieldId: ID!
+    organizationId: ID!
+  ): OrganizationCustomField!
+  removeOrganizationImage(organizationId: String!): Organization!
+  removePost(id: ID!): Post
+  removeSampleOrganization: Boolean!
+  removeUserCustomData(organizationId: ID!): UserCustomData!
+  removeUserFamily(familyId: ID!): UserFamily!
+  removeUserFromUserFamily(familyId: ID!, userId: ID!): UserFamily!
+  removeUserImage: User!
+  removeUserTag(id: ID!): UserTag
+  revokeRefreshTokenForUser: Boolean!
+  saveFcmToken(token: String): Boolean!
+  sendMembershipRequest(organizationId: ID!): MembershipRequest!
+  sendMessageToChat(chatId: ID!, messageContent: String!, type: String!, replyTo: ID): ChatMessage!
+  signUp(data: UserInput!, file: String): AuthData!
+  togglePostPin(id: ID!, title: String): Post!
+  unassignUserTag(input: ToggleUserTagAssignInput!): User
+  unblockUser(organizationId: ID!, userId: ID!): User!
+  unlikeComment(id: ID!): Comment
+  unlikePost(id: ID!): Post
+  unregisterForEventByUser(id: ID!): Event!
+  updateActionItem(data: UpdateActionItemInput!, id: ID!): ActionItem
+  updateActionItemCategory(
+    data: UpdateActionItemCategoryInput!
+    id: ID!
+  ): ActionItemCategory
+  updateAdvertisement(
+    input: UpdateAdvertisementInput!
+  ): UpdateAdvertisementPayload
+  updateAgendaCategory(
+    id: ID!
+    input: UpdateAgendaCategoryInput!
+  ): AgendaCategory
+  updateEvent(data: UpdateEventInput, id: ID!): Event!
+  updateEventVolunteer(
+    data: UpdateEventVolunteerInput
+    id: ID!
+  ): EventVolunteer!
+  updateLanguage(languageCode: String!): User!
+  updateOrganization(
+    data: UpdateOrganizationInput
+    file: String
+    id: ID!
+  ): Organization!
+  updatePluginStatus(id: ID!, orgId: ID!): Plugin!
+  updatePost(data: PostUpdateInput, id: ID!): Post!
+  updateSessionTimeout(timeout: Int!): Boolean!
+  updateUserPassword(data: UpdateUserPasswordInput!): UserData!
+  updateUserProfile(data: UpdateUserInput, file: String): User!
+  updateUserRoleInOrganization(
+    organizationId: ID!
+    role: String!
+    userId: ID!
+  ): Organization!
+  updateUserTag(input: UpdateUserTagInput!): UserTag
+  updateUserType(data: UpdateUserTypeInput!): Boolean!
+  venues: [Venue]
+}
+
+input OTPInput {
+  email: EmailAddress!
+}
+
+type Organization {
+  _id: ID!
+  actionItemCategories: [ActionItemCategory]
+  address: Address
+  admins(adminId: ID): [User!]
+  agendaCategories: [AgendaCategory]
+  apiUrl: URL!
+  blockedUsers: [User]
+  createdAt: DateTime!
+  creator: User
+  customFields: [OrganizationCustomField!]!
+  description: String!
+  image: String
+  members: [User]
+  membershipRequests: [MembershipRequest]
+  name: String!
+  pinnedPosts: [Post]
+  updatedAt: DateTime!
+  userRegistrationRequired: Boolean!
+  userTags(
+    after: String
+    before: String
+    first: PositiveInt
+    last: PositiveInt
+  ): UserTagsConnection
+  visibleInSearch: Boolean!
+  venues: [Venue]
+}
+
+type OrganizationCustomField {
+  _id: ID!
+  name: String!
+  organizationId: String!
+  type: String!
+}
+
+type OrganizationCustomField {
+  _id: ID!
+  name: String!
+  organizationId: String!
+  type: String!
+}
+
+type OrganizationInfoNode {
+  _id: ID!
+  apiUrl: URL!
+  creator: User
+  description: String!
+  image: String
+  name: String!
+  userRegistrationRequired: Boolean!
+  visibleInSearch: Boolean!
+}
+
+input OrganizationInput {
+  address: AddressInput!
+  apiUrl: URL
+  attendees: String
+  description: String!
+  image: String
+  name: String!
+  userRegistrationRequired: Boolean
+  visibleInSearch: Boolean
+}
+
+enum OrganizationOrderByInput {
+  apiUrl_ASC
+  apiUrl_DESC
+  createdAt_ASC
+  createdAt_DESC
+  description_ASC
+  description_DESC
+  id_ASC
+  id_DESC
+  name_ASC
+  name_DESC
+}
+
+input OrganizationWhereInput {
+  apiUrl: URL
+  apiUrl_contains: URL
+  apiUrl_in: [URL!]
+  apiUrl_not: URL
+  apiUrl_not_in: [URL!]
+  apiUrl_starts_with: URL
+  description: String
+  description_contains: String
+  description_in: [String!]
+  description_not: String
+  description_not_in: [String!]
+  description_starts_with: String
+  id: ID
+  id_contains: ID
+  id_in: [ID!]
+  id_not: ID
+  id_not_in: [ID!]
+  id_starts_with: ID
+  name: String
+  name_contains: String
+  name_in: [String!]
+  name_not: String
+  name_not_in: [String!]
+  name_starts_with: String
+  userRegistrationRequired: Boolean
+  visibleInSearch: Boolean
+}
+
+type OtpData {
+  otpToken: String!
+}
+
+"""
+Information about pagination in a connection.
+"""
+type PageInfo {
+  currPageNo: Int
+
+  """
+  When paginating forwards, are there more items?
+  """
+  hasNextPage: Boolean!
+
+  """
+  When paginating backwards, are there more items?
+  """
+  hasPreviousPage: Boolean!
+  nextPageNo: Int
+  prevPageNo: Int
+  totalPages: Int
+}
+
+enum PaginationDirection {
+  BACKWARD
+  FORWARD
+}
+
+scalar PhoneNumber
+
+type Plugin {
+  _id: ID!
+  pluginCreatedBy: String!
+  pluginDesc: String!
+  pluginName: String!
+  uninstalledOrgs: [ID!]
+}
+
+type PluginField {
+  createdAt: DateTime!
+  key: String!
+  status: Status!
+  value: String!
+}
+
+input PluginFieldInput {
+  key: String!
+  value: String!
+}
+
+input PluginInput {
+  fields: [PluginFieldInput]
+  orgId: ID!
+  pluginKey: String
+  pluginName: String!
+  pluginType: Type
+}
+
+scalar PositiveInt
+
+type Post {
+  _id: ID
+  commentCount: Int
+  comments: [Comment]
+  createdAt: DateTime!
+  creator: User
+  imageUrl: URL
+  likeCount: Int
+  likedBy: [User]
+  organization: Organization!
+  pinned: Boolean
+  text: String!
+  title: String
+  updatedAt: DateTime!
+  videoUrl: URL
+}
+
+"""
+A connection to a list of items.
+"""
+type PostConnection {
+  aggregate: AggregatePost!
+
+  """
+  A list of edges.
+  """
+  edges: [Post]!
+
+  """
+  Information to aid in pagination.
+  """
+  pageInfo: PageInfo!
+}
+
+input PostInput {
+  _id: ID
+  imageUrl: URL
+  organizationId: ID!
+  pinned: Boolean
+  text: String!
+  title: String
+  videoUrl: URL
+}
+
+enum PostOrderByInput {
+  commentCount_ASC
+  commentCount_DESC
+  createdAt_ASC
+  createdAt_DESC
+  id_ASC
+  id_DESC
+  imageUrl_ASC
+  imageUrl_DESC
+  likeCount_ASC
+  likeCount_DESC
+  text_ASC
+  text_DESC
+  title_ASC
+  title_DESC
+  videoUrl_ASC
+  videoUrl_DESC
+}
+
+input PostUpdateInput {
+  imageUrl: String
+  text: String
+  title: String
+  videoUrl: String
+}
+
+input PostWhereInput {
+  id: ID
+  id_contains: ID
+  id_in: [ID!]
+  id_not: ID
+  id_not_in: [ID!]
+  id_starts_with: ID
+  text: String
+  text_contains: String
+  text_in: [String!]
+  text_not: String
+  text_not_in: [String!]
+  text_starts_with: String
+  title: String
+  title_contains: String
+  title_in: [String!]
+  title_not: String
+  title_not_in: [String!]
+  title_starts_with: String
+}
+
+type Query {
+  actionItem(id: ID!): ActionItem
+  actionItemCategoriesByOrganization(organizationId: ID!): [ActionItemCategory]
+  actionItemCategory(id: ID!): ActionItemCategory
+  actionItemsByEvent(eventId: ID!): [ActionItem]
+  actionItemsByOrganization(organizationId: ID!): [ActionItem]
+  adminPlugin(orgId: ID!): [Plugin]
+  agendaCategory(id: ID!): AgendaCategory!
+  checkAuth: User!
+  customDataByOrganization(organizationId: ID!): [UserCustomData!]!
+  customFieldsByOrganization(id: ID!): [OrganizationCustomField]
+  chatById(id: ID!): Chat!
+  chatsByUserId(id: ID!): [Chat]
+  event(id: ID!): Event
+  eventsAttendedByUser(id: ID, orderBy: EventOrderByInput): [Event]
+  eventVolunteersByEvent(id: ID!): [EventVolunteer]
+  eventsByOrganization(id: ID, orderBy: EventOrderByInput): [Event]
+  eventsByOrganizationConnection(
+    first: Int
+    orderBy: EventOrderByInput
+    skip: Int
+    where: EventWhereInput
+  ): [Event!]!
+  advertisementsConnection(after: String, before: String, first: PositiveInt, last: PositiveInt): AdvertisementsConnection
+  getDonationById(id: ID!): Donation!
+  getDonationByOrgId(orgId: ID!): [Donation]
+  getDonationByOrgIdConnection(
+    first: Int
+    orgId: ID!
+    skip: Int
+    where: DonationWhereInput
+  ): [Donation!]!
+  getPlugins: [Plugin]
+  getlanguage(lang_code: String!): [Translation]
+  hasSubmittedFeedback(eventId: ID!, userId: ID!): Boolean
+  isSampleOrganization(id: ID!): Boolean!
+  joinedOrganizations(id: ID): [Organization]
+  me: UserData!
+  myLanguage: String
+  fundsByOrganization(organizationId: ID!, where: FundWhereInput): [Fund]
+  organizations(id: ID, orderBy: OrganizationOrderByInput): [Organization]
+  organizationsConnection(
+    first: Int
+    orderBy: OrganizationOrderByInput
+    skip: Int
+    where: OrganizationWhereInput
+  ): [Organization]!
+  organizationsMemberConnection(
+    first: Int
+    orderBy: UserOrderByInput
+    orgId: ID!
+    skip: Int
+    where: UserWhereInput
+  ): UserConnection!
+  plugin(orgId: ID!): [Plugin]
+  getRecurringEvents(baseRecurringEventId: ID!): [Event]
+  post(id: ID!): Post
+  postsByOrganization(id: ID!, orderBy: PostOrderByInput): [Post]
+  postsByOrganizationConnection(
+    first: Int
+    id: ID!
+    orderBy: PostOrderByInput
+    skip: Int
+    where: PostWhereInput
+  ): PostConnection
+  registeredEventsByUser(id: ID, orderBy: EventOrderByInput): [Event]
+  registrantsByEvent(id: ID!): [User]
+  user(id: ID!): UserData!
+  userLanguage(userId: ID!): String
+  users(
+    first: Int
+    orderBy: UserOrderByInput
+    skip: Int
+    where: UserWhereInput
+  ): [UserData]
+  usersConnection(
+    first: Int
+    orderBy: UserOrderByInput
+    skip: Int
+    where: UserWhereInput
+  ): [UserData]!
+  venue(id:ID!):[Venue]
+}
+
+input RecaptchaVerification {
+  recaptchaToken: String!
+}
+
+enum Recurrance {
+  DAILY
+  MONTHLY
+  ONCE
+  WEEKLY
+  YEARLY
+}
+
+input RecurrenceRuleInput {
+  count: Int
+  frequency: Frequency
+  weekDays: [WeekDays]
+}
+
+enum Status {
+  ACTIVE
+  BLOCKED
+  DELETED
+}
+
+type Subscription {
+  messageSentToChat(userId: ID!): ChatMessage
+  onPluginUpdate: Plugin
+}
+
+scalar Time
+
+input ToggleUserTagAssignInput {
+  tagId: ID!
+  userId: ID!
+}
+
+type Translation {
+  en_value: String
+  lang_code: String
+  translation: String
+  verified: Boolean
+}
+
+enum Type {
+  PRIVATE
+  UNIVERSAL
+}
+
+scalar URL
+
+type UnauthenticatedError implements Error {
+  message: String!
+}
+
+type UnauthorizedError implements Error {
+  message: String!
+}
+
+input UpdateActionItemCategoryInput {
+  isDisabled: Boolean
+  name: String
+}
+
+input UpdateActionItemInput {
+  assigneeId: ID
+  completionDate: Date
+  dueDate: Date
+  isCompleted: Boolean
+  postCompletionNotes: String
+  preCompletionNotes: String
+}
+
+input UpdateAdvertisementInput {
+  _id: ID!
+  endDate: Date
+  link: String
+  name: String
+  startDate: Date
+  type: AdvertisementType
+}
+
+type UpdateAdvertisementPayload {
+  advertisement: Advertisement
+}
+
+input UpdateAgendaCategoryInput {
+  description: String
+  name: String
+}
+
+input UpdateEventInput {
+  allDay: Boolean
+  description: String
+  endDate: Date
+  endTime: Time
+  isPublic: Boolean
+  isRegisterable: Boolean
+  latitude: Latitude
+  location: String
+  longitude: Longitude
+  recurrance: Recurrance
+  recurring: Boolean
+  startDate: Date
+  startTime: Time
+  title: String
+}
+
+input UpdateEventVolunteerInput {
+  eventId: ID
+  isAssigned: Boolean
+  isInvited: Boolean
+  response: EventVolunteerResponse
+}
+
+input UpdateOrganizationInput {
+  address: AddressInput
+  description: String
+  name: String
+  userRegistrationRequired: Boolean
+  visibleInSearch: Boolean
+}
+
+input AddressInput {
+  city: String
+  countryCode: String
+  dependentLocality: String
+  line1: String
+  line2: String
+  postalCode: String
+  sortingCode: String
+  state: String
+}
+
+enum EducationGrade {
+  GRADE_1
+  GRADE_2
+  GRADE_3
+  GRADE_4
+  GRADE_5
+  GRADE_6
+  GRADE_7
+  GRADE_8
+  GRADE_9
+  GRADE_10
+  GRADE_11
+  GRADE_12
+  GRADUATE
+  KG
+  NO_GRADE
+  PRE_KG
+}
+
+enum EmploymentStatus {
+  FULL_TIME
+  PART_TIME
+  UNEMPLOYED
+}
+
+enum Gender {
+  FEMALE
+  MALE
+  OTHER
+}
+
+enum MaritalStatus {
+  DIVORCED
+  ENGAGED
+  MARRIED
+  SEPERATED
+  SINGLE
+  WIDOWED
+}
+
+input UpdateUserInput {
+  address: AddressInput
+  birthDate: Date
+  educationGrade: EducationGrade
+  email: EmailAddress
+  employmentStatus: EmploymentStatus
+  firstName: String
+  gender: Gender
+  lastName: String
+  maritalStatus: MaritalStatus
+  phone: UserPhoneInput
+}
+
+input UpdateUserPasswordInput {
+  confirmNewPassword: String!
+  newPassword: String!
+  previousPassword: String!
+}
+
+input UpdateUserTagInput {
+  _id: ID!
+  name: String!
+}
+
+input UpdateUserTypeInput {
+  id: ID
+  userType: String
+}
+
+scalar Upload
+
+type User {
+  _id: ID!
+  address: Address
+  appUserProfileId: AppUserProfile
+  birthDate: Date
+  createdAt: DateTime!
+  educationGrade: EducationGrade
+  email: EmailAddress!
+  employmentStatus: EmploymentStatus
+  firstName: String!
+  gender: Gender
+  image: String
+  joinedOrganizations: [Organization]
+  lastName: String!
+  maritalStatus: MaritalStatus
+  membershipRequests: [MembershipRequest]
+  organizationsBlockedBy: [Organization]
+  phone: UserPhone
+  pluginCreationAllowed: Boolean!
+  registeredEvents: [Event]
+  eventsAttended: [Event]
+  tagsAssignedWith(
+    after: String
+    before: String
+    first: PositiveInt
+    last: PositiveInt
+    organizationId: ID
+  ): UserTagsConnection
+  updatedAt: DateTime!
+}
+
+type Fund {
+  _id: ID!
+  campaigns: [FundraisingCampaign!]
+  createdAt: DateTime!
+  isArchived: Boolean!
+  isDefault: Boolean!
+  name: String!
+  creator: User
+  organizationId: ID!
+  refrenceNumber: String
+  taxDeductible: Boolean!
+  updatedAt: DateTime!
+}
+
+input FundWhereInput {
+  name_contains: String
+}
+
+input UserAndOrganizationInput {
+  organizationId: ID!
+  userId: ID!
+}
+
+type UserPhone {
+  home: PhoneNumber
+  mobile: PhoneNumber
+  work: PhoneNumber
+}
+
+type UserConnection {
+  aggregate: AggregateUser!
+  edges: [User]!
+  pageInfo: PageInfo!
+}
+
+type UserCustomData {
+  _id: ID!
+  organizationId: ID!
+  userId: ID!
+  values: JSON!
+}
+
+type UserData {
+  appUserProfile: AppUserProfile!
+  user: User!
+}
+
+type UserEdge {
+  cursor: String!
+  node: User!
+}
+
+type UserFamily {
+  _id: ID!
+  admins: [User!]!
+  creator: User!
+  title: String
+  users: [User!]!
+}
+
+input UserInput {
+  appLanguageCode: String
+  email: EmailAddress!
+  firstName: String!
+  lastName: String!
+  password: String!
+  selectedOrganization : ID!
+}
+
+enum UserOrderByInput {
+  email_ASC
+  email_DESC
+  firstName_ASC
+  firstName_DESC
+  id_ASC
+  id_DESC
+  lastName_ASC
+  lastName_DESC
+  createdAt_ASC
+  createdAt_DESC
+}
+
+type UserPhone {
+  home: PhoneNumber
+  mobile: PhoneNumber
+  work: PhoneNumber
+}
+
+input UserPhoneInput {
+  home: PhoneNumber
+  mobile: PhoneNumber
+  work: PhoneNumber
+}
+
+type UserTag {
+  _id: ID!
+  childTags(input: UserTagsConnectionInput!): UserTagsConnectionResult!
+  name: String!
+  organization: Organization
+  parentTag: UserTag
+  usersAssignedTo(input: UsersConnectionInput!): UsersConnectionResult!
+}
+
+type UserTagEdge {
+  cursor: String!
+  node: UserTag!
+}
+
+type UserTagsConnection {
+  edges: [UserTagEdge!]!
+  pageInfo: ConnectionPageInfo!
+}
+
+input UserTagsConnectionInput {
+  cursor: String
+  direction: PaginationDirection!
+  limit: PositiveInt!
+}
+
+type UserTagsConnectionResult {
+  data: UserTagsConnection
+  errors: [ConnectionError!]!
+}
+
+enum UserType {
+  ADMIN
+  NON_USER
+  SUPERADMIN
+  USER
+}
+
+input UserWhereInput {
+  email: EmailAddress
+  email_contains: EmailAddress
+  email_in: [EmailAddress!]
+  email_not: EmailAddress
+  email_not_in: [EmailAddress!]
+  email_starts_with: EmailAddress
+  event_title_contains: String
+  firstName: String
+  firstName_contains: String
+  firstName_in: [String!]
+  firstName_not: String
+  firstName_not_in: [String!]
+  firstName_starts_with: String
+  id: ID
+  id_contains: ID
+  id_in: [ID!]
+  id_not: ID
+  id_not_in: [ID!]
+  id_starts_with: ID
+  lastName: String
+  lastName_contains: String
+  lastName_in: [String!]
+  lastName_not: String
+  lastName_not_in: [String!]
+  lastName_starts_with: String
+}
+
+type UsersConnection {
+  edges: [UserEdge!]!
+  pageInfo: ConnectionPageInfo!
+}
+
+input UsersConnectionInput {
+  cursor: String
+  direction: PaginationDirection!
+  limit: PositiveInt!
+}
+
+type UsersConnectionResult {
+  data: UsersConnection
+  errors: [ConnectionError!]!
+}
+
+enum WeekDays {
+  FR
+  MO
+  SA
+  SU
+  TH
+  TU
+  WE
+}
+
+type Venue {
+  _id: ID!
+  capacity: Int!
+  description: String
+  imageUrl: URL
+  name: String!
+  organization: Organization!
+}
+
+input VenueInput {
+  capacity: Int!
+  description: String
+  file: String
+  name: String!
+  organizationId: ID!
+}
+
+input createUserFamilyInput {
+  title: String!
+  userIds: [ID!]!
+}
+
+input chatInput {
+  isGroup: Boolean!
+  organizationId: ID
+  userIds: [ID!]!
+  name: String
+}
\ No newline at end of file
diff --git a/scripts/__mocks__/@dicebear/collection.ts b/scripts/__mocks__/@dicebear/collection.ts
new file mode 100644
index 0000000000..9a7e1e9a57
--- /dev/null
+++ b/scripts/__mocks__/@dicebear/collection.ts
@@ -0,0 +1 @@
+export const initials = jest.fn();
diff --git a/scripts/__mocks__/@dicebear/core.ts b/scripts/__mocks__/@dicebear/core.ts
new file mode 100644
index 0000000000..41811e2f8d
--- /dev/null
+++ b/scripts/__mocks__/@dicebear/core.ts
@@ -0,0 +1,5 @@
+export const createAvatar = jest.fn(() => {
+  return {
+    toDataUri: jest.fn(() => 'mocked-data-uri'),
+  };
+});
diff --git a/scripts/__mocks__/@pdfme/generator.test.ts b/scripts/__mocks__/@pdfme/generator.test.ts
new file mode 100644
index 0000000000..592c193a71
--- /dev/null
+++ b/scripts/__mocks__/@pdfme/generator.test.ts
@@ -0,0 +1,47 @@
+import { generate } from './generator';
+import type { Template } from '@pdfme/common';
+
+describe('Testing mock generate util', () => {
+  test('should return a Promise', async () => {
+    const result = generate({
+      template: { schemas: [] } as Template,
+      inputs: [],
+    });
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  test('should resolve to a Uint8Array', async () => {
+    const result = generate({
+      template: { schemas: [] } as Template,
+      inputs: [],
+    });
+    expect(result).toBeInstanceOf(Uint8Array);
+  });
+
+  it('should throw an error when template is empty', async () => {
+    const emptyTemplate = { schemas: [] } as Template;
+    const validInputs = [{ field1: 'value1' }];
+
+    await expect(
+      generate({ template: emptyTemplate, inputs: validInputs }),
+    ).rejects.toThrow('Template or inputs cannot be empty.');
+  });
+
+  it('should throw an error when inputs are empty', async () => {
+    const validTemplate = { schemas: [{ name: 'field1' }] } as Template;
+    const emptyInputs: Record<string, string>[] = [];
+
+    await expect(
+      generate({ template: validTemplate, inputs: emptyInputs }),
+    ).rejects.toThrow('Template or inputs cannot be empty.');
+  });
+
+  it('should throw an error when both template and inputs are empty', async () => {
+    const emptyTemplate = { schemas: [] } as Template;
+    const emptyInputs: Record<string, string>[] = [];
+
+    await expect(
+      generate({ template: emptyTemplate, inputs: emptyInputs }),
+    ).rejects.toThrow('Template or inputs cannot be empty.');
+  });
+});
diff --git a/scripts/__mocks__/@pdfme/generator.ts b/scripts/__mocks__/@pdfme/generator.ts
new file mode 100644
index 0000000000..ac03ae6210
--- /dev/null
+++ b/scripts/__mocks__/@pdfme/generator.ts
@@ -0,0 +1,22 @@
+import type { Template } from '@pdfme/common';
+
+export const generate = async ({
+  template,
+  inputs,
+}: {
+  template: Template;
+  inputs: Record<string, string>[];
+}): Promise<Uint8Array> => {
+  if (template.schemas.length === 0 || inputs.length === 0) {
+    // console.log('pdf error: length : ', template, inputs, inputs.length);
+    throw new Error('Template or inputs cannot be empty.');
+  }
+  // Generate mock PDF-like header bytes
+  const pdfHeader = [0x25, 0x50, 0x44, 0x46]; // %PDF
+  // Add some random content based on input size
+  const contentSize = Math.min(template.schemas.length, inputs.length) * 10;
+  const mockContent = Array.from({ length: contentSize }, () =>
+    Math.floor(Math.random() * 256),
+  );
+  return Promise.resolve(new Uint8Array([...pdfHeader, ...mockContent]));
+};
diff --git a/scripts/__mocks__/fileMock.js b/scripts/__mocks__/fileMock.js
new file mode 100644
index 0000000000..06ad689c8b
--- /dev/null
+++ b/scripts/__mocks__/fileMock.js
@@ -0,0 +1,2 @@
+// __mocks__/fileMock.js
+module.exports = 'test-file-stub';
diff --git a/scripts/custom-test-env.js b/scripts/custom-test-env.js
new file mode 100644
index 0000000000..6174d8cf11
--- /dev/null
+++ b/scripts/custom-test-env.js
@@ -0,0 +1,16 @@
+import Environment from 'jest-environment-jsdom';
+import { TextEncoder, TextDecoder } from 'util';
+
+/**
+ * A custom environment to set the TextEncoder and TextDecoder variables, that is required by @pdfme during testing.
+ * Providing a polyfill to the environment for the same
+ */
+export default class CustomTestEnvironment extends Environment {
+  async setup() {
+    await super.setup();
+    if (typeof this.global.TextEncoder === 'undefined') {
+      this.global.TextEncoder = TextEncoder;
+      this.global.TextDecoder = TextDecoder;
+    }
+  }
+}
diff --git a/scripts/githooks/check-localstorage-usage.js b/scripts/githooks/check-localstorage-usage.js
new file mode 100755
index 0000000000..0a811df307
--- /dev/null
+++ b/scripts/githooks/check-localstorage-usage.js
@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+import { readFileSync, existsSync } from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+
+const args = process.argv.slice(2);
+const scanEntireRepo = args.includes('--scan-entire-repo');
+
+const containsSkipComment = (file) => {
+  try {
+    const content = readFileSync(file, 'utf-8');
+    return content.includes('// SKIP_LOCALSTORAGE_CHECK');
+  } catch (error) {
+    console.error(`Error reading file ${file}:`, error.message);
+    return false;
+  }
+};
+
+const getModifiedFiles = () => {
+  try {
+    if (scanEntireRepo) {
+      const result = execSync('git ls-files | grep ".tsx\\?$"', {
+        encoding: 'utf-8',
+      });
+      return result.trim().split('\n');
+    }
+
+    const result = execSync('git diff --cached --name-only', {
+      encoding: 'utf-8',
+    });
+    return result.trim().split('\n');
+  } catch (error) {
+    console.error('Error fetching modified files:', error.message);
+    process.exit(1);
+  }
+};
+
+const files = getModifiedFiles();
+
+const filesWithLocalStorage = [];
+
+const checkLocalStorageUsage = (file) => {
+  if (!file) {
+    return;
+  }
+
+  const fileName = path.basename(file);
+
+  // Skip files with specific names or containing a skip comment
+  if (
+    fileName === 'check-localstorage-usage.js' ||
+    fileName === 'useLocalstorage.test.ts' ||
+    fileName === 'useLocalstorage.ts' ||
+    containsSkipComment(file)
+  ) {
+    console.log(`Skipping file: ${file}`);
+    return;
+  }
+
+  try {
+    if (existsSync(file)) {
+      const content = readFileSync(file, 'utf-8');
+
+      if (
+        content.includes('localStorage.getItem') ||
+        content.includes('localStorage.setItem') ||
+        content.includes('localStorage.removeItem')
+      ) {
+        filesWithLocalStorage.push(file);
+      }
+    } else {
+      console.log(`File ${file} does not exist.`);
+    }
+  } catch (error) {
+    console.error(`Error reading file ${file}:`, error.message);
+  }
+};
+
+files.forEach(checkLocalStorageUsage);
+
+if (filesWithLocalStorage.length > 0) {
+  console.error('\x1b[31m%s\x1b[0m', '\nError: Found usage of localStorage');
+  console.error('\nFiles with localStorage usage:');
+  filesWithLocalStorage.forEach((file) => console.error(file));
+
+  console.info(
+    '\x1b[34m%s\x1b[0m',
+    '\nInfo: Consider using custom hook functions.'
+  );
+  console.info(
+    'Please use the getItem, setItem, and removeItem functions provided by the custom hook useLocalStorage.\n'
+  );
+
+  process.exit(1);
+}
diff --git a/scripts/githooks/update-toc.js b/scripts/githooks/update-toc.js
new file mode 100644
index 0000000000..268becfd13
--- /dev/null
+++ b/scripts/githooks/update-toc.js
@@ -0,0 +1,14 @@
+import fs from 'fs';
+import { execSync } from 'child_process';
+
+const markdownFiles = fs
+  .readdirSync('./')
+  .filter((file) => file.endsWith('.md'));
+
+markdownFiles.forEach((file) => {
+  const command = `markdown-toc -i "${file}" --bullets "-"`;
+  execSync(command, { stdio: 'inherit' });
+  
+});
+
+console.log('Table of contents updated successfully.');
diff --git a/setup.ts b/setup.ts
new file mode 100644
index 0000000000..2a6c437fa3
--- /dev/null
+++ b/setup.ts
@@ -0,0 +1,185 @@
+import dotenv from 'dotenv';
+import fs from 'fs';
+import inquirer from 'inquirer';
+import { checkConnection } from './src/setup/checkConnection/checkConnection';
+import { askForTalawaApiUrl } from './src/setup/askForTalawaApiUrl/askForTalawaApiUrl';
+import { checkEnvFile } from './src/setup/checkEnvFile/checkEnvFile';
+import { validateRecaptcha } from './src/setup/validateRecaptcha/validateRecaptcha';
+import { askForCustomPort } from './src/setup/askForCustomPort/askForCustomPort';
+
+export async function main(): Promise<void> {
+  console.log('Welcome to the Talawa Admin setup! 🚀');
+
+  if (!fs.existsSync('.env')) {
+    fs.openSync('.env', 'w');
+    const config = dotenv.parse(fs.readFileSync('.env.example'));
+    for (const key in config) {
+      fs.appendFileSync('.env', `${key}=${config[key]}\n`);
+    }
+  } else {
+    checkEnvFile();
+  }
+
+  let shouldSetCustomPort: boolean;
+
+  if (process.env.PORT) {
+    console.log(
+      `\nCustom port for development server already exists with the value:\n${process.env.PORT}`,
+    );
+    shouldSetCustomPort = true;
+  } else {
+    const { shouldSetCustomPortResponse } = await inquirer.prompt({
+      type: 'confirm',
+      name: 'shouldSetCustomPortResponse',
+      message: 'Would you like to set up a custom port?',
+      default: true,
+    });
+    shouldSetCustomPort = shouldSetCustomPortResponse;
+  }
+
+  if (shouldSetCustomPort) {
+    const customPort = await askForCustomPort();
+
+    const port = dotenv.parse(fs.readFileSync('.env')).PORT;
+
+    fs.readFile('.env', 'utf8', (err, data) => {
+      const result = data.replace(`PORT=${port}`, `PORT=${customPort}`);
+      fs.writeFileSync('.env', result, 'utf8');
+    });
+  }
+
+  let shouldSetTalawaApiUrl: boolean;
+
+  if (process.env.REACT_APP_TALAWA_URL) {
+    console.log(
+      `\nEndpoint for accessing talawa-api graphql service already exists with the value:\n${process.env.REACT_APP_TALAWA_URL}`,
+    );
+    shouldSetTalawaApiUrl = true;
+  } else {
+    const { shouldSetTalawaApiUrlResponse } = await inquirer.prompt({
+      type: 'confirm',
+      name: 'shouldSetTalawaApiUrlResponse',
+      message: 'Would you like to set up talawa-api endpoint?',
+      default: true,
+    });
+    shouldSetTalawaApiUrl = shouldSetTalawaApiUrlResponse;
+  }
+
+  if (shouldSetTalawaApiUrl) {
+    let isConnected = false,
+      endpoint = '';
+
+    while (!isConnected) {
+      endpoint = await askForTalawaApiUrl();
+      const url = new URL(endpoint);
+      isConnected = await checkConnection(url.origin);
+    }
+    const envPath = '.env';
+    const currentEnvContent = fs.readFileSync(envPath, 'utf8');
+    const talawaApiUrl = dotenv.parse(currentEnvContent).REACT_APP_TALAWA_URL;
+
+    const updatedEnvContent = currentEnvContent.replace(
+      `REACT_APP_TALAWA_URL=${talawaApiUrl}`,
+      `REACT_APP_TALAWA_URL=${endpoint}`,
+    );
+
+    fs.writeFileSync(envPath, updatedEnvContent, 'utf8');
+    const websocketUrl = endpoint.replace(/^http(s)?:\/\//, 'ws$1://');
+    const currentWebSocketUrl =
+      dotenv.parse(updatedEnvContent).REACT_APP_BACKEND_WEBSOCKET_URL;
+
+    const finalEnvContent = updatedEnvContent.replace(
+      `REACT_APP_BACKEND_WEBSOCKET_URL=${currentWebSocketUrl}`,
+      `REACT_APP_BACKEND_WEBSOCKET_URL=${websocketUrl}`,
+    );
+
+    fs.writeFileSync(envPath, finalEnvContent, 'utf8');
+  }
+
+  const { shouldUseRecaptcha } = await inquirer.prompt({
+    type: 'confirm',
+    name: 'shouldUseRecaptcha',
+    message: 'Would you like to set up ReCAPTCHA?',
+    default: true,
+  });
+
+  if (shouldUseRecaptcha) {
+    const useRecaptcha = dotenv.parse(
+      fs.readFileSync('.env'),
+    ).REACT_APP_USE_RECAPTCHA;
+
+    fs.readFile('.env', 'utf8', (err, data) => {
+      const result = data.replace(
+        `REACT_APP_USE_RECAPTCHA=${useRecaptcha}`,
+        `REACT_APP_USE_RECAPTCHA=yes`,
+      );
+      fs.writeFileSync('.env', result, 'utf8');
+    });
+    let shouldSetRecaptchaSiteKey: boolean;
+    if (process.env.REACT_APP_RECAPTCHA_SITE_KEY) {
+      console.log(
+        `\nreCAPTCHA site key already exists with the value ${process.env.REACT_APP_RECAPTCHA_SITE_KEY}`,
+      );
+      shouldSetRecaptchaSiteKey = true;
+    } else {
+      const { shouldSetRecaptchaSiteKeyResponse } = await inquirer.prompt({
+        type: 'confirm',
+        name: 'shouldSetRecaptchaSiteKeyResponse',
+        message: 'Would you like to set up a reCAPTCHA site key?',
+        default: true,
+      });
+      shouldSetRecaptchaSiteKey = shouldSetRecaptchaSiteKeyResponse;
+    }
+
+    if (shouldSetRecaptchaSiteKey) {
+      const { recaptchaSiteKeyInput } = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'recaptchaSiteKeyInput',
+          message: 'Enter your reCAPTCHA site key:',
+          validate: async (input: string): Promise<boolean | string> => {
+            if (validateRecaptcha(input)) {
+              return true;
+            }
+            return 'Invalid reCAPTCHA site key. Please try again.';
+          },
+        },
+      ]);
+
+      const recaptchaSiteKey = dotenv.parse(
+        fs.readFileSync('.env'),
+      ).REACT_APP_RECAPTCHA_SITE_KEY;
+
+      fs.readFile('.env', 'utf8', (err, data) => {
+        const result = data.replace(
+          `REACT_APP_RECAPTCHA_SITE_KEY=${recaptchaSiteKey}`,
+          `REACT_APP_RECAPTCHA_SITE_KEY=${recaptchaSiteKeyInput}`,
+        );
+        fs.writeFileSync('.env', result, 'utf8');
+      });
+    }
+  }
+
+  const { shouldLogErrors } = await inquirer.prompt({
+    type: 'confirm',
+    name: 'shouldLogErrors',
+    message:
+      'Would you like to log Compiletime and Runtime errors in the console?',
+    default: true,
+  });
+
+  if (shouldLogErrors) {
+    const logErrors = dotenv.parse(fs.readFileSync('.env')).ALLOW_LOGS;
+
+    fs.readFile('.env', 'utf8', (err, data) => {
+      const result = data.replace(`ALLOW_LOGS=${logErrors}`, 'ALLOW_LOGS=YES');
+      fs.writeFileSync('.env', result, 'utf8');
+    });
+  }
+
+  console.log(
+    '\nCongratulations! Talawa Admin has been successfully setup! 🥂🎉',
+  );
+}
+
+main();
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 2a68616d98..f4fba2ebf8 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,9 +1,111 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import 'jest-location-mock';
 import App from './App';
+import { store } from 'state/store';
+import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
+import i18nForTest from './utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import useLocalStorage from 'utils/useLocalstorage';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+const { setItem } = useLocalStorage();
+
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+// These modules are used by the Feedback components
+jest.mock('@mui/x-charts/PieChart', () => ({
+  pieArcLabelClasses: jest.fn(),
+  PieChart: jest.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: jest.fn(),
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: CHECK_AUTH,
+    },
+    result: {
+      data: {
+        checkAuth: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          createdAt: '2023-04-13T04:53:17.742+00:00',
+          image: 'john.jpg',
+          email: 'johndoe@gmail.com',
+          birthDate: '1990-01-01',
+          educationGrade: 'NO_GRADE',
+          employmentStatus: 'EMPLOYED',
+          gender: 'MALE',
+          maritalStatus: 'SINGLE',
+          address: {
+            line1: 'line1',
+            state: 'state',
+            countryCode: 'IND',
+          },
+          phone: {
+            mobile: '+8912313112',
+          },
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing the App Component', () => {
+  test('Component should be rendered properly and user is loggedin', async () => {
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <App />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    window.location.assign('/orglist');
+    await wait();
+    expect(window.location).toBeAt('/orglist');
+    expect(
+      screen.getByText(
+        'An open source application by Palisadoes Foundation volunteers',
+      ),
+    ).toBeTruthy();
+  });
+
+  test('Component should be rendered properly and user is loggedout', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <App />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
 });
diff --git a/src/App.tsx b/src/App.tsx
index c31b4f754d..37f3bc301e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,220 @@
-import React from 'react';
-import './App.css';
+import AddOnStore from 'components/AddOn/core/AddOnStore/AddOnStore';
+import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
+import SecuredRoute from 'components/SecuredRoute/SecuredRoute';
+import SuperAdminScreen from 'components/SuperAdminScreen/SuperAdminScreen';
+import * as installedPlugins from 'components/plugins/index';
+import { Route, Routes } from 'react-router-dom';
+import BlockUser from 'screens/BlockUser/BlockUser';
+import EventManagement from 'screens/EventManagement/EventManagement';
+import ForgotPassword from 'screens/ForgotPassword/ForgotPassword';
+import LoginPage from 'screens/LoginPage/LoginPage';
+import MemberDetail from 'screens/MemberDetail/MemberDetail';
+import OrgContribution from 'screens/OrgContribution/OrgContribution';
+import OrgList from 'screens/OrgList/OrgList';
+import OrgPost from 'screens/OrgPost/OrgPost';
+import OrgSettings from 'screens/OrgSettings/OrgSettings';
+import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
+import OrganizationDashboard from 'screens/OrganizationDashboard/OrganizationDashboard';
+import OrganizationEvents from 'screens/OrganizationEvents/OrganizationEvents';
+import OrganizaitionFundCampiagn from 'screens/OrganizationFundCampaign/OrganizationFundCampagins';
+import OrganizationFunds from 'screens/OrganizationFunds/OrganizationFunds';
+import FundCampaignPledge from 'screens/FundCampaignPledge/FundCampaignPledge';
+import OrganizationPeople from 'screens/OrganizationPeople/OrganizationPeople';
+import OrganizationTags from 'screens/OrganizationTags/OrganizationTags';
+import ManageTag from 'screens/ManageTag/ManageTag';
+import SubTags from 'screens/SubTags/SubTags';
+import PageNotFound from 'screens/PageNotFound/PageNotFound';
+import Requests from 'screens/Requests/Requests';
+import Users from 'screens/Users/Users';
+import CommunityProfile from 'screens/CommunityProfile/CommunityProfile';
+import OrganizationVenues from 'screens/OrganizationVenues/OrganizationVenues';
+import Leaderboard from 'screens/Leaderboard/Leaderboard';
 
-function App(): JSX.Element {
-  return (
-    <div>
-      <div>
-        <header>
-          <img />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
+import React, { useEffect } from 'react';
+// User Portal Components
+import Donate from 'screens/UserPortal/Donate/Donate';
+import Events from 'screens/UserPortal/Events/Events';
+import Posts from 'screens/UserPortal/Posts/Posts';
+import Organizations from 'screens/UserPortal/Organizations/Organizations';
+import People from 'screens/UserPortal/People/People';
+import Settings from 'screens/UserPortal/Settings/Settings';
+import Chat from 'screens/UserPortal/Chat/Chat';
+import { useQuery } from '@apollo/client';
+import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
+import Advertisements from 'components/Advertisements/Advertisements';
+import SecuredRouteForUser from 'components/UserPortal/SecuredRouteForUser/SecuredRouteForUser';
+
+import useLocalStorage from 'utils/useLocalstorage';
+import UserScreen from 'screens/UserPortal/UserScreen/UserScreen';
+import EventDashboardScreen from 'components/EventDashboardScreen/EventDashboardScreen';
+import Campaigns from 'screens/UserPortal/Campaigns/Campaigns';
+import Pledges from 'screens/UserPortal/Pledges/Pledges';
+import VolunteerManagement from 'screens/UserPortal/Volunteer/VolunteerManagement';
+
+const { setItem } = useLocalStorage();
+
+/**
+ * This is the main function for our application. It sets up all the routes and components,
+ * defining how the user can navigate through the app. The function uses React Router's `Routes`
+ * and `Route` components to map different URL paths to corresponding screens and components.
+ *
+ * ## Important Details
+ * - **UseEffect Hook**: This hook checks user authentication status using the `CHECK_AUTH` GraphQL query.
+ * - **Plugins**: It dynamically loads additional routes for any installed plugins.
+ * - **Routes**:
+ *   - The root route ("/") takes the user to the `LoginPage`.
+ *   - Protected routes are wrapped with the `SecuredRoute` component to ensure they are only accessible to authenticated users.
+ *   - Admin and Super Admin routes allow access to organization and user management screens.
+ *   - User portal routes allow end-users to interact with organizations, settings, chat, events, etc.
+ *
+ * @returns  The rendered routes and components of the application.
+ */
+
+function app(): JSX.Element {
+  /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
+
+  const getInstalledPlugins = async () => {
+    const plugins = await fetchInstalled();
+    updateInstalled(plugins);
+    updatePluginLinks(new PluginHelper().generateLinks(plugins));
+  };
+
+  const fetchInstalled = async () => {
+    const result = await fetch(`http://localhost:3005/installed`);
+    return await result.json();
+  };
+
+  useEffect(() => {
+    getInstalledPlugins();
+  }, []);*/
+
+  // const appRoutes = useSelector((state: RootState) => state.appRoutes);
+  // const { components } = appRoutes;
+
+  // TODO: Fetch Installed plugin extras and store for use within MainContent and Side Panel Components.
+
+  const { data, loading } = useQuery(CHECK_AUTH);
+
+  useEffect(() => {
+    if (data) {
+      setItem('name', `${data.checkAuth.firstName} ${data.checkAuth.lastName}`);
+      setItem('id', data.checkAuth._id);
+      setItem('email', data.checkAuth.email);
+      setItem('IsLoggedIn', 'TRUE');
+      setItem('FirstName', data.checkAuth.firstName);
+      setItem('LastName', data.checkAuth.lastName);
+      setItem('UserImage', data.checkAuth.image);
+      setItem('Email', data.checkAuth.email);
+    }
+  }, [data, loading]);
+
+  const extraRoutes = Object.entries(installedPlugins).map(
+    (
+      plugin: [
+        string,
+        (
+          | typeof installedPlugins.DummyPlugin
+          | typeof installedPlugins.DummyPlugin2
+        ),
+      ],
+      index: number,
+    ) => {
+      const ExtraComponent = plugin[1];
+      return (
+        <Route
+          key={index}
+          path={`/plugin/${plugin[0].toLowerCase()}`}
+          element={<ExtraComponent />}
+        />
       );
-    </div>
+    },
+  );
+
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<LoginPage />} />
+        <Route element={<SecuredRoute />}>
+          <Route element={<SuperAdminScreen />}>
+            <Route path="/orglist" element={<OrgList />} />
+            <Route path="/member" element={<MemberDetail />} />
+            <Route path="/users" element={<Users />} />
+            <Route path="/communityProfile" element={<CommunityProfile />} />
+          </Route>
+          <Route element={<OrganizationScreen />}>
+            <Route path="/requests/:orgId" element={<Requests />} />
+            <Route path="/orgdash/:orgId" element={<OrganizationDashboard />} />
+            <Route path="/orgpeople/:orgId" element={<OrganizationPeople />} />
+            <Route path="/orgtags/:orgId" element={<OrganizationTags />} />
+            <Route
+              path="orgtags/:orgId/manageTag/:tagId"
+              element={<ManageTag />}
+            />
+            <Route path="orgtags/:orgId/subTags/:tagId" element={<SubTags />} />
+            <Route path="/member/:orgId" element={<MemberDetail />} />
+            <Route path="/orgevents/:orgId" element={<OrganizationEvents />} />
+            <Route
+              path="/event/:orgId/:eventId"
+              element={<EventManagement />}
+            />
+            <Route
+              path="/orgactionitems/:orgId"
+              element={<OrganizationActionItems />}
+            />
+            <Route path="/orgfunds/:orgId" element={<OrganizationFunds />} />
+            <Route
+              path="/orgfundcampaign/:orgId/:fundId"
+              element={<OrganizaitionFundCampiagn />}
+            />
+            <Route
+              path="/fundCampaignPledge/:orgId/:fundCampaignId"
+              element={<FundCampaignPledge />}
+            />
+            <Route path="/orgcontribution" element={<OrgContribution />} />
+            <Route path="/orgpost/:orgId" element={<OrgPost />} />
+            <Route path="/orgsetting/:orgId" element={<OrgSettings />} />
+            <Route path="/orgstore/:orgId" element={<AddOnStore />} />
+            <Route path="/orgads/:orgId" element={<Advertisements />} />
+            <Route path="/blockuser/:orgId" element={<BlockUser />} />
+            <Route path="/orgvenues/:orgId" element={<OrganizationVenues />} />
+            <Route path="/leaderboard/:orgId" element={<Leaderboard />} />
+            {extraRoutes}
+          </Route>
+        </Route>
+        <Route path="/forgotPassword" element={<ForgotPassword />} />
+        {/* User Portal Routes */}
+        <Route element={<SecuredRouteForUser />}>
+          <Route path="/user/organizations" element={<Organizations />} />
+          <Route path="/user/settings" element={<Settings />} />
+          <Route path="/user/chat" element={<Chat />} />
+          <Route element={<UserScreen />}>
+            <Route path="/user/organizations" element={<Organizations />} />
+            <Route path="/user/organization/:orgId" element={<Posts />} />
+            <Route path="/user/people/:orgId" element={<People />} />
+            <Route path="/user/donate/:orgId" element={<Donate />} />
+            <Route path="/user/events/:orgId" element={<Events />} />
+            <Route path="/user/campaigns/:orgId" element={<Campaigns />} />
+            <Route path="/user/pledges/:orgId" element={<Pledges />} />
+            <Route
+              path="/user/volunteer/:orgId"
+              element={<VolunteerManagement />}
+            />
+            <Route element={<EventDashboardScreen />}>
+              <Route
+                path="/user/event/:orgId/:eventId"
+                element={<EventManagement />}
+              />
+            </Route>
+          </Route>
+        </Route>
+        {/* <SecuredRouteForUser path="/user/chat" component={Chat} /> */}
+        <Route path="*" element={<PageNotFound />} />
+      </Routes>
+    </>
   );
 }
 
-export default App;
+export default app;
diff --git a/src/Constant/constant.spec.ts b/src/Constant/constant.spec.ts
new file mode 100644
index 0000000000..c2e57d29df
--- /dev/null
+++ b/src/Constant/constant.spec.ts
@@ -0,0 +1,29 @@
+import {
+  AUTH_TOKEN,
+  BACKEND_URL,
+  RECAPTCHA_SITE_KEY,
+  REACT_APP_USE_RECAPTCHA,
+} from './constant';
+
+describe('constants', () => {
+  it('AUTH_TOKEN should be an empty string', () => {
+    expect(typeof AUTH_TOKEN).toEqual('string');
+    expect(AUTH_TOKEN).toEqual('');
+  });
+
+  it('BACKEND_URL should be equal to REACT_APP_TALAWA_URL environment variable', () => {
+    expect(BACKEND_URL).toEqual(process.env.REACT_APP_TALAWA_URL);
+  });
+
+  it('RECAPTCHA_SITE_KEY should be equal to REACT_APP_RECAPTCHA_SITE_KEY environment variable', () => {
+    expect(RECAPTCHA_SITE_KEY).toEqual(
+      process.env.REACT_APP_RECAPTCHA_SITE_KEY,
+    );
+  });
+
+  it('REACT_APP_USE_RECAPTCHA should be equal to REACT_APP_USE_RECAPTCHA environment variable', () => {
+    expect(REACT_APP_USE_RECAPTCHA).toEqual(
+      process.env.REACT_APP_USE_RECAPTCHA,
+    );
+  });
+});
diff --git a/src/Constant/constant.ts b/src/Constant/constant.ts
new file mode 100644
index 0000000000..d3b0efe1c1
--- /dev/null
+++ b/src/Constant/constant.ts
@@ -0,0 +1,7 @@
+export const AUTH_TOKEN = '';
+export const BACKEND_URL = process.env.REACT_APP_TALAWA_URL;
+export const RECAPTCHA_SITE_KEY = process.env.REACT_APP_RECAPTCHA_SITE_KEY;
+export const REACT_APP_USE_RECAPTCHA = process.env.REACT_APP_USE_RECAPTCHA;
+export const REACT_APP_CUSTOM_PORT = process.env.PORT;
+export const REACT_APP_BACKEND_WEBSOCKET_URL: string =
+  process.env.REACT_APP_BACKEND_WEBSOCKET_URL || '';
diff --git a/src/GraphQl/Mutations/ActionItemCategoryMutations.ts b/src/GraphQl/Mutations/ActionItemCategoryMutations.ts
new file mode 100644
index 0000000000..92e7b0968c
--- /dev/null
+++ b/src/GraphQl/Mutations/ActionItemCategoryMutations.ts
@@ -0,0 +1,48 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create an action item category.
+ *
+ * @param name - Name of the ActionItemCategory.
+ * @param isDisabled - Disabled status of the ActionItemCategory.
+ * @param organizationId - Organization to which the ActionItemCategory belongs.
+ */
+
+export const CREATE_ACTION_ITEM_CATEGORY_MUTATION = gql`
+  mutation CreateActionItemCategory(
+    $name: String!
+    $isDisabled: Boolean!
+    $organizationId: ID!
+  ) {
+    createActionItemCategory(
+      name: $name
+      isDisabled: $isDisabled
+      organizationId: $organizationId
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update an action item category.
+ *
+ * @param id - The id of the ActionItemCategory to be updated.
+ * @param name - Updated name of the ActionItemCategory.
+ * @param isDisabled - Updated disabled status of the ActionItemCategory.
+ */
+
+export const UPDATE_ACTION_ITEM_CATEGORY_MUTATION = gql`
+  mutation UpdateActionItemCategory(
+    $actionItemCategoryId: ID!
+    $name: String
+    $isDisabled: Boolean
+  ) {
+    updateActionItemCategory(
+      id: $actionItemCategoryId
+      data: { name: $name, isDisabled: $isDisabled }
+    ) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/ActionItemMutations.ts b/src/GraphQl/Mutations/ActionItemMutations.ts
new file mode 100644
index 0000000000..03ff50907f
--- /dev/null
+++ b/src/GraphQl/Mutations/ActionItemMutations.ts
@@ -0,0 +1,94 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create an action item.
+ *
+ * @param actionItemCategoryId - ActionItemCategory to which the ActionItem is related.
+ * @param assigneeId - User to whom the ActionItem is assigned.
+ * @param preCompletionNotes - Notes prior to completion.
+ * @param dueDate - Due date.
+ * @param eventId - Event to which the ActionItem is related.
+ * @param allottedHours - Hours allotted for the ActionItem.
+ */
+
+export const CREATE_ACTION_ITEM_MUTATION = gql`
+  mutation CreateActionItem(
+    $actionItemCategoryId: ID!
+    $assigneeId: ID!
+    $assigneeType: String!
+    $preCompletionNotes: String
+    $dDate: Date
+    $eventId: ID
+    $allottedHours: Float
+  ) {
+    createActionItem(
+      actionItemCategoryId: $actionItemCategoryId
+      data: {
+        assigneeId: $assigneeId
+        assigneeType: $assigneeType
+        preCompletionNotes: $preCompletionNotes
+        dueDate: $dDate
+        eventId: $eventId
+        allottedHours: $allottedHours
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update an action item.
+ *
+ * @param id - Id of the ActionItem to be updated.
+ * @param assigneeId - User to whom the ActionItem is assigned.
+ * @param preCompletionNotes - Notes prior to completion.
+ * @param postCompletionNotes - Notes on completion.
+ * @param dueDate - Due date.
+ * @param completionDate - Completion date.
+ * @param isCompleted - Whether the ActionItem has been completed.
+ */
+
+export const UPDATE_ACTION_ITEM_MUTATION = gql`
+  mutation UpdateActionItem(
+    $actionItemId: ID!
+    $assigneeId: ID!
+    $assigneeType: String!
+    $preCompletionNotes: String
+    $postCompletionNotes: String
+    $dueDate: Date
+    $completionDate: Date
+    $isCompleted: Boolean
+    $allottedHours: Float
+  ) {
+    updateActionItem(
+      id: $actionItemId
+      data: {
+        assigneeId: $assigneeId
+        assigneeType: $assigneeType
+        preCompletionNotes: $preCompletionNotes
+        postCompletionNotes: $postCompletionNotes
+        dueDate: $dueDate
+        completionDate: $completionDate
+        allottedHours: $allottedHours
+        isCompleted: $isCompleted
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to delete an action item.
+ *
+ * @param id - Id of the ActionItem to be updated.
+ */
+
+export const DELETE_ACTION_ITEM_MUTATION = gql`
+  mutation RemoveActionItem($actionItemId: ID!) {
+    removeActionItem(id: $actionItemId) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/AgendaCategoryMutations.ts b/src/GraphQl/Mutations/AgendaCategoryMutations.ts
new file mode 100644
index 0000000000..c344eca7e2
--- /dev/null
+++ b/src/GraphQl/Mutations/AgendaCategoryMutations.ts
@@ -0,0 +1,45 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create an agenda category.
+ *
+ * @param input - Name, Description, OrganizationID of the AgendaCategory.
+ */
+
+export const CREATE_AGENDA_ITEM_CATEGORY_MUTATION = gql`
+  mutation CreateAgendaCategory($input: CreateAgendaCategoryInput!) {
+    createAgendaCategory(input: $input) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to delete an agenda category.
+ *
+ * @param deleteAgendaCategoryId - The ID of the AgendaCategory to be deleted.
+ */
+
+export const DELETE_AGENDA_ITEM_CATEGORY_MUTATION = gql`
+  mutation DeleteAgendaCategory($deleteAgendaCategoryId: ID!) {
+    deleteAgendaCategory(id: $deleteAgendaCategoryId)
+  }
+`;
+
+/**
+ * GraphQL mutation to update an agenda category.
+ *
+ * @param updateAgendaCategoryId - The ID of the AgendaCategory to be updated.
+ * @param input - Updated Name, Description, OrganizationID of the AgendaCategory.
+ */
+
+export const UPDATE_AGENDA_ITEM_CATEGORY_MUTATION = gql`
+  mutation UpdateAgendaCategory(
+    $updateAgendaCategoryId: ID!
+    $input: UpdateAgendaCategoryInput!
+  ) {
+    updateAgendaCategory(id: $updateAgendaCategoryId, input: $input) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/AgendaItemMutations.ts b/src/GraphQl/Mutations/AgendaItemMutations.ts
new file mode 100644
index 0000000000..20191b1b7c
--- /dev/null
+++ b/src/GraphQl/Mutations/AgendaItemMutations.ts
@@ -0,0 +1,31 @@
+import gql from 'graphql-tag';
+
+export const CREATE_AGENDA_ITEM_MUTATION = gql`
+  mutation CreateAgendaItem($input: CreateAgendaItemInput!) {
+    createAgendaItem(input: $input) {
+      _id
+      title
+    }
+  }
+`;
+
+export const DELETE_AGENDA_ITEM_MUTATION = gql`
+  mutation RemoveAgendaItem($removeAgendaItemId: ID!) {
+    removeAgendaItem(id: $removeAgendaItemId) {
+      _id
+    }
+  }
+`;
+
+export const UPDATE_AGENDA_ITEM_MUTATION = gql`
+  mutation UpdateAgendaItem(
+    $updateAgendaItemId: ID!
+    $input: UpdateAgendaItemInput!
+  ) {
+    updateAgendaItem(id: $updateAgendaItemId, input: $input) {
+      _id
+      description
+      title
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/CampaignMutation.ts b/src/GraphQl/Mutations/CampaignMutation.ts
new file mode 100644
index 0000000000..d14d318af6
--- /dev/null
+++ b/src/GraphQl/Mutations/CampaignMutation.ts
@@ -0,0 +1,75 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a new fund Campaign.
+ *
+ * @param name - The name of the fund.
+ * @param fundId - The fund ID the campaign is associated with.
+ * @param fundingGoal - The funding goal of the campaign.
+ * @param startDate - The start date of the campaign.
+ * @param endDate - The end date of the campaign.
+ * @param currency - The currency of the campaign.
+ * @returns The ID of the created campaign.
+ */
+
+export const CREATE_CAMPAIGN_MUTATION = gql`
+  mutation createFundraisingCampaign(
+    $fundId: ID!
+    $organizationId: ID!
+    $name: String!
+    $fundingGoal: Float!
+    $startDate: Date!
+    $endDate: Date!
+    $currency: Currency!
+  ) {
+    createFundraisingCampaign(
+      data: {
+        fundId: $fundId
+        organizationId: $organizationId
+        name: $name
+        fundingGoal: $fundingGoal
+        startDate: $startDate
+        endDate: $endDate
+        currency: $currency
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update a fund Campaign.
+ *
+ * @param id - The ID of the campaign being updated.
+ * @param name - The name of the campaign.
+ * @param fundingGoal - The funding goal of the campaign.
+ * @param startDate - The start date of the campaign.
+ * @param endDate - The end date of the campaign.
+ * @param currency - The currency of the campaign.
+ * @returns The ID of the updated campaign.
+ */
+
+export const UPDATE_CAMPAIGN_MUTATION = gql`
+  mutation updateFundraisingCampaign(
+    $id: ID!
+    $name: String
+    $fundingGoal: Float
+    $startDate: Date
+    $endDate: Date
+    $currency: Currency
+  ) {
+    updateFundraisingCampaign(
+      id: $id
+      data: {
+        name: $name
+        fundingGoal: $fundingGoal
+        startDate: $startDate
+        endDate: $endDate
+        currency: $currency
+      }
+    ) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/CommentMutations.ts b/src/GraphQl/Mutations/CommentMutations.ts
new file mode 100644
index 0000000000..7a2ca00c83
--- /dev/null
+++ b/src/GraphQl/Mutations/CommentMutations.ts
@@ -0,0 +1,58 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a new comment on a post.
+ *
+ * @param comment - The text content of the comment.
+ * @param postId - The ID of the post to which the comment is being added.
+ * @returns The created comment object.
+ */
+
+export const CREATE_COMMENT_POST = gql`
+  mutation createComment($comment: String!, $postId: ID!) {
+    createComment(data: { text: $comment }, postId: $postId) {
+      _id
+      creator {
+        _id
+        firstName
+        lastName
+        email
+      }
+      likeCount
+      likedBy {
+        _id
+      }
+      text
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to like a comment.
+ *
+ * @param commentId - The ID of the comment to be liked.
+ * @returns The liked comment object.
+ */
+
+export const LIKE_COMMENT = gql`
+  mutation likeComment($commentId: ID!) {
+    likeComment(id: $commentId) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to unlike a comment.
+ *
+ * @param commentId - The ID of the comment to be unliked.
+ * @returns The unliked comment object.
+ */
+
+export const UNLIKE_COMMENT = gql`
+  mutation unlikeComment($commentId: ID!) {
+    unlikeComment(id: $commentId) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/EventAttendeeMutations.ts b/src/GraphQl/Mutations/EventAttendeeMutations.ts
new file mode 100644
index 0000000000..94d7d97705
--- /dev/null
+++ b/src/GraphQl/Mutations/EventAttendeeMutations.ts
@@ -0,0 +1,49 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to add an attendee to an event.
+ *
+ * @param userId - The ID of the user being added as an attendee.
+ * @param eventId - The ID of the event to which the user is being added as an attendee.
+ * @returns The updated event object with the added attendee.
+ */
+
+export const ADD_EVENT_ATTENDEE = gql`
+  mutation addEventAttendee($userId: ID!, $eventId: ID!) {
+    addEventAttendee(data: { userId: $userId, eventId: $eventId }) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to remove an attendee from an event.
+ *
+ * @param userId - The ID of the user being removed as an attendee.
+ * @param eventId - The ID of the event from which the user is being removed as an attendee.
+ * @returns The updated event object without the removed attendee.
+ */
+
+export const REMOVE_EVENT_ATTENDEE = gql`
+  mutation removeEventAttendee($userId: ID!, $eventId: ID!) {
+    removeEventAttendee(data: { userId: $userId, eventId: $eventId }) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to mark a user's check-in at an event.
+ *
+ * @param userId - The ID of the user checking in.
+ * @param eventId - The ID of the event at which the user is checking in.
+ * @returns The updated event object with the user's check-in information.
+ */
+
+export const MARK_CHECKIN = gql`
+  mutation checkIn($userId: ID!, $eventId: ID!) {
+    checkIn(data: { userId: $userId, eventId: $eventId }) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/EventVolunteerMutation.ts b/src/GraphQl/Mutations/EventVolunteerMutation.ts
new file mode 100644
index 0000000000..eb611361c0
--- /dev/null
+++ b/src/GraphQl/Mutations/EventVolunteerMutation.ts
@@ -0,0 +1,112 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create an event volunteer.
+ *
+ * @param data - The data required to create an event volunteer.
+ * @returns The ID of the created event volunteer.
+ *
+ */
+
+export const ADD_VOLUNTEER = gql`
+  mutation CreateEventVolunteer($data: EventVolunteerInput!) {
+    createEventVolunteer(data: $data) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to delete an event volunteer.
+ *
+ * @param id - The ID of the event volunteer being deleted.
+ * @returns The ID of the deleted event volunteer.
+ *
+ */
+export const DELETE_VOLUNTEER = gql`
+  mutation RemoveEventVolunteer($id: ID!) {
+    removeEventVolunteer(id: $id) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to create an event volunteer group.
+ *
+ * @param data - The data required to create an event volunteer group.
+ *  - data contains following fileds:
+ *      - eventId: string
+ *      - leaderId: string
+ *      - name: string
+ *      - description?: string
+ *      - volunteers: [string]
+ *      - volunteersRequired?: number
+ * @returns The ID of the created event volunteer group.
+ *
+ */
+export const CREATE_VOLUNTEER_GROUP = gql`
+  mutation CreateEventVolunteerGroup($data: EventVolunteerGroupInput!) {
+    createEventVolunteerGroup(data: $data) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update an event volunteer group.
+ * @param id - The ID of the event volunteer group being updated.
+ * @param data - The data required to update an event volunteer group.
+ * @returns The ID of the updated event volunteer group.
+ *
+ */
+
+export const UPDATE_VOLUNTEER_GROUP = gql`
+  mutation UpdateEventVolunteerGroup(
+    $id: ID!
+    $data: UpdateEventVolunteerGroupInput!
+  ) {
+    updateEventVolunteerGroup(id: $id, data: $data) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to delete an event volunteer group.
+ *
+ * @param id - The ID of the event volunteer group being deleted.
+ * @returns The ID of the deleted event volunteer group.
+ *
+ */
+export const DELETE_VOLUNTEER_GROUP = gql`
+  mutation RemoveEventVolunteerGroup($id: ID!) {
+    removeEventVolunteerGroup(id: $id) {
+      _id
+    }
+  }
+`;
+
+export const CREATE_VOLUNTEER_MEMBERSHIP = gql`
+  mutation CreateVolunteerMembership($data: VolunteerMembershipInput!) {
+    createVolunteerMembership(data: $data) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update an event volunteer group.
+ *
+ * @param id - The ID of the event volunteer group being updated.
+ * @param data - The data required to update an event volunteer group.
+ * @returns The ID of the updated event volunteer group.
+ *
+ */
+export const UPDATE_VOLUNTEER_MEMBERSHIP = gql`
+  mutation UpdateVolunteerMembership($id: ID!, $status: String!) {
+    updateVolunteerMembership(id: $id, status: $status) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/FundMutation.ts b/src/GraphQl/Mutations/FundMutation.ts
new file mode 100644
index 0000000000..dd7bac8e5f
--- /dev/null
+++ b/src/GraphQl/Mutations/FundMutation.ts
@@ -0,0 +1,71 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a new fund.
+ *
+ * @param name - The name of the fund.
+ * @param organizationId - The organization ID the fund is associated with.
+ * @param refrenceNumber - The reference number of the fund.
+ * @param taxDeductible - Whether the fund is tax deductible.
+ * @param isArchived - Whether the fund is archived.
+ * @param isDefault - Whether the fund is the default.
+ * @returns The ID of the created fund.
+ */
+export const CREATE_FUND_MUTATION = gql`
+  mutation CreateFund(
+    $name: String!
+    $organizationId: ID!
+    $refrenceNumber: String
+    $taxDeductible: Boolean!
+    $isArchived: Boolean!
+    $isDefault: Boolean!
+  ) {
+    createFund(
+      data: {
+        name: $name
+        organizationId: $organizationId
+        refrenceNumber: $refrenceNumber
+        taxDeductible: $taxDeductible
+        isArchived: $isArchived
+        isDefault: $isDefault
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update a fund.
+ *
+ * @param id - The ID of the fund being updated.
+ * @param name - The name of the fund.
+ * @param refrenceNumber - The reference number of the fund.
+ * @param taxDeductible - Whether the fund is tax deductible.
+ * @param isArchived - Whether the fund is archived.
+ * @param isDefault - Whether the fund is the default.
+ * @returns The ID of the updated fund.
+ */
+export const UPDATE_FUND_MUTATION = gql`
+  mutation UpdateFund(
+    $id: ID!
+    $name: String
+    $refrenceNumber: String
+    $taxDeductible: Boolean
+    $isArchived: Boolean
+    $isDefault: Boolean
+  ) {
+    updateFund(
+      id: $id
+      data: {
+        name: $name
+        refrenceNumber: $refrenceNumber
+        taxDeductible: $taxDeductible
+        isArchived: $isArchived
+        isDefault: $isDefault
+      }
+    ) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/OrganizationMutations.ts b/src/GraphQl/Mutations/OrganizationMutations.ts
new file mode 100644
index 0000000000..68a0c9026c
--- /dev/null
+++ b/src/GraphQl/Mutations/OrganizationMutations.ts
@@ -0,0 +1,252 @@
+import gql from 'graphql-tag';
+
+// Changes the role of a user in an organization
+/**
+ * GraphQL mutation to update the role of a user in an organization.
+ *
+ * @param organizationId - The ID of the organization in which the user's role is being updated.
+ * @param userId - The ID of the user whose role is being updated.
+ * @param role - The new role to be assigned to the user in the organization.
+ * @returns The updated user object with the new role in the organization.
+ */
+export const UPDATE_USER_ROLE_IN_ORG_MUTATION = gql`
+  mutation updateUserRoleInOrganization(
+    $organizationId: ID!
+    $userId: ID!
+    $role: String!
+  ) {
+    updateUserRoleInOrganization(
+      organizationId: $organizationId
+      userId: $userId
+      role: $role
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to create a sample organization.
+ *
+ * @returns The created sample organization object.
+ */
+
+export const CREATE_SAMPLE_ORGANIZATION_MUTATION = gql`
+  mutation {
+    createSampleOrganization
+  }
+`;
+
+/**
+ * GraphQL mutation to remove a sample organization.
+ *
+ * @returns The removed sample organization object.
+ */
+
+export const REMOVE_SAMPLE_ORGANIZATION_MUTATION = gql`
+  mutation {
+    removeSampleOrganization
+  }
+`;
+
+/**
+ * GraphQL mutation to create a chat between users in an organization.
+ *
+ * @param userIds - An array of user IDs participating in the direct chat.
+ * @param organizationId - The ID of the organization where the direct chat is created.
+ * @returns The created direct chat object.
+ */
+
+export const CREATE_CHAT = gql`
+  mutation createChat(
+    $userIds: [ID!]!
+    $organizationId: ID
+    $isGroup: Boolean!
+    $name: String
+  ) {
+    createChat(
+      data: {
+        userIds: $userIds
+        organizationId: $organizationId
+        isGroup: $isGroup
+        name: $name
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+export const SEND_MESSAGE_TO_CHAT = gql`
+  mutation sendMessageToChat(
+    $chatId: ID!
+    $replyTo: ID
+    $messageContent: String!
+  ) {
+    sendMessageToChat(
+      chatId: $chatId
+      replyTo: $replyTo
+      messageContent: $messageContent
+    ) {
+      _id
+      createdAt
+      messageContent
+      replyTo {
+        _id
+        createdAt
+        messageContent
+        sender {
+          _id
+          firstName
+          lastName
+        }
+        updatedAt
+      }
+      sender {
+        _id
+        firstName
+        lastName
+      }
+      updatedAt
+    }
+  }
+`;
+
+export const MESSAGE_SENT_TO_CHAT = gql`
+  subscription messageSentToChat($userId: ID!) {
+    messageSentToChat(userId: $userId) {
+      _id
+      createdAt
+      chatMessageBelongsTo {
+        _id
+      }
+      messageContent
+      replyTo {
+        _id
+        createdAt
+        messageContent
+        sender {
+          _id
+          firstName
+          lastName
+        }
+        updatedAt
+      }
+      sender {
+        _id
+        firstName
+        lastName
+      }
+      updatedAt
+    }
+  }
+`;
+
+//Plugin WebSocket listner
+
+/**
+ * GraphQL subscription to listen for updates on plugins.
+ *
+ * @returns An object containing information about the updated plugin.
+ */
+
+export const PLUGIN_SUBSCRIPTION = gql`
+  subscription onPluginUpdate {
+    onPluginUpdate {
+      pluginName
+      _id
+      pluginDesc
+      uninstalledOrgs
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to toggle the pinned status of a post.
+ *
+ * @param id - The ID of the post to be toggled.
+ * @returns The updated post object with the new pinned status.
+ */
+
+export const TOGGLE_PINNED_POST = gql`
+  mutation TogglePostPin($id: ID!) {
+    togglePostPin(id: $id) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to add a custom field to an organization.
+ *
+ * @param organizationId - The ID of the organization where the custom field is being added.
+ * @param type - The type of the custom field (e.g., String, Number).
+ * @param name - The name of the custom field.
+ * @returns The added organization custom field object.
+ */
+
+export const ADD_CUSTOM_FIELD = gql`
+  mutation ($organizationId: ID!, $type: String!, $name: String!) {
+    addOrganizationCustomField(
+      organizationId: $organizationId
+      type: $type
+      name: $name
+    ) {
+      name
+      type
+    }
+  }
+`;
+
+// Handles custom organization fields
+
+/**
+ * GraphQL mutation to remove a custom field from an organization.
+ *
+ * @param organizationId - The ID of the organization from which the custom field is being removed.
+ * @param customFieldId - The ID of the custom field to be removed.
+ * @returns The removed organization custom field object.
+ */
+
+export const REMOVE_CUSTOM_FIELD = gql`
+  mutation ($organizationId: ID!, $customFieldId: ID!) {
+    removeOrganizationCustomField(
+      organizationId: $organizationId
+      customFieldId: $customFieldId
+    ) {
+      type
+      name
+    }
+  }
+`;
+
+export const SEND_MEMBERSHIP_REQUEST = gql`
+  mutation ($organizationId: ID!) {
+    sendMembershipRequest(organizationId: $organizationId) {
+      _id
+      organization {
+        _id
+        name
+      }
+      user {
+        _id
+      }
+    }
+  }
+`;
+
+export const JOIN_PUBLIC_ORGANIZATION = gql`
+  mutation ($organizationId: ID!) {
+    joinPublicOrganization(organizationId: $organizationId) {
+      _id
+    }
+  }
+`;
+
+export const CANCEL_MEMBERSHIP_REQUEST = gql`
+  mutation ($membershipRequestId: ID!) {
+    cancelMembershipRequest(membershipRequestId: $membershipRequestId) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/PledgeMutation.ts b/src/GraphQl/Mutations/PledgeMutation.ts
new file mode 100644
index 0000000000..321f7aa697
--- /dev/null
+++ b/src/GraphQl/Mutations/PledgeMutation.ts
@@ -0,0 +1,84 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a pledge.
+ *
+ * @param campaignId - The ID of the campaign the pledge is associated with.
+ * @param amount - The amount of the pledge.
+ * @param currency - The currency of the pledge.
+ * @param startDate - The start date of the pledge.
+ * @param endDate - The end date of the pledge.
+ * @param userIds - The IDs of the users associated with the pledge.
+ * @returns The ID of the created pledge.
+ */
+export const CREATE_PlEDGE = gql`
+  mutation CreateFundraisingCampaignPledge(
+    $campaignId: ID!
+    $amount: Float!
+    $currency: Currency!
+    $startDate: Date!
+    $endDate: Date!
+    $userIds: [ID!]!
+  ) {
+    createFundraisingCampaignPledge(
+      data: {
+        campaignId: $campaignId
+        amount: $amount
+        currency: $currency
+        startDate: $startDate
+        endDate: $endDate
+        userIds: $userIds
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update a pledge.
+ *
+ * @param id - The ID of the pledge being updated.
+ * @param amount - The amount of the pledge.
+ * @param currency - The currency of the pledge.
+ * @param startDate - The start date of the pledge.
+ * @param endDate - The end date of the pledge.
+ * @returns The ID of the updated pledge.
+ */
+export const UPDATE_PLEDGE = gql`
+  mutation UpdateFundraisingCampaignPledge(
+    $id: ID!
+    $amount: Float
+    $currency: Currency
+    $startDate: Date
+    $endDate: Date
+    $users: [ID!]
+  ) {
+    updateFundraisingCampaignPledge(
+      id: $id
+      data: {
+        users: $users
+        amount: $amount
+        currency: $currency
+        startDate: $startDate
+        endDate: $endDate
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to delete a pledge.
+ *
+ * @param id - The ID of the pledge being deleted.
+ * @returns Whether the pledge was successfully deleted.
+ */
+export const DELETE_PLEDGE = gql`
+  mutation DeleteFundraisingCampaignPledge($id: ID!) {
+    removeFundraisingCampaignPledge(id: $id) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/TagMutations.ts b/src/GraphQl/Mutations/TagMutations.ts
new file mode 100644
index 0000000000..9f8ed1ec61
--- /dev/null
+++ b/src/GraphQl/Mutations/TagMutations.ts
@@ -0,0 +1,123 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a user tag.
+ *
+ * @param name - Name of the tag.
+ * @param tagColor - Color of the tag.
+ * @param parentTagId - Id of the parent tag.
+ * @param organizationId - Organization to which the tag belongs.
+ */
+
+export const CREATE_USER_TAG = gql`
+  mutation CreateUserTag(
+    $name: String!
+    $tagColor: String
+    $parentTagId: ID
+    $organizationId: ID!
+  ) {
+    createUserTag(
+      input: {
+        name: $name
+        organizationId: $organizationId
+        parentTagId: $parentTagId
+        tagColor: $tagColor
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to unsssign a user tag from a user.
+ *
+ * @param tagId - Id the tag.
+ * @param userId - Id of the user to be unassigned.
+ */
+
+export const UNASSIGN_USER_TAG = gql`
+  mutation UnassignUserTag($tagId: ID!, $userId: ID!) {
+    unassignUserTag(input: { tagId: $tagId, userId: $userId }) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update a user tag.
+ *
+ * @param tagId - Id the tag.
+ * @param name - Updated name of the tag.
+ */
+
+export const UPDATE_USER_TAG = gql`
+  mutation UpdateUserTag($tagId: ID!, $name: String!) {
+    updateUserTag(input: { tagId: $tagId, name: $name }) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to remove a user tag.
+ *
+ * @param id - Id of the tag to be removed .
+ */
+
+export const REMOVE_USER_TAG = gql`
+  mutation RemoveUserTag($id: ID!) {
+    removeUserTag(id: $id) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to add people to tag.
+ *
+ * @param tagId - Id of the tag to be assigned.
+ * @param userIds - Ids of the users to assign to.
+ */
+
+export const ADD_PEOPLE_TO_TAG = gql`
+  mutation AddPeopleToUserTag($tagId: ID!, $userIds: [ID!]!) {
+    addPeopleToUserTag(input: { tagId: $tagId, userIds: $userIds }) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to assign people to multiple tags.
+ *
+ * @param currentTagId - Id of the current tag.
+ * @param selectedTagIds - Ids of the selected tags to be assined.
+ */
+
+export const ASSIGN_TO_TAGS = gql`
+  mutation AssignToUserTags($currentTagId: ID!, $selectedTagIds: [ID!]!) {
+    assignToUserTags(
+      input: { currentTagId: $currentTagId, selectedTagIds: $selectedTagIds }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to remove people from multiple tags.
+ *
+ * @param currentTagId - Id of the current tag.
+ * @param selectedTagIds - Ids of the selected tags to be removed from.
+ */
+
+export const REMOVE_FROM_TAGS = gql`
+  mutation RemoveFromUserTags($currentTagId: ID!, $selectedTagIds: [ID!]!) {
+    removeFromUserTags(
+      input: { currentTagId: $currentTagId, selectedTagIds: $selectedTagIds }
+    ) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/VenueMutations.ts b/src/GraphQl/Mutations/VenueMutations.ts
new file mode 100644
index 0000000000..44ccc1f63e
--- /dev/null
+++ b/src/GraphQl/Mutations/VenueMutations.ts
@@ -0,0 +1,79 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a venue.
+ *
+ * @param name - Name of the venue.
+ * @param capacity - Ineteger representing capacity of venue.
+ * @param description - Description of the venue.
+ * @param file - Image file for the venue.
+ * @param organizationId - Organization to which the ActionItemCategory belongs.
+ */
+
+export const CREATE_VENUE_MUTATION = gql`
+  mutation createVenue(
+    $capacity: Int!
+    $description: String
+    $file: String
+    $name: String!
+    $organizationId: ID!
+  ) {
+    createVenue(
+      data: {
+        capacity: $capacity
+        description: $description
+        file: $file
+        name: $name
+        organizationId: $organizationId
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to update a venue.
+ *
+ * @param id - The id of the Venue to be updated.
+ * @param capacity - Ineteger representing capacity of venue.
+ * @param description - Description of the venue.
+ * @param file - Image file for the venue.
+ * @param name - Name of the venue.
+ */
+
+export const UPDATE_VENUE_MUTATION = gql`
+  mutation editVenue(
+    $capacity: Int
+    $description: String
+    $file: String
+    $id: ID!
+    $name: String
+  ) {
+    editVenue(
+      data: {
+        capacity: $capacity
+        description: $description
+        file: $file
+        id: $id
+        name: $name
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to delete a venue.
+ *
+ * @param id - The id of the Venue to be deleted.
+ */
+
+export const DELETE_VENUE_MUTATION = gql`
+  mutation DeleteVenue($id: ID!) {
+    deleteVenue(id: $id) {
+      _id
+    }
+  }
+`;
diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts
new file mode 100644
index 0000000000..628328987e
--- /dev/null
+++ b/src/GraphQl/Mutations/mutations.ts
@@ -0,0 +1,742 @@
+import gql from 'graphql-tag';
+
+export const UNBLOCK_USER_MUTATION = gql`
+  mutation UnblockUser($userId: ID!, $orgId: ID!) {
+    unblockUser(organizationId: $orgId, userId: $userId) {
+      _id
+    }
+  }
+`;
+
+// to block the user
+
+export const BLOCK_USER_MUTATION = gql`
+  mutation BlockUser($userId: ID!, $orgId: ID!) {
+    blockUser(organizationId: $orgId, userId: $userId) {
+      _id
+    }
+  }
+`;
+
+// to reject the organization request
+
+export const REJECT_ORGANIZATION_REQUEST_MUTATION = gql`
+  mutation RejectMembershipRequest($id: ID!) {
+    rejectMembershipRequest(membershipRequestId: $id) {
+      _id
+    }
+  }
+`;
+
+// to accept the organization request
+
+export const ACCEPT_ORGANIZATION_REQUEST_MUTATION = gql`
+  mutation AcceptMembershipRequest($id: ID!) {
+    acceptMembershipRequest(membershipRequestId: $id) {
+      _id
+    }
+  }
+`;
+
+// to update the organization details
+
+export const UPDATE_ORGANIZATION_MUTATION = gql`
+  mutation UpdateOrganization(
+    $id: ID!
+    $name: String
+    $description: String
+    $address: AddressInput
+    $userRegistrationRequired: Boolean
+    $visibleInSearch: Boolean
+    $file: String
+  ) {
+    updateOrganization(
+      id: $id
+      data: {
+        name: $name
+        description: $description
+        userRegistrationRequired: $userRegistrationRequired
+        visibleInSearch: $visibleInSearch
+        address: $address
+      }
+      file: $file
+    ) {
+      _id
+    }
+  }
+`;
+
+// fragment for defining the Address input type.
+export const ADDRESS_DETAILS_FRAGMENT = gql`
+  fragment AddressDetails on AddressInput {
+    city: String
+    countryCode: String
+    dependentLocality: String
+    line1: String
+    line2: String
+    postalCode: String
+    sortingCode: String
+    state: String
+  }
+`;
+
+// to update the details of the user
+
+export const UPDATE_USER_MUTATION = gql`
+  mutation UpdateUserProfile(
+    $firstName: String
+    $lastName: String
+    $gender: Gender
+    $email: EmailAddress
+    $phoneNumber: PhoneNumber
+    $birthDate: Date
+    $grade: EducationGrade
+    $empStatus: EmploymentStatus
+    $maritalStatus: MaritalStatus
+    $address: String
+    $state: String
+    $country: String
+    $image: String
+    $appLanguageCode: String
+  ) {
+    updateUserProfile(
+      data: {
+        firstName: $firstName
+        lastName: $lastName
+        gender: $gender
+        email: $email
+        phone: { mobile: $phoneNumber }
+        birthDate: $birthDate
+        educationGrade: $grade
+        employmentStatus: $empStatus
+        maritalStatus: $maritalStatus
+        address: { line1: $address, state: $state, countryCode: $country }
+        appLanguageCode: $appLanguageCode
+      }
+      file: $image
+    ) {
+      _id
+    }
+  }
+`;
+
+// to update the password of user
+
+export const UPDATE_USER_PASSWORD_MUTATION = gql`
+  mutation UpdateUserPassword(
+    $previousPassword: String!
+    $newPassword: String!
+    $confirmNewPassword: String!
+  ) {
+    updateUserPassword(
+      data: {
+        previousPassword: $previousPassword
+        newPassword: $newPassword
+        confirmNewPassword: $confirmNewPassword
+      }
+    ) {
+      user {
+        _id
+      }
+    }
+  }
+`;
+
+// to sign up in the talawa admin
+
+export const SIGNUP_MUTATION = gql`
+  mutation SignUp(
+    $firstName: String!
+    $lastName: String!
+    $email: EmailAddress!
+    $password: String!
+    $orgId: ID!
+  ) {
+    signUp(
+      data: {
+        firstName: $firstName
+        lastName: $lastName
+        email: $email
+        password: $password
+        selectedOrganization: $orgId
+      }
+    ) {
+      user {
+        _id
+      }
+      accessToken
+      refreshToken
+    }
+  }
+`;
+
+// to login in the talawa admin
+
+export const LOGIN_MUTATION = gql`
+  mutation Login($email: EmailAddress!, $password: String!) {
+    login(data: { email: $email, password: $password }) {
+      user {
+        _id
+        firstName
+        lastName
+        image
+        email
+      }
+      appUserProfile {
+        adminFor {
+          _id
+        }
+        isSuperAdmin
+        appLanguageCode
+      }
+      accessToken
+      refreshToken
+    }
+  }
+`;
+
+// to get the refresh token
+
+export const REFRESH_TOKEN_MUTATION = gql`
+  mutation RefreshToken($refreshToken: String!) {
+    refreshToken(refreshToken: $refreshToken) {
+      refreshToken
+      accessToken
+    }
+  }
+`;
+
+// to revoke a refresh token
+
+export const REVOKE_REFRESH_TOKEN = gql`
+  mutation RevokeRefreshTokenForUser {
+    revokeRefreshTokenForUser
+  }
+`;
+
+// To verify the google recaptcha
+
+export const RECAPTCHA_MUTATION = gql`
+  mutation Recaptcha($recaptchaToken: String!) {
+    recaptcha(data: { recaptchaToken: $recaptchaToken })
+  }
+`;
+
+// to create the organization
+
+export const CREATE_ORGANIZATION_MUTATION = gql`
+  mutation CreateOrganization(
+    $description: String!
+    $address: AddressInput!
+    $name: String!
+    $visibleInSearch: Boolean!
+    $userRegistrationRequired: Boolean!
+    $image: String
+  ) {
+    createOrganization(
+      data: {
+        description: $description
+        address: $address
+        name: $name
+        visibleInSearch: $visibleInSearch
+        userRegistrationRequired: $userRegistrationRequired
+      }
+      file: $image
+    ) {
+      _id
+    }
+  }
+`;
+
+// to delete the organization
+
+export const DELETE_ORGANIZATION_MUTATION = gql`
+  mutation RemoveOrganization($id: ID!) {
+    removeOrganization(id: $id) {
+      user {
+        _id
+      }
+    }
+  }
+`;
+
+// to create the event by any organization
+
+export const CREATE_EVENT_MUTATION = gql`
+  mutation CreateEvent(
+    $title: String!
+    $description: String!
+    $recurring: Boolean!
+    $isPublic: Boolean!
+    $isRegisterable: Boolean!
+    $organizationId: ID!
+    $startDate: Date!
+    $endDate: Date!
+    $allDay: Boolean!
+    $startTime: Time
+    $endTime: Time
+    $location: String
+    $recurrenceStartDate: Date
+    $recurrenceEndDate: Date
+    $frequency: Frequency
+    $weekDays: [WeekDays]
+    $count: PositiveInt
+    $interval: PositiveInt
+    $weekDayOccurenceInMonth: Int
+  ) {
+    createEvent(
+      data: {
+        title: $title
+        description: $description
+        recurring: $recurring
+        isPublic: $isPublic
+        isRegisterable: $isRegisterable
+        organizationId: $organizationId
+        startDate: $startDate
+        endDate: $endDate
+        allDay: $allDay
+        startTime: $startTime
+        endTime: $endTime
+        location: $location
+      }
+      recurrenceRuleData: {
+        recurrenceStartDate: $recurrenceStartDate
+        recurrenceEndDate: $recurrenceEndDate
+        frequency: $frequency
+        weekDays: $weekDays
+        interval: $interval
+        count: $count
+        weekDayOccurenceInMonth: $weekDayOccurenceInMonth
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+// to delete any event by any organization
+
+export const DELETE_EVENT_MUTATION = gql`
+  mutation RemoveEvent(
+    $id: ID!
+    $recurringEventDeleteType: RecurringEventMutationType
+  ) {
+    removeEvent(id: $id, recurringEventDeleteType: $recurringEventDeleteType) {
+      _id
+    }
+  }
+`;
+
+// to remove an admin from an organization
+export const REMOVE_ADMIN_MUTATION = gql`
+  mutation RemoveAdmin($orgid: ID!, $userid: ID!) {
+    removeAdmin(data: { organizationId: $orgid, userId: $userid }) {
+      _id
+    }
+  }
+`;
+
+// to Remove member from an organization
+export const REMOVE_MEMBER_MUTATION = gql`
+  mutation RemoveMember($orgid: ID!, $userid: ID!) {
+    removeMember(data: { organizationId: $orgid, userId: $userid }) {
+      _id
+    }
+  }
+`;
+
+// to add the admin
+export const ADD_ADMIN_MUTATION = gql`
+  mutation CreateAdmin($orgid: ID!, $userid: ID!) {
+    createAdmin(data: { organizationId: $orgid, userId: $userid }) {
+      user {
+        _id
+      }
+    }
+  }
+`;
+
+export const ADD_MEMBER_MUTATION = gql`
+  mutation CreateMember($orgid: ID!, $userid: ID!) {
+    createMember(input: { organizationId: $orgid, userId: $userid }) {
+      organization {
+        _id
+      }
+    }
+  }
+`;
+
+export const CREATE_POST_MUTATION = gql`
+  mutation CreatePost(
+    $text: String!
+    $title: String!
+    $imageUrl: URL
+    $videoUrl: URL
+    $organizationId: ID!
+    $file: String
+    $pinned: Boolean
+  ) {
+    createPost(
+      data: {
+        text: $text
+        title: $title
+        imageUrl: $imageUrl
+        videoUrl: $videoUrl
+        organizationId: $organizationId
+        pinned: $pinned
+      }
+      file: $file
+    ) {
+      _id
+    }
+  }
+`;
+
+export const DELETE_POST_MUTATION = gql`
+  mutation RemovePost($id: ID!) {
+    removePost(id: $id) {
+      _id
+    }
+  }
+`;
+
+export const GENERATE_OTP_MUTATION = gql`
+  mutation Otp($email: EmailAddress!) {
+    otp(data: { email: $email }) {
+      otpToken
+    }
+  }
+`;
+
+export const FORGOT_PASSWORD_MUTATION = gql`
+  mutation ForgotPassword(
+    $userOtp: String!
+    $newPassword: String!
+    $otpToken: String!
+  ) {
+    forgotPassword(
+      data: {
+        userOtp: $userOtp
+        newPassword: $newPassword
+        otpToken: $otpToken
+      }
+    )
+  }
+`;
+
+/**
+ * {@label UPDATE_INSTALL_STATUS_PLUGIN_MUTATION}
+ * @remarks
+ * used to toggle `installStatus` (boolean value) of a Plugin
+ */
+export const UPDATE_INSTALL_STATUS_PLUGIN_MUTATION = gql`
+  mutation ($id: ID!, $orgId: ID!) {
+    updatePluginStatus(id: $id, orgId: $orgId) {
+      _id
+      pluginName
+      pluginCreatedBy
+      pluginDesc
+      uninstalledOrgs
+    }
+  }
+`;
+
+/**
+ * {@label UPDATE_ORG_STATUS_PLUGIN_MUTATION}
+ * @remarks
+ * used  `updatePluginStatus`to add or remove the current Organization the in the plugin list `uninstalledOrgs`
+ */
+export const UPDATE_ORG_STATUS_PLUGIN_MUTATION = gql`
+  mutation update_install_status_plugin_mutation($id: ID!, $orgId: ID!) {
+    updatePluginStatus(id: $id, orgId: $orgId) {
+      _id
+      pluginName
+      pluginCreatedBy
+      pluginDesc
+      uninstalledOrgs
+    }
+  }
+`;
+
+/**
+ * {@label ADD_PLUGIN_MUTATION}
+ * @remarks
+ * used  `createPlugin` to add new Plugin in database
+ */
+export const ADD_PLUGIN_MUTATION = gql`
+  mutation add_plugin_mutation(
+    $pluginName: String!
+    $pluginCreatedBy: String!
+    $pluginDesc: String!
+  ) {
+    createPlugin(
+      pluginName: $pluginName
+      pluginCreatedBy: $pluginCreatedBy
+      pluginDesc: $pluginDesc
+    ) {
+      _id
+      pluginName
+      pluginCreatedBy
+      pluginDesc
+    }
+  }
+`;
+export const ADD_ADVERTISEMENT_MUTATION = gql`
+  mutation (
+    $organizationId: ID!
+    $name: String!
+    $type: AdvertisementType!
+    $startDate: Date!
+    $endDate: Date!
+    $file: String!
+  ) {
+    createAdvertisement(
+      input: {
+        organizationId: $organizationId
+        name: $name
+        type: $type
+        startDate: $startDate
+        endDate: $endDate
+        mediaFile: $file
+      }
+    ) {
+      advertisement {
+        _id
+      }
+    }
+  }
+`;
+export const UPDATE_ADVERTISEMENT_MUTATION = gql`
+  mutation UpdateAdvertisement(
+    $id: ID!
+    $name: String
+    $file: String
+    $type: AdvertisementType
+    $startDate: Date
+    $endDate: Date
+  ) {
+    updateAdvertisement(
+      input: {
+        _id: $id
+        name: $name
+        mediaFile: $file
+        type: $type
+        startDate: $startDate
+        endDate: $endDate
+      }
+    ) {
+      advertisement {
+        _id
+      }
+    }
+  }
+`;
+export const DELETE_ADVERTISEMENT_BY_ID = gql`
+  mutation ($id: ID!) {
+    deleteAdvertisement(id: $id) {
+      advertisement {
+        _id
+      }
+    }
+  }
+`;
+export const UPDATE_POST_MUTATION = gql`
+  mutation UpdatePost(
+    $id: ID!
+    $title: String
+    $text: String
+    $imageUrl: String
+    $videoUrl: String
+  ) {
+    updatePost(
+      id: $id
+      data: {
+        title: $title
+        text: $text
+        imageUrl: $imageUrl
+        videoUrl: $videoUrl
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+export const UPDATE_EVENT_MUTATION = gql`
+  mutation UpdateEvent(
+    $id: ID!
+    $title: String
+    $description: String
+    $recurring: Boolean
+    $recurringEventUpdateType: RecurringEventMutationType
+    $isPublic: Boolean
+    $isRegisterable: Boolean
+    $allDay: Boolean
+    $startDate: Date
+    $endDate: Date
+    $startTime: Time
+    $endTime: Time
+    $location: String
+    $recurrenceStartDate: Date
+    $recurrenceEndDate: Date
+    $frequency: Frequency
+    $weekDays: [WeekDays]
+    $count: PositiveInt
+    $interval: PositiveInt
+    $weekDayOccurenceInMonth: Int
+  ) {
+    updateEvent(
+      id: $id
+      data: {
+        title: $title
+        description: $description
+        recurring: $recurring
+        isPublic: $isPublic
+        isRegisterable: $isRegisterable
+        allDay: $allDay
+        startDate: $startDate
+        endDate: $endDate
+        startTime: $startTime
+        endTime: $endTime
+        location: $location
+      }
+      recurrenceRuleData: {
+        recurrenceStartDate: $recurrenceStartDate
+        recurrenceEndDate: $recurrenceEndDate
+        frequency: $frequency
+        weekDays: $weekDays
+        interval: $interval
+        count: $count
+        weekDayOccurenceInMonth: $weekDayOccurenceInMonth
+      }
+      recurringEventUpdateType: $recurringEventUpdateType
+    ) {
+      _id
+    }
+  }
+`;
+
+export const LIKE_POST = gql`
+  mutation likePost($postId: ID!) {
+    likePost(id: $postId) {
+      _id
+    }
+  }
+`;
+
+export const UNLIKE_POST = gql`
+  mutation unlikePost($postId: ID!) {
+    unlikePost(id: $postId) {
+      _id
+    }
+  }
+`;
+
+export const REGISTER_EVENT = gql`
+  mutation registerForEvent($eventId: ID!) {
+    registerForEvent(id: $eventId) {
+      _id
+    }
+  }
+`;
+
+export const UPDATE_COMMUNITY = gql`
+  mutation updateCommunity($data: UpdateCommunityInput!) {
+    updateCommunity(data: $data)
+  }
+`;
+
+export const UPDATE_SESSION_TIMEOUT = gql`
+  mutation updateSessionTimeout($timeout: Int!) {
+    updateSessionTimeout(timeout: $timeout)
+  }
+`;
+
+export const RESET_COMMUNITY = gql`
+  mutation resetCommunity {
+    resetCommunity
+  }
+`;
+
+export const DONATE_TO_ORGANIZATION = gql`
+  mutation donate(
+    $userId: ID!
+    $createDonationOrgId2: ID!
+    $payPalId: ID!
+    $nameOfUser: String!
+    $amount: Float!
+    $nameOfOrg: String!
+  ) {
+    createDonation(
+      userId: $userId
+      orgId: $createDonationOrgId2
+      payPalId: $payPalId
+      nameOfUser: $nameOfUser
+      amount: $amount
+      nameOfOrg: $nameOfOrg
+    ) {
+      _id
+      amount
+      nameOfUser
+      nameOfOrg
+    }
+  }
+`;
+
+// Create and Update Action Item Categories
+export {
+  CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+  UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+} from './ActionItemCategoryMutations';
+
+// Create, Update and Delete Action Items
+export {
+  CREATE_ACTION_ITEM_MUTATION,
+  DELETE_ACTION_ITEM_MUTATION,
+  UPDATE_ACTION_ITEM_MUTATION,
+} from './ActionItemMutations';
+
+export {
+  CREATE_AGENDA_ITEM_CATEGORY_MUTATION,
+  DELETE_AGENDA_ITEM_CATEGORY_MUTATION,
+  UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+} from './AgendaCategoryMutations';
+
+export {
+  CREATE_AGENDA_ITEM_MUTATION,
+  DELETE_AGENDA_ITEM_MUTATION,
+  UPDATE_AGENDA_ITEM_MUTATION,
+} from './AgendaItemMutations';
+
+// Changes the role of a event in an organization and add and remove the event from the organization
+export {
+  ADD_EVENT_ATTENDEE,
+  MARK_CHECKIN,
+  REMOVE_EVENT_ATTENDEE,
+} from './EventAttendeeMutations';
+
+// Create the new comment on a post and Like and Unlike the comment
+export {
+  CREATE_COMMENT_POST,
+  LIKE_COMMENT,
+  UNLIKE_COMMENT,
+} from './CommentMutations';
+
+// Changes the role of a user in an organization
+export {
+  ADD_CUSTOM_FIELD,
+  CREATE_SAMPLE_ORGANIZATION_MUTATION,
+  JOIN_PUBLIC_ORGANIZATION,
+  PLUGIN_SUBSCRIPTION,
+  REMOVE_CUSTOM_FIELD,
+  REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+  SEND_MEMBERSHIP_REQUEST,
+  TOGGLE_PINNED_POST,
+  UPDATE_USER_ROLE_IN_ORG_MUTATION,
+} from './OrganizationMutations';
+
+export {
+  CREATE_VENUE_MUTATION,
+  DELETE_VENUE_MUTATION,
+  UPDATE_VENUE_MUTATION,
+} from './VenueMutations';
diff --git a/src/GraphQl/Queries/ActionItemCategoryQueries.ts b/src/GraphQl/Queries/ActionItemCategoryQueries.ts
new file mode 100644
index 0000000000..db0db119e3
--- /dev/null
+++ b/src/GraphQl/Queries/ActionItemCategoryQueries.ts
@@ -0,0 +1,32 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve action item categories by organization.
+ *
+ * @param organizationId - The ID of the organization for which action item categories are being retrieved.
+ * @returns The list of action item categories associated with the organization.
+ */
+
+export const ACTION_ITEM_CATEGORY_LIST = gql`
+  query ActionItemCategoriesByOrganization(
+    $organizationId: ID!
+    $where: ActionItemCategoryWhereInput
+    $orderBy: ActionItemsOrderByInput
+  ) {
+    actionItemCategoriesByOrganization(
+      organizationId: $organizationId
+      where: $where
+      orderBy: $orderBy
+    ) {
+      _id
+      name
+      isDisabled
+      createdAt
+      creator {
+        _id
+        firstName
+        lastName
+      }
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/ActionItemQueries.ts b/src/GraphQl/Queries/ActionItemQueries.ts
new file mode 100644
index 0000000000..7b24dd6138
--- /dev/null
+++ b/src/GraphQl/Queries/ActionItemQueries.ts
@@ -0,0 +1,128 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve action item categories by organization.
+ *
+ * @param organizationId - The ID of the organization for which action item categories are being retrieved.
+ * @param orderBy - Sort action items Latest/Earliest first.
+ * @param actionItemCategory_id - Filter action items belonging to an action item category.
+ * @param event_id - Filter action items belonging to an event.
+ * @param is_completed - Filter all the completed action items.
+ * @returns The list of action item categories associated with the organization.
+ */
+
+export const ACTION_ITEM_LIST = gql`
+  query ActionItemsByOrganization(
+    $organizationId: ID!
+    $eventId: ID
+    $where: ActionItemWhereInput
+    $orderBy: ActionItemsOrderByInput
+  ) {
+    actionItemsByOrganization(
+      organizationId: $organizationId
+      eventId: $eventId
+      orderBy: $orderBy
+      where: $where
+    ) {
+      _id
+      assignee {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+          image
+        }
+      }
+      assigneeGroup {
+        _id
+        name
+      }
+      assigneeUser {
+        _id
+        firstName
+        lastName
+        image
+      }
+      assigneeType
+      assigner {
+        _id
+        firstName
+        lastName
+        image
+      }
+      actionItemCategory {
+        _id
+        name
+      }
+      preCompletionNotes
+      postCompletionNotes
+      assignmentDate
+      dueDate
+      completionDate
+      isCompleted
+      event {
+        _id
+        title
+      }
+      creator {
+        _id
+        firstName
+        lastName
+      }
+      allottedHours
+    }
+  }
+`;
+
+export const ACTION_ITEMS_BY_USER = gql`
+  query ActionItemsByUser(
+    $userId: ID!
+    $where: ActionItemWhereInput
+    $orderBy: ActionItemsOrderByInput
+  ) {
+    actionItemsByUser(userId: $userId, where: $where, orderBy: $orderBy) {
+      _id
+      assignee {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+          image
+        }
+      }
+      assigneeGroup {
+        _id
+        name
+      }
+      assigneeType
+      assigner {
+        _id
+        firstName
+        lastName
+        image
+      }
+      actionItemCategory {
+        _id
+        name
+      }
+      preCompletionNotes
+      postCompletionNotes
+      assignmentDate
+      dueDate
+      completionDate
+      isCompleted
+      event {
+        _id
+        title
+      }
+      creator {
+        _id
+        firstName
+        lastName
+      }
+      allottedHours
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/AgendaCategoryQueries.ts b/src/GraphQl/Queries/AgendaCategoryQueries.ts
new file mode 100644
index 0000000000..f766337c22
--- /dev/null
+++ b/src/GraphQl/Queries/AgendaCategoryQueries.ts
@@ -0,0 +1,23 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve agenda category by id.
+ *
+ * @param agendaCategoryId - The ID of the category which is being retrieved.
+ * @returns Agenda category associated with the id.
+ */
+
+export const AGENDA_ITEM_CATEGORY_LIST = gql`
+  query AgendaItemCategoriesByOrganization($organizationId: ID!) {
+    agendaItemCategoriesByOrganization(organizationId: $organizationId) {
+      _id
+      name
+      description
+      createdBy {
+        _id
+        firstName
+        lastName
+      }
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/AgendaItemQueries.ts b/src/GraphQl/Queries/AgendaItemQueries.ts
new file mode 100644
index 0000000000..92957983c8
--- /dev/null
+++ b/src/GraphQl/Queries/AgendaItemQueries.ts
@@ -0,0 +1,73 @@
+import gql from 'graphql-tag';
+
+export const AgendaItemByOrganization = gql`
+  query AgendaItemByOrganization($organizationId: ID!) {
+    agendaItemByOrganization(organizationId: $organizationId) {
+      _id
+      title
+      description
+      duration
+      attachments
+      createdBy {
+        _id
+        firstName
+        lastName
+      }
+      urls
+      users {
+        _id
+        firstName
+        lastName
+      }
+      categories {
+        _id
+        name
+      }
+      sequence
+      organization {
+        _id
+        name
+      }
+      relatedEvent {
+        _id
+        title
+      }
+    }
+  }
+`;
+
+export const AgendaItemByEvent = gql`
+  query AgendaItemByEvent($relatedEventId: ID!) {
+    agendaItemByEvent(relatedEventId: $relatedEventId) {
+      _id
+      title
+      description
+      duration
+      attachments
+      createdBy {
+        _id
+        firstName
+        lastName
+      }
+      urls
+      users {
+        _id
+        firstName
+        lastName
+      }
+      sequence
+      categories {
+        _id
+        name
+      }
+      organization {
+        _id
+        name
+      }
+      relatedEvent {
+        _id
+        title
+      }
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/EventVolunteerQueries.ts b/src/GraphQl/Queries/EventVolunteerQueries.ts
new file mode 100644
index 0000000000..f4a3a02564
--- /dev/null
+++ b/src/GraphQl/Queries/EventVolunteerQueries.ts
@@ -0,0 +1,134 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve event volunteers.
+ *
+ * @param where - The filter to apply to the query.
+ * @param orderBy - The order in which to return the results.
+ * @returns The list of event volunteers.
+ *
+ **/
+
+export const EVENT_VOLUNTEER_LIST = gql`
+  query GetEventVolunteers(
+    $where: EventVolunteerWhereInput!
+    $orderBy: EventVolunteersOrderByInput
+  ) {
+    getEventVolunteers(where: $where, orderBy: $orderBy) {
+      _id
+      hasAccepted
+      hoursVolunteered
+      user {
+        _id
+        firstName
+        lastName
+        image
+      }
+      assignments {
+        _id
+      }
+      groups {
+        _id
+        name
+        volunteers {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+export const EVENT_VOLUNTEER_GROUP_LIST = gql`
+  query GetEventVolunteerGroups(
+    $where: EventVolunteerGroupWhereInput!
+    $orderBy: EventVolunteerGroupOrderByInput
+  ) {
+    getEventVolunteerGroups(where: $where, orderBy: $orderBy) {
+      _id
+      name
+      description
+      volunteersRequired
+      createdAt
+      creator {
+        _id
+        firstName
+        lastName
+        image
+      }
+      leader {
+        _id
+        firstName
+        lastName
+        image
+      }
+      volunteers {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+          image
+        }
+      }
+      assignments {
+        _id
+        actionItemCategory {
+          _id
+          name
+        }
+        allottedHours
+        isCompleted
+      }
+      event {
+        _id
+      }
+    }
+  }
+`;
+
+export const USER_VOLUNTEER_MEMBERSHIP = gql`
+  query GetVolunteerMembership(
+    $where: VolunteerMembershipWhereInput!
+    $orderBy: VolunteerMembershipOrderByInput
+  ) {
+    getVolunteerMembership(where: $where, orderBy: $orderBy) {
+      _id
+      status
+      createdAt
+      event {
+        _id
+        title
+        startDate
+      }
+      volunteer {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+          image
+        }
+      }
+      group {
+        _id
+        name
+      }
+    }
+  }
+`;
+
+export const VOLUNTEER_RANKING = gql`
+  query GetVolunteerRanks($orgId: ID!, $where: VolunteerRankWhereInput!) {
+    getVolunteerRanks(orgId: $orgId, where: $where) {
+      rank
+      hoursVolunteered
+      user {
+        _id
+        lastName
+        firstName
+        image
+        email
+      }
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/OrganizationQueries.ts b/src/GraphQl/Queries/OrganizationQueries.ts
new file mode 100644
index 0000000000..3329390783
--- /dev/null
+++ b/src/GraphQl/Queries/OrganizationQueries.ts
@@ -0,0 +1,380 @@
+// OrganizationQueries.js
+import gql from 'graphql-tag';
+
+// display posts
+
+/**
+ * GraphQL query to retrieve the list of organizations.
+ *
+ * @param first - Optional. Number of organizations to retrieve in the first batch.
+ * @param skip - Optional. Number of organizations to skip before starting to collect the result set.
+ * @param filter - Optional. Filter organizations by a specified string.
+ * @param id - Optional. The ID of a specific organization to retrieve.
+ * @returns The list of organizations based on the applied filters.
+ */
+export const ORGANIZATION_POST_LIST = gql`
+  query Organizations(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+  ) {
+    organizations(id: $id) {
+      posts(after: $after, before: $before, first: $first, last: $last) {
+        edges {
+          node {
+            _id
+            title
+            text
+            creator {
+              _id
+              firstName
+              lastName
+              email
+            }
+            createdAt
+            likeCount
+            likedBy {
+              _id
+              firstName
+              lastName
+            }
+            commentCount
+            comments {
+              _id
+              text
+              creator {
+                _id
+              }
+              createdAt
+              likeCount
+              likedBy {
+                _id
+              }
+            }
+            pinned
+          }
+          cursor
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve the list of user tags belonging to an organization.
+ *
+ * @param id - ID of the organization.
+ * @param first - Number of tags to retrieve "after" (if provided) a certain tag.
+ * @param after - Id of the last tag on the current page.
+ * @param last - Number of tags to retrieve "before" (if provided) a certain tag.
+ * @param before - Id of the first tag on the current page.
+ * @returns The list of organizations based on the applied filters.
+ */
+
+export const ORGANIZATION_USER_TAGS_LIST = gql`
+  query Organizations(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+    $where: UserTagWhereInput
+    $sortedBy: UserTagSortedByInput
+  ) {
+    organizations(id: $id) {
+      userTags(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+        where: $where
+        sortedBy: $sortedBy
+      ) {
+        edges {
+          node {
+            _id
+            name
+            parentTag {
+              _id
+            }
+            usersAssignedTo(first: $first, last: $last) {
+              totalCount
+            }
+            childTags(first: $first, last: $last) {
+              totalCount
+            }
+            ancestorTags {
+              _id
+              name
+            }
+          }
+          cursor
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
+
+export const ORGANIZATION_ADVERTISEMENT_LIST = gql`
+  query Organizations(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: Int
+    $last: Int
+  ) {
+    organizations(id: $id) {
+      _id
+      advertisements(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+      ) {
+        edges {
+          node {
+            _id
+            name
+            startDate
+            endDate
+            mediaUrl
+          }
+          cursor
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve organizations based on user connection.
+ *
+ * @param first - Optional. Number of organizations to retrieve in the first batch.
+ * @param skip - Optional. Number of organizations to skip before starting to collect the result set.
+ * @param filter - Optional. Filter organizations by a specified string.
+ * @param id - Optional. The ID of a specific organization to retrieve.
+ * @returns The list of organizations based on the applied filters.
+ */
+
+export const USER_ORGANIZATION_CONNECTION = gql`
+  query organizationsConnection(
+    $first: Int
+    $skip: Int
+    $filter: String
+    $id: ID
+  ) {
+    organizationsConnection(
+      first: $first
+      skip: $skip
+      where: { name_contains: $filter, id: $id }
+      orderBy: name_ASC
+    ) {
+      _id
+      name
+      image
+      description
+      userRegistrationRequired
+      creator {
+        firstName
+        lastName
+      }
+      members {
+        _id
+      }
+      admins {
+        _id
+      }
+      createdAt
+      address {
+        city
+        countryCode
+        dependentLocality
+        line1
+        line2
+        postalCode
+        sortingCode
+        state
+      }
+      membershipRequests {
+        _id
+        user {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve organizations joined by a user.
+ *
+ * @param id - The ID of the user for which joined organizations are being retrieved.
+ * @returns The list of organizations joined by the user.
+ */
+
+export const USER_JOINED_ORGANIZATIONS = gql`
+  query UserJoinedOrganizations($id: ID!) {
+    users(where: { id: $id }) {
+      user {
+        joinedOrganizations {
+          _id
+          name
+          description
+          image
+          members {
+            _id
+          }
+          address {
+            city
+            countryCode
+            dependentLocality
+            line1
+            line2
+            postalCode
+            sortingCode
+            state
+          }
+          admins {
+            _id
+          }
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve organizations created by a user.
+ *
+ * @param id - The ID of the user for which created organizations are being retrieved.
+ * @returns The list of organizations created by the user.
+ */
+
+export const USER_CREATED_ORGANIZATIONS = gql`
+  query UserCreatedOrganizations($id: ID!) {
+    users(where: { id: $id }) {
+      appUserProfile {
+        createdOrganizations {
+          _id
+          name
+          description
+          image
+          members {
+            _id
+          }
+          address {
+            city
+            countryCode
+            dependentLocality
+            line1
+            line2
+            postalCode
+            sortingCode
+            state
+          }
+          admins {
+            _id
+          }
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve the list of admins for a specific organization.
+ *
+ * @param id - The ID of the organization for which admins are being retrieved.
+ * @returns The list of admins associated with the organization.
+ */
+
+export const ORGANIZATION_ADMINS_LIST = gql`
+  query Organizations($id: ID!) {
+    organizations(id: $id) {
+      _id
+      admins {
+        _id
+        image
+        firstName
+        lastName
+        email
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve the list of members for a specific organization.
+ *
+ * @param id - The ID of the organization for which members are being retrieved.
+ * @returns The list of members associated with the organization.
+ */
+export const ORGANIZATION_FUNDS = gql`
+  query Organizations($id: ID!) {
+    organizations(id: $id) {
+      funds {
+        _id
+        name
+        refrenceNumber
+        taxDeductible
+        isArchived
+        isDefault
+        createdAt
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve the list of venues for a specific organization.
+ *
+ * @param id - The ID of the organization for which venues are being retrieved.
+ * @returns The list of venues associated with the organization.
+ */
+export const VENUE_LIST = gql`
+  query GetVenueByOrgId(
+    $orgId: ID!
+    $first: Int
+    $orderBy: VenueOrderByInput
+    $where: VenueWhereInput
+  ) {
+    getVenueByOrgId(
+      orgId: $orgId
+      first: $first
+      orderBy: $orderBy
+      where: $where
+    ) {
+      _id
+      capacity
+      name
+      description
+      imageUrl
+      organization {
+        _id
+      }
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/PlugInQueries.ts b/src/GraphQl/Queries/PlugInQueries.ts
new file mode 100644
index 0000000000..508da522e9
--- /dev/null
+++ b/src/GraphQl/Queries/PlugInQueries.ts
@@ -0,0 +1,267 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve a list of plugins.
+ *
+ * @returns The list of plugins with details such as ID, name, creator, description, and uninstalled organizations.
+ */
+
+export const PLUGIN_GET = gql`
+  query getPluginList {
+    getPlugins {
+      _id
+      pluginName
+      pluginCreatedBy
+      pluginDesc
+      uninstalledOrgs
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve a list of advertisements.
+ *
+ * @returns The list of advertisements with details such as ID, name, type, organization ID, link, start date, and end date.
+ */
+
+export const ADVERTISEMENTS_GET = gql`
+  query getAdvertisements {
+    advertisementsConnection {
+      edges {
+        node {
+          _id
+          name
+          type
+          organization {
+            _id
+          }
+          mediaUrl
+          endDate
+          startDate
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve a list of events based on organization connection.
+ *
+ * @param organization_id - The ID of the organization for which events are being retrieved.
+ * @param title_contains - Optional. Filter events by title containing a specified string.
+ * @param description_contains - Optional. Filter events by description containing a specified string.
+ * @param location_contains - Optional. Filter events by location containing a specified string.
+ * @param first - Optional. Number of events to retrieve in the first batch.
+ * @param skip - Optional. Number of events to skip before starting to collect the result set.
+ * @returns The list of events associated with the organization based on the applied filters.
+ */
+
+export const ORGANIZATION_EVENTS_CONNECTION = gql`
+  query EventsByOrganizationConnection(
+    $organization_id: ID!
+    $title_contains: String
+    $description_contains: String
+    $location_contains: String
+    $first: Int
+    $skip: Int
+  ) {
+    eventsByOrganizationConnection(
+      where: {
+        organization_id: $organization_id
+        title_contains: $title_contains
+        description_contains: $description_contains
+        location_contains: $location_contains
+      }
+      first: $first
+      skip: $skip
+    ) {
+      _id
+      title
+      description
+      startDate
+      endDate
+      location
+      startTime
+      endTime
+      allDay
+      recurring
+      isPublic
+      isRegisterable
+      creator {
+        _id
+        firstName
+        lastName
+      }
+      attendees {
+        _id
+      }
+    }
+  }
+`;
+
+export const USER_EVENTS_VOLUNTEER = gql`
+  query UserEventsVolunteer(
+    $organization_id: ID!
+    $title_contains: String
+    $location_contains: String
+    $first: Int
+    $skip: Int
+    $upcomingOnly: Boolean
+  ) {
+    eventsByOrganizationConnection(
+      where: {
+        organization_id: $organization_id
+        title_contains: $title_contains
+        location_contains: $location_contains
+      }
+      first: $first
+      skip: $skip
+      upcomingOnly: $upcomingOnly
+    ) {
+      _id
+      title
+      startDate
+      endDate
+      location
+      startTime
+      endTime
+      allDay
+      recurring
+      volunteerGroups {
+        _id
+        name
+        volunteersRequired
+        description
+        volunteers {
+          _id
+        }
+      }
+      volunteers {
+        _id
+        user {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve a list of chats based on user ID.
+ *
+ * @param id - The ID of the user for which chats are being retrieved.
+ * @returns The list of chats associated with the user, including details such as ID, creator, messages, organization, and participating users.
+ */
+
+export const CHAT_BY_ID = gql`
+  query chatById($id: ID!) {
+    chatById(id: $id) {
+      _id
+      isGroup
+      name
+      organization {
+        _id
+      }
+      createdAt
+      messages {
+        _id
+        createdAt
+        messageContent
+        replyTo {
+          _id
+          createdAt
+          messageContent
+          sender {
+            _id
+            firstName
+            lastName
+            email
+            image
+          }
+        }
+        sender {
+          _id
+          firstName
+          lastName
+          email
+          image
+        }
+      }
+      users {
+        _id
+        firstName
+        lastName
+        email
+      }
+    }
+  }
+`;
+
+export const CHATS_LIST = gql`
+  query ChatsByUserId($id: ID!) {
+    chatsByUserId(id: $id) {
+      _id
+      isGroup
+      name
+
+      creator {
+        _id
+        firstName
+        lastName
+        email
+      }
+      messages {
+        _id
+        createdAt
+        messageContent
+        sender {
+          _id
+          firstName
+          lastName
+          email
+        }
+      }
+      organization {
+        _id
+        name
+      }
+      users {
+        _id
+        firstName
+        lastName
+        email
+        image
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to check if an organization is a sample organization.
+ *
+ * @param isSampleOrganizationId - The ID of the organization being checked.
+ * @returns A boolean indicating whether the organization is a sample organization.
+ */
+
+export const IS_SAMPLE_ORGANIZATION_QUERY = gql`
+  query ($isSampleOrganizationId: ID!) {
+    isSampleOrganization(id: $isSampleOrganizationId)
+  }
+`;
+
+/**
+ * GraphQL query to retrieve custom fields for a specific organization.
+ *
+ * @param customFieldsByOrganizationId - The ID of the organization for which custom fields are being retrieved.
+ * @returns The list of custom fields associated with the organization, including details such as ID, type, and name.
+ */
+
+export const ORGANIZATION_CUSTOM_FIELDS = gql`
+  query ($customFieldsByOrganizationId: ID!) {
+    customFieldsByOrganization(id: $customFieldsByOrganizationId) {
+      _id
+      type
+      name
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
new file mode 100644
index 0000000000..81442cbad2
--- /dev/null
+++ b/src/GraphQl/Queries/Queries.ts
@@ -0,0 +1,890 @@
+import gql from 'graphql-tag';
+
+//Query List
+// Check Auth
+export const CHECK_AUTH = gql`
+  query {
+    checkAuth {
+      _id
+      firstName
+      lastName
+      createdAt
+      image
+      email
+      birthDate
+      educationGrade
+      employmentStatus
+      gender
+      maritalStatus
+      phone {
+        mobile
+      }
+      address {
+        line1
+        state
+        countryCode
+      }
+      eventsAttended {
+        _id
+      }
+    }
+  }
+`;
+
+// Query to take the Organization list
+export const ORGANIZATION_LIST = gql`
+  query {
+    organizations {
+      _id
+      image
+      creator {
+        firstName
+        lastName
+      }
+      name
+      members {
+        _id
+      }
+      admins {
+        _id
+      }
+      createdAt
+      address {
+        city
+        countryCode
+        dependentLocality
+        line1
+        line2
+        postalCode
+        sortingCode
+        state
+      }
+    }
+  }
+`;
+
+// Query to take the Organization list with filter  and sort option
+export const ORGANIZATION_CONNECTION_LIST = gql`
+  query OrganizationsConnection(
+    $filter: String
+    $first: Int
+    $skip: Int
+    $orderBy: OrganizationOrderByInput
+  ) {
+    organizationsConnection(
+      where: { name_contains: $filter }
+      first: $first
+      skip: $skip
+      orderBy: $orderBy
+    ) {
+      _id
+      image
+      creator {
+        firstName
+        lastName
+      }
+      name
+      members {
+        _id
+      }
+      admins {
+        _id
+      }
+      createdAt
+      address {
+        city
+        countryCode
+        dependentLocality
+        line1
+        line2
+        postalCode
+        sortingCode
+        state
+      }
+    }
+  }
+`;
+
+// Query to take the User list
+export const USER_LIST = gql`
+  query Users(
+    $firstName_contains: String
+    $lastName_contains: String
+    $skip: Int
+    $first: Int
+    $order: UserOrderByInput
+  ) {
+    users(
+      where: {
+        firstName_contains: $firstName_contains
+        lastName_contains: $lastName_contains
+      }
+      skip: $skip
+      first: $first
+      orderBy: $order
+    ) {
+      user {
+        _id
+        joinedOrganizations {
+          _id
+          name
+          image
+          createdAt
+          address {
+            city
+            countryCode
+            dependentLocality
+            line1
+            line2
+            postalCode
+            sortingCode
+            state
+          }
+          creator {
+            _id
+            firstName
+            lastName
+            image
+            email
+          }
+        }
+        firstName
+        lastName
+        email
+        image
+        createdAt
+        registeredEvents {
+          _id
+        }
+        organizationsBlockedBy {
+          _id
+          name
+          image
+          address {
+            city
+            countryCode
+            dependentLocality
+            line1
+            line2
+            postalCode
+            sortingCode
+            state
+          }
+          creator {
+            _id
+            firstName
+            lastName
+            image
+            email
+          }
+          createdAt
+        }
+        membershipRequests {
+          _id
+        }
+      }
+      appUserProfile {
+        _id
+        adminFor {
+          _id
+        }
+        isSuperAdmin
+        createdOrganizations {
+          _id
+        }
+        createdEvents {
+          _id
+        }
+        eventAdmin {
+          _id
+        }
+      }
+    }
+  }
+`;
+export const USER_LIST_FOR_TABLE = gql`
+  query Users($firstName_contains: String, $lastName_contains: String) {
+    users(
+      where: {
+        firstName_contains: $firstName_contains
+        lastName_contains: $lastName_contains
+      }
+    ) {
+      user {
+        _id
+        firstName
+        lastName
+        email
+        image
+        createdAt
+      }
+    }
+  }
+`;
+
+export const USER_LIST_REQUEST = gql`
+  query Users(
+    $firstName_contains: String
+    $lastName_contains: String
+    $first: Int
+    $skip: Int
+  ) {
+    users(
+      where: {
+        firstName_contains: $firstName_contains
+        lastName_contains: $lastName_contains
+      }
+      skip: $skip
+      first: $first
+    ) {
+      user {
+        firstName
+        lastName
+        image
+        _id
+        email
+        createdAt
+      }
+      appUserProfile {
+        _id
+        adminFor {
+          _id
+        }
+        isSuperAdmin
+        createdOrganizations {
+          _id
+        }
+        createdEvents {
+          _id
+        }
+        eventAdmin {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+export const EVENT_DETAILS = gql`
+  query Event($id: ID!) {
+    event(id: $id) {
+      _id
+      title
+      description
+      startDate
+      endDate
+      startTime
+      endTime
+      allDay
+      location
+      recurring
+      baseRecurringEvent {
+        _id
+      }
+      organization {
+        _id
+        members {
+          _id
+          firstName
+          lastName
+        }
+      }
+      attendees {
+        _id
+      }
+    }
+  }
+`;
+
+export const RECURRING_EVENTS = gql`
+  query RecurringEvents($baseRecurringEventId: ID!) {
+    getRecurringEvents(baseRecurringEventId: $baseRecurringEventId) {
+      _id
+      startDate
+      title
+      attendees {
+        _id
+        gender
+      }
+    }
+  }
+`;
+
+export const EVENT_ATTENDEES = gql`
+  query Event($id: ID!) {
+    event(id: $id) {
+      attendees {
+        _id
+        firstName
+        lastName
+        createdAt
+        gender
+        birthDate
+        eventsAttended {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+export const EVENT_CHECKINS = gql`
+  query eventCheckIns($id: ID!) {
+    event(id: $id) {
+      _id
+      attendeesCheckInStatus {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+        }
+        checkIn {
+          _id
+          time
+        }
+      }
+    }
+  }
+`;
+
+export const EVENT_FEEDBACKS = gql`
+  query eventFeedback($id: ID!) {
+    event(id: $id) {
+      _id
+      feedback {
+        _id
+        rating
+        review
+      }
+      averageFeedbackScore
+    }
+  }
+`;
+
+// Query to take the Organization with data
+export const ORGANIZATIONS_LIST = gql`
+  query Organizations($id: ID!) {
+    organizations(id: $id) {
+      _id
+      image
+      creator {
+        firstName
+        lastName
+        email
+      }
+      name
+      description
+      address {
+        city
+        countryCode
+        dependentLocality
+        line1
+        line2
+        postalCode
+        sortingCode
+        state
+      }
+      userRegistrationRequired
+      visibleInSearch
+      members {
+        _id
+        firstName
+        lastName
+        email
+      }
+      admins {
+        _id
+        firstName
+        lastName
+        email
+        createdAt
+      }
+      membershipRequests {
+        _id
+        user {
+          firstName
+          lastName
+          email
+        }
+      }
+      blockedUsers {
+        _id
+        firstName
+        lastName
+        email
+      }
+    }
+  }
+`;
+
+// Query to take the Members of a particular organization
+export const MEMBERS_LIST = gql`
+  query Organizations($id: ID!) {
+    organizations(id: $id) {
+      _id
+      members {
+        _id
+        firstName
+        lastName
+        image
+        email
+        createdAt
+        organizationsBlockedBy {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+export const BLOCK_PAGE_MEMBER_LIST = gql`
+  query Organizations(
+    $orgId: ID!
+    $firstName_contains: String
+    $lastName_contains: String
+  ) {
+    organizationsMemberConnection(
+      orgId: $orgId
+      where: {
+        firstName_contains: $firstName_contains
+        lastName_contains: $lastName_contains
+      }
+    ) {
+      edges {
+        _id
+        firstName
+        lastName
+        email
+        organizationsBlockedBy {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+// Query to filter out all the members with the macthing query and a particular OrgId
+export const ORGANIZATIONS_MEMBER_CONNECTION_LIST = gql`
+  query Organizations(
+    $orgId: ID!
+    $firstName_contains: String
+    $lastName_contains: String
+    $first: Int
+    $skip: Int
+  ) {
+    organizationsMemberConnection(
+      orgId: $orgId
+      first: $first
+      skip: $skip
+      where: {
+        firstName_contains: $firstName_contains
+        lastName_contains: $lastName_contains
+      }
+    ) {
+      edges {
+        _id
+        firstName
+        lastName
+        image
+        email
+        createdAt
+      }
+    }
+  }
+`;
+
+// To take the list of the oranization joined by a user
+export const USER_ORGANIZATION_LIST = gql`
+  query User($userId: ID!) {
+    user(id: $userId) {
+      user {
+        firstName
+        email
+        image
+        lastName
+      }
+    }
+  }
+`;
+
+// To take the details of a user
+export const USER_DETAILS = gql`
+  query User(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+  ) {
+    user(id: $id) {
+      user {
+        _id
+        eventsAttended {
+          _id
+        }
+        joinedOrganizations {
+          _id
+        }
+        firstName
+        lastName
+        email
+        image
+        createdAt
+        birthDate
+        educationGrade
+        employmentStatus
+        gender
+        maritalStatus
+        phone {
+          mobile
+        }
+        address {
+          line1
+          countryCode
+          city
+          state
+        }
+        tagsAssignedWith(
+          after: $after
+          before: $before
+          first: $first
+          last: $last
+        ) {
+          edges {
+            node {
+              _id
+              name
+              parentTag {
+                _id
+              }
+            }
+          }
+          pageInfo {
+            startCursor
+            endCursor
+            hasNextPage
+            hasPreviousPage
+          }
+          totalCount
+        }
+        registeredEvents {
+          _id
+        }
+        membershipRequests {
+          _id
+        }
+      }
+      appUserProfile {
+        _id
+        adminFor {
+          _id
+        }
+        isSuperAdmin
+        appLanguageCode
+        pluginCreationAllowed
+        createdOrganizations {
+          _id
+        }
+        createdEvents {
+          _id
+        }
+        eventAdmin {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+// to take the organization event list
+export const ORGANIZATION_EVENT_LIST = gql`
+  query EventsByOrganization($id: ID!) {
+    eventsByOrganization(id: $id) {
+      _id
+      title
+      description
+      startDate
+      endDate
+      location
+      startTime
+      endTime
+      allDay
+      recurring
+      isPublic
+      isRegisterable
+    }
+  }
+`;
+
+export const ORGANIZATION_EVENT_CONNECTION_LIST = gql`
+  query EventsByOrganizationConnection(
+    $organization_id: ID!
+    $title_contains: String
+    $description_contains: String
+    $location_contains: String
+    $first: Int
+    $skip: Int
+  ) {
+    eventsByOrganizationConnection(
+      where: {
+        organization_id: $organization_id
+        title_contains: $title_contains
+        description_contains: $description_contains
+        location_contains: $location_contains
+      }
+      first: $first
+      skip: $skip
+    ) {
+      _id
+      title
+      description
+      startDate
+      endDate
+      location
+      startTime
+      endTime
+      allDay
+      recurring
+      attendees {
+        _id
+        createdAt
+        firstName
+        lastName
+        gender
+        eventsAttended {
+          _id
+          endDate
+        }
+      }
+      recurrenceRule {
+        recurrenceStartDate
+        recurrenceEndDate
+        frequency
+        weekDays
+        interval
+        count
+        weekDayOccurenceInMonth
+      }
+      isRecurringEventException
+      isPublic
+      isRegisterable
+    }
+  }
+`;
+
+export const ORGANIZATION_DONATION_CONNECTION_LIST = gql`
+  query GetDonationByOrgIdConnection(
+    $orgId: ID!
+    $id: ID
+    $name_of_user_contains: String
+  ) {
+    getDonationByOrgIdConnection(
+      orgId: $orgId
+      where: { id: $id, name_of_user_contains: $name_of_user_contains }
+    ) {
+      _id
+      nameOfUser
+      amount
+      userId
+      payPalId
+      updatedAt
+    }
+  }
+`;
+
+// to take the list of the admins of a particular
+export const ADMIN_LIST = gql`
+  query Organizations($id: ID!) {
+    organizations(id: $id) {
+      _id
+      admins {
+        _id
+        firstName
+        lastName
+        image
+        email
+        createdAt
+      }
+    }
+  }
+`;
+
+// to take the membership request
+export const MEMBERSHIP_REQUEST = gql`
+  query Organizations(
+    $id: ID!
+    $skip: Int
+    $first: Int
+    $firstName_contains: String
+  ) {
+    organizations(id: $id) {
+      _id
+      membershipRequests(
+        skip: $skip
+        first: $first
+        where: { user: { firstName_contains: $firstName_contains } }
+      ) {
+        _id
+        user {
+          _id
+          firstName
+          lastName
+          email
+        }
+      }
+    }
+  }
+`;
+
+export const USERS_CONNECTION_LIST = gql`
+  query usersConnection(
+    $id_not_in: [ID!]
+    $firstName_contains: String
+    $lastName_contains: String
+  ) {
+    users(
+      where: {
+        id_not_in: $id_not_in
+        firstName_contains: $firstName_contains
+        lastName_contains: $lastName_contains
+      }
+    ) {
+      user {
+        firstName
+        lastName
+        image
+        _id
+        email
+        createdAt
+        organizationsBlockedBy {
+          _id
+          name
+          image
+          address {
+            city
+            countryCode
+            dependentLocality
+            line1
+            line2
+            postalCode
+            sortingCode
+            state
+          }
+          createdAt
+          creator {
+            _id
+            firstName
+            lastName
+            image
+            email
+            createdAt
+          }
+        }
+        joinedOrganizations {
+          _id
+          name
+          image
+          address {
+            city
+            countryCode
+            dependentLocality
+            line1
+            line2
+            postalCode
+            sortingCode
+            state
+          }
+          createdAt
+          creator {
+            _id
+            firstName
+            lastName
+            image
+            email
+            createdAt
+          }
+        }
+      }
+      appUserProfile {
+        _id
+        adminFor {
+          _id
+        }
+        isSuperAdmin
+        createdOrganizations {
+          _id
+        }
+        createdEvents {
+          _id
+        }
+        eventAdmin {
+          _id
+        }
+      }
+    }
+  }
+`;
+
+export const GET_COMMUNITY_DATA = gql`
+  query getCommunityData {
+    getCommunityData {
+      _id
+      websiteLink
+      name
+      logoUrl
+      socialMediaUrls {
+        facebook
+        gitHub
+        instagram
+        X
+        linkedIn
+        youTube
+        reddit
+        slack
+      }
+    }
+  }
+`;
+
+export const GET_COMMUNITY_SESSION_TIMEOUT_DATA = gql`
+  query getCommunityData {
+    getCommunityData {
+      timeout
+    }
+  }
+`;
+
+// get the list of Action Item Categories
+export { ACTION_ITEM_CATEGORY_LIST } from './ActionItemCategoryQueries';
+
+// get the list of Action Items
+export { ACTION_ITEM_LIST } from './ActionItemQueries';
+
+export {
+  AgendaItemByEvent,
+  AgendaItemByOrganization,
+} from './AgendaItemQueries';
+
+export { AGENDA_ITEM_CATEGORY_LIST } from './AgendaCategoryQueries';
+// to take the list of the blocked users
+export {
+  ADVERTISEMENTS_GET,
+  IS_SAMPLE_ORGANIZATION_QUERY,
+  ORGANIZATION_CUSTOM_FIELDS,
+  ORGANIZATION_EVENTS_CONNECTION,
+  PLUGIN_GET,
+} from './PlugInQueries';
+
+// display posts
+export {
+  ORGANIZATION_POST_LIST,
+  ORGANIZATION_ADVERTISEMENT_LIST,
+} from './OrganizationQueries';
+
+export {
+  ORGANIZATION_ADMINS_LIST,
+  USER_CREATED_ORGANIZATIONS,
+  USER_JOINED_ORGANIZATIONS,
+  USER_ORGANIZATION_CONNECTION,
+} from './OrganizationQueries';
diff --git a/src/GraphQl/Queries/fundQueries.ts b/src/GraphQl/Queries/fundQueries.ts
new file mode 100644
index 0000000000..f705b87797
--- /dev/null
+++ b/src/GraphQl/Queries/fundQueries.ts
@@ -0,0 +1,132 @@
+/*eslint-disable*/
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve the list of members for a specific organization.
+ *
+ * @param id - The ID of the organization for which members are being retrieved.
+ * @param filter - The filter to search for a specific member.
+ * @returns The list of members associated with the organization.
+ */
+export const FUND_LIST = gql`
+  query FundsByOrganization(
+    $organizationId: ID!
+    $filter: String
+    $orderBy: FundOrderByInput
+  ) {
+    fundsByOrganization(
+      organizationId: $organizationId
+      where: { name_contains: $filter }
+      orderBy: $orderBy
+    ) {
+      _id
+      name
+      refrenceNumber
+      taxDeductible
+      isDefault
+      isArchived
+      createdAt
+      organizationId
+      creator {
+        _id
+        firstName
+        lastName
+      }
+    }
+  }
+`;
+
+export const FUND_CAMPAIGN = gql`
+  query GetFundById(
+    $id: ID!
+    $where: CampaignWhereInput
+    $orderBy: CampaignOrderByInput
+  ) {
+    getFundById(id: $id, where: $where, orderBy: $orderBy) {
+      name
+      isArchived
+      campaigns {
+        _id
+        endDate
+        fundingGoal
+        name
+        startDate
+        currency
+      }
+    }
+  }
+`;
+
+export const FUND_CAMPAIGN_PLEDGE = gql`
+  query GetFundraisingCampaigns(
+    $where: CampaignWhereInput
+    $pledgeOrderBy: PledgeOrderByInput
+  ) {
+    getFundraisingCampaigns(where: $where, pledgeOrderBy: $pledgeOrderBy) {
+      fundId {
+        name
+      }
+      name
+      fundingGoal
+      currency
+      startDate
+      endDate
+      pledges {
+        _id
+        amount
+        currency
+        endDate
+        startDate
+        users {
+          _id
+          firstName
+          lastName
+          image
+        }
+      }
+    }
+  }
+`;
+
+export const USER_FUND_CAMPAIGNS = gql`
+  query GetFundraisingCampaigns(
+    $where: CampaignWhereInput
+    $campaignOrderBy: CampaignOrderByInput
+  ) {
+    getFundraisingCampaigns(where: $where, campaignOrderby: $campaignOrderBy) {
+      _id
+      startDate
+      endDate
+      name
+      fundingGoal
+      currency
+    }
+  }
+`;
+
+export const USER_PLEDGES = gql`
+  query GetPledgesByUserId(
+    $userId: ID!
+    $where: PledgeWhereInput
+    $orderBy: PledgeOrderByInput
+  ) {
+    getPledgesByUserId(userId: $userId, where: $where, orderBy: $orderBy) {
+      _id
+      amount
+      startDate
+      endDate
+      campaign {
+        _id
+        name
+        endDate
+      }
+      currency
+      users {
+        _id
+        firstName
+        lastName
+        image
+      }
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/userTagQueries.ts b/src/GraphQl/Queries/userTagQueries.ts
new file mode 100644
index 0000000000..d58da19e1b
--- /dev/null
+++ b/src/GraphQl/Queries/userTagQueries.ts
@@ -0,0 +1,154 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve organization members assigned a certain tag.
+ *
+ * @param id - The ID of the tag that is assigned.
+ * @returns The list of organization members.
+ */
+
+export const USER_TAGS_ASSIGNED_MEMBERS = gql`
+  query UserTagDetails(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+    $where: UserTagUsersAssignedToWhereInput
+    $sortedBy: UserTagUsersAssignedToSortedByInput
+  ) {
+    getAssignedUsers: getUserTag(id: $id) {
+      name
+      usersAssignedTo(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+        where: $where
+        sortedBy: $sortedBy
+      ) {
+        edges {
+          node {
+            _id
+            firstName
+            lastName
+          }
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+      ancestorTags {
+        _id
+        name
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve the sub tags of a certain tag.
+ *
+ * @param id - The ID of the parent tag.
+ * @returns The list of sub tags.
+ */
+
+export const USER_TAG_SUB_TAGS = gql`
+  query GetChildTags(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+    $where: UserTagWhereInput
+    $sortedBy: UserTagSortedByInput
+  ) {
+    getChildTags: getUserTag(id: $id) {
+      name
+      childTags(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+        where: $where
+        sortedBy: $sortedBy
+      ) {
+        edges {
+          node {
+            _id
+            name
+            usersAssignedTo(first: $first, last: $last) {
+              totalCount
+            }
+            childTags(first: $first, last: $last) {
+              totalCount
+            }
+            ancestorTags {
+              _id
+              name
+            }
+          }
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+      ancestorTags {
+        _id
+        name
+      }
+    }
+  }
+`;
+
+/**
+ * GraphQL query to retrieve organization members that aren't assigned a certain tag.
+ *
+ * @param id - The ID of the tag.
+ * @returns The list of organization members.
+ */
+
+export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
+  query GetMembersToAssignTo(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+    $where: UserTagUsersToAssignToWhereInput
+  ) {
+    getUsersToAssignTo: getUserTag(id: $id) {
+      name
+      usersToAssignTo(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+        where: $where
+      ) {
+        edges {
+          node {
+            _id
+            firstName
+            lastName
+          }
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
new file mode 100644
index 0000000000..0d23ea0e13
--- /dev/null
+++ b/src/assets/css/app.css
@@ -0,0 +1,14195 @@
+@charset "UTF-8";
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+/*!
+ * Bootstrap  v5.3.0 (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme='light'] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-greyish-black: #555555;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #eaebef;
+  --bs-secondary: #707070;
+  --bs-success: #31bb6b;
+  --bs-info: #0dcaf0;
+  --bs-warning: #febc59;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 49, 187, 107;
+  --bs-secondary-rgb: 112, 112, 112;
+  --bs-success-rgb: 49, 187, 107;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 254, 188, 89;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #144b2b;
+  --bs-secondary-text-emphasis: #2d2d2d;
+  --bs-success-text-emphasis: #144b2b;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664b24;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #d6f1e1;
+  --bs-secondary-bg-subtle: #e2e2e2;
+  --bs-success-bg-subtle: #d6f1e1;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff2de;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #ade4c4;
+  --bs-secondary-border-subtle: #c6c6c6;
+  --bs-success-border-subtle: #ade4c4;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe4bd;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto,
+    'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  --bs-font-lato: 'Lato';
+  --bs-gradient: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0)
+  );
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-leftDrawer-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-heading-color: inherit;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: none;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(49, 187, 107, 0.25);
+  --bs-form-valid-color: #31bb6b;
+  --bs-form-valid-border-color: #31bb6b;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme='dark'] {
+  color-scheme: dark;
+  --bs-body-color: #f6f8fc;
+  --bs-body-color-rgb: 173, 181, 189;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(173, 181, 189, 0.75);
+  --bs-secondary-color-rgb: 173, 181, 189;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
+  --bs-tertiary-color-rgb: 173, 181, 189;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #83d6a6;
+  --bs-secondary-text-emphasis: darkgray;
+  --bs-success-text-emphasis: #83d6a6;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #fed79b;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #0a2515;
+  --bs-secondary-bg-subtle: #161616;
+  --bs-success-bg-subtle: #0a2515;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332612;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #1d7040;
+  --bs-secondary-border-subtle: #434343;
+  --bs-success-border-subtle: #1d7040;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #987135;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: inherit;
+  --bs-link-color: #83d6a6;
+  --bs-link-hover-color: #9cdeb8;
+  --bs-link-color-rgb: 131, 214, 166;
+  --bs-link-hover-color-rgb: 156, 222, 184;
+  --bs-code-color: #e685b5;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6,
+.h6,
+h5,
+.h5,
+h4,
+.h4,
+h3,
+.h3,
+h2,
+.h2,
+h1,
+.h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color);
+}
+
+h1,
+.h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+
+@media (min-width: 1200px) {
+  h1,
+  .h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2,
+.h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  h2,
+  .h2 {
+    font-size: 2rem;
+  }
+}
+
+h3,
+.h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+
+@media (min-width: 1200px) {
+  h3,
+  .h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4,
+.h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+
+@media (min-width: 1200px) {
+  h4,
+  .h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5,
+.h5 {
+  font-size: 1.25rem;
+}
+
+h6,
+.h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small,
+.small {
+  font-size: 0.875em;
+}
+
+mark,
+.mark {
+  padding: 0.1875em;
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: none;
+}
+
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]),
+a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role='button'] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not(
+    [type='week']
+  ):not([type='time'])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type='button']:not(:disabled),
+[type='reset']:not(:disabled),
+[type='submit']:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+   [type="tel"],
+   [type="url"],
+   [type="email"],
+   [type="number"] {
+     direction: ltr;
+   }
+   */
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.lead {
+  font-size: 1.25rem;
+  font-weight: 300;
+}
+
+.display-1 {
+  font-size: calc(1.625rem + 4.5vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media (min-width: 1200px) {
+  .display-1 {
+    font-size: 5rem;
+  }
+}
+
+.display-2 {
+  font-size: calc(1.575rem + 3.9vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media (min-width: 1200px) {
+  .display-2 {
+    font-size: 4.5rem;
+  }
+}
+
+.display-3 {
+  font-size: calc(1.525rem + 3.3vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media (min-width: 1200px) {
+  .display-3 {
+    font-size: 4rem;
+  }
+}
+
+.display-4 {
+  font-size: calc(1.475rem + 2.7vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media (min-width: 1200px) {
+  .display-4 {
+    font-size: 3.5rem;
+  }
+}
+
+.display-5 {
+  font-size: calc(1.425rem + 2.1vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media (min-width: 1200px) {
+  .display-5 {
+    font-size: 3rem;
+  }
+}
+
+.display-6 {
+  font-size: calc(1.375rem + 1.5vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+@media (min-width: 1200px) {
+  .display-6 {
+    font-size: 2.5rem;
+  }
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline-item {
+  display: inline-block;
+}
+
+.list-inline-item:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.initialism {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.blockquote {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+}
+
+.blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.blockquote-footer {
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  font-size: 0.875em;
+  color: #6c757d;
+}
+
+.blockquote-footer::before {
+  content: '— ';
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: var(--bs-body-bg);
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  max-width: 100%;
+  height: auto;
+}
+
+.figure {
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 0.875em;
+  color: var(--bs-secondary-color);
+}
+
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container-sm,
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1140px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .container-xxl,
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 1320px;
+  }
+}
+
+:root {
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 576px;
+  --bs-breakpoint-md: 768px;
+  --bs-breakpoint-lg: 992px;
+  --bs-breakpoint-xl: 1200px;
+  --bs-breakpoint-xxl: 1400px;
+}
+
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+}
+
+.row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+
+.col {
+  flex: 1 0 0%;
+}
+
+.row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.row-cols-1 > * {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.row-cols-2 > * {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.row-cols-3 > * {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.row-cols-4 > * {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.row-cols-5 > * {
+  flex: 0 0 auto;
+  width: 20%;
+}
+
+.row-cols-6 > * {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.col-1 {
+  flex: 0 0 auto;
+  width: 8.33333333%;
+}
+
+.col-2 {
+  flex: 0 0 auto;
+  width: 16.66666667%;
+}
+
+.col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.col-4 {
+  flex: 0 0 auto;
+  width: 33.33333333%;
+}
+
+.col-5 {
+  flex: 0 0 auto;
+  width: 41.66666667%;
+}
+
+.col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.col-7 {
+  flex: 0 0 auto;
+  width: 58.33333333%;
+}
+
+.col-8 {
+  flex: 0 0 auto;
+  width: 66.66666667%;
+}
+
+.col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+}
+
+.col-10 {
+  flex: 0 0 auto;
+  width: 83.33333333%;
+}
+
+.col-11 {
+  flex: 0 0 auto;
+  width: 91.66666667%;
+}
+
+.col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.offset-1 {
+  margin-left: 8.33333333%;
+}
+
+.offset-2 {
+  margin-left: 16.66666667%;
+}
+
+.offset-3 {
+  margin-left: 25%;
+}
+
+.offset-4 {
+  margin-left: 33.33333333%;
+}
+
+.offset-5 {
+  margin-left: 41.66666667%;
+}
+
+.offset-6 {
+  margin-left: 50%;
+}
+
+.offset-7 {
+  margin-left: 58.33333333%;
+}
+
+.offset-8 {
+  margin-left: 66.66666667%;
+}
+
+.offset-9 {
+  margin-left: 75%;
+}
+
+.offset-10 {
+  margin-left: 83.33333333%;
+}
+
+.offset-11 {
+  margin-left: 91.66666667%;
+}
+
+.g-0,
+.gx-0 {
+  --bs-gutter-x: 0;
+}
+
+.g-0,
+.gy-0 {
+  --bs-gutter-y: 0;
+}
+
+.g-1,
+.gx-1 {
+  --bs-gutter-x: 0.25rem;
+}
+
+.g-1,
+.gy-1 {
+  --bs-gutter-y: 0.25rem;
+}
+
+.g-2,
+.gx-2 {
+  --bs-gutter-x: 0.5rem;
+}
+
+.g-2,
+.gy-2 {
+  --bs-gutter-y: 0.5rem;
+}
+
+.g-3,
+.gx-3 {
+  --bs-gutter-x: 1rem;
+}
+
+.g-3,
+.gy-3 {
+  --bs-gutter-y: 1rem;
+}
+
+.g-4,
+.gx-4 {
+  --bs-gutter-x: 1.5rem;
+}
+
+.g-4,
+.gy-4 {
+  --bs-gutter-y: 1.5rem;
+}
+
+.g-5,
+.gx-5 {
+  --bs-gutter-x: 3rem;
+}
+
+.g-5,
+.gy-5 {
+  --bs-gutter-y: 3rem;
+}
+
+@media (min-width: 576px) {
+  .col-sm {
+    flex: 1 0 0%;
+  }
+
+  .row-cols-sm-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .row-cols-sm-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .row-cols-sm-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .row-cols-sm-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+
+  .row-cols-sm-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .row-cols-sm-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+
+  .row-cols-sm-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+
+  .col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+
+  .col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+
+  .col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+
+  .col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+
+  .col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+
+  .col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+
+  .col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+
+  .col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+
+  .col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+
+  .col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .offset-sm-0 {
+    margin-left: 0;
+  }
+
+  .offset-sm-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .offset-sm-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .offset-sm-3 {
+    margin-left: 25%;
+  }
+
+  .offset-sm-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .offset-sm-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .offset-sm-6 {
+    margin-left: 50%;
+  }
+
+  .offset-sm-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .offset-sm-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .offset-sm-9 {
+    margin-left: 75%;
+  }
+
+  .offset-sm-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .offset-sm-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .g-sm-0,
+  .gx-sm-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-sm-0,
+  .gy-sm-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-sm-1,
+  .gx-sm-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-sm-1,
+  .gy-sm-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-sm-2,
+  .gx-sm-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-sm-2,
+  .gy-sm-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-sm-3,
+  .gx-sm-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-sm-3,
+  .gy-sm-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-sm-4,
+  .gx-sm-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-sm-4,
+  .gy-sm-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-sm-5,
+  .gx-sm-5 {
+    --bs-gutter-x: 3rem;
+  }
+
+  .g-sm-5,
+  .gy-sm-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md {
+    flex: 1 0 0%;
+  }
+
+  .row-cols-md-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .row-cols-md-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .row-cols-md-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .row-cols-md-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+
+  .row-cols-md-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .row-cols-md-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+
+  .row-cols-md-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+
+  .col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .col-md-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+
+  .col-md-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+
+  .col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .col-md-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+
+  .col-md-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+
+  .col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .col-md-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+
+  .col-md-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+
+  .col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+
+  .col-md-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+
+  .col-md-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+
+  .col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .offset-md-0 {
+    margin-left: 0;
+  }
+
+  .offset-md-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .offset-md-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .offset-md-3 {
+    margin-left: 25%;
+  }
+
+  .offset-md-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .offset-md-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .offset-md-6 {
+    margin-left: 50%;
+  }
+
+  .offset-md-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .offset-md-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .offset-md-9 {
+    margin-left: 75%;
+  }
+
+  .offset-md-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .offset-md-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .g-md-0,
+  .gx-md-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-md-0,
+  .gy-md-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-md-1,
+  .gx-md-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-md-1,
+  .gy-md-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-md-2,
+  .gx-md-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-md-2,
+  .gy-md-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-md-3,
+  .gx-md-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-md-3,
+  .gy-md-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-md-4,
+  .gx-md-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-md-4,
+  .gy-md-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-md-5,
+  .gx-md-5 {
+    --bs-gutter-x: 3rem;
+  }
+
+  .g-md-5,
+  .gy-md-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .col-lg {
+    flex: 1 0 0%;
+  }
+
+  .row-cols-lg-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .row-cols-lg-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .row-cols-lg-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .row-cols-lg-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+
+  .row-cols-lg-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .row-cols-lg-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+
+  .row-cols-lg-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+
+  .col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+
+  .col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+
+  .col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+
+  .col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+
+  .col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+
+  .col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+
+  .col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+
+  .col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+
+  .col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+
+  .col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .offset-lg-0 {
+    margin-left: 0;
+  }
+
+  .offset-lg-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .offset-lg-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .offset-lg-3 {
+    margin-left: 25%;
+  }
+
+  .offset-lg-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .offset-lg-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .offset-lg-6 {
+    margin-left: 50%;
+  }
+
+  .offset-lg-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .offset-lg-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .offset-lg-9 {
+    margin-left: 75%;
+  }
+
+  .offset-lg-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .offset-lg-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .g-lg-0,
+  .gx-lg-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-lg-0,
+  .gy-lg-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-lg-1,
+  .gx-lg-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-lg-1,
+  .gy-lg-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-lg-2,
+  .gx-lg-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-lg-2,
+  .gy-lg-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-lg-3,
+  .gx-lg-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-lg-3,
+  .gy-lg-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-lg-4,
+  .gx-lg-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-lg-4,
+  .gy-lg-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-lg-5,
+  .gx-lg-5 {
+    --bs-gutter-x: 3rem;
+  }
+
+  .g-lg-5,
+  .gy-lg-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xl {
+    flex: 1 0 0%;
+  }
+
+  .row-cols-xl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .row-cols-xl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .row-cols-xl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .row-cols-xl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+
+  .row-cols-xl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .row-cols-xl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+
+  .row-cols-xl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+
+  .col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+
+  .col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+
+  .col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+
+  .col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+
+  .col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+
+  .col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+
+  .col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+
+  .col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+
+  .col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+
+  .col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .offset-xl-0 {
+    margin-left: 0;
+  }
+
+  .offset-xl-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .offset-xl-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .offset-xl-3 {
+    margin-left: 25%;
+  }
+
+  .offset-xl-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .offset-xl-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .offset-xl-6 {
+    margin-left: 50%;
+  }
+
+  .offset-xl-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .offset-xl-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .offset-xl-9 {
+    margin-left: 75%;
+  }
+
+  .offset-xl-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .offset-xl-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .g-xl-0,
+  .gx-xl-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-xl-0,
+  .gy-xl-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-xl-1,
+  .gx-xl-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-xl-1,
+  .gy-xl-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-xl-2,
+  .gx-xl-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-xl-2,
+  .gy-xl-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-xl-3,
+  .gx-xl-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-xl-3,
+  .gy-xl-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-xl-4,
+  .gx-xl-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-xl-4,
+  .gy-xl-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-xl-5,
+  .gx-xl-5 {
+    --bs-gutter-x: 3rem;
+  }
+
+  .g-xl-5,
+  .gy-xl-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  .col-xxl {
+    flex: 1 0 0%;
+  }
+
+  .row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+
+  .row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+
+  .row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+
+  .col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  .col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+
+  .col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  .col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+
+  .col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+
+  .col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  .col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+
+  .col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+
+  .col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+
+  .col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+
+  .col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+
+  .col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .offset-xxl-0 {
+    margin-left: 0;
+  }
+
+  .offset-xxl-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .offset-xxl-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .offset-xxl-3 {
+    margin-left: 25%;
+  }
+
+  .offset-xxl-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .offset-xxl-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .offset-xxl-6 {
+    margin-left: 50%;
+  }
+
+  .offset-xxl-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .offset-xxl-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .offset-xxl-9 {
+    margin-left: 75%;
+  }
+
+  .offset-xxl-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .offset-xxl-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .g-xxl-0,
+  .gx-xxl-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-xxl-0,
+  .gy-xxl-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-xxl-1,
+  .gx-xxl-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-xxl-1,
+  .gy-xxl-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-xxl-2,
+  .gx-xxl-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-xxl-2,
+  .gy-xxl-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-xxl-3,
+  .gx-xxl-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-xxl-3,
+  .gy-xxl-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-xxl-4,
+  .gx-xxl-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-xxl-4,
+  .gy-xxl-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-xxl-5,
+  .gx-xxl-5 {
+    --bs-gutter-x: 3rem;
+  }
+
+  .g-xxl-5,
+  .gy-xxl-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+
+.table {
+  --bs-table-color-type: initial;
+  --bs-table-bg-type: initial;
+  --bs-table-color-state: initial;
+  --bs-table-bg-state: initial;
+  --bs-table-color: var(--bs-body-color);
+  --bs-table-bg: var(--bs-body-bg);
+  --bs-table-border-color: var(--bs-border-color);
+  --bs-table-accent-bg: transparent;
+  --bs-table-striped-color: var(--bs-body-color);
+  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
+  --bs-table-active-color: var(--bs-body-color);
+  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
+  --bs-table-hover-color: var(--bs-body-color);
+  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
+  width: 100%;
+  margin-bottom: 1rem;
+  vertical-align: top;
+  border-color: var(--bs-table-border-color);
+}
+
+.table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  color: var(
+    --bs-table-color-state,
+    var(--bs-table-color-type, var(--bs-table-color))
+  );
+  background-color: var(--bs-table-bg);
+  border-bottom-width: var(--bs-border-width);
+  box-shadow: inset 0 0 0 9999px
+    var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+}
+
+.table > tbody {
+  vertical-align: inherit;
+}
+
+.table > thead {
+  vertical-align: bottom;
+}
+
+.table-group-divider {
+  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
+}
+
+.caption-top {
+  caption-side: top;
+}
+
+.table-sm > :not(caption) > * > * {
+  padding: 0.25rem 0.25rem;
+}
+
+.table-bordered > :not(caption) > * {
+  border-width: var(--bs-border-width) 0;
+}
+
+.table-bordered > :not(caption) > * > * {
+  border-width: 0 var(--bs-border-width);
+}
+
+.table-borderless > :not(caption) > * > * {
+  border-bottom-width: 0;
+}
+
+.table-borderless > :not(:first-child) {
+  border-top-width: 0;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --bs-table-color-type: var(--bs-table-striped-color);
+  --bs-table-bg-type: var(--bs-table-striped-bg);
+}
+
+.table-striped-columns > :not(caption) > tr > :nth-child(even) {
+  --bs-table-color-type: var(--bs-table-striped-color);
+  --bs-table-bg-type: var(--bs-table-striped-bg);
+}
+
+.table-active {
+  --bs-table-color-state: var(--bs-table-active-color);
+  --bs-table-bg-state: var(--bs-table-active-bg);
+}
+
+.table-hover > tbody > tr:hover > * {
+  --bs-table-color-state: var(--bs-table-hover-color);
+  --bs-table-bg-state: var(--bs-table-hover-bg);
+}
+
+.table-primary {
+  --bs-table-color: #000;
+  --bs-table-bg: #d6f1e1;
+  --bs-table-border-color: #c1d9cb;
+  --bs-table-striped-bg: #cbe5d6;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #c1d9cb;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #c6dfd0;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-secondary {
+  --bs-table-color: #000;
+  --bs-table-bg: #e2e2e2;
+  --bs-table-border-color: #cbcbcb;
+  --bs-table-striped-bg: #d7d7d7;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #cbcbcb;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #d1d1d1;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-success {
+  --bs-table-color: #000;
+  --bs-table-bg: #d6f1e1;
+  --bs-table-border-color: #c1d9cb;
+  --bs-table-striped-bg: #cbe5d6;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #c1d9cb;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #c6dfd0;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-info {
+  --bs-table-color: #000;
+  --bs-table-bg: #cff4fc;
+  --bs-table-border-color: #badce3;
+  --bs-table-striped-bg: #c5e8ef;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #badce3;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #bfe2e9;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-warning {
+  --bs-table-color: #000;
+  --bs-table-bg: #fff2de;
+  --bs-table-border-color: #e6dac8;
+  --bs-table-striped-bg: #f2e6d3;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #e6dac8;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #ece0cd;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-danger {
+  --bs-table-color: #000;
+  --bs-table-bg: #f8d7da;
+  --bs-table-border-color: #dfc2c4;
+  --bs-table-striped-bg: #eccccf;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #dfc2c4;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #e5c7ca;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-light {
+  --bs-table-color: #000;
+  --bs-table-bg: #f8f9fa;
+  --bs-table-border-color: #dfe0e1;
+  --bs-table-striped-bg: #ecedee;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #dfe0e1;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #e5e6e7;
+  --bs-table-hover-color: #000;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-dark {
+  --bs-table-color: #fff;
+  --bs-table-bg: #212529;
+  --bs-table-border-color: #373b3e;
+  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-color: #fff;
+  --bs-table-active-bg: #373b3e;
+  --bs-table-active-color: #fff;
+  --bs-table-hover-bg: #323539;
+  --bs-table-hover-color: #fff;
+  color: var(--bs-table-color);
+  border-color: var(--bs-table-border-color);
+}
+
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 575.98px) {
+  .table-responsive-sm {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .table-responsive-md {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .table-responsive-lg {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .table-responsive-xl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  .table-responsive-xxl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.form-label {
+  margin-bottom: 0.5rem;
+}
+
+.col-form-label {
+  padding-top: 0.7rem;
+  padding-bottom: 0.7rem;
+  margin-bottom: 0;
+  font-size: inherit;
+  line-height: 1.5;
+}
+
+.col-form-label-lg {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1.25rem;
+}
+
+.col-form-label-sm {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.form-text {
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: var(--bs-secondary-color);
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.7rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--bs-body-color);
+  background-color: #f2f2f2;
+  background-clip: padding-box;
+  border: 1px solid var(--bs-border-color);
+  appearance: none;
+  border-radius: var(--bs-border-radius);
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-control {
+    transition: none;
+  }
+}
+
+.form-control[type='file'] {
+  overflow: hidden;
+}
+
+.form-control[type='file']:not(:disabled):not([readonly]) {
+  cursor: pointer;
+}
+
+.form-control:focus {
+  color: var(--bs-body-color);
+  background-color: #f2f2f2;
+  border-color: #98ddb5;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+}
+
+.form-control::-webkit-date-and-time-value {
+  min-width: 85px;
+  height: 1.5em;
+  margin: 0;
+}
+
+.form-control::-webkit-datetime-edit {
+  display: block;
+  padding: 0;
+}
+
+.form-control::placeholder {
+  color: var(--bs-secondary-color);
+  opacity: 1;
+}
+
+.form-control:disabled {
+  background-color: var(--bs-secondary-bg);
+  opacity: 1;
+}
+
+.form-control::file-selector-button {
+  padding: 0.7rem 1rem;
+  margin: -0.7rem -1rem;
+  margin-inline-end: 1rem;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
+  pointer-events: none;
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+  border-inline-end-width: 0;
+  border-radius: 0;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-control::file-selector-button {
+    transition: none;
+  }
+}
+
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: var(--bs-secondary-bg);
+}
+
+.form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: 0.7rem 0;
+  margin-bottom: 0;
+  line-height: 1.5;
+  color: var(--bs-body-color);
+  background-color: transparent;
+  border: solid transparent;
+  border-width: 0 0;
+}
+
+.form-control-plaintext:focus {
+  outline: 0;
+}
+
+.form-control-plaintext.form-control-sm,
+.form-control-plaintext.form-control-lg {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.form-control-sm {
+  min-height: calc(1.5em + 0.5rem + calc(0 * 2));
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.form-control-sm::file-selector-button {
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  margin-inline-end: 0.5rem;
+}
+
+.form-control-lg {
+  min-height: calc(1.5em + 1rem + calc(0 * 2));
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.form-control-lg::file-selector-button {
+  padding: 0.5rem 1rem;
+  margin: -0.5rem -1rem;
+  margin-inline-end: 1rem;
+}
+
+textarea.form-control {
+  min-height: calc(1.5em + 1.4rem + calc(0 * 2));
+}
+
+textarea.form-control-sm {
+  min-height: calc(1.5em + 0.5rem + calc(0 * 2));
+}
+
+textarea.form-control-lg {
+  min-height: calc(1.5em + 1rem + calc(0 * 2));
+}
+
+.form-control-color {
+  width: 3rem;
+  height: calc(1.5em + 1.4rem + calc(0 * 2));
+  padding: 0.7rem;
+}
+
+.form-control-color:not(:disabled):not([readonly]) {
+  cursor: pointer;
+}
+
+.form-control-color::-moz-color-swatch {
+  border: 0 !important;
+  border-radius: var(--bs-border-radius);
+}
+
+.form-control-color::-webkit-color-swatch {
+  border: 0 !important;
+  border-radius: var(--bs-border-radius);
+}
+
+.form-control-color.form-control-sm {
+  height: calc(1.5em + 0.5rem + calc(0 * 2));
+}
+
+.form-control-color.form-control-lg {
+  height: calc(1.5em + 1rem + calc(0 * 2));
+}
+
+.form-select {
+  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  display: block;
+  width: 100%;
+  padding: 0.7rem 3rem 0.7rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--bs-body-color);
+  background-color: #f2f2f2;
+  background-image: var(--bs-form-select-bg-img),
+    var(--bs-form-select-bg-icon, none);
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 16px 12px;
+  border: 0 solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  appearance: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-select {
+    transition: none;
+  }
+}
+
+.form-select:focus {
+  border-color: #98ddb5;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+}
+
+.form-select[multiple],
+.form-select[size]:not([size='1']) {
+  padding-right: 1rem;
+  background-image: none;
+}
+
+.form-select:disabled {
+  background-color: var(--bs-secondary-bg);
+}
+
+.form-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--bs-body-color);
+}
+
+.form-select-sm {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.form-select-lg {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  font-size: 1.25rem;
+  border-radius: var(--bs-border-radius-lg);
+}
+
+[data-bs-theme='dark'] .form-select {
+  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+}
+
+.form-check {
+  display: block;
+  min-height: 1.5rem;
+  padding-left: 1.5em;
+  margin-bottom: 0.125rem;
+}
+
+.form-check .form-check-input {
+  float: left;
+  margin-left: -1.5em;
+}
+
+.form-check-reverse {
+  padding-right: 1.5em;
+  padding-left: 0;
+  text-align: right;
+}
+
+.form-check-reverse .form-check-input {
+  float: right;
+  margin-right: -1.5em;
+  margin-left: 0;
+}
+
+.form-check-input {
+  --bs-form-check-bg: #f2f2f2;
+  width: 1.3em;
+  height: 1.3em;
+  margin-top: 0.25em;
+  vertical-align: top;
+  background-color: var(--bs-form-check-bg);
+  background-image: var(--bs-form-check-bg-image);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  appearance: none;
+  print-color-adjust: exact;
+}
+
+.form-check-input[type='checkbox'] {
+  border-radius: 0.25em;
+}
+
+.form-check-input[type='radio'] {
+  border-radius: 50%;
+}
+
+.form-check-input:active {
+  filter: brightness(90%);
+}
+
+.form-check-input:focus {
+  border-color: #98ddb5;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+}
+
+.form-check-input:checked {
+  background-color: #31bb6b;
+  border-color: #31bb6b;
+}
+
+.form-check-input:checked[type='checkbox'] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+
+.form-check-input:checked[type='radio'] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
+}
+
+.form-check-input[type='checkbox']:indeterminate {
+  background-color: #31bb6b;
+  border-color: #31bb6b;
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+}
+
+.form-check-input:disabled {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.5;
+}
+
+.form-check-input[disabled] ~ .form-check-label,
+.form-check-input:disabled ~ .form-check-label {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.form-switch {
+  padding-left: 2.5em;
+}
+
+.form-switch .form-check-input {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+  width: 2em;
+  margin-left: -2.5em;
+  background-image: var(--bs-form-switch-bg);
+  background-position: left center;
+  border-radius: 2em;
+  transition: background-position 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-switch .form-check-input {
+    transition: none;
+  }
+}
+
+.form-switch .form-check-input:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2398ddb5'/%3e%3c/svg%3e");
+}
+
+.form-switch .form-check-input:checked {
+  background-position: right center;
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+}
+
+.form-switch.form-check-reverse {
+  padding-right: 2.5em;
+  padding-left: 0;
+}
+
+.form-switch.form-check-reverse .form-check-input {
+  margin-right: -2.5em;
+  margin-left: 0;
+}
+
+.form-check-inline {
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+.btn-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}
+
+.btn-check[disabled] + .btn,
+.btn-check:disabled + .btn {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.65;
+}
+
+[data-bs-theme='dark']
+  .form-switch
+  .form-check-input:not(:checked):not(:focus) {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
+}
+
+.form-range {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0;
+  background-color: transparent;
+  appearance: none;
+}
+
+.form-range:focus {
+  outline: 0;
+}
+
+.form-range:focus::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+}
+
+.form-range:focus::-moz-range-thumb {
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+}
+
+.form-range::-moz-focus-outer {
+  border: 0;
+}
+
+.form-range::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.25rem;
+  background-color: #31bb6b;
+  border: 0;
+  border-radius: 1rem;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  appearance: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-range::-webkit-slider-thumb {
+    transition: none;
+  }
+}
+
+.form-range::-webkit-slider-thumb:active {
+  background-color: #c1ebd3;
+}
+
+.form-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: var(--bs-tertiary-bg);
+  border-color: transparent;
+  border-radius: 1rem;
+}
+
+.form-range::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background-color: #31bb6b;
+  border: 0;
+  border-radius: 1rem;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  appearance: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-range::-moz-range-thumb {
+    transition: none;
+  }
+}
+
+.form-range::-moz-range-thumb:active {
+  background-color: #c1ebd3;
+}
+
+.form-range::-moz-range-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: var(--bs-tertiary-bg);
+  border-color: transparent;
+  border-radius: 1rem;
+}
+
+.form-range:disabled {
+  pointer-events: none;
+}
+
+.form-range:disabled::-webkit-slider-thumb {
+  background-color: var(--bs-secondary-color);
+}
+
+.form-range:disabled::-moz-range-thumb {
+  background-color: var(--bs-secondary-color);
+}
+
+.form-floating {
+  position: relative;
+}
+
+.form-floating > .form-control,
+.form-floating > .form-control-plaintext,
+.form-floating > .form-select {
+  height: calc(3.5rem + calc(0 * 2));
+  min-height: calc(3.5rem + calc(0 * 2));
+  line-height: 1.25;
+}
+
+.form-floating > label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  height: 100%;
+  padding: 1rem 1rem;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  border: 0 solid transparent;
+  transform-origin: 0 0;
+  transition:
+    opacity 0.1s ease-in-out,
+    transform 0.1s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-floating > label {
+    transition: none;
+  }
+}
+
+.form-floating > .form-control,
+.form-floating > .form-control-plaintext {
+  padding: 1rem 1rem;
+}
+
+.form-floating > .form-control::placeholder,
+.form-floating > .form-control-plaintext::placeholder {
+  color: transparent;
+}
+
+.form-floating > .form-control:focus,
+.form-floating > .form-control:not(:placeholder-shown),
+.form-floating > .form-control-plaintext:focus,
+.form-floating > .form-control-plaintext:not(:placeholder-shown) {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.form-floating > .form-control:-webkit-autofill,
+.form-floating > .form-control-plaintext:-webkit-autofill {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.form-floating > .form-select {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.form-floating > .form-control:focus ~ label,
+.form-floating > .form-control:not(:placeholder-shown) ~ label,
+.form-floating > .form-control-plaintext ~ label,
+.form-floating > .form-select ~ label {
+  color: rgba(var(--bs-body-color-rgb), 0.65);
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+
+.form-floating > .form-control:focus ~ label::after,
+.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
+.form-floating > .form-control-plaintext ~ label::after,
+.form-floating > .form-select ~ label::after {
+  position: absolute;
+  inset: 1rem 0.5rem;
+  z-index: -1;
+  height: 1.5em;
+  content: '';
+  background-color: #f2f2f2;
+  border-radius: var(--bs-border-radius);
+}
+
+.form-floating > .form-control:-webkit-autofill ~ label {
+  color: rgba(var(--bs-body-color-rgb), 0.65);
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+
+.form-floating > .form-control-plaintext ~ label {
+  border-width: 0 0;
+}
+
+.form-floating > :disabled ~ label {
+  color: #6c757d;
+}
+
+.form-floating > :disabled ~ label::after {
+  background-color: var(--bs-secondary-bg);
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group > .form-control,
+.input-group > .form-select,
+.input-group > .form-floating {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+}
+
+.input-group > .form-control:focus,
+.input-group > .form-select:focus,
+.input-group > .form-floating:focus-within {
+  z-index: 5;
+}
+
+.input-group .btn {
+  position: relative;
+  z-index: 2;
+}
+
+.input-group .btn:focus {
+  z-index: 5;
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.7rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--bs-body-color);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--bs-tertiary-bg);
+  border: 0 solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+  padding-right: 4rem;
+}
+
+.input-group:not(.has-validation)
+  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
+    .form-floating
+  ),
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
+.input-group:not(.has-validation)
+  > .form-floating:not(:last-child)
+  > .form-control,
+.input-group:not(.has-validation)
+  > .form-floating:not(:last-child)
+  > .form-select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group.has-validation
+  > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(
+    .form-floating
+  ),
+.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4),
+.input-group.has-validation
+  > .form-floating:nth-last-child(n + 3)
+  > .form-control,
+.input-group.has-validation
+  > .form-floating:nth-last-child(n + 3)
+  > .form-select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group
+  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
+    .valid-feedback
+  ):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: calc(0 * -1);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group > .form-floating:not(:first-child) > .form-control,
+.input-group > .form-floating:not(:first-child) > .form-select {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.valid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: var(--bs-form-valid-color);
+}
+
+.valid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: var(--bs-success);
+  border-radius: var(--bs-border-radius);
+}
+
+.was-validated :valid ~ .valid-feedback,
+.was-validated :valid ~ .valid-tooltip,
+.is-valid ~ .valid-feedback,
+.is-valid ~ .valid-tooltip {
+  display: block;
+}
+
+.was-validated .form-control:valid,
+.form-control.is-valid {
+  border-color: var(--bs-form-valid-border-color);
+  padding-right: calc(1.5em + 1.4rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2331bb6b' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.35rem) center;
+  background-size: calc(0.75em + 0.7rem) calc(0.75em + 0.7rem);
+}
+
+.was-validated .form-control:valid:focus,
+.form-control.is-valid:focus {
+  border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+}
+
+.was-validated textarea.form-control:valid,
+textarea.form-control.is-valid {
+  padding-right: calc(1.5em + 1.4rem);
+  background-position: top calc(0.375em + 0.35rem) right calc(0.375em + 0.35rem);
+}
+
+.was-validated .form-select:valid,
+.form-select.is-valid {
+  border-color: var(--bs-form-valid-border-color);
+}
+
+.was-validated .form-select:valid:not([multiple]):not([size]),
+.was-validated .form-select:valid:not([multiple])[size='1'],
+.form-select.is-valid:not([multiple]):not([size]),
+.form-select.is-valid:not([multiple])[size='1'] {
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2331bb6b' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  padding-right: 5.5rem;
+  background-position:
+    right 1rem center,
+    center right 3rem;
+  background-size:
+    16px 12px,
+    calc(0.75em + 0.7rem) calc(0.75em + 0.7rem);
+}
+
+.was-validated .form-select:valid:focus,
+.form-select.is-valid:focus {
+  border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+}
+
+.was-validated .form-control-color:valid,
+.form-control-color.is-valid {
+  width: calc(3rem + calc(1.5em + 1.4rem));
+}
+
+.was-validated .form-check-input:valid,
+.form-check-input.is-valid {
+  border-color: var(--bs-form-valid-border-color);
+}
+
+.was-validated .form-check-input:valid:checked,
+.form-check-input.is-valid:checked {
+  background-color: var(--bs-form-valid-color);
+}
+
+.was-validated .form-check-input:valid:focus,
+.form-check-input.is-valid:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+}
+
+.was-validated .form-check-input:valid ~ .form-check-label,
+.form-check-input.is-valid ~ .form-check-label {
+  color: var(--bs-form-valid-color);
+}
+
+.form-check-inline .form-check-input ~ .valid-feedback {
+  margin-left: 0.5em;
+}
+
+.was-validated .input-group > .form-control:not(:focus):valid,
+.input-group > .form-control:not(:focus).is-valid,
+.was-validated .input-group > .form-select:not(:focus):valid,
+.input-group > .form-select:not(:focus).is-valid,
+.was-validated .input-group > .form-floating:not(:focus-within):valid,
+.input-group > .form-floating:not(:focus-within).is-valid {
+  z-index: 3;
+}
+
+.invalid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: var(--bs-form-invalid-color);
+}
+
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: var(--bs-danger);
+  border-radius: var(--bs-border-radius);
+}
+
+.was-validated :invalid ~ .invalid-feedback,
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+  display: block;
+}
+
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+  padding-right: calc(1.5em + 1.4rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.35rem) center;
+  background-size: calc(0.75em + 0.7rem) calc(0.75em + 0.7rem);
+}
+
+.was-validated .form-control:invalid:focus,
+.form-control.is-invalid:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.was-validated textarea.form-control:invalid,
+textarea.form-control.is-invalid {
+  padding-right: calc(1.5em + 1.4rem);
+  background-position: top calc(0.375em + 0.35rem) right calc(0.375em + 0.35rem);
+}
+
+.was-validated .form-select:invalid,
+.form-select.is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.was-validated .form-select:invalid:not([multiple]):not([size]),
+.was-validated .form-select:invalid:not([multiple])[size='1'],
+.form-select.is-invalid:not([multiple]):not([size]),
+.form-select.is-invalid:not([multiple])[size='1'] {
+  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  padding-right: 5.5rem;
+  background-position:
+    right 1rem center,
+    center right 3rem;
+  background-size:
+    16px 12px,
+    calc(0.75em + 0.7rem) calc(0.75em + 0.7rem);
+}
+
+.was-validated .form-select:invalid:focus,
+.form-select.is-invalid:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.was-validated .form-control-color:invalid,
+.form-control-color.is-invalid {
+  width: calc(3rem + calc(1.5em + 1.4rem));
+}
+
+.was-validated .form-check-input:invalid,
+.form-check-input.is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.was-validated .form-check-input:invalid:checked,
+.form-check-input.is-invalid:checked {
+  background-color: var(--bs-form-invalid-color);
+}
+
+.was-validated .form-check-input:invalid:focus,
+.form-check-input.is-invalid:focus {
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+
+.was-validated .form-check-input:invalid ~ .form-check-label,
+.form-check-input.is-invalid ~ .form-check-label {
+  color: var(--bs-form-invalid-color);
+}
+
+.form-check-inline .form-check-input ~ .invalid-feedback {
+  margin-left: 0.5em;
+}
+
+.was-validated .input-group > .form-control:not(:focus):invalid,
+.input-group > .form-control:not(:focus).is-invalid,
+.was-validated .input-group > .form-select:not(:focus):invalid,
+.input-group > .form-select:not(:focus).is-invalid,
+.was-validated .input-group > .form-floating:not(:focus-within):invalid,
+.input-group > .form-floating:not(:focus-within).is-invalid {
+  z-index: 4;
+}
+
+.btn {
+  --bs-btn-padding-x: 1rem;
+  --bs-btn-padding-y: 0.7rem;
+  --bs-btn-font-family: ;
+  --bs-btn-font-size: 1rem;
+  --bs-btn-font-weight: 400;
+  --bs-btn-line-height: 1.5;
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-width: var(--bs-border-width);
+  --bs-btn-border-color: transparent;
+  --bs-btn-border-radius: var(--bs-border-radius);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 1px 1px rgba(0, 0, 0, 0.075);
+  --bs-btn-disabled-opacity: 0.65;
+  --bs-btn-focus-box-shadow: 0 0 0 0.25rem
+    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
+  display: inline-block;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+  font-family: var(--bs-btn-font-family);
+  font-size: var(--bs-btn-font-size);
+  font-weight: var(--bs-btn-font-weight);
+  line-height: var(--bs-btn-line-height);
+  color: var(--bs-btn-color);
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+  border-radius: var(--bs-btn-border-radius);
+  background-color: var(--bs-btn-bg);
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+}
+
+.btn:hover {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+}
+
+.btn-check + .btn:hover {
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+}
+
+.btn:focus-visible {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+
+.btn-check:focus-visible + .btn {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+
+.btn-check:checked + .btn,
+:not(.btn-check) + .btn:active,
+.btn:first-child:active,
+.btn.active,
+.btn.show {
+  color: var(--bs-btn-active-color);
+  background-color: var(--bs-btn-active-bg);
+  border-color: var(--bs-btn-active-border-color);
+}
+
+.btn-check:checked + .btn:focus-visible,
+:not(.btn-check) + .btn:active:focus-visible,
+.btn:first-child:active:focus-visible,
+.btn.active:focus-visible,
+.btn.show:focus-visible {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+
+.btn:disabled,
+.btn.disabled,
+fieldset:disabled .btn {
+  color: var(--bs-btn-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-btn-disabled-bg);
+  border-color: var(--bs-btn-disabled-border-color);
+  opacity: var(--bs-btn-disabled-opacity);
+}
+
+.btn-primary {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #31bb6b;
+  --bs-btn-border-color: #31bb6b;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #50c581;
+  --bs-btn-hover-border-color: #46c27a;
+  --bs-btn-focus-shadow-rgb: 42, 159, 91;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #5ac989;
+  --bs-btn-active-border-color: #46c27a;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #31bb6b;
+  --bs-btn-disabled-border-color: #31bb6b;
+}
+
+.btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #707070;
+  --bs-btn-border-color: #707070;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #5f5f5f;
+  --bs-btn-hover-border-color: #5a5a5a;
+  --bs-btn-focus-shadow-rgb: 133, 133, 133;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #5a5a5a;
+  --bs-btn-active-border-color: #545454;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #707070;
+  --bs-btn-disabled-border-color: #707070;
+}
+
+.btn-success {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #31bb6b;
+  --bs-btn-border-color: #31bb6b;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #50c581;
+  --bs-btn-hover-border-color: #46c27a;
+  --bs-btn-focus-shadow-rgb: 42, 159, 91;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #5ac989;
+  --bs-btn-active-border-color: #46c27a;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #31bb6b;
+  --bs-btn-disabled-border-color: #31bb6b;
+}
+
+.btn-info {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #0dcaf0;
+  --bs-btn-border-color: #0dcaf0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #31d2f2;
+  --bs-btn-hover-border-color: #25cff2;
+  --bs-btn-focus-shadow-rgb: 11, 172, 204;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #3dd5f3;
+  --bs-btn-active-border-color: #25cff2;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #0dcaf0;
+  --bs-btn-disabled-border-color: #0dcaf0;
+}
+
+.btn-warning {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #febc59;
+  --bs-btn-border-color: #febc59;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #fec672;
+  --bs-btn-hover-border-color: #fec36a;
+  --bs-btn-focus-shadow-rgb: 216, 160, 76;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #fec97a;
+  --bs-btn-active-border-color: #fec36a;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #febc59;
+  --bs-btn-disabled-border-color: #febc59;
+}
+
+.btn-danger {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #dc3545;
+  --bs-btn-border-color: #dc3545;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #bb2d3b;
+  --bs-btn-hover-border-color: #b02a37;
+  --bs-btn-focus-shadow-rgb: 225, 83, 97;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #b02a37;
+  --bs-btn-active-border-color: #a52834;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #dc3545;
+  --bs-btn-disabled-border-color: #dc3545;
+}
+
+.btn-light {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #f8f9fa;
+  --bs-btn-border-color: #f8f9fa;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d3d4d5;
+  --bs-btn-hover-border-color: #c6c7c8;
+  --bs-btn-focus-shadow-rgb: 211, 212, 213;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #c6c7c8;
+  --bs-btn-active-border-color: #babbbc;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #f8f9fa;
+  --bs-btn-disabled-border-color: #f8f9fa;
+}
+
+.btn-dark {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #212529;
+  --bs-btn-border-color: #212529;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #212529;
+  --bs-btn-disabled-border-color: #212529;
+}
+
+.btn-outline-primary {
+  --bs-btn-color: #31bb6b;
+  --bs-btn-border-color: #31bb6b;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #31bb6b;
+  --bs-btn-hover-border-color: #31bb6b;
+  --bs-btn-focus-shadow-rgb: 49, 187, 107;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #31bb6b;
+  --bs-btn-active-border-color: #31bb6b;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #31bb6b;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #31bb6b;
+  --bs-gradient: none;
+}
+
+.btn-outline-secondary {
+  --bs-btn-color: #707070;
+  --bs-btn-border-color: #707070;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #707070;
+  --bs-btn-hover-border-color: #707070;
+  --bs-btn-focus-shadow-rgb: 112, 112, 112;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #707070;
+  --bs-btn-active-border-color: #707070;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #707070;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #707070;
+  --bs-gradient: none;
+}
+
+.btn-outline-success {
+  --bs-btn-color: #31bb6b;
+  --bs-btn-border-color: #31bb6b;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #31bb6b;
+  --bs-btn-hover-border-color: #31bb6b;
+  --bs-btn-focus-shadow-rgb: 49, 187, 107;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #31bb6b;
+  --bs-btn-active-border-color: #31bb6b;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #31bb6b;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #31bb6b;
+  --bs-gradient: none;
+}
+
+.btn-outline-info {
+  --bs-btn-color: #0dcaf0;
+  --bs-btn-border-color: #0dcaf0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #0dcaf0;
+  --bs-btn-hover-border-color: #0dcaf0;
+  --bs-btn-focus-shadow-rgb: 13, 202, 240;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #0dcaf0;
+  --bs-btn-active-border-color: #0dcaf0;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #0dcaf0;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #0dcaf0;
+  --bs-gradient: none;
+}
+
+.btn-outline-warning {
+  --bs-btn-color: #febc59;
+  --bs-btn-border-color: #febc59;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #febc59;
+  --bs-btn-hover-border-color: #febc59;
+  --bs-btn-focus-shadow-rgb: 254, 188, 89;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #febc59;
+  --bs-btn-active-border-color: #febc59;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #febc59;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #febc59;
+  --bs-gradient: none;
+}
+
+.btn-outline-danger {
+  --bs-btn-color: #dc3545;
+  --bs-btn-border-color: #dc3545;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #dc3545;
+  --bs-btn-hover-border-color: #dc3545;
+  --bs-btn-focus-shadow-rgb: 220, 53, 69;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #dc3545;
+  --bs-btn-active-border-color: #dc3545;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #dc3545;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #dc3545;
+  --bs-gradient: none;
+}
+
+.btn-outline-light {
+  --bs-btn-color: #f8f9fa;
+  --bs-btn-border-color: #f8f9fa;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #f8f9fa;
+  --bs-btn-hover-border-color: #f8f9fa;
+  --bs-btn-focus-shadow-rgb: 248, 249, 250;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #f8f9fa;
+  --bs-btn-active-border-color: #f8f9fa;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #f8f9fa;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #f8f9fa;
+  --bs-gradient: none;
+}
+
+.btn-outline-dark {
+  --bs-btn-color: #212529;
+  --bs-btn-border-color: #212529;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #212529;
+  --bs-btn-hover-border-color: #212529;
+  --bs-btn-focus-shadow-rgb: 33, 37, 41;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #212529;
+  --bs-btn-active-border-color: #212529;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #212529;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #212529;
+  --bs-gradient: none;
+}
+
+.btn-link {
+  --bs-btn-font-weight: 400;
+  --bs-btn-color: var(--bs-link-color);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: transparent;
+  --bs-btn-hover-color: var(--bs-link-hover-color);
+  --bs-btn-hover-border-color: transparent;
+  --bs-btn-active-color: var(--bs-link-hover-color);
+  --bs-btn-active-border-color: transparent;
+  --bs-btn-disabled-color: #6c757d;
+  --bs-btn-disabled-border-color: transparent;
+  --bs-btn-box-shadow: 0 0 0 #000;
+  --bs-btn-focus-shadow-rgb: 49, 132, 253;
+  text-decoration: none;
+}
+
+.btn-link:focus-visible {
+  color: var(--bs-btn-color);
+}
+
+.btn-link:hover {
+  color: var(--bs-btn-hover-color);
+}
+
+.btn-lg,
+.btn-group-lg > .btn {
+  --bs-btn-padding-y: 0.5rem;
+  --bs-btn-padding-x: 1rem;
+  --bs-btn-font-size: 1.25rem;
+  --bs-btn-border-radius: var(--bs-border-radius-lg);
+}
+
+.btn-sm,
+.btn-group-sm > .btn {
+  --bs-btn-padding-y: 0.25rem;
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-font-size: 0.875rem;
+  --bs-btn-border-radius: var(--bs-border-radius-sm);
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
+.dropup,
+.dropend,
+.dropdown,
+.dropstart,
+.dropup-center,
+.dropdown-center {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+}
+
+.dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: '';
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+
+.dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropdown-menu {
+  --bs-dropdown-zindex: 1000;
+  --bs-dropdown-min-width: 10rem;
+  --bs-dropdown-padding-x: 0;
+  --bs-dropdown-padding-y: 0.5rem;
+  --bs-dropdown-spacer: 0.125rem;
+  --bs-dropdown-font-size: 1rem;
+  --bs-dropdown-color: var(--bs-body-color);
+  --bs-dropdown-bg: var(--bs-body-bg);
+  --bs-dropdown-border-color: var(--bs-border-color-translucent);
+  --bs-dropdown-border-radius: var(--bs-border-radius);
+  --bs-dropdown-border-width: var(--bs-border-width);
+  --bs-dropdown-inner-border-radius: calc(
+    var(--bs-border-radius) - var(--bs-border-width)
+  );
+  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+  --bs-dropdown-divider-margin-y: 0.5rem;
+  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-dropdown-link-color: var(--bs-body-color);
+  --bs-dropdown-link-hover-color: var(--bs-body-color);
+  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
+  --bs-dropdown-link-active-color: #fff;
+  --bs-dropdown-link-active-bg: #31bb6b;
+  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
+  --bs-dropdown-item-padding-x: 1rem;
+  --bs-dropdown-item-padding-y: 0.25rem;
+  --bs-dropdown-header-color: #6c757d;
+  --bs-dropdown-header-padding-x: 1rem;
+  --bs-dropdown-header-padding-y: 0.5rem;
+  position: absolute;
+  z-index: var(--bs-dropdown-zindex);
+  display: none;
+  min-width: var(--bs-dropdown-min-width);
+  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
+  margin: 0;
+  font-size: var(--bs-dropdown-font-size);
+  color: var(--bs-dropdown-color);
+  text-align: left;
+  list-style: none;
+  background-color: var(--bs-dropdown-bg);
+  background-clip: padding-box;
+  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
+  border-radius: var(--bs-dropdown-border-radius);
+}
+
+.dropdown-menu[data-bs-popper] {
+  top: 100%;
+  left: 0;
+  margin-top: var(--bs-dropdown-spacer);
+}
+
+.dropdown-menu-start {
+  --bs-position: start;
+}
+
+.dropdown-menu-start[data-bs-popper] {
+  right: auto;
+  left: 0;
+}
+
+.dropdown-menu-end {
+  --bs-position: end;
+}
+
+.dropdown-menu-end[data-bs-popper] {
+  right: 0;
+  left: auto;
+}
+
+@media (min-width: 576px) {
+  .dropdown-menu-sm-start {
+    --bs-position: start;
+  }
+
+  .dropdown-menu-sm-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+
+  .dropdown-menu-sm-end {
+    --bs-position: end;
+  }
+
+  .dropdown-menu-sm-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 768px) {
+  .dropdown-menu-md-start {
+    --bs-position: start;
+  }
+
+  .dropdown-menu-md-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+
+  .dropdown-menu-md-end {
+    --bs-position: end;
+  }
+
+  .dropdown-menu-md-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .dropdown-menu-lg-start {
+    --bs-position: start;
+  }
+
+  .dropdown-menu-lg-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+
+  .dropdown-menu-lg-end {
+    --bs-position: end;
+  }
+
+  .dropdown-menu-lg-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .dropdown-menu-xl-start {
+    --bs-position: start;
+  }
+
+  .dropdown-menu-xl-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+
+  .dropdown-menu-xl-end {
+    --bs-position: end;
+  }
+
+  .dropdown-menu-xl-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 1400px) {
+  .dropdown-menu-xxl-start {
+    --bs-position: start;
+  }
+
+  .dropdown-menu-xxl-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+
+  .dropdown-menu-xxl-end {
+    --bs-position: end;
+  }
+
+  .dropdown-menu-xxl-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
+.dropup .dropdown-menu[data-bs-popper] {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: var(--bs-dropdown-spacer);
+}
+
+.dropup .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: '';
+  border-top: 0;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0.3em solid;
+  border-left: 0.3em solid transparent;
+}
+
+.dropup .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropend .dropdown-menu[data-bs-popper] {
+  top: 0;
+  right: auto;
+  left: 100%;
+  margin-top: 0;
+  margin-left: var(--bs-dropdown-spacer);
+}
+
+.dropend .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: '';
+  border-top: 0.3em solid transparent;
+  border-right: 0;
+  border-bottom: 0.3em solid transparent;
+  border-left: 0.3em solid;
+}
+
+.dropend .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropend .dropdown-toggle::after {
+  vertical-align: 0;
+}
+
+.dropstart .dropdown-menu[data-bs-popper] {
+  top: 0;
+  right: 100%;
+  left: auto;
+  margin-top: 0;
+  margin-right: var(--bs-dropdown-spacer);
+}
+
+.dropstart .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: '';
+}
+
+.dropstart .dropdown-toggle::after {
+  display: none;
+}
+
+.dropstart .dropdown-toggle::before {
+  display: inline-block;
+  margin-right: 0.255em;
+  vertical-align: 0.255em;
+  content: '';
+  border-top: 0.3em solid transparent;
+  border-right: 0.3em solid;
+  border-bottom: 0.3em solid transparent;
+}
+
+.dropstart .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropstart .dropdown-toggle::before {
+  vertical-align: 0;
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: var(--bs-dropdown-divider-margin-y) 0;
+  overflow: hidden;
+  border-top: 1px solid var(--bs-dropdown-divider-bg);
+  opacity: 1;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  clear: both;
+  font-weight: 400;
+  color: var(--bs-dropdown-link-color);
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--bs-dropdown-item-border-radius, 0);
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+  color: var(--bs-dropdown-link-hover-color);
+  background-color: var(--bs-dropdown-link-hover-bg);
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  color: var(--bs-dropdown-link-active-color);
+  text-decoration: none;
+  background-color: var(--bs-dropdown-link-active-bg);
+}
+
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+  color: var(--bs-dropdown-link-disabled-color);
+  pointer-events: none;
+  background-color: transparent;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-header {
+  display: block;
+  padding: var(--bs-dropdown-header-padding-y)
+    var(--bs-dropdown-header-padding-x);
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  color: var(--bs-dropdown-header-color);
+  white-space: nowrap;
+}
+
+.dropdown-item-text {
+  display: block;
+  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  color: var(--bs-dropdown-link-color);
+}
+
+.dropdown-menu-dark {
+  --bs-dropdown-color: #dee2e6;
+  --bs-dropdown-bg: #343a40;
+  --bs-dropdown-border-color: var(--bs-border-color-translucent);
+  --bs-dropdown-box-shadow: ;
+  --bs-dropdown-link-color: #dee2e6;
+  --bs-dropdown-link-hover-color: #fff;
+  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
+  --bs-dropdown-link-active-color: #fff;
+  --bs-dropdown-link-active-bg: #31bb6b;
+  --bs-dropdown-link-disabled-color: #adb5bd;
+  --bs-dropdown-header-color: #adb5bd;
+}
+
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.btn-group > .btn-check:checked + .btn,
+.btn-group > .btn-check:focus + .btn,
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn-check:checked + .btn,
+.btn-group-vertical > .btn-check:focus + .btn,
+.btn-group-vertical > .btn:hover,
+.btn-group-vertical > .btn:focus,
+.btn-group-vertical > .btn:active,
+.btn-group-vertical > .btn.active {
+  z-index: 1;
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.btn-toolbar .input-group {
+  width: auto;
+}
+
+.btn-group {
+  border-radius: var(--bs-border-radius);
+}
+
+.btn-group > :not(.btn-check:first-child) + .btn,
+.btn-group > .btn-group:not(:first-child) {
+  margin-left: calc(var(--bs-border-width) * -1);
+}
+
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group > .btn.dropdown-toggle-split:first-child,
+.btn-group > .btn-group:not(:last-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > .btn:nth-child(n + 3),
+.btn-group > :not(.btn-check) + .btn,
+.btn-group > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dropdown-toggle-split {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+.dropdown-toggle-split::after,
+.dropup .dropdown-toggle-split::after,
+.dropend .dropdown-toggle-split::after {
+  margin-left: 0;
+}
+
+.dropstart .dropdown-toggle-split::before {
+  margin-right: 0;
+}
+
+.btn-sm + .dropdown-toggle-split,
+.btn-group-sm > .btn + .dropdown-toggle-split {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+}
+
+.btn-lg + .dropdown-toggle-split,
+.btn-group-lg > .btn + .dropdown-toggle-split {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
+  width: 100%;
+}
+
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) {
+  margin-top: calc(var(--bs-border-width) * -1);
+}
+
+.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group-vertical > .btn ~ .btn,
+.btn-group-vertical > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav {
+  --bs-nav-link-padding-x: 1rem;
+  --bs-nav-link-padding-y: 0.5rem;
+  --bs-nav-link-font-weight: ;
+  --bs-nav-link-color: var(--bs-link-color);
+  --bs-nav-link-hover-color: var(--bs-link-hover-color);
+  --bs-nav-link-disabled-color: var(--bs-secondary-color);
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+  font-size: var(--bs-nav-link-font-size);
+  font-weight: var(--bs-nav-link-font-weight);
+  color: var(--bs-nav-link-color);
+  background: none;
+  border: 0;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-link {
+    transition: none;
+  }
+}
+
+.nav-link:hover,
+.nav-link:focus {
+  color: var(--bs-nav-link-hover-color);
+}
+
+.nav-link:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+}
+
+.nav-link.disabled {
+  color: var(--bs-nav-link-disabled-color);
+  pointer-events: none;
+  cursor: default;
+}
+
+.nav-tabs {
+  --bs-nav-tabs-border-width: var(--bs-border-width);
+  --bs-nav-tabs-border-color: var(--bs-border-color);
+  --bs-nav-tabs-border-radius: var(--bs-border-radius);
+  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg)
+    var(--bs-secondary-bg) var(--bs-border-color);
+  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
+  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
+  --bs-nav-tabs-link-active-border-color: var(--bs-border-color)
+    var(--bs-border-color) var(--bs-body-bg);
+  border-bottom: var(--bs-nav-tabs-border-width) solid
+    var(--bs-nav-tabs-border-color);
+}
+
+.nav-tabs .nav-link {
+  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
+  border: var(--bs-nav-tabs-border-width) solid transparent;
+  border-top-left-radius: var(--bs-nav-tabs-border-radius);
+  border-top-right-radius: var(--bs-nav-tabs-border-radius);
+}
+
+.nav-tabs .nav-link:hover,
+.nav-tabs .nav-link:focus {
+  isolation: isolate;
+  border-color: var(--bs-nav-tabs-link-hover-border-color);
+}
+
+.nav-tabs .nav-link.disabled,
+.nav-tabs .nav-link:disabled {
+  color: var(--bs-nav-link-disabled-color);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: var(--bs-nav-tabs-link-active-color);
+  background-color: var(--bs-nav-tabs-link-active-bg);
+  border-color: var(--bs-nav-tabs-link-active-border-color);
+}
+
+.nav-tabs .dropdown-menu {
+  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav-pills {
+  --bs-nav-pills-border-radius: var(--bs-border-radius);
+  --bs-nav-pills-link-active-color: #fff;
+  --bs-nav-pills-link-active-bg: #31bb6b;
+}
+
+.nav-pills .nav-link {
+  border-radius: var(--bs-nav-pills-border-radius);
+}
+
+.nav-pills .nav-link:disabled {
+  color: var(--bs-nav-link-disabled-color);
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: var(--bs-nav-pills-link-active-color);
+  background-color: var(--bs-nav-pills-link-active-bg);
+}
+
+.nav-underline {
+  --bs-nav-underline-gap: 1rem;
+  --bs-nav-underline-border-width: 0.125rem;
+  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
+  gap: var(--bs-nav-underline-gap);
+}
+
+.nav-underline .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+  border-bottom: var(--bs-nav-underline-border-width) solid transparent;
+}
+
+.nav-underline .nav-link:hover,
+.nav-underline .nav-link:focus {
+  border-bottom-color: currentcolor;
+}
+
+.nav-underline .nav-link.active,
+.nav-underline .show > .nav-link {
+  font-weight: 700;
+  color: var(--bs-nav-underline-link-active-color);
+  border-bottom-color: currentcolor;
+}
+
+.nav-fill > .nav-link,
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.nav-justified > .nav-link,
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.nav-fill .nav-item .nav-link,
+.nav-justified .nav-item .nav-link {
+  width: 100%;
+}
+
+.tab-content > .tab-pane {
+  display: none;
+}
+
+.tab-content > .active {
+  display: block;
+}
+
+.navbar {
+  --bs-navbar-padding-x: 0;
+  --bs-navbar-padding-y: 0.5rem;
+  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
+  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
+  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
+  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
+  --bs-navbar-brand-padding-y: 0.3125rem;
+  --bs-navbar-brand-margin-end: 1rem;
+  --bs-navbar-brand-font-size: 1.25rem;
+  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
+  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
+  --bs-navbar-nav-link-padding-x: 0.5rem;
+  --bs-navbar-toggler-padding-y: 0.25rem;
+  --bs-navbar-toggler-padding-x: 0.75rem;
+  --bs-navbar-toggler-font-size: 1.25rem;
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
+  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
+  --bs-navbar-toggler-focus-width: 0.25rem;
+  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
+}
+
+.navbar > .container,
+.navbar > .container-fluid,
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-brand {
+  padding-top: var(--bs-navbar-brand-padding-y);
+  padding-bottom: var(--bs-navbar-brand-padding-y);
+  margin-right: var(--bs-navbar-brand-margin-end);
+  font-size: var(--bs-navbar-brand-font-size);
+  color: var(--bs-navbar-brand-color);
+  white-space: nowrap;
+}
+
+.navbar-brand:hover,
+.navbar-brand:focus {
+  color: var(--bs-navbar-brand-hover-color);
+}
+
+.navbar-nav {
+  --bs-nav-link-padding-x: 0;
+  --bs-nav-link-padding-y: 0.5rem;
+  --bs-nav-link-font-weight: ;
+  --bs-nav-link-color: var(--bs-navbar-color);
+  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
+  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.navbar-nav .nav-link.active,
+.navbar-nav .nav-link.show {
+  color: var(--bs-navbar-active-color);
+}
+
+.navbar-nav .dropdown-menu {
+  position: static;
+}
+
+.navbar-text {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-navbar-color);
+}
+
+.navbar-text a,
+.navbar-text a:hover,
+.navbar-text a:focus {
+  color: var(--bs-navbar-active-color);
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.navbar-toggler {
+  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
+  font-size: var(--bs-navbar-toggler-font-size);
+  line-height: 1;
+  color: var(--bs-navbar-color);
+  background-color: transparent;
+  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
+  border-radius: var(--bs-navbar-toggler-border-radius);
+  transition: var(--bs-navbar-toggler-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .navbar-toggler {
+    transition: none;
+  }
+}
+
+.navbar-toggler:hover {
+  text-decoration: none;
+}
+
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-image: var(--bs-navbar-toggler-icon-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.navbar-nav-scroll {
+  max-height: var(--bs-scroll-height, 75vh);
+  overflow-y: auto;
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+
+  .navbar-expand-sm .navbar-nav-scroll {
+    overflow: visible;
+  }
+
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-expand-sm .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+
+  .navbar-expand-sm .offcanvas .offcanvas-header {
+    display: none;
+  }
+
+  .navbar-expand-sm .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
+  }
+
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+
+  .navbar-expand-md .navbar-nav-scroll {
+    overflow: visible;
+  }
+
+  .navbar-expand-md .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+
+  .navbar-expand-md .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-expand-md .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+
+  .navbar-expand-md .offcanvas .offcanvas-header {
+    display: none;
+  }
+
+  .navbar-expand-md .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
+  }
+
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+
+  .navbar-expand-lg .navbar-nav-scroll {
+    overflow: visible;
+  }
+
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-expand-lg .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+
+  .navbar-expand-lg .offcanvas .offcanvas-header {
+    display: none;
+  }
+
+  .navbar-expand-lg .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
+@media (min-width: 1200px) {
+  .navbar-expand-xl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
+  }
+
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+
+  .navbar-expand-xl .navbar-nav-scroll {
+    overflow: visible;
+  }
+
+  .navbar-expand-xl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-expand-xl .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+
+  .navbar-expand-xl .offcanvas .offcanvas-header {
+    display: none;
+  }
+
+  .navbar-expand-xl .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: var(--bs-navbar-nav-link-padding-x);
+    padding-left: var(--bs-navbar-nav-link-padding-x);
+  }
+
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-expand-xxl .offcanvas {
+    position: static;
+    z-index: auto;
+    flex-grow: 1;
+    width: auto !important;
+    height: auto !important;
+    visibility: visible !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    transform: none !important;
+    transition: none;
+  }
+
+  .navbar-expand-xxl .offcanvas .offcanvas-header {
+    display: none;
+  }
+
+  .navbar-expand-xxl .offcanvas .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
+.navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.navbar-expand .navbar-nav {
+  flex-direction: row;
+}
+
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+}
+
+.navbar-expand .navbar-nav .nav-link {
+  padding-right: var(--bs-navbar-nav-link-padding-x);
+  padding-left: var(--bs-navbar-nav-link-padding-x);
+}
+
+.navbar-expand .navbar-nav-scroll {
+  overflow: visible;
+}
+
+.navbar-expand .navbar-collapse {
+  display: flex !important;
+  flex-basis: auto;
+}
+
+.navbar-expand .navbar-toggler {
+  display: none;
+}
+
+.navbar-expand .offcanvas {
+  position: static;
+  z-index: auto;
+  flex-grow: 1;
+  width: auto !important;
+  height: auto !important;
+  visibility: visible !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  transform: none !important;
+  transition: none;
+}
+
+.navbar-expand .offcanvas .offcanvas-header {
+  display: none;
+}
+
+.navbar-expand .offcanvas .offcanvas-body {
+  display: flex;
+  flex-grow: 0;
+  padding: 0;
+  overflow-y: visible;
+}
+
+.navbar-dark,
+.navbar[data-bs-theme='dark'] {
+  --bs-navbar-color: rgba(255, 255, 255, 0.55);
+  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
+  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
+  --bs-navbar-active-color: #fff;
+  --bs-navbar-brand-color: #fff;
+  --bs-navbar-brand-hover-color: #fff;
+  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+[data-bs-theme='dark'] .navbar-toggler-icon {
+  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.card {
+  --bs-card-spacer-y: 1rem;
+  --bs-card-spacer-x: 1rem;
+  --bs-card-title-spacer-y: 0.5rem;
+  --bs-card-title-color: ;
+  --bs-card-subtitle-color: ;
+  --bs-card-border-width: var(--bs-border-width);
+  --bs-card-border-color: var(--bs-border-color-translucent);
+  --bs-card-border-radius: var(--bs-border-radius);
+  --bs-card-box-shadow: ;
+  --bs-card-inner-border-radius: calc(
+    var(--bs-border-radius) - (var(--bs-border-width))
+  );
+  --bs-card-cap-padding-y: 0.5rem;
+  --bs-card-cap-padding-x: 1rem;
+  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
+  --bs-card-cap-color: ;
+  --bs-card-height: ;
+  --bs-card-color: ;
+  --bs-card-bg: var(--bs-body-bg);
+  --bs-card-img-overlay-padding: 1rem;
+  --bs-card-group-margin: 0.75rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: var(--bs-card-height);
+  color: var(--bs-body-color);
+  word-wrap: break-word;
+  background-color: var(--bs-card-bg);
+  background-clip: border-box;
+  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  border-radius: var(--bs-card-border-radius);
+}
+
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.card > .list-group {
+  border-top: inherit;
+  border-bottom: inherit;
+}
+
+.card > .list-group:first-child {
+  border-top-width: 0;
+  border-top-left-radius: var(--bs-card-inner-border-radius);
+  border-top-right-radius: var(--bs-card-inner-border-radius);
+}
+
+.card > .list-group:last-child {
+  border-bottom-width: 0;
+  border-bottom-right-radius: var(--bs-card-inner-border-radius);
+  border-bottom-left-radius: var(--bs-card-inner-border-radius);
+}
+
+.card > .card-header + .list-group,
+.card > .list-group + .card-footer {
+  border-top: 0;
+}
+
+.card-body {
+  flex: 1 1 auto;
+  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+  color: var(--bs-card-color);
+}
+
+.card-title {
+  margin-bottom: var(--bs-card-title-spacer-y);
+  color: var(--bs-card-title-color);
+}
+
+.card-subtitle {
+  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
+  margin-bottom: 0;
+  color: var(--bs-card-subtitle-color);
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link + .card-link {
+  margin-left: var(--bs-card-spacer-x);
+}
+
+.card-header {
+  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
+  margin-bottom: 0;
+  color: var(--bs-card-cap-color);
+  background-color: var(--bs-card-cap-bg);
+  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+}
+
+.card-header:first-child {
+  border-radius: var(--bs-card-inner-border-radius)
+    var(--bs-card-inner-border-radius) 0 0;
+}
+
+.card-footer {
+  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
+  color: var(--bs-card-cap-color);
+  background-color: var(--bs-card-cap-bg);
+  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+}
+
+.card-footer:last-child {
+  border-radius: 0 0 var(--bs-card-inner-border-radius)
+    var(--bs-card-inner-border-radius);
+}
+
+.card-header-tabs {
+  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
+  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
+  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
+  border-bottom: 0;
+}
+
+.card-header-tabs .nav-link.active {
+  background-color: var(--bs-card-bg);
+  border-bottom-color: var(--bs-card-bg);
+}
+
+.card-header-pills {
+  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
+  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--bs-card-img-overlay-padding);
+  border-radius: var(--bs-card-inner-border-radius);
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%;
+}
+
+.card-img,
+.card-img-top {
+  border-top-left-radius: var(--bs-card-inner-border-radius);
+  border-top-right-radius: var(--bs-card-inner-border-radius);
+}
+
+.card-img,
+.card-img-bottom {
+  border-bottom-right-radius: var(--bs-card-inner-border-radius);
+  border-bottom-left-radius: var(--bs-card-inner-border-radius);
+}
+
+.card-group > .card {
+  margin-bottom: var(--bs-card-group-margin);
+}
+
+@media (min-width: 576px) {
+  .card-group {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .card-group > .card {
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+
+  .card-group > .card + .card {
+    margin-left: 0;
+    border-left: 0;
+  }
+
+  .card-group > .card:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .card-group > .card:not(:last-child) .card-img-top,
+  .card-group > .card:not(:last-child) .card-header {
+    border-top-right-radius: 0;
+  }
+
+  .card-group > .card:not(:last-child) .card-img-bottom,
+  .card-group > .card:not(:last-child) .card-footer {
+    border-bottom-right-radius: 0;
+  }
+
+  .card-group > .card:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .card-group > .card:not(:first-child) .card-img-top,
+  .card-group > .card:not(:first-child) .card-header {
+    border-top-left-radius: 0;
+  }
+
+  .card-group > .card:not(:first-child) .card-img-bottom,
+  .card-group > .card:not(:first-child) .card-footer {
+    border-bottom-left-radius: 0;
+  }
+}
+
+.accordion {
+  --bs-accordion-color: var(--bs-body-color);
+  --bs-accordion-bg: var(--bs-body-bg);
+  --bs-accordion-transition: color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
+  --bs-accordion-border-color: var(--bs-border-color);
+  --bs-accordion-border-width: var(--bs-border-width);
+  --bs-accordion-border-radius: var(--bs-border-radius);
+  --bs-accordion-inner-border-radius: calc(
+    var(--bs-border-radius) - (var(--bs-border-width))
+  );
+  --bs-accordion-btn-padding-x: 1.25rem;
+  --bs-accordion-btn-padding-y: 1rem;
+  --bs-accordion-btn-color: var(--bs-body-color);
+  --bs-accordion-btn-bg: var(--bs-accordion-bg);
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon-width: 1.25rem;
+  --bs-accordion-btn-icon-transform: rotate(-180deg);
+  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23144b2b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-focus-border-color: #98ddb5;
+  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+  --bs-accordion-body-padding-x: 1.25rem;
+  --bs-accordion-body-padding-y: 1rem;
+  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
+  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
+  font-size: 1rem;
+  color: var(--bs-accordion-btn-color);
+  text-align: left;
+  background-color: var(--bs-accordion-btn-bg);
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: var(--bs-accordion-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button {
+    transition: none;
+  }
+}
+
+.accordion-button:not(.collapsed) {
+  color: var(--bs-accordion-active-color);
+  background-color: var(--bs-accordion-active-bg);
+  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
+    var(--bs-accordion-border-color);
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: var(--bs-accordion-btn-active-icon);
+  transform: var(--bs-accordion-btn-icon-transform);
+}
+
+.accordion-button::after {
+  flex-shrink: 0;
+  width: var(--bs-accordion-btn-icon-width);
+  height: var(--bs-accordion-btn-icon-width);
+  margin-left: auto;
+  content: '';
+  background-image: var(--bs-accordion-btn-icon);
+  background-repeat: no-repeat;
+  background-size: var(--bs-accordion-btn-icon-width);
+  transition: var(--bs-accordion-btn-icon-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button::after {
+    transition: none;
+  }
+}
+
+.accordion-button:hover {
+  z-index: 2;
+}
+
+.accordion-button:focus {
+  z-index: 3;
+  border-color: var(--bs-accordion-btn-focus-border-color);
+  outline: 0;
+  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--bs-accordion-color);
+  background-color: var(--bs-accordion-bg);
+  border: var(--bs-accordion-border-width) solid
+    var(--bs-accordion-border-color);
+}
+
+.accordion-item:first-of-type {
+  border-top-left-radius: var(--bs-accordion-border-radius);
+  border-top-right-radius: var(--bs-accordion-border-radius);
+}
+
+.accordion-item:first-of-type .accordion-button {
+  border-top-left-radius: var(--bs-accordion-inner-border-radius);
+  border-top-right-radius: var(--bs-accordion-inner-border-radius);
+}
+
+.accordion-item:not(:first-of-type) {
+  border-top: 0;
+}
+
+.accordion-item:last-of-type {
+  border-bottom-right-radius: var(--bs-accordion-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-border-radius);
+}
+
+.accordion-item:last-of-type .accordion-button.collapsed {
+  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
+}
+
+.accordion-item:last-of-type .accordion-collapse {
+  border-bottom-right-radius: var(--bs-accordion-border-radius);
+  border-bottom-left-radius: var(--bs-accordion-border-radius);
+}
+
+.accordion-body {
+  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
+}
+
+.accordion-flush .accordion-collapse {
+  border-width: 0;
+}
+
+.accordion-flush .accordion-item {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+.accordion-flush .accordion-item:first-child {
+  border-top: 0;
+}
+
+.accordion-flush .accordion-item:last-child {
+  border-bottom: 0;
+}
+
+.accordion-flush .accordion-item .accordion-button,
+.accordion-flush .accordion-item .accordion-button.collapsed {
+  border-radius: 0;
+}
+
+[data-bs-theme='dark'] .accordion-button::after {
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2383d6a6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2383d6a6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
+.breadcrumb {
+  --bs-breadcrumb-padding-x: 0;
+  --bs-breadcrumb-padding-y: 0;
+  --bs-breadcrumb-margin-bottom: 1rem;
+  --bs-breadcrumb-bg: ;
+  --bs-breadcrumb-border-radius: ;
+  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
+  --bs-breadcrumb-item-padding-x: 0.5rem;
+  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
+  margin-bottom: var(--bs-breadcrumb-margin-bottom);
+  font-size: var(--bs-breadcrumb-font-size);
+  list-style: none;
+  background-color: var(--bs-breadcrumb-bg);
+  border-radius: var(--bs-breadcrumb-border-radius);
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: var(--bs-breadcrumb-item-padding-x);
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  float: left;
+  padding-right: var(--bs-breadcrumb-item-padding-x);
+  color: var(--bs-breadcrumb-divider-color);
+  content: var(--bs-breadcrumb-divider, '/')
+    /* rtl: var(--bs-breadcrumb-divider, "/") */;
+}
+
+.breadcrumb-item.active {
+  color: var(--bs-breadcrumb-item-active-color);
+}
+
+.pagination {
+  --bs-pagination-padding-x: 0.75rem;
+  --bs-pagination-padding-y: 0.375rem;
+  --bs-pagination-font-size: 1rem;
+  --bs-pagination-color: var(--bs-link-color);
+  --bs-pagination-bg: var(--bs-body-bg);
+  --bs-pagination-border-width: var(--bs-border-width);
+  --bs-pagination-border-color: var(--bs-border-color);
+  --bs-pagination-border-radius: var(--bs-border-radius);
+  --bs-pagination-hover-color: var(--bs-link-hover-color);
+  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
+  --bs-pagination-hover-border-color: var(--bs-border-color);
+  --bs-pagination-focus-color: var(--bs-link-hover-color);
+  --bs-pagination-focus-bg: var(--bs-secondary-bg);
+  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+  --bs-pagination-active-color: #fff;
+  --bs-pagination-active-bg: #31bb6b;
+  --bs-pagination-active-border-color: #31bb6b;
+  --bs-pagination-disabled-color: var(--bs-secondary-color);
+  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
+  --bs-pagination-disabled-border-color: var(--bs-border-color);
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
+  font-size: var(--bs-pagination-font-size);
+  color: var(--bs-pagination-color);
+  background-color: var(--bs-pagination-bg);
+  border: var(--bs-pagination-border-width) solid
+    var(--bs-pagination-border-color);
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-link {
+    transition: none;
+  }
+}
+
+.page-link:hover {
+  z-index: 2;
+  color: var(--bs-pagination-hover-color);
+  background-color: var(--bs-pagination-hover-bg);
+  border-color: var(--bs-pagination-hover-border-color);
+}
+
+.page-link:focus {
+  z-index: 3;
+  color: var(--bs-pagination-focus-color);
+  background-color: var(--bs-pagination-focus-bg);
+  outline: 0;
+  box-shadow: var(--bs-pagination-focus-box-shadow);
+}
+
+.page-link.active,
+.active > .page-link {
+  z-index: 3;
+  color: var(--bs-pagination-active-color);
+  background-color: var(--bs-pagination-active-bg);
+  border-color: var(--bs-pagination-active-border-color);
+}
+
+.page-link.disabled,
+.disabled > .page-link {
+  color: var(--bs-pagination-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-pagination-disabled-bg);
+  border-color: var(--bs-pagination-disabled-border-color);
+}
+
+.page-item:not(:first-child) .page-link {
+  margin-left: calc(var(--bs-border-width) * -1);
+}
+
+.page-item:first-child .page-link {
+  border-top-left-radius: var(--bs-pagination-border-radius);
+  border-bottom-left-radius: var(--bs-pagination-border-radius);
+}
+
+.page-item:last-child .page-link {
+  border-top-right-radius: var(--bs-pagination-border-radius);
+  border-bottom-right-radius: var(--bs-pagination-border-radius);
+}
+
+.pagination-lg {
+  --bs-pagination-padding-x: 1.5rem;
+  --bs-pagination-padding-y: 0.75rem;
+  --bs-pagination-font-size: 1.25rem;
+  --bs-pagination-border-radius: var(--bs-border-radius-lg);
+}
+
+.pagination-sm {
+  --bs-pagination-padding-x: 0.5rem;
+  --bs-pagination-padding-y: 0.25rem;
+  --bs-pagination-font-size: 0.875rem;
+  --bs-pagination-border-radius: var(--bs-border-radius-sm);
+}
+
+.badge {
+  --bs-badge-padding-x: 0.65em;
+  --bs-badge-padding-y: 0.35em;
+  --bs-badge-font-size: 0.75em;
+  --bs-badge-font-weight: 700;
+  --bs-badge-color: #fff;
+  --bs-badge-border-radius: var(--bs-border-radius);
+  display: inline-block;
+  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
+  font-size: var(--bs-badge-font-size);
+  font-weight: var(--bs-badge-font-weight);
+  line-height: 1;
+  color: var(--bs-badge-color);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--bs-badge-border-radius);
+}
+
+.badge:empty {
+  display: none;
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.alert {
+  --bs-alert-bg: transparent;
+  --bs-alert-padding-x: 1rem;
+  --bs-alert-padding-y: 1rem;
+  --bs-alert-margin-bottom: 1rem;
+  --bs-alert-color: inherit;
+  --bs-alert-border-color: transparent;
+  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
+  --bs-alert-border-radius: var(--bs-border-radius);
+  --bs-alert-link-color: inherit;
+  position: relative;
+  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+  margin-bottom: var(--bs-alert-margin-bottom);
+  color: var(--bs-alert-color);
+  background-color: var(--bs-alert-bg);
+  border: var(--bs-alert-border);
+  border-radius: var(--bs-alert-border-radius);
+}
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: 700;
+  color: var(--bs-alert-link-color);
+}
+
+.alert-dismissible {
+  padding-right: 3rem;
+}
+
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  padding: 1.25rem 1rem;
+}
+
+.alert-primary {
+  --bs-alert-color: var(--bs-primary-text-emphasis);
+  --bs-alert-bg: var(--bs-primary-bg-subtle);
+  --bs-alert-border-color: var(--bs-primary-border-subtle);
+  --bs-alert-link-color: var(--bs-primary-text-emphasis);
+}
+
+.alert-secondary {
+  --bs-alert-color: var(--bs-secondary-text-emphasis);
+  --bs-alert-bg: var(--bs-secondary-bg-subtle);
+  --bs-alert-border-color: var(--bs-secondary-border-subtle);
+  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
+}
+
+.alert-success {
+  --bs-alert-color: var(--bs-success-text-emphasis);
+  --bs-alert-bg: var(--bs-success-bg-subtle);
+  --bs-alert-border-color: var(--bs-success-border-subtle);
+  --bs-alert-link-color: var(--bs-success-text-emphasis);
+}
+
+.alert-info {
+  --bs-alert-color: var(--bs-info-text-emphasis);
+  --bs-alert-bg: var(--bs-info-bg-subtle);
+  --bs-alert-border-color: var(--bs-info-border-subtle);
+  --bs-alert-link-color: var(--bs-info-text-emphasis);
+}
+
+.alert-warning {
+  --bs-alert-color: var(--bs-warning-text-emphasis);
+  --bs-alert-bg: var(--bs-warning-bg-subtle);
+  --bs-alert-border-color: var(--bs-warning-border-subtle);
+  --bs-alert-link-color: var(--bs-warning-text-emphasis);
+}
+
+.alert-danger {
+  --bs-alert-color: var(--bs-danger-text-emphasis);
+  --bs-alert-bg: var(--bs-danger-bg-subtle);
+  --bs-alert-border-color: var(--bs-danger-border-subtle);
+  --bs-alert-link-color: var(--bs-danger-text-emphasis);
+}
+
+.alert-light {
+  --bs-alert-color: var(--bs-light-text-emphasis);
+  --bs-alert-bg: var(--bs-light-bg-subtle);
+  --bs-alert-border-color: var(--bs-light-border-subtle);
+  --bs-alert-link-color: var(--bs-light-text-emphasis);
+}
+
+.alert-dark {
+  --bs-alert-color: var(--bs-dark-text-emphasis);
+  --bs-alert-bg: var(--bs-dark-bg-subtle);
+  --bs-alert-border-color: var(--bs-dark-border-subtle);
+  --bs-alert-link-color: var(--bs-dark-text-emphasis);
+}
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 1rem;
+  }
+}
+
+.progress,
+.progress-stacked {
+  --bs-progress-height: 1rem;
+  --bs-progress-font-size: 0.75rem;
+  --bs-progress-bg: var(--bs-secondary-bg);
+  --bs-progress-border-radius: var(--bs-border-radius);
+  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
+  --bs-progress-bar-color: #fff;
+  --bs-progress-bar-bg: #31bb6b;
+  --bs-progress-bar-transition: width 0.6s ease;
+  display: flex;
+  height: var(--bs-progress-height);
+  overflow: hidden;
+  font-size: var(--bs-progress-font-size);
+  background-color: var(--bs-progress-bg);
+  border-radius: var(--bs-progress-border-radius);
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--bs-progress-bar-color);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--bs-progress-bar-bg);
+  transition: var(--bs-progress-bar-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}
+
+.progress-bar-striped {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: var(--bs-progress-height) var(--bs-progress-height);
+}
+
+.progress-stacked > .progress {
+  overflow: visible;
+}
+
+.progress-stacked > .progress > .progress-bar {
+  width: 100%;
+}
+
+.progress-bar-animated {
+  animation: 1s linear infinite progress-bar-stripes;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar-animated {
+    animation: none;
+  }
+}
+
+.list-group {
+  --bs-list-group-color: var(--bs-body-color);
+  --bs-list-group-bg: var(--bs-body-bg);
+  --bs-list-group-border-color: var(--bs-border-color);
+  --bs-list-group-border-width: var(--bs-border-width);
+  --bs-list-group-border-radius: var(--bs-border-radius);
+  --bs-list-group-item-padding-x: 1rem;
+  --bs-list-group-item-padding-y: 0.5rem;
+  --bs-list-group-action-color: var(--bs-secondary-color);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
+  --bs-list-group-action-active-color: var(--bs-body-color);
+  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
+  --bs-list-group-disabled-color: var(--bs-secondary-color);
+  --bs-list-group-disabled-bg: var(--bs-body-bg);
+  --bs-list-group-active-color: #fff;
+  --bs-list-group-active-bg: #31bb6b;
+  --bs-list-group-active-border-color: #31bb6b;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-radius: var(--bs-list-group-border-radius);
+}
+
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+}
+
+.list-group-numbered > .list-group-item::before {
+  content: counters(section, '.') '. ';
+  counter-increment: section;
+}
+
+.list-group-item-action {
+  width: 100%;
+  color: var(--bs-list-group-action-color);
+  text-align: inherit;
+}
+
+.list-group-item-action:hover,
+.list-group-item-action:focus {
+  z-index: 1;
+  color: var(--bs-list-group-action-hover-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-action-hover-bg);
+}
+
+.list-group-item-action:active {
+  color: var(--bs-list-group-action-active-color);
+  background-color: var(--bs-list-group-action-active-bg);
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: var(--bs-list-group-item-padding-y)
+    var(--bs-list-group-item-padding-x);
+  color: var(--bs-list-group-color);
+  background-color: var(--bs-list-group-bg);
+  border: var(--bs-list-group-border-width) solid
+    var(--bs-list-group-border-color);
+}
+
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.list-group-item:last-child {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.list-group-item.disabled,
+.list-group-item:disabled {
+  color: var(--bs-list-group-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-list-group-disabled-bg);
+}
+
+.list-group-item.active {
+  z-index: 2;
+  color: var(--bs-list-group-active-color);
+  background-color: var(--bs-list-group-active-bg);
+  border-color: var(--bs-list-group-active-border-color);
+}
+
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+
+.list-group-item + .list-group-item.active {
+  margin-top: calc(-1 * var(--bs-list-group-border-width));
+  border-top-width: var(--bs-list-group-border-width);
+}
+
+.list-group-horizontal {
+  flex-direction: row;
+}
+
+.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
+  border-bottom-left-radius: var(--bs-list-group-border-radius);
+  border-top-right-radius: 0;
+}
+
+.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
+  border-top-right-radius: var(--bs-list-group-border-radius);
+  border-bottom-left-radius: 0;
+}
+
+.list-group-horizontal > .list-group-item.active {
+  margin-top: 0;
+}
+
+.list-group-horizontal > .list-group-item + .list-group-item {
+  border-top-width: var(--bs-list-group-border-width);
+  border-left-width: 0;
+}
+
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+  margin-left: calc(-1 * var(--bs-list-group-border-width));
+  border-left-width: var(--bs-list-group-border-width);
+}
+
+@media (min-width: 576px) {
+  .list-group-horizontal-sm {
+    flex-direction: row;
+  }
+
+  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+
+  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+
+  .list-group-horizontal-sm > .list-group-item.active {
+    margin-top: 0;
+  }
+
+  .list-group-horizontal-sm > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+
+  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+
+@media (min-width: 768px) {
+  .list-group-horizontal-md {
+    flex-direction: row;
+  }
+
+  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+
+  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+
+  .list-group-horizontal-md > .list-group-item.active {
+    margin-top: 0;
+  }
+
+  .list-group-horizontal-md > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+
+  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+
+@media (min-width: 992px) {
+  .list-group-horizontal-lg {
+    flex-direction: row;
+  }
+
+  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+
+  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+
+  .list-group-horizontal-lg > .list-group-item.active {
+    margin-top: 0;
+  }
+
+  .list-group-horizontal-lg > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+
+  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+
+@media (min-width: 1200px) {
+  .list-group-horizontal-xl {
+    flex-direction: row;
+  }
+
+  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+
+  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+
+  .list-group-horizontal-xl > .list-group-item.active {
+    margin-top: 0;
+  }
+
+  .list-group-horizontal-xl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+
+  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+
+  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+
+  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+
+.list-group-flush {
+  border-radius: 0;
+}
+
+.list-group-flush > .list-group-item {
+  border-width: 0 0 var(--bs-list-group-border-width);
+}
+
+.list-group-flush > .list-group-item:last-child {
+  border-bottom-width: 0;
+}
+
+.list-group-item-primary {
+  --bs-list-group-color: var(--bs-primary-text-emphasis);
+  --bs-list-group-bg: var(--bs-primary-bg-subtle);
+  --bs-list-group-border-color: var(--bs-primary-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
+  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
+}
+
+.list-group-item-secondary {
+  --bs-list-group-color: var(--bs-secondary-text-emphasis);
+  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
+  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
+  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
+}
+
+.list-group-item-success {
+  --bs-list-group-color: var(--bs-success-text-emphasis);
+  --bs-list-group-bg: var(--bs-success-bg-subtle);
+  --bs-list-group-border-color: var(--bs-success-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
+  --bs-list-group-active-color: var(--bs-success-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
+}
+
+.list-group-item-info {
+  --bs-list-group-color: var(--bs-info-text-emphasis);
+  --bs-list-group-bg: var(--bs-info-bg-subtle);
+  --bs-list-group-border-color: var(--bs-info-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
+  --bs-list-group-active-color: var(--bs-info-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
+}
+
+.list-group-item-warning {
+  --bs-list-group-color: var(--bs-warning-text-emphasis);
+  --bs-list-group-bg: var(--bs-warning-bg-subtle);
+  --bs-list-group-border-color: var(--bs-warning-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
+  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
+}
+
+.list-group-item-danger {
+  --bs-list-group-color: var(--bs-danger-text-emphasis);
+  --bs-list-group-bg: var(--bs-danger-bg-subtle);
+  --bs-list-group-border-color: var(--bs-danger-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
+  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
+}
+
+.list-group-item-light {
+  --bs-list-group-color: var(--bs-light-text-emphasis);
+  --bs-list-group-bg: var(--bs-light-bg-subtle);
+  --bs-list-group-border-color: var(--bs-light-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
+  --bs-list-group-active-color: var(--bs-light-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
+}
+
+.list-group-item-dark {
+  --bs-list-group-color: var(--bs-dark-text-emphasis);
+  --bs-list-group-bg: var(--bs-dark-bg-subtle);
+  --bs-list-group-border-color: var(--bs-dark-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
+  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
+}
+
+.btn-close {
+  --bs-btn-close-color: #000;
+  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
+  --bs-btn-close-opacity: 0.5;
+  --bs-btn-close-hover-opacity: 0.75;
+  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
+  --bs-btn-close-focus-opacity: 1;
+  --bs-btn-close-disabled-opacity: 0.25;
+  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em 0.25em;
+  color: var(--bs-btn-close-color);
+  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
+  border: 0;
+  border-radius: 0.375rem;
+  opacity: var(--bs-btn-close-opacity);
+}
+
+.btn-close:hover {
+  color: var(--bs-btn-close-color);
+  text-decoration: none;
+  opacity: var(--bs-btn-close-hover-opacity);
+}
+
+.btn-close:focus {
+  outline: 0;
+  box-shadow: var(--bs-btn-close-focus-shadow);
+  opacity: var(--bs-btn-close-focus-opacity);
+}
+
+.btn-close:disabled,
+.btn-close.disabled {
+  pointer-events: none;
+  user-select: none;
+  opacity: var(--bs-btn-close-disabled-opacity);
+}
+
+.btn-close-white {
+  filter: var(--bs-btn-close-white-filter);
+}
+
+[data-bs-theme='dark'] .btn-close {
+  filter: var(--bs-btn-close-white-filter);
+}
+
+.toast {
+  --bs-toast-zindex: 1090;
+  --bs-toast-padding-x: 0.75rem;
+  --bs-toast-padding-y: 0.5rem;
+  --bs-toast-spacing: 1.5rem;
+  --bs-toast-max-width: 350px;
+  --bs-toast-font-size: 0.875rem;
+  --bs-toast-color: ;
+  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
+  --bs-toast-border-width: var(--bs-border-width);
+  --bs-toast-border-color: var(--bs-border-color-translucent);
+  --bs-toast-border-radius: var(--bs-border-radius);
+  --bs-toast-box-shadow: var(--bs-box-shadow);
+  --bs-toast-header-color: var(--bs-secondary-color);
+  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
+  --bs-toast-header-border-color: var(--bs-border-color-translucent);
+  width: var(--bs-toast-max-width);
+  max-width: 100%;
+  font-size: var(--bs-toast-font-size);
+  color: var(--bs-toast-color);
+  pointer-events: auto;
+  background-color: var(--bs-toast-bg);
+  background-clip: padding-box;
+  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
+  box-shadow: var(--bs-toast-box-shadow);
+  border-radius: var(--bs-toast-border-radius);
+}
+
+.toast.showing {
+  opacity: 0;
+}
+
+.toast:not(.show) {
+  display: none;
+}
+
+.toast-container {
+  --bs-toast-zindex: 1090;
+  position: absolute;
+  z-index: var(--bs-toast-zindex);
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
+}
+
+.toast-container > :not(:last-child) {
+  margin-bottom: var(--bs-toast-spacing);
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
+  color: var(--bs-toast-header-color);
+  background-color: var(--bs-toast-header-bg);
+  background-clip: padding-box;
+  border-bottom: var(--bs-toast-border-width) solid
+    var(--bs-toast-header-border-color);
+  border-top-left-radius: calc(
+    var(--bs-toast-border-radius) - var(--bs-toast-border-width)
+  );
+  border-top-right-radius: calc(
+    var(--bs-toast-border-radius) - var(--bs-toast-border-width)
+  );
+}
+
+.toast-header .btn-close {
+  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
+  margin-left: var(--bs-toast-padding-x);
+}
+
+.toast-body {
+  padding: var(--bs-toast-padding-x);
+  word-wrap: break-word;
+}
+
+.modal {
+  --bs-modal-zindex: 1055;
+  --bs-modal-width: 500px;
+  --bs-modal-padding: 1rem;
+  --bs-modal-margin: 0.5rem;
+  --bs-modal-color: ;
+  --bs-modal-bg: var(--bs-body-bg);
+  --bs-modal-border-color: var(--bs-border-color-translucent);
+  --bs-modal-border-width: var(--bs-border-width);
+  --bs-modal-border-radius: var(--bs-border-radius-lg);
+  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-modal-inner-border-radius: calc(
+    var(--bs-border-radius-lg) - (var(--bs-border-width))
+  );
+  --bs-modal-header-padding-x: 1rem;
+  --bs-modal-header-padding-y: 1rem;
+  --bs-modal-header-padding: 1rem 1rem;
+  --bs-modal-header-border-color: var(--bs-border-color);
+  --bs-modal-header-border-width: var(--bs-border-width);
+  --bs-modal-title-line-height: 1.5;
+  --bs-modal-footer-gap: 0.5rem;
+  --bs-modal-footer-bg: ;
+  --bs-modal-footer-border-color: var(--bs-border-color);
+  --bs-modal-footer-border-width: var(--bs-border-width);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--bs-modal-zindex);
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: var(--bs-modal-margin);
+  pointer-events: none;
+}
+
+.modal.fade .modal-dialog {
+  transition: transform 0.3s ease-out;
+  transform: translate(0, -50px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal.fade .modal-dialog {
+    transition: none;
+  }
+}
+
+.modal.show .modal-dialog {
+  transform: none;
+}
+
+.modal.modal-static .modal-dialog {
+  transform: scale(1.02);
+}
+
+.modal-dialog-scrollable {
+  height: calc(100% - var(--bs-modal-margin) * 2);
+}
+
+.modal-dialog-scrollable .modal-content {
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.modal-dialog-scrollable .modal-body {
+  overflow-y: auto;
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - var(--bs-modal-margin) * 2);
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: var(--bs-modal-color);
+  pointer-events: auto;
+  background-color: var(--bs-modal-bg);
+  background-clip: padding-box;
+  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
+  border-radius: var(--bs-modal-border-radius);
+  outline: 0;
+}
+
+.modal-backdrop {
+  --bs-backdrop-zindex: 1050;
+  --bs-backdrop-bg: #000;
+  --bs-backdrop-opacity: 0.5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--bs-backdrop-zindex);
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--bs-backdrop-bg);
+}
+
+.modal-backdrop.fade {
+  opacity: 0;
+}
+
+.modal-backdrop.show {
+  opacity: var(--bs-backdrop-opacity);
+}
+
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-modal-header-padding);
+  border-bottom: var(--bs-modal-header-border-width) solid
+    var(--bs-modal-header-border-color);
+  border-top-left-radius: var(--bs-modal-inner-border-radius);
+  border-top-right-radius: var(--bs-modal-inner-border-radius);
+}
+
+.modal-header .btn-close {
+  padding: calc(var(--bs-modal-header-padding-y) * 0.5)
+    calc(var(--bs-modal-header-padding-x) * 0.5);
+  margin: calc(-0.5 * var(--bs-modal-header-padding-y))
+    calc(-0.5 * var(--bs-modal-header-padding-x))
+    calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
+}
+
+.modal-title {
+  margin-bottom: 0;
+  line-height: var(--bs-modal-title-line-height);
+}
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--bs-modal-padding);
+}
+
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
+  background-color: var(--bs-modal-footer-bg);
+  border-top: var(--bs-modal-footer-border-width) solid
+    var(--bs-modal-footer-border-color);
+  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
+  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
+}
+
+.modal-footer > * {
+  margin: calc(var(--bs-modal-footer-gap) * 0.5);
+}
+
+@media (min-width: 576px) {
+  .modal {
+    --bs-modal-margin: 1.75rem;
+    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+
+  .modal-dialog {
+    max-width: var(--bs-modal-width);
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .modal-sm {
+    --bs-modal-width: 300px;
+  }
+}
+
+@media (min-width: 992px) {
+  .modal-lg,
+  .modal-xl {
+    --bs-modal-width: 800px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .modal-xl {
+    --bs-modal-width: 1140px;
+  }
+}
+
+.modal-fullscreen {
+  width: 100vw;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+}
+
+.modal-fullscreen .modal-content {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+
+.modal-fullscreen .modal-header,
+.modal-fullscreen .modal-footer {
+  border-radius: 0;
+}
+
+.modal-fullscreen .modal-body {
+  overflow-y: auto;
+}
+
+@media (max-width: 575.98px) {
+  .modal-fullscreen-sm-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+
+  .modal-fullscreen-sm-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-sm-down .modal-header,
+  .modal-fullscreen-sm-down .modal-footer {
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-sm-down .modal-body {
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .modal-fullscreen-md-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+
+  .modal-fullscreen-md-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-md-down .modal-header,
+  .modal-fullscreen-md-down .modal-footer {
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-md-down .modal-body {
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .modal-fullscreen-lg-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+
+  .modal-fullscreen-lg-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-lg-down .modal-header,
+  .modal-fullscreen-lg-down .modal-footer {
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-lg-down .modal-body {
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .modal-fullscreen-xl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+
+  .modal-fullscreen-xl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-xl-down .modal-header,
+  .modal-fullscreen-xl-down .modal-footer {
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-xl-down .modal-body {
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  .modal-fullscreen-xxl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+
+  .modal-fullscreen-xxl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-xxl-down .modal-header,
+  .modal-fullscreen-xxl-down .modal-footer {
+    border-radius: 0;
+  }
+
+  .modal-fullscreen-xxl-down .modal-body {
+    overflow-y: auto;
+  }
+}
+
+.tooltip {
+  --bs-tooltip-zindex: 1080;
+  --bs-tooltip-max-width: 200px;
+  --bs-tooltip-padding-x: 0.5rem;
+  --bs-tooltip-padding-y: 0.25rem;
+  --bs-tooltip-margin: ;
+  --bs-tooltip-font-size: 0.875rem;
+  --bs-tooltip-color: var(--bs-body-bg);
+  --bs-tooltip-bg: var(--bs-emphasis-color);
+  --bs-tooltip-border-radius: var(--bs-border-radius);
+  --bs-tooltip-opacity: 0.9;
+  --bs-tooltip-arrow-width: 0.8rem;
+  --bs-tooltip-arrow-height: 0.4rem;
+  z-index: var(--bs-tooltip-zindex);
+  display: block;
+  margin: var(--bs-tooltip-margin);
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  white-space: normal;
+  word-spacing: normal;
+  line-break: auto;
+  font-size: var(--bs-tooltip-font-size);
+  word-wrap: break-word;
+  opacity: 0;
+}
+
+.tooltip.show {
+  opacity: var(--bs-tooltip-opacity);
+}
+
+.tooltip .tooltip-arrow {
+  display: block;
+  width: var(--bs-tooltip-arrow-width);
+  height: var(--bs-tooltip-arrow-height);
+}
+
+.tooltip .tooltip-arrow::before {
+  position: absolute;
+  content: '';
+  border-color: transparent;
+  border-style: solid;
+}
+
+.bs-tooltip-top .tooltip-arrow,
+.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow {
+  bottom: calc(-1 * var(--bs-tooltip-arrow-height));
+}
+
+.bs-tooltip-top .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before {
+  top: -1px;
+  border-width: var(--bs-tooltip-arrow-height)
+    calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
+  border-top-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow,
+.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow {
+  left: calc(-1 * var(--bs-tooltip-arrow-height));
+  width: var(--bs-tooltip-arrow-height);
+  height: var(--bs-tooltip-arrow-width);
+}
+
+.bs-tooltip-end .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^='right'] .tooltip-arrow::before {
+  right: -1px;
+  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5)
+    var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
+  border-right-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:end:ignore */
+.bs-tooltip-bottom .tooltip-arrow,
+.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow {
+  top: calc(-1 * var(--bs-tooltip-arrow-height));
+}
+
+.bs-tooltip-bottom .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^='bottom'] .tooltip-arrow::before {
+  bottom: -1px;
+  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5)
+    var(--bs-tooltip-arrow-height);
+  border-bottom-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow,
+.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow {
+  right: calc(-1 * var(--bs-tooltip-arrow-height));
+  width: var(--bs-tooltip-arrow-height);
+  height: var(--bs-tooltip-arrow-width);
+}
+
+.bs-tooltip-start .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^='left'] .tooltip-arrow::before {
+  left: -1px;
+  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0
+    calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
+  border-left-color: var(--bs-tooltip-bg);
+}
+
+/* rtl:end:ignore */
+.tooltip-inner {
+  max-width: var(--bs-tooltip-max-width);
+  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
+  color: var(--bs-tooltip-color);
+  text-align: center;
+  background-color: var(--bs-tooltip-bg);
+  border-radius: var(--bs-tooltip-border-radius);
+}
+
+.popover {
+  --bs-popover-zindex: 1070;
+  --bs-popover-max-width: 276px;
+  --bs-popover-font-size: 0.875rem;
+  --bs-popover-bg: var(--bs-body-bg);
+  --bs-popover-border-width: var(--bs-border-width);
+  --bs-popover-border-color: var(--bs-border-color-translucent);
+  --bs-popover-border-radius: var(--bs-border-radius-lg);
+  --bs-popover-inner-border-radius: calc(
+    var(--bs-border-radius-lg) - var(--bs-border-width)
+  );
+  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-popover-header-padding-x: 1rem;
+  --bs-popover-header-padding-y: 0.5rem;
+  --bs-popover-header-font-size: 1rem;
+  --bs-popover-header-color: inherit;
+  --bs-popover-header-bg: var(--bs-secondary-bg);
+  --bs-popover-body-padding-x: 1rem;
+  --bs-popover-body-padding-y: 1rem;
+  --bs-popover-body-color: var(--bs-body-color);
+  --bs-popover-arrow-width: 1rem;
+  --bs-popover-arrow-height: 0.5rem;
+  --bs-popover-arrow-border: var(--bs-popover-border-color);
+  z-index: var(--bs-popover-zindex);
+  display: block;
+  max-width: var(--bs-popover-max-width);
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  white-space: normal;
+  word-spacing: normal;
+  line-break: auto;
+  font-size: var(--bs-popover-font-size);
+  word-wrap: break-word;
+  background-color: var(--bs-popover-bg);
+  background-clip: padding-box;
+  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
+  border-radius: var(--bs-popover-border-radius);
+}
+
+.popover .popover-arrow {
+  display: block;
+  width: var(--bs-popover-arrow-width);
+  height: var(--bs-popover-arrow-height);
+}
+
+.popover .popover-arrow::before,
+.popover .popover-arrow::after {
+  position: absolute;
+  display: block;
+  content: '';
+  border-color: transparent;
+  border-style: solid;
+  border-width: 0;
+}
+
+.bs-popover-top > .popover-arrow,
+.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow {
+  bottom: calc(
+    -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)
+  );
+}
+
+.bs-popover-top > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::before,
+.bs-popover-top > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::after {
+  border-width: var(--bs-popover-arrow-height)
+    calc(var(--bs-popover-arrow-width) * 0.5) 0;
+}
+
+.bs-popover-top > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::before {
+  bottom: 0;
+  border-top-color: var(--bs-popover-arrow-border);
+}
+
+.bs-popover-top > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::after {
+  bottom: var(--bs-popover-border-width);
+  border-top-color: var(--bs-popover-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-popover-end > .popover-arrow,
+.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow {
+  left: calc(
+    -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)
+  );
+  width: var(--bs-popover-arrow-height);
+  height: var(--bs-popover-arrow-width);
+}
+
+.bs-popover-end > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::before,
+.bs-popover-end > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::after {
+  border-width: calc(var(--bs-popover-arrow-width) * 0.5)
+    var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
+}
+
+.bs-popover-end > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::before {
+  left: 0;
+  border-right-color: var(--bs-popover-arrow-border);
+}
+
+.bs-popover-end > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::after {
+  left: var(--bs-popover-border-width);
+  border-right-color: var(--bs-popover-bg);
+}
+
+/* rtl:end:ignore */
+.bs-popover-bottom > .popover-arrow,
+.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow {
+  top: calc(
+    -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)
+  );
+}
+
+.bs-popover-bottom > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::before,
+.bs-popover-bottom > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::after {
+  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5)
+    var(--bs-popover-arrow-height);
+}
+
+.bs-popover-bottom > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::before {
+  top: 0;
+  border-bottom-color: var(--bs-popover-arrow-border);
+}
+
+.bs-popover-bottom > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::after {
+  top: var(--bs-popover-border-width);
+  border-bottom-color: var(--bs-popover-bg);
+}
+
+.bs-popover-bottom .popover-header::before,
+.bs-popover-auto[data-popper-placement^='bottom'] .popover-header::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: block;
+  width: var(--bs-popover-arrow-width);
+  margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
+  content: '';
+  border-bottom: var(--bs-popover-border-width) solid
+    var(--bs-popover-header-bg);
+}
+
+/* rtl:begin:ignore */
+.bs-popover-start > .popover-arrow,
+.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow {
+  right: calc(
+    -1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)
+  );
+  width: var(--bs-popover-arrow-height);
+  height: var(--bs-popover-arrow-width);
+}
+
+.bs-popover-start > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::before,
+.bs-popover-start > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::after {
+  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0
+    calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
+}
+
+.bs-popover-start > .popover-arrow::before,
+.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::before {
+  right: 0;
+  border-left-color: var(--bs-popover-arrow-border);
+}
+
+.bs-popover-start > .popover-arrow::after,
+.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::after {
+  right: var(--bs-popover-border-width);
+  border-left-color: var(--bs-popover-bg);
+}
+
+/* rtl:end:ignore */
+.popover-header {
+  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
+  margin-bottom: 0;
+  font-size: var(--bs-popover-header-font-size);
+  color: var(--bs-popover-header-color);
+  background-color: var(--bs-popover-header-bg);
+  border-bottom: var(--bs-popover-border-width) solid
+    var(--bs-popover-border-color);
+  border-top-left-radius: var(--bs-popover-inner-border-radius);
+  border-top-right-radius: var(--bs-popover-inner-border-radius);
+}
+
+.popover-header:empty {
+  display: none;
+}
+
+.popover-body {
+  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
+  color: var(--bs-popover-body-color);
+}
+
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-inner::after {
+  display: block;
+  clear: both;
+  content: '';
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  transition: transform 0.6s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-item {
+    transition: none;
+  }
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
+  transform: translateX(-100%);
+}
+
+.carousel-fade .carousel-item {
+  opacity: 0;
+  transition-property: opacity;
+  transform: none;
+}
+
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-start,
+.carousel-fade .carousel-item-prev.carousel-item-end {
+  z-index: 1;
+  opacity: 1;
+}
+
+.carousel-fade .active.carousel-item-start,
+.carousel-fade .active.carousel-item-end {
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0s 0.6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-fade .active.carousel-item-start,
+  .carousel-fade .active.carousel-item-end {
+    transition: none;
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15%;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-control-prev,
+  .carousel-control-next {
+    transition: none;
+  }
+}
+
+.carousel-control-prev:hover,
+.carousel-control-prev:focus,
+.carousel-control-next:hover,
+.carousel-control-next:focus {
+  color: #fff;
+  text-decoration: none;
+  outline: 0;
+  opacity: 0.9;
+}
+
+.carousel-control-prev {
+  left: 0;
+}
+
+.carousel-control-next {
+  right: 0;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
+}
+
+/* rtl:options: {
+     "autoRename": true,
+     "stringMap":[ {
+       "name"    : "prev-next",
+       "search"  : "prev",
+       "replace" : "next"
+     } ]
+   } */
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin-right: 15%;
+  margin-bottom: 1rem;
+  margin-left: 15%;
+}
+
+.carousel-indicators [data-bs-target] {
+  box-sizing: content-box;
+  flex: 0 1 auto;
+  width: 30px;
+  height: 3px;
+  padding: 0;
+  margin-right: 3px;
+  margin-left: 3px;
+  text-indent: -999px;
+  cursor: pointer;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  opacity: 0.5;
+  transition: opacity 0.6s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-indicators [data-bs-target] {
+    transition: none;
+  }
+}
+
+.carousel-indicators .active {
+  opacity: 1;
+}
+
+.carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 1.25rem;
+  left: 15%;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  color: #fff;
+  text-align: center;
+}
+
+.carousel-dark .carousel-control-prev-icon,
+.carousel-dark .carousel-control-next-icon {
+  filter: invert(1) grayscale(100);
+}
+
+.carousel-dark .carousel-indicators [data-bs-target] {
+  background-color: #000;
+}
+
+.carousel-dark .carousel-caption {
+  color: #000;
+}
+
+[data-bs-theme='dark'] .carousel .carousel-control-prev-icon,
+[data-bs-theme='dark'] .carousel .carousel-control-next-icon,
+[data-bs-theme='dark'].carousel .carousel-control-prev-icon,
+[data-bs-theme='dark'].carousel .carousel-control-next-icon {
+  filter: invert(1) grayscale(100);
+}
+
+[data-bs-theme='dark'] .carousel .carousel-indicators [data-bs-target],
+[data-bs-theme='dark'].carousel .carousel-indicators [data-bs-target] {
+  background-color: #000;
+}
+
+[data-bs-theme='dark'] .carousel .carousel-caption,
+[data-bs-theme='dark'].carousel .carousel-caption {
+  color: #000;
+}
+
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  animation: var(--bs-spinner-animation-speed) linear infinite
+    var(--bs-spinner-animation-name);
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+  --bs-spinner-border-width: 0.2em;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.spinner-grow {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-grow;
+  background-color: currentcolor;
+  opacity: 0;
+}
+
+.spinner-grow-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+  .spinner-grow {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}
+
+.offcanvas,
+.offcanvas-xxl,
+.offcanvas-xl,
+.offcanvas-lg,
+.offcanvas-md,
+.offcanvas-sm {
+  --bs-offcanvas-zindex: 1045;
+  --bs-offcanvas-width: 400px;
+  --bs-offcanvas-height: 30vh;
+  --bs-offcanvas-padding-x: 1rem;
+  --bs-offcanvas-padding-y: 1rem;
+  --bs-offcanvas-color: var(--bs-body-color);
+  --bs-offcanvas-bg: var(--bs-body-bg);
+  --bs-offcanvas-border-width: var(--bs-border-width);
+  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
+  --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-offcanvas-transition: transform 0.3s ease-in-out;
+  --bs-offcanvas-title-line-height: 1.5;
+}
+
+@media (max-width: 575.98px) {
+  .offcanvas-sm {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: var(--bs-offcanvas-transition);
+  }
+}
+
+@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-sm {
+    transition: none;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .offcanvas-sm.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+
+  .offcanvas-sm.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+
+  .offcanvas-sm.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+
+  .offcanvas-sm.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+
+  .offcanvas-sm.showing,
+  .offcanvas-sm.show:not(.hiding) {
+    transform: none;
+  }
+
+  .offcanvas-sm.showing,
+  .offcanvas-sm.hiding,
+  .offcanvas-sm.show {
+    visibility: visible;
+  }
+}
+
+@media (min-width: 576px) {
+  .offcanvas-sm {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+
+  .offcanvas-sm .offcanvas-header {
+    display: none;
+  }
+
+  .offcanvas-sm .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .offcanvas-md {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: var(--bs-offcanvas-transition);
+  }
+}
+
+@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-md {
+    transition: none;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .offcanvas-md.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+
+  .offcanvas-md.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+
+  .offcanvas-md.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+
+  .offcanvas-md.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+
+  .offcanvas-md.showing,
+  .offcanvas-md.show:not(.hiding) {
+    transform: none;
+  }
+
+  .offcanvas-md.showing,
+  .offcanvas-md.hiding,
+  .offcanvas-md.show {
+    visibility: visible;
+  }
+}
+
+@media (min-width: 768px) {
+  .offcanvas-md {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+
+  .offcanvas-md .offcanvas-header {
+    display: none;
+  }
+
+  .offcanvas-md .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .offcanvas-lg {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: var(--bs-offcanvas-transition);
+  }
+}
+
+@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-lg {
+    transition: none;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .offcanvas-lg.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+
+  .offcanvas-lg.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+
+  .offcanvas-lg.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+
+  .offcanvas-lg.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+
+  .offcanvas-lg.showing,
+  .offcanvas-lg.show:not(.hiding) {
+    transform: none;
+  }
+
+  .offcanvas-lg.showing,
+  .offcanvas-lg.hiding,
+  .offcanvas-lg.show {
+    visibility: visible;
+  }
+}
+
+@media (min-width: 992px) {
+  .offcanvas-lg {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+
+  .offcanvas-lg .offcanvas-header {
+    display: none;
+  }
+
+  .offcanvas-lg .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .offcanvas-xl {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: var(--bs-offcanvas-transition);
+  }
+}
+
+@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-xl {
+    transition: none;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .offcanvas-xl.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+
+  .offcanvas-xl.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+
+  .offcanvas-xl.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+
+  .offcanvas-xl.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+
+  .offcanvas-xl.showing,
+  .offcanvas-xl.show:not(.hiding) {
+    transform: none;
+  }
+
+  .offcanvas-xl.showing,
+  .offcanvas-xl.hiding,
+  .offcanvas-xl.show {
+    visibility: visible;
+  }
+}
+
+@media (min-width: 1200px) {
+  .offcanvas-xl {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+
+  .offcanvas-xl .offcanvas-header {
+    display: none;
+  }
+
+  .offcanvas-xl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--bs-offcanvas-zindex);
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    color: var(--bs-offcanvas-color);
+    visibility: hidden;
+    background-color: var(--bs-offcanvas-bg);
+    background-clip: padding-box;
+    outline: 0;
+    transition: var(--bs-offcanvas-transition);
+  }
+}
+
+@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
+  .offcanvas-xxl {
+    transition: none;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  .offcanvas-xxl.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: var(--bs-offcanvas-width);
+    border-right: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(-100%);
+  }
+
+  .offcanvas-xxl.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: var(--bs-offcanvas-width);
+    border-left: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateX(100%);
+  }
+
+  .offcanvas-xxl.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-bottom: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(-100%);
+  }
+
+  .offcanvas-xxl.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: var(--bs-offcanvas-height);
+    max-height: 100%;
+    border-top: var(--bs-offcanvas-border-width) solid
+      var(--bs-offcanvas-border-color);
+    transform: translateY(100%);
+  }
+
+  .offcanvas-xxl.showing,
+  .offcanvas-xxl.show:not(.hiding) {
+    transform: none;
+  }
+
+  .offcanvas-xxl.showing,
+  .offcanvas-xxl.hiding,
+  .offcanvas-xxl.show {
+    visibility: visible;
+  }
+}
+
+@media (min-width: 1400px) {
+  .offcanvas-xxl {
+    --bs-offcanvas-height: auto;
+    --bs-offcanvas-border-width: 0;
+    background-color: transparent !important;
+  }
+
+  .offcanvas-xxl .offcanvas-header {
+    display: none;
+  }
+
+  .offcanvas-xxl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+    background-color: transparent !important;
+  }
+}
+
+.offcanvas {
+  position: fixed;
+  bottom: 0;
+  z-index: var(--bs-offcanvas-zindex);
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  color: var(--bs-offcanvas-color);
+  visibility: hidden;
+  background-color: var(--bs-offcanvas-bg);
+  background-clip: padding-box;
+  outline: 0;
+  transition: var(--bs-offcanvas-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .offcanvas {
+    transition: none;
+  }
+}
+
+.offcanvas.offcanvas-start {
+  top: 0;
+  left: 0;
+  width: var(--bs-offcanvas-width);
+  border-right: var(--bs-offcanvas-border-width) solid
+    var(--bs-offcanvas-border-color);
+  transform: translateX(-100%);
+}
+
+.offcanvas.offcanvas-end {
+  top: 0;
+  right: 0;
+  width: var(--bs-offcanvas-width);
+  border-left: var(--bs-offcanvas-border-width) solid
+    var(--bs-offcanvas-border-color);
+  transform: translateX(100%);
+}
+
+.offcanvas.offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: var(--bs-offcanvas-height);
+  max-height: 100%;
+  border-bottom: var(--bs-offcanvas-border-width) solid
+    var(--bs-offcanvas-border-color);
+  transform: translateY(-100%);
+}
+
+.offcanvas.offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: var(--bs-offcanvas-height);
+  max-height: 100%;
+  border-top: var(--bs-offcanvas-border-width) solid
+    var(--bs-offcanvas-border-color);
+  transform: translateY(100%);
+}
+
+.offcanvas.showing,
+.offcanvas.show:not(.hiding) {
+  transform: none;
+}
+
+.offcanvas.showing,
+.offcanvas.hiding,
+.offcanvas.show {
+  visibility: visible;
+}
+
+.offcanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+}
+
+.offcanvas-backdrop.fade {
+  opacity: 0;
+}
+
+.offcanvas-backdrop.show {
+  opacity: 0.5;
+}
+
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+}
+
+.offcanvas-header .btn-close {
+  padding: calc(var(--bs-offcanvas-padding-y) * 0.5)
+    calc(var(--bs-offcanvas-padding-x) * 0.5);
+  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
+  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
+  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
+}
+
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: var(--bs-offcanvas-title-line-height);
+}
+
+.offcanvas-body {
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow-y: auto;
+}
+
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentcolor;
+  opacity: 0.5;
+}
+
+.placeholder.btn::before {
+  display: inline-block;
+  content: '';
+}
+
+.placeholder-xs {
+  min-height: 0.6em;
+}
+
+.placeholder-sm {
+  min-height: 0.8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+.placeholder-glow .placeholder {
+  animation: placeholder-glow 2s ease-in-out infinite;
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+
+.placeholder-wave {
+  mask-image: linear-gradient(
+    130deg,
+    #000 55%,
+    rgba(0, 0, 0, 0.8) 75%,
+    #000 95%
+  );
+  mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
+  }
+}
+
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: '';
+}
+
+.text-bg-primary {
+  color: #000 !important;
+  background-color: RGBA(49, 187, 107, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  color: #fff !important;
+  background-color: RGBA(112, 112, 112, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  color: #000 !important;
+  background-color: RGBA(49, 187, 107, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  color: #000 !important;
+  background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  color: #000 !important;
+  background-color: RGBA(254, 188, 89, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  color: #fff !important;
+  background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-light {
+  color: #000 !important;
+  background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dark {
+  color: #fff !important;
+  background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
+}
+
+.link-primary {
+  color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-primary-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-primary:hover,
+.link-primary:focus {
+  color: RGBA(90, 201, 137, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    90,
+    201,
+    137,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-secondary {
+  color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-secondary-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-secondary:hover,
+.link-secondary:focus {
+  color: RGBA(90, 90, 90, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    90,
+    90,
+    90,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-success {
+  color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-success-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-success:hover,
+.link-success:focus {
+  color: RGBA(90, 201, 137, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    90,
+    201,
+    137,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-info {
+  color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-info-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-info:hover,
+.link-info:focus {
+  color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    61,
+    213,
+    243,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-warning {
+  color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-warning-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-warning:hover,
+.link-warning:focus {
+  color: RGBA(254, 201, 122, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    254,
+    201,
+    122,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-danger {
+  color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-danger-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-danger:hover,
+.link-danger:focus {
+  color: RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    176,
+    42,
+    55,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-light {
+  color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-light-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-light:hover,
+.link-light:focus {
+  color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    249,
+    250,
+    251,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-dark {
+  color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    var(--bs-dark-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-dark:hover,
+.link-dark:focus {
+  color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(
+    26,
+    30,
+    33,
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-body-emphasis {
+  color: RGBA(
+    var(--bs-emphasis-color-rgb),
+    var(--bs-link-opacity, 1)
+  ) !important;
+  text-decoration-color: RGBA(
+    var(--bs-emphasis-color-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-body-emphasis:hover,
+.link-body-emphasis:focus {
+  color: RGBA(
+    var(--bs-emphasis-color-rgb),
+    var(--bs-link-opacity, 0.75)
+  ) !important;
+  text-decoration-color: RGBA(
+    var(--bs-emphasis-color-rgb),
+    var(--bs-link-underline-opacity, 0.75)
+  ) !important;
+}
+
+.focus-ring:focus {
+  outline: 0;
+  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0)
+    var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width)
+    var(--bs-focus-ring-color);
+}
+
+.icon-link {
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  text-decoration-color: rgba(
+    var(--bs-link-color-rgb),
+    var(--bs-link-opacity, 0.5)
+  );
+  text-underline-offset: 0.25em;
+  backface-visibility: hidden;
+}
+
+.icon-link > .bi {
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+  transition: 0.2s ease-in-out transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon-link > .bi {
+    transition: none;
+  }
+}
+
+.icon-link-hover:hover > .bi,
+.icon-link-hover:focus-visible > .bi {
+  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
+}
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: '';
+}
+
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 1020;
+}
+
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+
+  .sticky-xl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+
+  .sticky-xxl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.visually-hidden:not(caption),
+.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
+  position: absolute !important;
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: '';
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: 0.25;
+}
+
+.align-baseline {
+  vertical-align: baseline !important;
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.align-text-top {
+  vertical-align: text-top !important;
+}
+
+.float-start {
+  float: left !important;
+}
+
+.float-end {
+  float: right !important;
+}
+
+.float-none {
+  float: none !important;
+}
+
+.object-fit-contain {
+  object-fit: contain !important;
+}
+
+.object-fit-cover {
+  object-fit: cover !important;
+}
+
+.object-fit-fill {
+  object-fit: fill !important;
+}
+
+.object-fit-scale {
+  object-fit: scale-down !important;
+}
+
+.object-fit-none {
+  object-fit: none !important;
+}
+
+.opacity-0 {
+  opacity: 0 !important;
+}
+
+.opacity-25 {
+  opacity: 0.25 !important;
+}
+
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+
+.opacity-75 {
+  opacity: 0.75 !important;
+}
+
+.opacity-100 {
+  opacity: 1 !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+.overflow-x-visible {
+  overflow-x: visible !important;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden !important;
+}
+
+.overflow-y-visible {
+  overflow-y: visible !important;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-grid {
+  display: grid !important;
+}
+
+.d-inline-grid {
+  display: inline-grid !important;
+}
+
+.d-table {
+  display: table !important;
+}
+
+.d-table-row {
+  display: table-row !important;
+}
+
+.d-table-cell {
+  display: table-cell !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.focus-ring-primary {
+  --bs-focus-ring-color: rgba(
+    var(--bs-primary-rgb),
+    var(--bs-focus-ring-opacity)
+  );
+}
+
+.focus-ring-secondary {
+  --bs-focus-ring-color: rgba(
+    var(--bs-secondary-rgb),
+    var(--bs-focus-ring-opacity)
+  );
+}
+
+.focus-ring-success {
+  --bs-focus-ring-color: rgba(
+    var(--bs-success-rgb),
+    var(--bs-focus-ring-opacity)
+  );
+}
+
+.focus-ring-info {
+  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
+}
+
+.focus-ring-warning {
+  --bs-focus-ring-color: rgba(
+    var(--bs-warning-rgb),
+    var(--bs-focus-ring-opacity)
+  );
+}
+
+.focus-ring-danger {
+  --bs-focus-ring-color: rgba(
+    var(--bs-danger-rgb),
+    var(--bs-focus-ring-opacity)
+  );
+}
+
+.focus-ring-light {
+  --bs-focus-ring-color: rgba(
+    var(--bs-light-rgb),
+    var(--bs-focus-ring-opacity)
+  );
+}
+
+.focus-ring-dark {
+  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
+}
+
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+.top-0 {
+  top: 0 !important;
+}
+
+.top-50 {
+  top: 50% !important;
+}
+
+.top-100 {
+  top: 100% !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.bottom-50 {
+  bottom: 50% !important;
+}
+
+.bottom-100 {
+  bottom: 100% !important;
+}
+
+.start-0 {
+  left: 0 !important;
+}
+
+.start-50 {
+  left: 50% !important;
+}
+
+.start-100 {
+  left: 100% !important;
+}
+
+.end-0 {
+  right: 0 !important;
+}
+
+.end-50 {
+  right: 50% !important;
+}
+
+.end-100 {
+  right: 100% !important;
+}
+
+.translate-middle {
+  transform: translate(-50%, -50%) !important;
+}
+
+.translate-middle-x {
+  transform: translateX(-50%) !important;
+}
+
+.translate-middle-y {
+  transform: translateY(-50%) !important;
+}
+
+.border {
+  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top {
+  border-top: var(--bs-border-width) var(--bs-border-style)
+    var(--bs-border-color) !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-end {
+  border-right: var(--bs-border-width) var(--bs-border-style)
+    var(--bs-border-color) !important;
+}
+
+.border-end-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom {
+  border-bottom: var(--bs-border-width) var(--bs-border-style)
+    var(--bs-border-color) !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-start {
+  border-left: var(--bs-border-width) var(--bs-border-style)
+    var(--bs-border-color) !important;
+}
+
+.border-start-0 {
+  border-left: 0 !important;
+}
+
+.border-primary {
+  --bs-border-opacity: 1;
+  border-color: rgba(
+    var(--bs-primary-rgb),
+    var(--bs-border-opacity)
+  ) !important;
+}
+
+.border-secondary {
+  --bs-border-opacity: 1;
+  border-color: rgba(
+    var(--bs-secondary-rgb),
+    var(--bs-border-opacity)
+  ) !important;
+}
+
+.border-success {
+  --bs-border-opacity: 1;
+  border-color: rgba(
+    var(--bs-success-rgb),
+    var(--bs-border-opacity)
+  ) !important;
+}
+
+.border-info {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-warning {
+  --bs-border-opacity: 1;
+  border-color: rgba(
+    var(--bs-warning-rgb),
+    var(--bs-border-opacity)
+  ) !important;
+}
+
+.border-danger {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-light {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-dark {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-black {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-white {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
+}
+
+.border-primary-subtle {
+  border-color: var(--bs-primary-border-subtle) !important;
+}
+
+.border-secondary-subtle {
+  border-color: var(--bs-secondary-border-subtle) !important;
+}
+
+.border-success-subtle {
+  border-color: var(--bs-success-border-subtle) !important;
+}
+
+.border-info-subtle {
+  border-color: var(--bs-info-border-subtle) !important;
+}
+
+.border-warning-subtle {
+  border-color: var(--bs-warning-border-subtle) !important;
+}
+
+.border-danger-subtle {
+  border-color: var(--bs-danger-border-subtle) !important;
+}
+
+.border-light-subtle {
+  border-color: var(--bs-light-border-subtle) !important;
+}
+
+.border-dark-subtle {
+  border-color: var(--bs-dark-border-subtle) !important;
+}
+
+.border-1 {
+  border-width: 1px !important;
+}
+
+.border-2 {
+  border-width: 2px !important;
+}
+
+.border-3 {
+  border-width: 3px !important;
+}
+
+.border-4 {
+  border-width: 4px !important;
+}
+
+.border-5 {
+  border-width: 5px !important;
+}
+
+.border-opacity-10 {
+  --bs-border-opacity: 0.1;
+}
+
+.border-opacity-25 {
+  --bs-border-opacity: 0.25;
+}
+
+.border-opacity-50 {
+  --bs-border-opacity: 0.5;
+}
+
+.border-opacity-75 {
+  --bs-border-opacity: 0.75;
+}
+
+.border-opacity-100 {
+  --bs-border-opacity: 1;
+}
+
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+.mh-100 {
+  max-height: 100% !important;
+}
+
+.vh-100 {
+  height: 100vh !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+.order-first {
+  order: -1 !important;
+}
+
+.order-0 {
+  order: 0 !important;
+}
+
+.order-1 {
+  order: 1 !important;
+}
+
+.order-2 {
+  order: 2 !important;
+}
+
+.order-3 {
+  order: 3 !important;
+}
+
+.order-4 {
+  order: 4 !important;
+}
+
+.order-5 {
+  order: 5 !important;
+}
+
+.order-last {
+  order: 6 !important;
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 1rem !important;
+}
+
+.m-4 {
+  margin: 1.5rem !important;
+}
+
+.m-5 {
+  margin: 3rem !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mx-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.mx-1 {
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important;
+}
+
+.mx-2 {
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
+}
+
+.mx-3 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.mx-4 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.mx-5 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.my-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mt-3 {
+  margin-top: 1rem !important;
+}
+
+.mt-4 {
+  margin-top: 1.5rem !important;
+}
+
+.mt-5 {
+  margin-top: 3rem !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.me-0 {
+  margin-right: 0 !important;
+}
+
+.me-1 {
+  margin-right: 0.25rem !important;
+}
+
+.me-2 {
+  margin-right: 0.5rem !important;
+}
+
+.me-3 {
+  margin-right: 1rem !important;
+}
+
+.me-4 {
+  margin-right: 1.5rem !important;
+}
+
+.me-5 {
+  margin-right: 3rem !important;
+}
+
+.me-auto {
+  margin-right: auto !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.mb-3 {
+  margin-bottom: 1rem !important;
+}
+
+.mb-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 3rem !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ms-0 {
+  margin-left: 0 !important;
+}
+
+.ms-1 {
+  margin-left: 0.25rem !important;
+}
+
+.ms-2 {
+  margin-left: 0.5rem !important;
+}
+
+.ms-3 {
+  margin-left: 1rem !important;
+}
+
+.ms-4 {
+  margin-left: 1.5rem !important;
+}
+
+.ms-5 {
+  margin-left: 3rem !important;
+}
+
+.ms-auto {
+  margin-left: auto !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 1rem !important;
+}
+
+.p-4 {
+  padding: 1.5rem !important;
+}
+
+.p-5 {
+  padding: 3rem !important;
+}
+
+.px-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.px-1 {
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important;
+}
+
+.px-2 {
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+}
+
+.px-3 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.px-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.px-5 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.py-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.py-4 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.py-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pt-3 {
+  padding-top: 1rem !important;
+}
+
+.pt-4 {
+  padding-top: 1.5rem !important;
+}
+
+.pt-5 {
+  padding-top: 3rem !important;
+}
+
+.pe-0 {
+  padding-right: 0 !important;
+}
+
+.pe-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pe-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pe-3 {
+  padding-right: 1rem !important;
+}
+
+.pe-4 {
+  padding-right: 1.5rem !important;
+}
+
+.pe-5 {
+  padding-right: 3rem !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pb-3 {
+  padding-bottom: 1rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pb-5 {
+  padding-bottom: 3rem !important;
+}
+
+.ps-0 {
+  padding-left: 0 !important;
+}
+
+.ps-1 {
+  padding-left: 0.25rem !important;
+}
+
+.ps-2 {
+  padding-left: 0.5rem !important;
+}
+
+.ps-3 {
+  padding-left: 1rem !important;
+}
+
+.ps-4 {
+  padding-left: 1.5rem !important;
+}
+
+.ps-5 {
+  padding-left: 3rem !important;
+}
+
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem !important;
+}
+
+.gap-2 {
+  gap: 0.5rem !important;
+}
+
+.gap-3 {
+  gap: 1rem !important;
+}
+
+.gap-4 {
+  gap: 1.5rem !important;
+}
+
+.gap-5 {
+  gap: 3rem !important;
+}
+
+.row-gap-0 {
+  row-gap: 0 !important;
+}
+
+.row-gap-1 {
+  row-gap: 0.25rem !important;
+}
+
+.row-gap-2 {
+  row-gap: 0.5rem !important;
+}
+
+.row-gap-3 {
+  row-gap: 1rem !important;
+}
+
+.row-gap-4 {
+  row-gap: 1.5rem !important;
+}
+
+.row-gap-5 {
+  row-gap: 3rem !important;
+}
+
+.column-gap-0 {
+  column-gap: 0 !important;
+}
+
+.column-gap-1 {
+  column-gap: 0.25rem !important;
+}
+
+.column-gap-2 {
+  column-gap: 0.5rem !important;
+}
+
+.column-gap-3 {
+  column-gap: 1rem !important;
+}
+
+.column-gap-4 {
+  column-gap: 1.5rem !important;
+}
+
+.column-gap-5 {
+  column-gap: 3rem !important;
+}
+
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
+.fs-1 {
+  font-size: calc(1.375rem + 1.5vw) !important;
+}
+
+.fs-2 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+.fs-3 {
+  font-size: calc(1.3rem + 0.6vw) !important;
+}
+
+.fs-4 {
+  font-size: calc(1.275rem + 0.3vw) !important;
+}
+
+.fs-5 {
+  font-size: 1.25rem !important;
+}
+
+.fs-6 {
+  font-size: 1rem !important;
+}
+
+.fst-italic {
+  font-style: italic !important;
+}
+
+.fst-normal {
+  font-style: normal !important;
+}
+
+.fw-lighter {
+  font-weight: lighter !important;
+}
+
+.fw-light {
+  font-weight: 300 !important;
+}
+
+.fw-normal {
+  font-weight: 400 !important;
+}
+
+.fw-medium {
+  font-weight: 500 !important;
+}
+
+.fw-semibold {
+  font-weight: 600 !important;
+}
+
+.fw-bold {
+  font-weight: 700 !important;
+}
+
+.fw-bolder {
+  font-weight: bolder !important;
+}
+
+.lh-1 {
+  line-height: 1 !important;
+}
+
+.lh-sm {
+  line-height: 1.25 !important;
+}
+
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
+}
+
+.text-start {
+  text-align: left !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* rtl:end:remove */
+.text-primary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-secondary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-success {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-info {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-warning {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-danger {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-light {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-dark {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-black {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-white {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-body {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-muted {
+  --bs-text-opacity: 1;
+  color: var(--bs-secondary-color) !important;
+}
+
+.text-black-50 {
+  --bs-text-opacity: 1;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.text-white-50 {
+  --bs-text-opacity: 1;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.text-body-secondary {
+  --bs-text-opacity: 1;
+  color: var(--bs-secondary-color) !important;
+}
+
+.text-body-tertiary {
+  --bs-text-opacity: 1;
+  color: var(--bs-tertiary-color) !important;
+}
+
+.text-body-emphasis {
+  --bs-text-opacity: 1;
+  color: var(--bs-emphasis-color) !important;
+}
+
+.text-reset {
+  --bs-text-opacity: 1;
+  color: inherit !important;
+}
+
+.text-opacity-25 {
+  --bs-text-opacity: 0.25;
+}
+
+.text-opacity-50 {
+  --bs-text-opacity: 0.5;
+}
+
+.text-opacity-75 {
+  --bs-text-opacity: 0.75;
+}
+
+.text-opacity-100 {
+  --bs-text-opacity: 1;
+}
+
+.text-primary-emphasis {
+  color: var(--bs-primary-text-emphasis) !important;
+}
+
+.text-secondary-emphasis {
+  color: var(--bs-secondary-text-emphasis) !important;
+}
+
+.text-success-emphasis {
+  color: var(--bs-success-text-emphasis) !important;
+}
+
+.text-info-emphasis {
+  color: var(--bs-info-text-emphasis) !important;
+}
+
+.text-warning-emphasis {
+  color: var(--bs-warning-text-emphasis) !important;
+}
+
+.text-danger-emphasis {
+  color: var(--bs-danger-text-emphasis) !important;
+}
+
+.text-light-emphasis {
+  color: var(--bs-light-text-emphasis) !important;
+}
+
+.text-dark-emphasis {
+  color: var(--bs-dark-text-emphasis) !important;
+}
+
+.link-opacity-10 {
+  --bs-link-opacity: 0.1;
+}
+
+.link-opacity-10-hover:hover {
+  --bs-link-opacity: 0.1;
+}
+
+.link-opacity-25 {
+  --bs-link-opacity: 0.25;
+}
+
+.link-opacity-25-hover:hover {
+  --bs-link-opacity: 0.25;
+}
+
+.link-opacity-50 {
+  --bs-link-opacity: 0.5;
+}
+
+.link-opacity-50-hover:hover {
+  --bs-link-opacity: 0.5;
+}
+
+.link-opacity-75 {
+  --bs-link-opacity: 0.75;
+}
+
+.link-opacity-75-hover:hover {
+  --bs-link-opacity: 0.75;
+}
+
+.link-opacity-100 {
+  --bs-link-opacity: 1;
+}
+
+.link-opacity-100-hover:hover {
+  --bs-link-opacity: 1;
+}
+
+.link-offset-1 {
+  text-underline-offset: 0.125em !important;
+}
+
+.link-offset-1-hover:hover {
+  text-underline-offset: 0.125em !important;
+}
+
+.link-offset-2 {
+  text-underline-offset: 0.25em !important;
+}
+
+.link-offset-2-hover:hover {
+  text-underline-offset: 0.25em !important;
+}
+
+.link-offset-3 {
+  text-underline-offset: 0.375em !important;
+}
+
+.link-offset-3-hover:hover {
+  text-underline-offset: 0.375em !important;
+}
+
+.link-underline-primary {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-primary-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-secondary {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-secondary-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-success {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-success-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-info {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-info-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-warning {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-warning-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-danger {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-danger-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-light {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-light-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline-dark {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-dark-rgb),
+    var(--bs-link-underline-opacity)
+  ) !important;
+}
+
+.link-underline {
+  --bs-link-underline-opacity: 1;
+  text-decoration-color: rgba(
+    var(--bs-link-color-rgb),
+    var(--bs-link-underline-opacity, 1)
+  ) !important;
+}
+
+.link-underline-opacity-0 {
+  --bs-link-underline-opacity: 0;
+}
+
+.link-underline-opacity-0-hover:hover {
+  --bs-link-underline-opacity: 0;
+}
+
+.link-underline-opacity-10 {
+  --bs-link-underline-opacity: 0.1;
+}
+
+.link-underline-opacity-10-hover:hover {
+  --bs-link-underline-opacity: 0.1;
+}
+
+.link-underline-opacity-25 {
+  --bs-link-underline-opacity: 0.25;
+}
+
+.link-underline-opacity-25-hover:hover {
+  --bs-link-underline-opacity: 0.25;
+}
+
+.link-underline-opacity-50 {
+  --bs-link-underline-opacity: 0.5;
+}
+
+.link-underline-opacity-50-hover:hover {
+  --bs-link-underline-opacity: 0.5;
+}
+
+.link-underline-opacity-75 {
+  --bs-link-underline-opacity: 0.75;
+}
+
+.link-underline-opacity-75-hover:hover {
+  --bs-link-underline-opacity: 0.75;
+}
+
+.link-underline-opacity-100 {
+  --bs-link-underline-opacity: 1;
+}
+
+.link-underline-opacity-100-hover:hover {
+  --bs-link-underline-opacity: 1;
+}
+
+.bg-primary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-primary-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-secondary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-secondary-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-success {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-success-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-info {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-warning {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-warning-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-danger {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-light {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-dark {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-black {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-white {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-body {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-body-bg-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-transparent {
+  --bs-bg-opacity: 1;
+  background-color: transparent !important;
+}
+
+.bg-body-secondary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-secondary-bg-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-body-tertiary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(
+    var(--bs-tertiary-bg-rgb),
+    var(--bs-bg-opacity)
+  ) !important;
+}
+
+.bg-opacity-10 {
+  --bs-bg-opacity: 0.1;
+}
+
+.bg-opacity-25 {
+  --bs-bg-opacity: 0.25;
+}
+
+.bg-opacity-50 {
+  --bs-bg-opacity: 0.5;
+}
+
+.bg-opacity-75 {
+  --bs-bg-opacity: 0.75;
+}
+
+.bg-opacity-100 {
+  --bs-bg-opacity: 1;
+}
+
+.bg-primary-subtle {
+  background-color: var(--bs-primary-bg-subtle) !important;
+}
+
+.bg-secondary-subtle {
+  background-color: var(--bs-secondary-bg-subtle) !important;
+}
+
+.bg-success-subtle {
+  background-color: var(--bs-success-bg-subtle) !important;
+}
+
+.bg-info-subtle {
+  background-color: var(--bs-info-bg-subtle) !important;
+}
+
+.bg-warning-subtle {
+  background-color: var(--bs-warning-bg-subtle) !important;
+}
+
+.bg-danger-subtle {
+  background-color: var(--bs-danger-bg-subtle) !important;
+}
+
+.bg-light-subtle {
+  background-color: var(--bs-light-bg-subtle) !important;
+}
+
+.bg-dark-subtle {
+  background-color: var(--bs-dark-bg-subtle) !important;
+}
+
+.bg-gradient {
+  background-image: var(--bs-gradient) !important;
+}
+
+.user-select-all {
+  user-select: all !important;
+}
+
+.user-select-auto {
+  user-select: auto !important;
+}
+
+.user-select-none {
+  user-select: none !important;
+}
+
+.pe-none {
+  pointer-events: none !important;
+}
+
+.pe-auto {
+  pointer-events: auto !important;
+}
+
+.rounded {
+  border-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.rounded-1 {
+  border-radius: var(--bs-border-radius-sm) !important;
+}
+
+.rounded-2 {
+  border-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-3 {
+  border-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-4 {
+  border-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-5 {
+  border-radius: var(--bs-border-radius-xxl) !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-pill {
+  border-radius: var(--bs-border-radius-pill) !important;
+}
+
+.rounded-top {
+  border-top-left-radius: var(--bs-border-radius) !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-top-0 {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.rounded-top-1 {
+  border-top-left-radius: var(--bs-border-radius-sm) !important;
+  border-top-right-radius: var(--bs-border-radius-sm) !important;
+}
+
+.rounded-top-2 {
+  border-top-left-radius: var(--bs-border-radius) !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-top-3 {
+  border-top-left-radius: var(--bs-border-radius-lg) !important;
+  border-top-right-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-top-4 {
+  border-top-left-radius: var(--bs-border-radius-xl) !important;
+  border-top-right-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-top-5 {
+  border-top-left-radius: var(--bs-border-radius-xxl) !important;
+  border-top-right-radius: var(--bs-border-radius-xxl) !important;
+}
+
+.rounded-top-circle {
+  border-top-left-radius: 50% !important;
+  border-top-right-radius: 50% !important;
+}
+
+.rounded-top-pill {
+  border-top-left-radius: var(--bs-border-radius-pill) !important;
+  border-top-right-radius: var(--bs-border-radius-pill) !important;
+}
+
+.rounded-end {
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-end-0 {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.rounded-end-1 {
+  border-top-right-radius: var(--bs-border-radius-sm) !important;
+  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
+}
+
+.rounded-end-2 {
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-end-3 {
+  border-top-right-radius: var(--bs-border-radius-lg) !important;
+  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-end-4 {
+  border-top-right-radius: var(--bs-border-radius-xl) !important;
+  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-end-5 {
+  border-top-right-radius: var(--bs-border-radius-xxl) !important;
+  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
+}
+
+.rounded-end-circle {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+}
+
+.rounded-end-pill {
+  border-top-right-radius: var(--bs-border-radius-pill) !important;
+  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
+}
+
+.rounded-bottom {
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-bottom-0 {
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.rounded-bottom-1 {
+  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
+  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
+}
+
+.rounded-bottom-2 {
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-bottom-3 {
+  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
+  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-bottom-4 {
+  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
+  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-bottom-5 {
+  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
+  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
+}
+
+.rounded-bottom-circle {
+  border-bottom-right-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+
+.rounded-bottom-pill {
+  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
+  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
+}
+
+.rounded-start {
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-start-0 {
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+}
+
+.rounded-start-1 {
+  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
+  border-top-left-radius: var(--bs-border-radius-sm) !important;
+}
+
+.rounded-start-2 {
+  border-bottom-left-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: var(--bs-border-radius) !important;
+}
+
+.rounded-start-3 {
+  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
+  border-top-left-radius: var(--bs-border-radius-lg) !important;
+}
+
+.rounded-start-4 {
+  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
+  border-top-left-radius: var(--bs-border-radius-xl) !important;
+}
+
+.rounded-start-5 {
+  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
+  border-top-left-radius: var(--bs-border-radius-xxl) !important;
+}
+
+.rounded-start-circle {
+  border-bottom-left-radius: 50% !important;
+  border-top-left-radius: 50% !important;
+}
+
+.rounded-start-pill {
+  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
+  border-top-left-radius: var(--bs-border-radius-pill) !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+.z-n1 {
+  z-index: -1 !important;
+}
+
+.z-0 {
+  z-index: 0 !important;
+}
+
+.z-1 {
+  z-index: 1 !important;
+}
+
+.z-2 {
+  z-index: 2 !important;
+}
+
+.z-3 {
+  z-index: 3 !important;
+}
+
+@media (min-width: 576px) {
+  .float-sm-start {
+    float: left !important;
+  }
+
+  .float-sm-end {
+    float: right !important;
+  }
+
+  .float-sm-none {
+    float: none !important;
+  }
+
+  .object-fit-sm-contain {
+    object-fit: contain !important;
+  }
+
+  .object-fit-sm-cover {
+    object-fit: cover !important;
+  }
+
+  .object-fit-sm-fill {
+    object-fit: fill !important;
+  }
+
+  .object-fit-sm-scale {
+    object-fit: scale-down !important;
+  }
+
+  .object-fit-sm-none {
+    object-fit: none !important;
+  }
+
+  .d-sm-inline {
+    display: inline !important;
+  }
+
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-sm-block {
+    display: block !important;
+  }
+
+  .d-sm-grid {
+    display: grid !important;
+  }
+
+  .d-sm-inline-grid {
+    display: inline-grid !important;
+  }
+
+  .d-sm-table {
+    display: table !important;
+  }
+
+  .d-sm-table-row {
+    display: table-row !important;
+  }
+
+  .d-sm-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-sm-flex {
+    display: flex !important;
+  }
+
+  .d-sm-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-sm-none {
+    display: none !important;
+  }
+
+  .flex-sm-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-sm-row {
+    flex-direction: row !important;
+  }
+
+  .flex-sm-column {
+    flex-direction: column !important;
+  }
+
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-sm-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-sm-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-sm-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-sm-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-sm-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-sm-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-sm-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-sm-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-sm-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-sm-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-sm-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-sm-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-sm-center {
+    align-items: center !important;
+  }
+
+  .align-items-sm-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-sm-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-sm-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-sm-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-sm-center {
+    align-content: center !important;
+  }
+
+  .align-content-sm-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-sm-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-sm-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-sm-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-sm-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-sm-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-sm-center {
+    align-self: center !important;
+  }
+
+  .align-self-sm-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-sm-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-sm-first {
+    order: -1 !important;
+  }
+
+  .order-sm-0 {
+    order: 0 !important;
+  }
+
+  .order-sm-1 {
+    order: 1 !important;
+  }
+
+  .order-sm-2 {
+    order: 2 !important;
+  }
+
+  .order-sm-3 {
+    order: 3 !important;
+  }
+
+  .order-sm-4 {
+    order: 4 !important;
+  }
+
+  .order-sm-5 {
+    order: 5 !important;
+  }
+
+  .order-sm-last {
+    order: 6 !important;
+  }
+
+  .m-sm-0 {
+    margin: 0 !important;
+  }
+
+  .m-sm-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-sm-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-sm-3 {
+    margin: 1rem !important;
+  }
+
+  .m-sm-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-sm-5 {
+    margin: 3rem !important;
+  }
+
+  .m-sm-auto {
+    margin: auto !important;
+  }
+
+  .mx-sm-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-sm-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-sm-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-sm-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-sm-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-sm-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-sm-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-sm-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-sm-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-sm-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-sm-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-sm-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-sm-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-sm-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-sm-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-sm-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-sm-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-sm-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-sm-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-sm-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-sm-auto {
+    margin-top: auto !important;
+  }
+
+  .me-sm-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-sm-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-sm-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-sm-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-sm-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-sm-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-sm-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-sm-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-sm-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-sm-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-sm-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-sm-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-sm-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-sm-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-sm-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-sm-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-sm-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-sm-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-sm-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-sm-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-sm-auto {
+    margin-left: auto !important;
+  }
+
+  .p-sm-0 {
+    padding: 0 !important;
+  }
+
+  .p-sm-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-sm-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-sm-3 {
+    padding: 1rem !important;
+  }
+
+  .p-sm-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-sm-5 {
+    padding: 3rem !important;
+  }
+
+  .px-sm-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-sm-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-sm-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-sm-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-sm-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-sm-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-sm-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-sm-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-sm-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-sm-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-sm-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-sm-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-sm-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-sm-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-sm-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-sm-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-sm-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-sm-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-sm-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-sm-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-sm-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-sm-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-sm-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-sm-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-sm-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-sm-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-sm-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-sm-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-sm-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-sm-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-sm-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-sm-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-sm-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-sm-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-sm-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-sm-5 {
+    padding-left: 3rem !important;
+  }
+
+  .gap-sm-0 {
+    gap: 0 !important;
+  }
+
+  .gap-sm-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-sm-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-sm-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-sm-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-sm-5 {
+    gap: 3rem !important;
+  }
+
+  .row-gap-sm-0 {
+    row-gap: 0 !important;
+  }
+
+  .row-gap-sm-1 {
+    row-gap: 0.25rem !important;
+  }
+
+  .row-gap-sm-2 {
+    row-gap: 0.5rem !important;
+  }
+
+  .row-gap-sm-3 {
+    row-gap: 1rem !important;
+  }
+
+  .row-gap-sm-4 {
+    row-gap: 1.5rem !important;
+  }
+
+  .row-gap-sm-5 {
+    row-gap: 3rem !important;
+  }
+
+  .column-gap-sm-0 {
+    column-gap: 0 !important;
+  }
+
+  .column-gap-sm-1 {
+    column-gap: 0.25rem !important;
+  }
+
+  .column-gap-sm-2 {
+    column-gap: 0.5rem !important;
+  }
+
+  .column-gap-sm-3 {
+    column-gap: 1rem !important;
+  }
+
+  .column-gap-sm-4 {
+    column-gap: 1.5rem !important;
+  }
+
+  .column-gap-sm-5 {
+    column-gap: 3rem !important;
+  }
+
+  .text-sm-start {
+    text-align: left !important;
+  }
+
+  .text-sm-end {
+    text-align: right !important;
+  }
+
+  .text-sm-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .float-md-start {
+    float: left !important;
+  }
+
+  .float-md-end {
+    float: right !important;
+  }
+
+  .float-md-none {
+    float: none !important;
+  }
+
+  .object-fit-md-contain {
+    object-fit: contain !important;
+  }
+
+  .object-fit-md-cover {
+    object-fit: cover !important;
+  }
+
+  .object-fit-md-fill {
+    object-fit: fill !important;
+  }
+
+  .object-fit-md-scale {
+    object-fit: scale-down !important;
+  }
+
+  .object-fit-md-none {
+    object-fit: none !important;
+  }
+
+  .d-md-inline {
+    display: inline !important;
+  }
+
+  .d-md-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-md-block {
+    display: block !important;
+  }
+
+  .d-md-grid {
+    display: grid !important;
+  }
+
+  .d-md-inline-grid {
+    display: inline-grid !important;
+  }
+
+  .d-md-table {
+    display: table !important;
+  }
+
+  .d-md-table-row {
+    display: table-row !important;
+  }
+
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-md-flex {
+    display: flex !important;
+  }
+
+  .d-md-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-md-none {
+    display: none !important;
+  }
+
+  .flex-md-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-md-row {
+    flex-direction: row !important;
+  }
+
+  .flex-md-column {
+    flex-direction: column !important;
+  }
+
+  .flex-md-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-md-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-md-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-md-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-md-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-md-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-md-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-md-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-md-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-md-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-md-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-md-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-md-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-md-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-md-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-md-center {
+    align-items: center !important;
+  }
+
+  .align-items-md-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-md-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-md-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-md-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-md-center {
+    align-content: center !important;
+  }
+
+  .align-content-md-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-md-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-md-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-md-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-md-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-md-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-md-center {
+    align-self: center !important;
+  }
+
+  .align-self-md-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-md-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-md-first {
+    order: -1 !important;
+  }
+
+  .order-md-0 {
+    order: 0 !important;
+  }
+
+  .order-md-1 {
+    order: 1 !important;
+  }
+
+  .order-md-2 {
+    order: 2 !important;
+  }
+
+  .order-md-3 {
+    order: 3 !important;
+  }
+
+  .order-md-4 {
+    order: 4 !important;
+  }
+
+  .order-md-5 {
+    order: 5 !important;
+  }
+
+  .order-md-last {
+    order: 6 !important;
+  }
+
+  .m-md-0 {
+    margin: 0 !important;
+  }
+
+  .m-md-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-md-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-md-3 {
+    margin: 1rem !important;
+  }
+
+  .m-md-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-md-5 {
+    margin: 3rem !important;
+  }
+
+  .m-md-auto {
+    margin: auto !important;
+  }
+
+  .mx-md-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-md-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-md-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-md-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-md-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-md-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-md-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-md-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-md-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-md-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-md-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-md-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-md-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-md-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-md-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-md-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-md-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-md-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-md-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-md-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-md-auto {
+    margin-top: auto !important;
+  }
+
+  .me-md-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-md-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-md-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-md-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-md-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-md-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-md-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-md-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-md-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-md-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-md-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-md-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-md-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-md-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-md-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-md-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-md-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-md-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-md-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-md-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-md-auto {
+    margin-left: auto !important;
+  }
+
+  .p-md-0 {
+    padding: 0 !important;
+  }
+
+  .p-md-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-md-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-md-3 {
+    padding: 1rem !important;
+  }
+
+  .p-md-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-md-5 {
+    padding: 3rem !important;
+  }
+
+  .px-md-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-md-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-md-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-md-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-md-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-md-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-md-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-md-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-md-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-md-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-md-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-md-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-md-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-md-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-md-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-md-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-md-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-md-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-md-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-md-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-md-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-md-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-md-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-md-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-md-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-md-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-md-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-md-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-md-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-md-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-md-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-md-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-md-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-md-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-md-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-md-5 {
+    padding-left: 3rem !important;
+  }
+
+  .gap-md-0 {
+    gap: 0 !important;
+  }
+
+  .gap-md-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-md-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-md-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-md-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-md-5 {
+    gap: 3rem !important;
+  }
+
+  .row-gap-md-0 {
+    row-gap: 0 !important;
+  }
+
+  .row-gap-md-1 {
+    row-gap: 0.25rem !important;
+  }
+
+  .row-gap-md-2 {
+    row-gap: 0.5rem !important;
+  }
+
+  .row-gap-md-3 {
+    row-gap: 1rem !important;
+  }
+
+  .row-gap-md-4 {
+    row-gap: 1.5rem !important;
+  }
+
+  .row-gap-md-5 {
+    row-gap: 3rem !important;
+  }
+
+  .column-gap-md-0 {
+    column-gap: 0 !important;
+  }
+
+  .column-gap-md-1 {
+    column-gap: 0.25rem !important;
+  }
+
+  .column-gap-md-2 {
+    column-gap: 0.5rem !important;
+  }
+
+  .column-gap-md-3 {
+    column-gap: 1rem !important;
+  }
+
+  .column-gap-md-4 {
+    column-gap: 1.5rem !important;
+  }
+
+  .column-gap-md-5 {
+    column-gap: 3rem !important;
+  }
+
+  .text-md-start {
+    text-align: left !important;
+  }
+
+  .text-md-end {
+    text-align: right !important;
+  }
+
+  .text-md-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .float-lg-start {
+    float: left !important;
+  }
+
+  .float-lg-end {
+    float: right !important;
+  }
+
+  .float-lg-none {
+    float: none !important;
+  }
+
+  .object-fit-lg-contain {
+    object-fit: contain !important;
+  }
+
+  .object-fit-lg-cover {
+    object-fit: cover !important;
+  }
+
+  .object-fit-lg-fill {
+    object-fit: fill !important;
+  }
+
+  .object-fit-lg-scale {
+    object-fit: scale-down !important;
+  }
+
+  .object-fit-lg-none {
+    object-fit: none !important;
+  }
+
+  .d-lg-inline {
+    display: inline !important;
+  }
+
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-lg-block {
+    display: block !important;
+  }
+
+  .d-lg-grid {
+    display: grid !important;
+  }
+
+  .d-lg-inline-grid {
+    display: inline-grid !important;
+  }
+
+  .d-lg-table {
+    display: table !important;
+  }
+
+  .d-lg-table-row {
+    display: table-row !important;
+  }
+
+  .d-lg-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-lg-flex {
+    display: flex !important;
+  }
+
+  .d-lg-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-lg-none {
+    display: none !important;
+  }
+
+  .flex-lg-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-lg-row {
+    flex-direction: row !important;
+  }
+
+  .flex-lg-column {
+    flex-direction: column !important;
+  }
+
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-lg-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-lg-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-lg-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-lg-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-lg-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-lg-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-lg-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-lg-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-lg-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-lg-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-lg-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-lg-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-lg-center {
+    align-items: center !important;
+  }
+
+  .align-items-lg-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-lg-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-lg-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-lg-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-lg-center {
+    align-content: center !important;
+  }
+
+  .align-content-lg-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-lg-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-lg-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-lg-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-lg-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-lg-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-lg-center {
+    align-self: center !important;
+  }
+
+  .align-self-lg-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-lg-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-lg-first {
+    order: -1 !important;
+  }
+
+  .order-lg-0 {
+    order: 0 !important;
+  }
+
+  .order-lg-1 {
+    order: 1 !important;
+  }
+
+  .order-lg-2 {
+    order: 2 !important;
+  }
+
+  .order-lg-3 {
+    order: 3 !important;
+  }
+
+  .order-lg-4 {
+    order: 4 !important;
+  }
+
+  .order-lg-5 {
+    order: 5 !important;
+  }
+
+  .order-lg-last {
+    order: 6 !important;
+  }
+
+  .m-lg-0 {
+    margin: 0 !important;
+  }
+
+  .m-lg-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-lg-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-lg-3 {
+    margin: 1rem !important;
+  }
+
+  .m-lg-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-lg-5 {
+    margin: 3rem !important;
+  }
+
+  .m-lg-auto {
+    margin: auto !important;
+  }
+
+  .mx-lg-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-lg-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-lg-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-lg-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-lg-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-lg-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-lg-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-lg-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-lg-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-lg-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-lg-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-lg-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-lg-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-lg-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-lg-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-lg-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-lg-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-lg-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-lg-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-lg-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-lg-auto {
+    margin-top: auto !important;
+  }
+
+  .me-lg-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-lg-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-lg-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-lg-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-lg-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-lg-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-lg-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-lg-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-lg-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-lg-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-lg-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-lg-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-lg-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-lg-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-lg-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-lg-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-lg-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-lg-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-lg-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-lg-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-lg-auto {
+    margin-left: auto !important;
+  }
+
+  .p-lg-0 {
+    padding: 0 !important;
+  }
+
+  .p-lg-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-lg-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-lg-3 {
+    padding: 1rem !important;
+  }
+
+  .p-lg-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-lg-5 {
+    padding: 3rem !important;
+  }
+
+  .px-lg-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-lg-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-lg-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-lg-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-lg-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-lg-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-lg-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-lg-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-lg-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-lg-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-lg-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-lg-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-lg-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-lg-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-lg-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-lg-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-lg-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-lg-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-lg-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-lg-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-lg-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-lg-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-lg-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-lg-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-lg-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-lg-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-lg-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-lg-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-lg-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-lg-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-lg-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-lg-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-lg-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-lg-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-lg-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-lg-5 {
+    padding-left: 3rem !important;
+  }
+
+  .gap-lg-0 {
+    gap: 0 !important;
+  }
+
+  .gap-lg-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-lg-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-lg-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-lg-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-lg-5 {
+    gap: 3rem !important;
+  }
+
+  .row-gap-lg-0 {
+    row-gap: 0 !important;
+  }
+
+  .row-gap-lg-1 {
+    row-gap: 0.25rem !important;
+  }
+
+  .row-gap-lg-2 {
+    row-gap: 0.5rem !important;
+  }
+
+  .row-gap-lg-3 {
+    row-gap: 1rem !important;
+  }
+
+  .row-gap-lg-4 {
+    row-gap: 1.5rem !important;
+  }
+
+  .row-gap-lg-5 {
+    row-gap: 3rem !important;
+  }
+
+  .column-gap-lg-0 {
+    column-gap: 0 !important;
+  }
+
+  .column-gap-lg-1 {
+    column-gap: 0.25rem !important;
+  }
+
+  .column-gap-lg-2 {
+    column-gap: 0.5rem !important;
+  }
+
+  .column-gap-lg-3 {
+    column-gap: 1rem !important;
+  }
+
+  .column-gap-lg-4 {
+    column-gap: 1.5rem !important;
+  }
+
+  .column-gap-lg-5 {
+    column-gap: 3rem !important;
+  }
+
+  .text-lg-start {
+    text-align: left !important;
+  }
+
+  .text-lg-end {
+    text-align: right !important;
+  }
+
+  .text-lg-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .float-xl-start {
+    float: left !important;
+  }
+
+  .float-xl-end {
+    float: right !important;
+  }
+
+  .float-xl-none {
+    float: none !important;
+  }
+
+  .object-fit-xl-contain {
+    object-fit: contain !important;
+  }
+
+  .object-fit-xl-cover {
+    object-fit: cover !important;
+  }
+
+  .object-fit-xl-fill {
+    object-fit: fill !important;
+  }
+
+  .object-fit-xl-scale {
+    object-fit: scale-down !important;
+  }
+
+  .object-fit-xl-none {
+    object-fit: none !important;
+  }
+
+  .d-xl-inline {
+    display: inline !important;
+  }
+
+  .d-xl-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-xl-block {
+    display: block !important;
+  }
+
+  .d-xl-grid {
+    display: grid !important;
+  }
+
+  .d-xl-inline-grid {
+    display: inline-grid !important;
+  }
+
+  .d-xl-table {
+    display: table !important;
+  }
+
+  .d-xl-table-row {
+    display: table-row !important;
+  }
+
+  .d-xl-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-xl-flex {
+    display: flex !important;
+  }
+
+  .d-xl-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-xl-none {
+    display: none !important;
+  }
+
+  .flex-xl-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-xl-row {
+    flex-direction: row !important;
+  }
+
+  .flex-xl-column {
+    flex-direction: column !important;
+  }
+
+  .flex-xl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-xl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-xl-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-xl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-xl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-xl-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-xl-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-xl-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-xl-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-xl-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-xl-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-xl-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-xl-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-xl-center {
+    align-items: center !important;
+  }
+
+  .align-items-xl-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-xl-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-xl-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-xl-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-xl-center {
+    align-content: center !important;
+  }
+
+  .align-content-xl-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-xl-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-xl-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-xl-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-xl-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-xl-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-xl-center {
+    align-self: center !important;
+  }
+
+  .align-self-xl-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-xl-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-xl-first {
+    order: -1 !important;
+  }
+
+  .order-xl-0 {
+    order: 0 !important;
+  }
+
+  .order-xl-1 {
+    order: 1 !important;
+  }
+
+  .order-xl-2 {
+    order: 2 !important;
+  }
+
+  .order-xl-3 {
+    order: 3 !important;
+  }
+
+  .order-xl-4 {
+    order: 4 !important;
+  }
+
+  .order-xl-5 {
+    order: 5 !important;
+  }
+
+  .order-xl-last {
+    order: 6 !important;
+  }
+
+  .m-xl-0 {
+    margin: 0 !important;
+  }
+
+  .m-xl-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-xl-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-xl-3 {
+    margin: 1rem !important;
+  }
+
+  .m-xl-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-xl-5 {
+    margin: 3rem !important;
+  }
+
+  .m-xl-auto {
+    margin: auto !important;
+  }
+
+  .mx-xl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-xl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-xl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-xl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-xl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-xl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-xl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-xl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-xl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-xl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-xl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-xl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-xl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-xl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-xl-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-xl-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-xl-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-xl-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-xl-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-xl-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-xl-auto {
+    margin-top: auto !important;
+  }
+
+  .me-xl-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-xl-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-xl-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-xl-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-xl-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-xl-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-xl-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-xl-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-xl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-xl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-xl-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-xl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-xl-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-xl-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-xl-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-xl-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-xl-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-xl-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-xl-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-xl-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-xl-auto {
+    margin-left: auto !important;
+  }
+
+  .p-xl-0 {
+    padding: 0 !important;
+  }
+
+  .p-xl-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-xl-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-xl-3 {
+    padding: 1rem !important;
+  }
+
+  .p-xl-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-xl-5 {
+    padding: 3rem !important;
+  }
+
+  .px-xl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-xl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-xl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-xl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-xl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-xl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-xl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-xl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-xl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-xl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-xl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-xl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-xl-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-xl-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-xl-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-xl-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-xl-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-xl-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-xl-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-xl-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-xl-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-xl-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-xl-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-xl-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-xl-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-xl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-xl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-xl-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-xl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-xl-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-xl-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-xl-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-xl-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-xl-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-xl-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-xl-5 {
+    padding-left: 3rem !important;
+  }
+
+  .gap-xl-0 {
+    gap: 0 !important;
+  }
+
+  .gap-xl-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-xl-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-xl-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-xl-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-xl-5 {
+    gap: 3rem !important;
+  }
+
+  .row-gap-xl-0 {
+    row-gap: 0 !important;
+  }
+
+  .row-gap-xl-1 {
+    row-gap: 0.25rem !important;
+  }
+
+  .row-gap-xl-2 {
+    row-gap: 0.5rem !important;
+  }
+
+  .row-gap-xl-3 {
+    row-gap: 1rem !important;
+  }
+
+  .row-gap-xl-4 {
+    row-gap: 1.5rem !important;
+  }
+
+  .row-gap-xl-5 {
+    row-gap: 3rem !important;
+  }
+
+  .column-gap-xl-0 {
+    column-gap: 0 !important;
+  }
+
+  .column-gap-xl-1 {
+    column-gap: 0.25rem !important;
+  }
+
+  .column-gap-xl-2 {
+    column-gap: 0.5rem !important;
+  }
+
+  .column-gap-xl-3 {
+    column-gap: 1rem !important;
+  }
+
+  .column-gap-xl-4 {
+    column-gap: 1.5rem !important;
+  }
+
+  .column-gap-xl-5 {
+    column-gap: 3rem !important;
+  }
+
+  .text-xl-start {
+    text-align: left !important;
+  }
+
+  .text-xl-end {
+    text-align: right !important;
+  }
+
+  .text-xl-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 1400px) {
+  .float-xxl-start {
+    float: left !important;
+  }
+
+  .float-xxl-end {
+    float: right !important;
+  }
+
+  .float-xxl-none {
+    float: none !important;
+  }
+
+  .object-fit-xxl-contain {
+    object-fit: contain !important;
+  }
+
+  .object-fit-xxl-cover {
+    object-fit: cover !important;
+  }
+
+  .object-fit-xxl-fill {
+    object-fit: fill !important;
+  }
+
+  .object-fit-xxl-scale {
+    object-fit: scale-down !important;
+  }
+
+  .object-fit-xxl-none {
+    object-fit: none !important;
+  }
+
+  .d-xxl-inline {
+    display: inline !important;
+  }
+
+  .d-xxl-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-xxl-block {
+    display: block !important;
+  }
+
+  .d-xxl-grid {
+    display: grid !important;
+  }
+
+  .d-xxl-inline-grid {
+    display: inline-grid !important;
+  }
+
+  .d-xxl-table {
+    display: table !important;
+  }
+
+  .d-xxl-table-row {
+    display: table-row !important;
+  }
+
+  .d-xxl-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-xxl-flex {
+    display: flex !important;
+  }
+
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-xxl-none {
+    display: none !important;
+  }
+
+  .flex-xxl-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-xxl-row {
+    flex-direction: row !important;
+  }
+
+  .flex-xxl-column {
+    flex-direction: column !important;
+  }
+
+  .flex-xxl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-xxl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-xxl-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-xxl-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-xxl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-xxl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-xxl-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-xxl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-xxl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-xxl-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-xxl-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-xxl-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-xxl-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-xxl-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-xxl-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-xxl-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-xxl-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-xxl-center {
+    align-items: center !important;
+  }
+
+  .align-items-xxl-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-xxl-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-xxl-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-xxl-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-xxl-center {
+    align-content: center !important;
+  }
+
+  .align-content-xxl-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-xxl-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-xxl-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-xxl-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-xxl-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-xxl-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-xxl-center {
+    align-self: center !important;
+  }
+
+  .align-self-xxl-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-xxl-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-xxl-first {
+    order: -1 !important;
+  }
+
+  .order-xxl-0 {
+    order: 0 !important;
+  }
+
+  .order-xxl-1 {
+    order: 1 !important;
+  }
+
+  .order-xxl-2 {
+    order: 2 !important;
+  }
+
+  .order-xxl-3 {
+    order: 3 !important;
+  }
+
+  .order-xxl-4 {
+    order: 4 !important;
+  }
+
+  .order-xxl-5 {
+    order: 5 !important;
+  }
+
+  .order-xxl-last {
+    order: 6 !important;
+  }
+
+  .m-xxl-0 {
+    margin: 0 !important;
+  }
+
+  .m-xxl-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-xxl-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-xxl-3 {
+    margin: 1rem !important;
+  }
+
+  .m-xxl-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-xxl-5 {
+    margin: 3rem !important;
+  }
+
+  .m-xxl-auto {
+    margin: auto !important;
+  }
+
+  .mx-xxl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-xxl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-xxl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-xxl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-xxl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-xxl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-xxl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-xxl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-xxl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-xxl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-xxl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-xxl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-xxl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-xxl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-xxl-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-xxl-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-xxl-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-xxl-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-xxl-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-xxl-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-xxl-auto {
+    margin-top: auto !important;
+  }
+
+  .me-xxl-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-xxl-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-xxl-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-xxl-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-xxl-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-xxl-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-xxl-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-xxl-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-xxl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-xxl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-xxl-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-xxl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-xxl-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-xxl-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-xxl-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-xxl-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-xxl-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-xxl-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-xxl-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-xxl-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-xxl-auto {
+    margin-left: auto !important;
+  }
+
+  .p-xxl-0 {
+    padding: 0 !important;
+  }
+
+  .p-xxl-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-xxl-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-xxl-3 {
+    padding: 1rem !important;
+  }
+
+  .p-xxl-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-xxl-5 {
+    padding: 3rem !important;
+  }
+
+  .px-xxl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-xxl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-xxl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-xxl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-xxl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-xxl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-xxl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-xxl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-xxl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-xxl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-xxl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-xxl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-xxl-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-xxl-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-xxl-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-xxl-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-xxl-5 {
+    padding-left: 3rem !important;
+  }
+
+  .gap-xxl-0 {
+    gap: 0 !important;
+  }
+
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-xxl-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-xxl-5 {
+    gap: 3rem !important;
+  }
+
+  .row-gap-xxl-0 {
+    row-gap: 0 !important;
+  }
+
+  .row-gap-xxl-1 {
+    row-gap: 0.25rem !important;
+  }
+
+  .row-gap-xxl-2 {
+    row-gap: 0.5rem !important;
+  }
+
+  .row-gap-xxl-3 {
+    row-gap: 1rem !important;
+  }
+
+  .row-gap-xxl-4 {
+    row-gap: 1.5rem !important;
+  }
+
+  .row-gap-xxl-5 {
+    row-gap: 3rem !important;
+  }
+
+  .column-gap-xxl-0 {
+    column-gap: 0 !important;
+  }
+
+  .column-gap-xxl-1 {
+    column-gap: 0.25rem !important;
+  }
+
+  .column-gap-xxl-2 {
+    column-gap: 0.5rem !important;
+  }
+
+  .column-gap-xxl-3 {
+    column-gap: 1rem !important;
+  }
+
+  .column-gap-xxl-4 {
+    column-gap: 1.5rem !important;
+  }
+
+  .column-gap-xxl-5 {
+    column-gap: 3rem !important;
+  }
+
+  .text-xxl-start {
+    text-align: left !important;
+  }
+
+  .text-xxl-end {
+    text-align: right !important;
+  }
+
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .fs-1 {
+    font-size: 2.5rem !important;
+  }
+
+  .fs-2 {
+    font-size: 2rem !important;
+  }
+
+  .fs-3 {
+    font-size: 1.75rem !important;
+  }
+
+  .fs-4 {
+    font-size: 1.5rem !important;
+  }
+}
+
+@media print {
+  .d-print-inline {
+    display: inline !important;
+  }
+
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-print-block {
+    display: block !important;
+  }
+
+  .d-print-grid {
+    display: grid !important;
+  }
+
+  .d-print-inline-grid {
+    display: inline-grid !important;
+  }
+
+  .d-print-table {
+    display: table !important;
+  }
+
+  .d-print-table-row {
+    display: table-row !important;
+  }
+
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-print-flex {
+    display: flex !important;
+  }
+
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-print-none {
+    display: none !important;
+  }
+}
+
+/*
+       TALAWA SCSS
+       -----------
+       This file is used to import all partial scss files in the project.
+       It is used to compile the final CSS file to the CSS folder as main.css .
+   
+   =========  Table of Contents  =========
+   1. Components
+   2. Content
+   3. Forms
+   4. Utilities
+   5. General
+   6. Colors
+   
+   */
+/*
+   
+       1. COMPONENTS
+   
+   */
+.btn-primary,
+.btn-secondary,
+.btn-success,
+.btn-warning,
+.btn-info {
+  color: #fff;
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-secondary:hover,
+.btn-secondary:active,
+.btn-success:hover,
+.btn-success:active,
+.btn-warning:hover,
+.btn-warning:active,
+.btn-info:hover,
+.btn-info:active {
+  color: #fff !important;
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:active,
+.btn-outline-secondary:hover,
+.btn-outline-secondary:active,
+.btn-outline-success:hover,
+.btn-outline-success:active,
+.btn-outline-warning:hover,
+.btn-outline-warning:active,
+.btn-outline-info:hover,
+.btn-outline-info:active {
+  color: #fff !important;
+}
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 1rem;
+  }
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/*
+   
+       2. CONTENT
+   
+   */
+/*
+       DISPLAY SASS VARIABLES
+   */
+/*
+       DISPLAY SASS VARIABLES
+   */
+/*
+   
+       3. FORMS
+   
+   */
+/*
+   
+       4. UTILITIES
+   
+   */
+/*
+   
+       5. General
+   
+   */
+:root {
+  --bs-body-font-family: Arial, Helvetica, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  overflow-x: hidden;
+}
+
+body {
+  background-color: var(--bs-body-bg);
+}
+
+#root {
+  min-height: 100vh;
+  background-color: #f2f7ff;
+}
+
+input[type='checkbox'] {
+  transform: scale(1.5);
+}
+
+.form-switch {
+  padding-left: 3rem;
+}
+
+input[type='file']::file-selector-button {
+  background: var(--bs-gray-400);
+}
+
+.shimmer {
+  animation-duration: 2.2s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: shimmer;
+  animation-timing-function: linear;
+  background: var(--bs-gray-200);
+  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
+  background-size: 1200px 100%;
+}
+
+@-webkit-keyframes shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1200px 0;
+  }
+
+  100% {
+    background-position: 1200px 0;
+  }
+}
+
+/*
+
+    6. COLORS
+
+*/
+
+/*# sourceMappingURL=app.css.map */
diff --git a/src/assets/css/app.css.map b/src/assets/css/app.css.map
new file mode 100644
index 0000000000..00a8ba5443
--- /dev/null
+++ b/src/assets/css/app.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../node_modules/bootstrap/scss/_root.scss","../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../node_modules/bootstrap/scss/mixins/_color-mode.scss","../../../node_modules/bootstrap/scss/_reboot.scss","../../../node_modules/bootstrap/scss/_variables.scss","../scss/_variables.scss","../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../node_modules/bootstrap/scss/_type.scss","../../../node_modules/bootstrap/scss/mixins/_lists.scss","../../../node_modules/bootstrap/scss/_images.scss","../../../node_modules/bootstrap/scss/mixins/_image.scss","../../../node_modules/bootstrap/scss/_containers.scss","../../../node_modules/bootstrap/scss/mixins/_container.scss","../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../../../node_modules/bootstrap/scss/_grid.scss","../../../node_modules/bootstrap/scss/mixins/_grid.scss","../../../node_modules/bootstrap/scss/_tables.scss","../../../node_modules/bootstrap/scss/mixins/_table-variants.scss","../../../node_modules/bootstrap/scss/forms/_labels.scss","../../../node_modules/bootstrap/scss/forms/_form-text.scss","../../../node_modules/bootstrap/scss/forms/_form-control.scss","../../../node_modules/bootstrap/scss/mixins/_transition.scss","../../../node_modules/bootstrap/scss/mixins/_gradients.scss","../../../node_modules/bootstrap/scss/forms/_form-select.scss","../../../node_modules/bootstrap/scss/forms/_form-check.scss","../../../node_modules/bootstrap/scss/forms/_form-range.scss","../../../node_modules/bootstrap/scss/forms/_floating-labels.scss","../../../node_modules/bootstrap/scss/forms/_input-group.scss","../../../node_modules/bootstrap/scss/mixins/_forms.scss","../../../node_modules/bootstrap/scss/_buttons.scss","../../../node_modules/bootstrap/scss/mixins/_buttons.scss","../../../node_modules/bootstrap/scss/_transitions.scss","../../../node_modules/bootstrap/scss/_dropdown.scss","../../../node_modules/bootstrap/scss/mixins/_caret.scss","../../../node_modules/bootstrap/scss/_button-group.scss","../../../node_modules/bootstrap/scss/_nav.scss","../../../node_modules/bootstrap/scss/_navbar.scss","../../../node_modules/bootstrap/scss/_card.scss","../../../node_modules/bootstrap/scss/_accordion.scss","../../../node_modules/bootstrap/scss/_breadcrumb.scss","../../../node_modules/bootstrap/scss/_pagination.scss","../../../node_modules/bootstrap/scss/mixins/_pagination.scss","../../../node_modules/bootstrap/scss/_badge.scss","../../../node_modules/bootstrap/scss/_alert.scss","../../../node_modules/bootstrap/scss/_progress.scss","../../../node_modules/bootstrap/scss/_list-group.scss","../../../node_modules/bootstrap/scss/_close.scss","../../../node_modules/bootstrap/scss/_toasts.scss","../../../node_modules/bootstrap/scss/_modal.scss","../../../node_modules/bootstrap/scss/mixins/_backdrop.scss","../../../node_modules/bootstrap/scss/_tooltip.scss","../../../node_modules/bootstrap/scss/mixins/_reset-text.scss","../../../node_modules/bootstrap/scss/_popover.scss","../../../node_modules/bootstrap/scss/_carousel.scss","../../../node_modules/bootstrap/scss/mixins/_clearfix.scss","../../../node_modules/bootstrap/scss/_spinners.scss","../../../node_modules/bootstrap/scss/_offcanvas.scss","../../../node_modules/bootstrap/scss/_placeholders.scss","../../../node_modules/bootstrap/scss/helpers/_color-bg.scss","../../../node_modules/bootstrap/scss/helpers/_colored-links.scss","../../../node_modules/bootstrap/scss/helpers/_focus-ring.scss","../../../node_modules/bootstrap/scss/helpers/_icon-link.scss","../../../node_modules/bootstrap/scss/helpers/_ratio.scss","../../../node_modules/bootstrap/scss/helpers/_position.scss","../../../node_modules/bootstrap/scss/helpers/_stacks.scss","../../../node_modules/bootstrap/scss/helpers/_visually-hidden.scss","../../../node_modules/bootstrap/scss/mixins/_visually-hidden.scss","../../../node_modules/bootstrap/scss/helpers/_stretched-link.scss","../../../node_modules/bootstrap/scss/helpers/_text-truncation.scss","../../../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../../../node_modules/bootstrap/scss/helpers/_vr.scss","../../../node_modules/bootstrap/scss/mixins/_utilities.scss","../../../node_modules/bootstrap/scss/utilities/_api.scss","../scss/_talawa.scss","../scss/components/_buttons.scss","../scss/components/_progress.scss","../scss/components/_spinners.scss","../scss/content/_typography.scss","../scss/_general.scss"],"names":[],"mappings":";AACE;AAAA;AAAA;AAAA;AAAA;ACDF;AAAA;EASI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGF;EACA;EAMA;EACA;EACA;EAOA;EC2OI,qBALI;EDpOR;EACA;EAKA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAGA;EAEA;EACA;EACA;EAEA;EACA;EAMA;EACA;EAGA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAIA;EACA;EACA;EAIA;EACA;EACA;EACA;;;AE/GE;EFqHA;EAGA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAGE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGF;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AGrKJ;AAAA;AAAA;EAGE;;;AAeE;EANJ;IAOM;;;;AAcN;EACE;EACA;EF6OI,WALI;EEtOR;EACA;EACA;EACA;EACA;EACA;EACA;;;AASF;EACE;EACA,OCmnB4B;EDlnB5B;EACA;EACA,SCynB4B;;;AD/mB9B;EACE;EACA,eCwjB4B;EDrjB5B,aCwjB4B;EDvjB5B,aCwjB4B;EDvjB5B;;;AAGF;EFuMQ;;AA5JJ;EE3CJ;IF8MQ;;;;AEzMR;EFkMQ;;AA5JJ;EEtCJ;IFyMQ;;;;AEpMR;EF6LQ;;AA5JJ;EEjCJ;IFoMQ;;;;AE/LR;EFwLQ;;AA5JJ;EE5BJ;IF+LQ;;;;AE1LR;EF+KM,WALI;;;AErKV;EF0KM,WALI;;;AE1JV;EACE;EACA,eCwV0B;;;AD9U5B;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;;;AAMF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE,aC6b4B;;;ADxb9B;EACE;EACA;;;AAMF;EACE;;;AAQF;AAAA;EAEE,aCsa4B;;;AD9Z9B;EF6EM,WALI;;;AEjEV;EACE,SCif4B;EDhf5B;;;AASF;AAAA;EAEE;EFyDI,WALI;EElDR;EACA;;;AAGF;EAAM;;;AACN;EAAM;;;AAKN;EACE;EACA,iBE9NgB;;AFgOhB;EACE;;;AAWF;EAEE;EACA;;;AAOJ;AAAA;AAAA;AAAA;EAIE,aCiV4B;EHlUxB,WALI;;;AEFV;EACE;EACA;EACA;EACA;EFGI,WALI;;AEOR;EFFI,WALI;EESN;EACA;;;AAIJ;EFTM,WALI;EEgBR;EACA;;AAGA;EACE;;;AAIJ;EACE;EFrBI,WALI;EE4BR,OCo5CkC;EDn5ClC,kBCo5CkC;EExrDhC;;AHuSF;EACE;EF5BE,WALI;;;AE4CV;EACE;;;AAMF;AAAA;EAEE;;;AAQF;EACE;EACA;;;AAGF;EACE,aCwX4B;EDvX5B,gBCuX4B;EDtX5B,OCwZ4B;EDvZ5B;;;AAOF;EAEE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;;;AAQF;EACE;;;AAMF;EAEE;;;AAQF;EACE;;;AAKF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EF3HI,WALI;EEkIR;;;AAIF;AAAA;EAEE;;;AAKF;EACE;;;AAGF;EAGE;;AAGA;EACE;;;AAOJ;EACE;;;AAQF;AAAA;AAAA;AAAA;EAIE;;AAGE;AAAA;AAAA;AAAA;EACE;;;AAON;EACE;EACA;;;AAKF;EACE;;;AAUF;EACE;EACA;EACA;EACA;;;AAQF;EACE;EACA;EACA;EACA,eCgN4B;EHhatB;EEmNN;;AF/WE;EEwWJ;IFrMQ;;;AE8MN;EACE;;;AAOJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;;;AASF;EACE;EACA;;;AAQF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAKF;EACE;;;AAOF;EACE;EACA;;;AAKF;EACE;;;AAKF;EACE;;;AAOF;EACE;EACA;;;AAQF;EACE;;;AAQF;EACE;;;AIpkBF;ENmQM,WALI;EM5PR,aHwoB4B;;;AGnoB5B;ENgQM;EM5PJ,aHynBkB;EGxnBlB,aHwmB0B;;AHzgB1B;EMpGF;INuQM;;;;AMvQN;ENgQM;EM5PJ,aHynBkB;EGxnBlB,aHwmB0B;;AHzgB1B;EMpGF;INuQM;;;;AMvQN;ENgQM;EM5PJ,aHynBkB;EGxnBlB,aHwmB0B;;AHzgB1B;EMpGF;INuQM;;;;AMvQN;ENgQM;EM5PJ,aHynBkB;EGxnBlB,aHwmB0B;;AHzgB1B;EMpGF;INuQM;;;;AMvQN;ENgQM;EM5PJ,aHynBkB;EGxnBlB,aHwmB0B;;AHzgB1B;EMpGF;INuQM;;;;AMvQN;ENgQM;EM5PJ,aHynBkB;EGxnBlB,aHwmB0B;;AHzgB1B;EMpGF;INuQM;;;;AM/OR;ECvDE;EACA;;;AD2DF;EC5DE;EACA;;;AD8DF;EACE;;AAEA;EACE,cHkoB0B;;;AGxnB9B;EN8MM,WALI;EMvMR;;;AAIF;EACE,eHiUO;EH1HH,WALI;;AM/LR;EACE;;;AAIJ;EACE;EACA,eHuTO;EH1HH,WALI;EMtLR,OHtFS;;AGwFT;EACE;;;AEhGJ;ECIE;EAGA;;;ADDF;EACE,SLyjDkC;EKxjDlC,kBLyjDkC;EKxjDlC;EHGE;EIRF;EAGA;;;ADcF;EAEE;;;AAGF;EACE;EACA;;;AAGF;ERyPM,WALI;EQlPR,OL4iDkC;;;AO9kDlC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECHA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACsDE;EF5CE;IACE,WPkee;;;ASvbnB;EF5CE;IACE,WPkee;;;ASvbnB;EF5CE;IACE,WPkee;;;ASvbnB;EF5CE;IACE,WPkee;;;ASvbnB;EF5CE;IACE,WPkee;;;AUlfvB;EAEI;EAAA;EAAA;EAAA;EAAA;EAAA;;;AAKF;ECNA;EACA;EACA;EACA;EAEA;EACA;EACA;;ADEE;ECOF;EACA;EACA;EACA;EACA;EACA;;;AA+CI;EACE;;;AAGF;EApCJ;EACA;;;AAcA;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AA+BE;EAhDJ;EACA;;;AAqDQ;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AA+DM;EAhEN;EACA;;;AAuEQ;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAwDU;EAxDV;;;AAmEM;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAPF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAPF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAPF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAPF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAPF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AF1DN;EEUE;IACE;;EAGF;IApCJ;IACA;;EAcA;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EA+BE;IAhDJ;IACA;;EAqDQ;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EAuEQ;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAmEM;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;;AF1DN;EEUE;IACE;;EAGF;IApCJ;IACA;;EAcA;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EA+BE;IAhDJ;IACA;;EAqDQ;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EAuEQ;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAmEM;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;;AF1DN;EEUE;IACE;;EAGF;IApCJ;IACA;;EAcA;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EA+BE;IAhDJ;IACA;;EAqDQ;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EAuEQ;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAmEM;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;;AF1DN;EEUE;IACE;;EAGF;IApCJ;IACA;;EAcA;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EA+BE;IAhDJ;IACA;;EAqDQ;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EAuEQ;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAmEM;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;;AF1DN;EEUE;IACE;;EAGF;IApCJ;IACA;;EAcA;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EAFF;IACE;IACA;;EA+BE;IAhDJ;IACA;;EAqDQ;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EA+DM;IAhEN;IACA;;EAuEQ;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAwDU;IAxDV;;EAmEM;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;EAPF;AAAA;IAEE;;EAGF;AAAA;IAEE;;;ACrHV;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA,eZkYO;EYjYP,gBZksB4B;EYjsB5B;;AAOA;EACE;EAEA;EACA;EACA,qBZ0sB0B;EYzsB1B;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAOF;EACE;;;AAUA;EACE;;;AAeF;EACE;;AAGA;EACE;;;AAOJ;EACE;;AAGF;EACE;;;AAUF;EACE;EACA;;;AAMF;EACE;EACA;;;AAQJ;EACE;EACA;;;AAQA;EACE;EACA;;;AC5IF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAlBF;EAOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;ADiJA;EACE;EACA;;;AH3FF;EGyFA;IACE;IACA;;;AH3FF;EGyFA;IACE;IACA;;;AH3FF;EGyFA;IACE;IACA;;;AH3FF;EGyFA;IACE;IACA;;;AH3FF;EGyFA;IACE;IACA;;;AEnKN;EACE,edi2BsC;;;Acx1BxC;EACE;EACA;EACA;EjB8QI,WALI;EiBrQR,ad+lB4B;;;Ac3lB9B;EACE;EACA;EjBoQI,WALI;;;AiB3PV;EACE;EACA;EjB8PI,WALI;;;AkBtRV;EACE,Yfy1BsC;EH/jBlC,WALI;EkBjRR,Ofy1BsC;;;AgB91BxC;EACE;EACA;EACA;EnBwRI,WALI;EmBhRR,ahBkmB4B;EgBjmB5B,ahBymB4B;EgBxmB5B,OhBs3BsC;EgBr3BtC,kBfIe;EeHf;EACA;EACA;EdGE;EeHE,YDMJ;;ACFI;EDhBN;ICiBQ;;;ADGN;EACE;;AAEA;EACE;;AAKJ;EACE,OhBg2BoC;EgB/1BpC,kBflBa;EemBb,chBw2BoC;EgBv2BpC;EAKE,YhBkhBkB;;AgB9gBtB;EAME;EAMA;EAKA;;AAKF;EACE;EACA;;AAIF;EACE,OhBs0BoC;EgBp0BpC;;AAQF;EAEE,kBhBwyBoC;EgBryBpC;;AAIF;EACE;EACA;EACA,mBfpEkB;EeqElB,OhBgyBoC;EkB93BtC,kBlB+hCgC;EgB/7B9B;EACA;EACA;EACA;EACA,yBf9EiB;Ee+EjB;ECzFE,YD0FF;;ACtFE;ED0EJ;ICzEM;;;ADwFN;EACE,kBhBs7B8B;;;AgB76BlC;EACE;EACA;EACA;EACA;EACA,ahBwf4B;EgBvf5B,OhBqxBsC;EgBpxBtC;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;;AAWJ;EACE,YhBswBsC;EgBrwBtC;EnByII,WALI;EKvQN;;AcuIF;EACE;EACA;EACA,mBhB+nB0B;;;AgB3nB9B;EACE,YhB0vBsC;EgBzvBtC;EnB4HI,WALI;EKvQN;;AcoJF;EACE;EACA;EACA,mBhBsnB0B;;;AgB9mB5B;EACE,YhBuuBoC;;AgBpuBtC;EACE,YhBouBoC;;AgBjuBtC;EACE,YhBiuBoC;;;AgB5tBxC;EACE,OhB+tBsC;EgB9tBtC,QhBwtBsC;EgBvtBtC,SfvKoB;;AeyKpB;EACE;;AAGF;EACE;EdvLA;;Ac2LF;EACE;Ed5LA;;AcgMF;EAAoB,QhBwsBkB;;AgBvsBtC;EAAoB,QhBwsBkB;;;AmBv5BxC;EACE;EAEA;EACA;EACA;EtBqRI,WALI;EsB7QR,anB+lB4B;EmB9lB5B,anBsmB4B;EmBrmB5B,OnBm3BsC;EmBl3BtC,kBlBCe;EkBAf;EACA;EACA,qBnB09BkC;EmBz9BlC,iBnB09BkC;EmBz9BlC;EjBFE;EeHE,YEQJ;EACA;;AFLI;EEfN;IFgBQ;;;AEMN;EACE,cnBg3BoC;EmB/2BpC;EAKE,YnB29B4B;;AmBv9BhC;EAEE,elBXkB;EkBYlB;;AAGF;EAEE,kBnBi1BoC;;AmB50BtC;EACE;EACA;;;AAIJ;EACE,anBiuB4B;EmBhuB5B,gBnBguB4B;EmB/tB5B,cnBguB4B;EH7fxB,WALI;EKvQN;;;AiB8CJ;EACE,anB6tB4B;EmB5tB5B,gBnB4tB4B;EmB3tB5B,cnB4tB4B;EHjgBxB,WALI;EKvQN;;;AiBwDA;EACE;;;ACxEN;EACE;EACA,YpB+5BwC;EoB95BxC,cpB+5BwC;EoB95BxC,epB+5BwC;;AoB75BxC;EACE;EACA;;;AAIJ;EACE,epBq5BwC;EoBp5BxC;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EAEA,OpBq4BwC;EoBp4BxC,QpBo4BwC;EoBn4BxC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QpBu4BwC;EoBt4BxC;EACA;;AAGA;ElB1BE;;AkB8BF;EAEE,epB83BsC;;AoB33BxC;EACE,QpBq3BsC;;AoBl3BxC;EACE,cpBi1BoC;EoBh1BpC;EACA,YpB+foB;;AoB5ftB;EACE,kBnB/DM;EmBgEN,cnBhEM;;AmBkEN;EAII;;AAIJ;EAII;;AAKN;EACE,kBnBpFM;EmBqFN,cnBrFM;EmB0FJ;;AAIJ;EACE;EACA;EACA,SpB61BuC;;AoBt1BvC;EACE;EACA,SpBo1BqC;;;AoBt0B3C;EACE,cpB+0BgC;;AoB70BhC;EACE;EAEA,OpBy0B8B;EoBx0B9B;EACA;EACA;ElBhHA;EeHE,YGqHF;;AHjHE;EGyGJ;IHxGM;;;AGkHJ;EACE;;AAGF;EACE,qBpBw0B4B;EoBn0B1B;;AAKN;EACE,epBmzB8B;EoBlzB9B;;AAEA;EACE;EACA;;;AAKN;EACE;EACA,cpBiyBgC;;;AoB9xBlC;EACE;EACA;EACA;;AAIE;EACE;EACA;EACA,SpBkpBwB;;;AoB3oB1B;EACE;;;AClLN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EAA0B,YrBwgCa;;AqBvgCvC;EAA0B,YrBugCa;;AqBpgCzC;EACE;;AAGF;EACE,OrBy/BuC;EqBx/BvC,QrBw/BuC;EqBv/BvC;EHzBF,kBjBFQ;EoB6BN,QrBw/BuC;EEpgCvC;EeHE,YIkBF;EACA;;AJfE;EIMJ;IJLM;;;AIgBJ;EHjCF,kBlBwhCyC;;AqBl/BzC;EACE,OrBk+B8B;EqBj+B9B,QrBk+B8B;EqBj+B9B;EACA,QrBi+B8B;EqBh+B9B,kBrBi+B8B;EqBh+B9B;EnB7BA;;AmBkCF;EACE,OrB89BuC;EqB79BvC,QrB69BuC;EkBhhCzC,kBjBFQ;EoBuDN,QrB89BuC;EEpgCvC;EeHE,YI4CF;EACA;;AJzCE;EIiCJ;IJhCM;;;AI0CJ;EH3DF,kBlBwhCyC;;AqBx9BzC;EACE,OrBw8B8B;EqBv8B9B,QrBw8B8B;EqBv8B9B;EACA,QrBu8B8B;EqBt8B9B,kBrBu8B8B;EqBt8B9B;EnBvDA;;AmB4DF;EACE;;AAEA;EACE,kBrB08BqC;;AqBv8BvC;EACE,kBrBs8BqC;;;AsB7hC3C;EACE;;AAEA;AAAA;AAAA;EAGE,QtBkiCoC;EsBjiCpC,YtBiiCoC;EsBhiCpC,atBiiCoC;;AsB9hCtC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ELRE,YKSF;;ALLE;EKTJ;ILUM;;;AKON;AAAA;EAEE;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;EAEE,atBsgCkC;EsBrgClC,gBtBsgCkC;;AsBngCpC;AAAA;EACE,atBigCkC;EsBhgClC,gBtBigCkC;;AsB7/BtC;EACE,atB2/BoC;EsB1/BpC,gBtB2/BoC;;AsBp/BpC;AAAA;AAAA;AAAA;EACE;EACA,WtBq/BkC;;AsBn/BlC;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA,QtB6+BgC;EsB5+BhC;EACA,kBrBlDS;ECEb;;AoBuDA;EACE;EACA,WtBo+BkC;;AsB/9BpC;EACE;;AAIJ;EACE,OtBzEO;;AsB2EP;EACE,kBtBqyBkC;;;AuB33BxC;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;EAGE;;AAMF;EACE;EACA;;AAEA;EACE;;;AAWN;EACE;EACA;EACA;E1B8OI,WALI;E0BvOR,avByjB4B;EuBxjB5B,avBgkB4B;EuB/jB5B,OvB60BsC;EuB50BtC;EACA;EACA,kBvBo6BsC;EuBn6BtC;ErBtCE;;;AqBgDJ;AAAA;AAAA;AAAA;EAIE;E1BwNI,WALI;EKvQN;;;AqByDJ;AAAA;AAAA;AAAA;EAIE;E1B+MI,WALI;EKvQN;;;AqBkEJ;AAAA;EAEE;;;AAaE;AAAA;AAAA;AAAA;ErBjEA;EACA;;AqByEA;AAAA;AAAA;AAAA;ErB1EA;EACA;;AqBsFF;EACE;ErB1EA;EACA;;AqB6EF;AAAA;ErB9EE;EACA;;;AsBxBF;EACE;EACA;EACA,YxBi0BoC;EH/jBlC,WALI;E2B1PN,OxB4iCqB;;;AwBziCvB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;E3BqPE,WALI;E2B7ON,OxB+hCqB;EwB9hCrB,kBxB8hCqB;EEzjCrB;;;AsBgCA;AAAA;AAAA;AAAA;EAEE;;;AA/CF;EAqDE,cxBihCmB;EwB9gCjB,exBw1BgC;EwBv1BhC;EACA;EACA;EACA;;AAGF;EACE,cxBsgCiB;EwBrgCjB,YxBqgCiB;;;AwBtkCrB;EA0EI,exBs0BgC;EwBr0BhC;;;AA3EJ;EAkFE,cxBo/BmB;;AwBj/BjB;EAEE;EACA,exBo5B8B;EwBn5B9B;EACA;;AAIJ;EACE,cxBu+BiB;EwBt+BjB,YxBs+BiB;;;AwBtkCrB;EAwGI;;;AAxGJ;EA+GE,cxBu9BmB;;AwBr9BnB;EACE,kBxBo9BiB;;AwBj9BnB;EACE,YxBg9BiB;;AwB78BnB;EACE,OxB48BiB;;;AwBv8BrB;EACE;;;AAhIF;AAAA;AAAA;AAAA;AAAA;EA0IM;;;AAtHR;EACE;EACA;EACA,YxBi0BoC;EH/jBlC,WALI;E2B1PN,OxB4iCqB;;;AwBziCvB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;E3BqPE,WALI;E2B7ON,OxB+hCqB;EwB9hCrB,kBxB8hCqB;EEzjCrB;;;AsBgCA;AAAA;AAAA;AAAA;EAEE;;;AA/CF;EAqDE,cxBihCmB;EwB9gCjB,exBw1BgC;EwBv1BhC;EACA;EACA;EACA;;AAGF;EACE,cxBsgCiB;EwBrgCjB,YxBqgCiB;;;AwBtkCrB;EA0EI,exBs0BgC;EwBr0BhC;;;AA3EJ;EAkFE,cxBo/BmB;;AwBj/BjB;EAEE;EACA,exBo5B8B;EwBn5B9B;EACA;;AAIJ;EACE,cxBu+BiB;EwBt+BjB,YxBs+BiB;;;AwBtkCrB;EAwGI;;;AAxGJ;EA+GE,cxBu9BmB;;AwBr9BnB;EACE,kBxBo9BiB;;AwBj9BnB;EACE,YxBg9BiB;;AwB78BnB;EACE,OxB48BiB;;;AwBv8BrB;EACE;;;AAhIF;AAAA;AAAA;AAAA;AAAA;EA4IM;;;AC9IV;EAEE;EACA;EACA;E5BuRI,oBALI;E4BhRR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;E5BsQI,WALI;E4B/PR;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EvBjBE;EgBfF,kBOkCqB;ERtBjB,YQwBJ;;ARpBI;EQhBN;IRiBQ;;;AQqBN;EACE;EAEA;EACA;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EPrDF,kBOsDuB;EACrB;EACA;EAKE;;AAIJ;EACE;EACA;EAKE;;AAIJ;EAKE;EACA;EAGA;;AAGA;EAKI;;AAKN;EAGE;EACA;EACA;EAEA;EACA;;;AAYF;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADyFA;ECtGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADmHA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD0FA;ECvGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADsGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,iBxBxJgB;;AwBkKhB;EACE;;AAGF;EACE;;;AAWJ;ECxIE;EACA;E7B8NI,oBALI;E6BvNR;;;ADyIF;EC5IE;EACA;E7B8NI,oBALI;E6BvNR;;;ACnEF;EVgBM,YUfJ;;AVmBI;EUpBN;IVqBQ;;;AUlBN;EACE;;;AAMF;EACE;;;AAIJ;EACE;EACA;EVDI,YUEJ;;AVEI;EULN;IVMQ;;;AUDN;EACE;EACA;EVNE,YUOF;;AVHE;EUAJ;IVCM;;;;AWpBR;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAGF;EACE;;ACwBE;EACE;EACA,a7B6hBwB;E6B5hBxB,gB7B2hBwB;E6B1hBxB;EArCJ;EACA;EACA;EACA;;AA0DE;EACE;;;AD9CN;EAEE;EACA;EACA;EACA;EACA;E/BuQI,yBALI;E+BhQR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;E/B0OI,WALI;E+BnOR;EACA;EACA;EACA;EACA;EACA;E1BzCE;;A0B6CF;EACE;EACA;EACA;;;AAwBA;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;;AnB1CJ;EmB4BA;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;;EAEA;IACE;IACA;;;AnB1CJ;EmB4BA;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;;EAEA;IACE;IACA;;;AnB1CJ;EmB4BA;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;;EAEA;IACE;IACA;;;AnB1CJ;EmB4BA;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;;EAEA;IACE;IACA;;;AnB1CJ;EmB4BA;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;;EAEA;IACE;IACA;;;AAUN;EACE;EACA;EACA;EACA;;ACpFA;EACE;EACA,a7B6hBwB;E6B5hBxB,gB7B2hBwB;E6B1hBxB;EA9BJ;EACA;EACA;EACA;;AAmDE;EACE;;;ADgEJ;EACE;EACA;EACA;EACA;EACA;;AClGA;EACE;EACA,a7B6hBwB;E6B5hBxB,gB7B2hBwB;E6B1hBxB;EAvBJ;EACA;EACA;EACA;;AA4CE;EACE;;AD0EF;EACE;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;ACnHA;EACE;EACA,a7B6hBwB;E6B5hBxB,gB7B2hBwB;E6B1hBxB;;AAWA;EACE;;AAGF;EACE;EACA,c7B0gBsB;E6BzgBtB,gB7BwgBsB;E6BvgBtB;EAnCN;EACA;EACA;;AAsCE;EACE;;AD2FF;EACE;;;AAON;EACE;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA,a5Byb4B;E4Bxb5B;EACA;EAEA;EACA;EACA;E1BtKE;;A0ByKF;EAEE;EV1LF,kBU4LuB;;AAGvB;EAEE;EACA;EVlMF,kBUmMuB;;AAGvB;EAEE;EACA;EACA;;;AAMJ;EACE;;;AAIF;EACE;EACA;EACA;E/BmEI,WALI;E+B5DR;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AEtPF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;E5BhBI;;A4BoBF;AAAA;EAEE;;AAIF;AAAA;AAAA;E5BVE;EACA;;A4BmBF;AAAA;AAAA;E5BNE;EACA;;;A4BwBJ;EACE;EACA;;AAEA;EAGE;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAoBF;EACE;EACA;EACA;;AAEA;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAIF;AAAA;E5B1FE;EACA;;A4B8FF;AAAA;E5B7GE;EACA;;;A6BxBJ;EAEE;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;ElCsQI,WALI;EkC/PR;EACA;EAEA;EACA;EdfI,YcgBJ;;AdZI;EcGN;IdFQ;;;AcaN;EAEE;;AAIF;EACE;EACA,Y/BkhBoB;;A+B9gBtB;EACE;EACA;EACA;;;AAQJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;EACA;E7B5CA;EACA;;A6B8CA;EAGE;EACA;;AAGF;EAEE;EACA;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;;AAGF;EAEE;E7BvEA;EACA;;;A6BiFJ;EAEE;EACA;EACA;;AAGA;E7BlGE;;A6BqGA;EACE;EACA;EACA;;AAIJ;AAAA;EAEE;Eb7HF,kBa8HuB;;;AASzB;EAEE;EACA;EACA;EAGA;;AAEA;EACE;EACA;EACA;;AAEA;EAEE;;AAIJ;AAAA;EAEE,a/B8c0B;E+B7c1B;EACA;;;AAUF;AAAA;EAEE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;;;AAMF;AAAA;EACE;;;AAUF;EACE;;AAEF;EACE;;;ACzMJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAoBJ;EACE;EACA;EACA;EnC4NI,WALI;EmCrNR;EAEA;;AAEA;EAEE;;;AAUJ;EAEE;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;AAGE;EAEE;;AAIJ;EACE;;;AASJ;EACE,ahCwgCkC;EgCvgClC,gBhCugCkC;EgCtgClC;;AAEA;AAAA;AAAA;EAGE;;;AAaJ;EACE;EACA;EAGA;;;AAIF;EACE;EnCyII,WALI;EmClIR;EACA;EACA;EACA;E9BxIE;EeHE,Ye6IJ;;AfzII;EeiIN;IfhIQ;;;Ae0IN;EACE;;AAGF;EACE;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AvB1HE;EuBsIA;IAEI;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;If9NJ,YegOI;;EAGA;IACE;;EAGF;IACE;IACA;IACA;IACA;;;AvB5LR;EuBsIA;IAEI;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;If9NJ,YegOI;;EAGA;IACE;;EAGF;IACE;IACA;IACA;IACA;;;AvB5LR;EuBsIA;IAEI;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;If9NJ,YegOI;;EAGA;IACE;;EAGF;IACE;IACA;IACA;IACA;;;AvB5LR;EuBsIA;IAEI;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;If9NJ,YegOI;;EAGA;IACE;;EAGF;IACE;IACA;IACA;IACA;;;AvB5LR;EuBsIA;IAEI;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;If9NJ,YegOI;;EAGA;IACE;;EAGF;IACE;IACA;IACA;IACA;;;AAtDR;EAEI;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;Ef9NJ,YegOI;;AAGA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAiBZ;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAME;EACE;;;ACzRN;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E/BjBE;;A+BqBF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;E/BtBF;EACA;;A+ByBA;EACE;E/BbF;EACA;;A+BmBF;AAAA;EAEE;;;AAIJ;EAGE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAQA;EACE;;;AAQJ;EACE;EACA;EACA;EACA;EACA;;AAEA;E/B7FE;;;A+BkGJ;EACE;EACA;EACA;EACA;;AAEA;E/BxGE;;;A+BkHJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;E/B1IE;;;A+B8IJ;AAAA;AAAA;EAGE;;;AAGF;AAAA;E/B3II;EACA;;;A+B+IJ;AAAA;E/BlII;EACA;;;A+B8IF;EACE;;AxB3HA;EwBuHJ;IAQI;IACA;;EAGA;IAEE;IACA;;EAEA;IACE;IACA;;EAKA;I/B3KJ;IACA;;E+B6KM;AAAA;IAGE;;EAEF;AAAA;IAGE;;EAIJ;I/B5KJ;IACA;;E+B8KM;AAAA;IAGE;;EAEF;AAAA;IAGE;;;;ACpOZ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;ErC2PI,WALI;EqCpPR;EACA;EACA;EACA;EhCtBE;EgCwBF;EjB3BI,YiB4BJ;;AjBxBI;EiBWN;IjBVQ;;;AiByBN;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EjBlDE,YiBmDF;;AjB/CE;EiBsCJ;IjBrCM;;;AiBiDN;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EhC/DE;EACA;;AgCiEA;EhClEA;EACA;;AgCsEF;EACE;;AAIF;EhC9DE;EACA;;AgCiEE;EhClEF;EACA;;AgCsEA;EhCvEA;EACA;;;AgC4EJ;EACE;;;AASA;EACE;;AAGF;EACE;EACA;EhCpHA;;AgCuHA;EAAgB;;AAChB;EAAe;;AAGb;EhC3HF;;;AgCqIA;EACE;EACA;;;AC1JN;EAEE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EtC+QI,WALI;EsCxQR;EACA;EjCAE;;;AiCMF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;ACrCJ;EAEE;EACA;EvC4RI,2BALI;EuCrRR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EhCpBA;EACA;;;AgCuBF;EACE;EACA;EACA;EvCgQI,WALI;EuCzPR;EAEA;EACA;EnBpBI,YmBqBJ;;AnBjBI;EmBQN;InBPQ;;;AmBkBN;EACE;EACA;EAEA;EACA;;AAGF;EACE;EACA;EACA;EACA,SpCouCgC;EoCnuChC;;AAGF;EAEE;EACA;ElBtDF,kBkBuDuB;EACrB;;AAGF;EAEE;EACA;EACA;EACA;;;AAKF;EACE,apCusCgC;;AoClsC9B;ElC9BF;EACA;;AkCmCE;ElClDF;EACA;;;AkCkEJ;EClGE;EACA;ExC0RI,2BALI;EwCnRR;;;ADmGF;ECtGE;EACA;ExC0RI,2BALI;EwCnRR;;;ACFF;EAEE;EACA;EzCuRI,sBALI;EyChRR;EACA;EACA;EAGA;EACA;EzC+QI,WALI;EyCxQR;EACA;EACA;EACA;EACA;EACA;EpCJE;;AoCSF;EACE;;;AAKJ;EACE;EACA;;;AChCF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;ErCHE;;;AqCQJ;EAEE;;;AAIF;EACE,avC6kB4B;EuC5kB5B;;;AAQF;EACE,evCg+C8B;;AuC79C9B;EACE;EACA;EACA;EACA;EACA;;;AAQF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AC5DF;EACE;IAAK,uBxCmhD2B;;;AwC9gDpC;AAAA;EAGE;E3CkRI,yBALI;E2C3QR;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;E3CsQI,WALI;E2C/PR;EtCRE;;;AsCaJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EvBxBI,YuByBJ;;AvBrBI;EuBYN;IvBXQ;;;;AuBuBR;EtBAE;EsBEA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAGE;EAJJ;IAKM;;;;AC3DR;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EvCXE;;;AuCeJ;EACE;EACA;;AAEA;EAEE;EACA;;;AASJ;EACE;EACA;EACA;;AAGA;EAEE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAQJ;EACE;EACA;EACA;EACA;EAEA;EACA;;AAEA;EvCvDE;EACA;;AuC0DF;EvC7CE;EACA;;AuCgDF;EAEE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAEA;EACE;EACA;;;AAaF;EACE;;AAGE;EvCvDJ;EAZA;;AuCwEI;EvCxEJ;EAYA;;AuCiEI;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AhCtFR;EgC8DA;IACE;;EAGE;IvCvDJ;IAZA;;EuCwEI;IvCxEJ;IAYA;;EuCiEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;;AhCtFR;EgC8DA;IACE;;EAGE;IvCvDJ;IAZA;;EuCwEI;IvCxEJ;IAYA;;EuCiEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;;AhCtFR;EgC8DA;IACE;;EAGE;IvCvDJ;IAZA;;EuCwEI;IvCxEJ;IAYA;;EuCiEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;;AhCtFR;EgC8DA;IACE;;EAGE;IvCvDJ;IAZA;;EuCwEI;IvCxEJ;IAYA;;EuCiEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;;AhCtFR;EgC8DA;IACE;;EAGE;IvCvDJ;IAZA;;EuCwEI;IvCxEJ;IAYA;;EuCiEI;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;;;AAcZ;EvChJI;;AuCmJF;EACE;;AAEA;EACE;;;AAaJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAVF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC5LJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA,O1C+oD2B;E0C9oD3B,Q1C8oD2B;E0C7oD3B;EACA;EACA;EACA;ExCJE;EwCMF;;AAGA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EAEE;EACA;EACA;;;AAQJ;EAHE;;;AASE;EATF;;;ACjDF;EAEE;EACA;EACA;EACA;EACA;E9CyRI,sBALI;E8ClRR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;E9C2QI,WALI;E8CpQR;EACA;EACA;EACA;EACA;EACA;EzCRE;;AyCWF;EACE;;AAGF;EACE;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EzChCE;EACA;;AyCkCF;EACE;EACA;;;AAIJ;EACE;EACA;;;AC9DF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;;AAOF;EACE;EACA;EACA;EAEA;;AAGA;E3B5CI,Y2B6CF;EACA,W5Cy7CgC;;AiBn+C9B;E2BwCJ;I3BvCM;;;A2B2CN;EACE,W5Cu7CgC;;A4Cn7ClC;EACE,W5Co7CgC;;;A4Ch7CpC;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;E1CrFE;E0CyFF;;;AAIF;EAEE;EACA;EACA;EClHA;EACA;EACA;EACA,SDkH0B;ECjH1B;EACA;EACA,kBD+G4D;;AC5G5D;EAAS;;AACT;EAAS,SD2GiF;;;AAK5F;EACE;EACA;EACA;EACA;EACA;EACA;E1CtGE;EACA;;A0CwGF;EACE;EACA;;;AAKJ;EACE;EACA;;;AAKF;EACE;EAGA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;E1C1HE;EACA;;A0C+HF;EACE;;;AnC5GA;EmCkHF;IACE;IACA;;EAIF;IACE;IACA;IACA;;EAGF;IACE;;;AnC/HA;EmCoIF;AAAA;IAEE;;;AnCtIA;EmC2IF;IACE;;;AAUA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;E1C1MJ;;A0C8ME;AAAA;E1C9MF;;A0CmNE;EACE;;;AnC3JJ;EmCyIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;I1C1MJ;;E0C8ME;AAAA;I1C9MF;;E0CmNE;IACE;;;AnC3JJ;EmCyIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;I1C1MJ;;E0C8ME;AAAA;I1C9MF;;E0CmNE;IACE;;;AnC3JJ;EmCyIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;I1C1MJ;;E0C8ME;AAAA;I1C9MF;;E0CmNE;IACE;;;AnC3JJ;EmCyIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;I1C1MJ;;E0C8ME;AAAA;I1C9MF;;E0CmNE;IACE;;;AnC3JJ;EmCyIA;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;I1C1MJ;;E0C8ME;AAAA;I1C9MF;;E0CmNE;IACE;;;AEtOR;EAEE;EACA;EACA;EACA;EACA;EjDwRI,wBALI;EiDjRR;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EClBA,a/C+lB4B;E+C7lB5B;EACA,a/CwmB4B;E+CvmB5B,a/C+mB4B;E+C9mB5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ElDgRI,WALI;EiDhQR;EACA;;AAEA;EAAS;;AAET;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAKN;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;AAkBA;EACE;EACA;EACA;EACA;EACA;E5CjGE;;;A8CnBJ;EAEE;EACA;EnD4RI,wBALI;EmDrRR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EnDmRI,+BALI;EmD5QR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EDzBA,a/C+lB4B;E+C7lB5B;EACA,a/CwmB4B;E+CvmB5B,a/C+mB4B;E+C9mB5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ElDgRI,WALI;EmD1PR;EACA;EACA;EACA;E9ChBE;;A8CoBF;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;AAEE;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;AAGE;EACE;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAEE;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;AAkBA;EACE;EACA;EnD2GI,WALI;EmDpGR;EACA;EACA;E9C5JE;EACA;;A8C8JF;EACE;;;AAIJ;EACE;EACA;;;ACrLF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;ACtBA;EACE;EACA;EACA;;;ADuBJ;EACE;EACA;EACA;EACA;EACA;EACA;EhClBI,YgCmBJ;;AhCfI;EgCQN;IhCPQ;;;;AgCiBR;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AASA;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;;AAGF;AAAA;EAEE;EACA;EhC5DE,YgC6DF;;AhCzDE;EgCqDJ;AAAA;IhCpDM;;;;AgCiER;AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,OjD4gDmC;EiD3gDnC;EACA,OjD1FS;EiD2FT;EACA;EACA;EACA,SjDugDmC;EiB7lD/B,YgCuFJ;;AhCnFI;EgCkEN;AAAA;IhCjEQ;;;AgCqFN;AAAA;AAAA;EAEE,OjDpGO;EiDqGP;EACA;EACA,SjD+/CiC;;;AiD5/CrC;EACE;;;AAGF;EACE;;;AAKF;AAAA;EAEE;EACA,OjDggDmC;EiD//CnC,QjD+/CmC;EiD9/CnC;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACE;;;AAEF;EACE;;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,cjDw8CmC;EiDv8CnC;EACA,ajDs8CmC;;AiDp8CnC;EACE;EACA;EACA,OjDs8CiC;EiDr8CjC,QjDs8CiC;EiDr8CjC;EACA,cjDs8CiC;EiDr8CjC,ajDq8CiC;EiDp8CjC;EACA;EACA,kBjD1KO;EiD2KP;EACA;EAEA;EACA;EACA,SjD67CiC;EiBrmD/B,YgCyKF;;AhCrKE;EgCoJJ;IhCnJM;;;AgCuKN;EACE,SjD07CiC;;;AiDj7CrC;EACE;EACA;EACA,QjDo7CmC;EiDn7CnC;EACA,ajDi7CmC;EiDh7CnC,gBjDg7CmC;EiD/6CnC,OjDrMS;EiDsMT;;;AAMA;AAAA;EAEE,QjDq7CiC;;AiDl7CnC;EACE,kBjDxMO;;AiD2MT;EACE,OjD5MO;;;AiDkMT;AAAA;AAAA;EAEE,QjDq7CiC;;AiDl7CnC;EACE,kBjDxMO;;AiD2MT;EACE,OjD5MO;;;AmDdX;AAAA;EAEE;EACA;EACA;EACA;EAEA;EACA;;;AAIF;EACE;IAAK;;;AAIP;EAEE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;;;AAGF;EAEE;EACA;EACA;;;AASF;EACE;IACE;;EAEF;IACE;IACA;;;AAKJ;EAEE;EACA;EACA;EACA;EACA;EAGA;EACA;;;AAGF;EACE;EACA;;;AAIA;EACE;AAAA;IAEE;;;AC/EN;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;A3C6DE;E2C5CF;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;InC5BA,YmC8BA;;;AnC1BA;EmCYJ;InCXM;;;ARuDJ;E2C5BE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;;EAGF;IAGE;;;A3C5BJ;E2C/BF;IAiEM;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IAEA;;;;A3CnCN;E2C5CF;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;InC5BA,YmC8BA;;;AnC1BA;EmCYJ;InCXM;;;ARuDJ;E2C5BE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;;EAGF;IAGE;;;A3C5BJ;E2C/BF;IAiEM;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IAEA;;;;A3CnCN;E2C5CF;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;InC5BA,YmC8BA;;;AnC1BA;EmCYJ;InCXM;;;ARuDJ;E2C5BE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;;EAGF;IAGE;;;A3C5BJ;E2C/BF;IAiEM;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IAEA;;;;A3CnCN;E2C5CF;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;InC5BA,YmC8BA;;;AnC1BA;EmCYJ;InCXM;;;ARuDJ;E2C5BE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;;EAGF;IAGE;;;A3C5BJ;E2C/BF;IAiEM;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IAEA;;;;A3CnCN;E2C5CF;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;InC5BA,YmC8BA;;;AnC1BA;EmCYJ;InCXM;;;ARuDJ;E2C5BE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;;EAGF;IAGE;;;A3C5BJ;E2C/BF;IAiEM;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IAEA;;;;AA/ER;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EnC5BA,YmC8BA;;AnC1BA;EmCYJ;InCXM;;;AmC2BF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EAGE;;;AA2BR;EPpHE;EACA;EACA;EACA,S7ComCkC;E6CnmClC;EACA;EACA,kB7CUS;;A6CPT;EAAS;;AACT;EAAS,S7C09CyB;;;AoD52CpC;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AChJF;EACE;EACA;EACA;EACA;EACA;EACA,SrDyyCkC;;AqDvyClC;EACE;EACA;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAIJ;EACE;IACE,SrD4wCgC;;;AqDxwCpC;EACE;EACA;EACA;;;AAGF;EACE;IACE;;;AH9CF;EACE;EACA;EACA;;;AIFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;AAFF;EACE;EACA;;;ACHF;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AATN;EACE;EACA;;AAGE;EAGE;EACA;;;AAOR;EACE;EACA;;AAGE;EAEE;EACA;;;AC1BN;EACE;EAEA;;;ACHF;EACE;EACA,KzD6c4B;EyD5c5B;EACA;EACA,uBzD2c4B;EyD1c5B;;AAEA;EACE;EACA,OzDuc0B;EyDtc1B,QzDsc0B;EyDrc1B;ExCIE,YwCHF;;AxCOE;EwCZJ;IxCaM;;;;AwCDJ;EACE;;;ACnBN;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;ACrBJ;EACE;EACA;EACA;EACA;EACA,S3DimCkC;;;A2D9lCpC;EACE;EACA;EACA;EACA;EACA,S3DylCkC;;;A2DjlChC;EACE;EACA;EACA,S3D6kC8B;;;A2D1kChC;EACE;EACA;EACA,S3DukC8B;;;ASxiChC;EkDxCA;IACE;IACA;IACA,S3D6kC8B;;E2D1kChC;IACE;IACA;IACA,S3DukC8B;;;ASxiChC;EkDxCA;IACE;IACA;IACA,S3D6kC8B;;E2D1kChC;IACE;IACA;IACA,S3DukC8B;;;ASxiChC;EkDxCA;IACE;IACA;IACA,S3D6kC8B;;E2D1kChC;IACE;IACA;IACA,S3DukC8B;;;ASxiChC;EkDxCA;IACE;IACA;IACA,S3D6kC8B;;E2D1kChC;IACE;IACA;IACA,S3DukC8B;;;ASxiChC;EkDxCA;IACE;IACA;IACA,S3D6kC8B;;E2D1kChC;IACE;IACA;IACA,S3DukC8B;;;A4DtmCpC;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACRF;AAAA;ECIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;EACE;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA,S/DgcsC;E+D/btC;;;ACRJ;ECAE;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA,SlE2rB4B;;;AmE/nBtB;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAjBJ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASF;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAjBJ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASF;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AArBJ;AAcA;EAOI;EAAA;;;AAmBJ;AA1BA;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAjBJ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASF;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAjBJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AAIJ;EAOI;;;AAKF;EAOI;;;AAnBN;EAOI;;;AAKF;EAOI;;;AAnBN;EAOI;;;AAKF;EAOI;;;AAnBN;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAjBJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AANJ;EACE;;;AAIA;EACE;;;AAIJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAPJ;EAIQ;EAGJ;;;AAjBJ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASF;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;EAAA;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;AAPJ;EAOI;;;A1DVR;E0DGI;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;A1DVR;E0DGI;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;A1DVR;E0DGI;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;A1DVR;E0DGI;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;A1DVR;E0DGI;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;IAAA;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;ACtDZ;ED+CQ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;ACnCZ;ED4BQ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;EAPJ;IAOI;;;AEzEZ;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAgBA;;AAAA;;AAAA;ACmCA;AAAA;AAAA;AAAA;AAAA;EAKE,OtEhDS;;AsEiDT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;;AASF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;;AC3DF;EACE;IACE,uBAbY;;;ACUlB;EACE;IACE;;;AAGJ;EACE;IACE;;EAEF;IACE;IACA;;;AHuDJ;;AAAA;;AAAA;AI5EA;AAAA;AAAA;AAkBA;AAAA;AAAA;AJsEA;;AAAA;;AAAA;AA2BA;;AAAA;;AAAA;AAQA;;AAAA;;AAAA;AK3HA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;ALsEJ;;AAAA;;AAAA","file":"app.css"}
\ No newline at end of file
diff --git a/src/assets/css/scrollStyles.css b/src/assets/css/scrollStyles.css
new file mode 100644
index 0000000000..71248ac1b6
--- /dev/null
+++ b/src/assets/css/scrollStyles.css
@@ -0,0 +1,18 @@
+.customScroll {
+  overflow-y: scroll;
+}
+.customScroll::-webkit-scrollbar {
+  width: 5px;
+}
+.customScroll::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+.customScroll::-webkit-scrollbar-thumb {
+  background: var(--bs-gray-500);
+  border-radius: 6px;
+}
+.customScroll::-webkit-scrollbar-thumb:hover {
+  background: var(--bs-gray-600);
+  border-radius: 6px;
+}
diff --git a/src/assets/images/blank.png b/src/assets/images/blank.png
new file mode 100644
index 0000000000..ae6f25f049
Binary files /dev/null and b/src/assets/images/blank.png differ
diff --git a/src/assets/images/bronze.png b/src/assets/images/bronze.png
new file mode 100644
index 0000000000..e5b748a572
Binary files /dev/null and b/src/assets/images/bronze.png differ
diff --git a/src/assets/images/defaultImg.png b/src/assets/images/defaultImg.png
new file mode 100644
index 0000000000..310a79c130
Binary files /dev/null and b/src/assets/images/defaultImg.png differ
diff --git a/src/assets/images/gold.png b/src/assets/images/gold.png
new file mode 100644
index 0000000000..cdbb0efdc4
Binary files /dev/null and b/src/assets/images/gold.png differ
diff --git a/src/assets/images/palisadoes_logo.png b/src/assets/images/palisadoes_logo.png
new file mode 100644
index 0000000000..2e91c02233
Binary files /dev/null and b/src/assets/images/palisadoes_logo.png differ
diff --git a/src/assets/images/silver.png b/src/assets/images/silver.png
new file mode 100644
index 0000000000..b13d604de5
Binary files /dev/null and b/src/assets/images/silver.png differ
diff --git a/src/assets/images/talawa-logo-600x600.png b/src/assets/images/talawa-logo-600x600.png
new file mode 100644
index 0000000000..9498132600
Binary files /dev/null and b/src/assets/images/talawa-logo-600x600.png differ
diff --git a/src/assets/talawa-logo-dark-200x200.png b/src/assets/images/talawa-logo-dark-200x200.png
similarity index 100%
rename from src/assets/talawa-logo-dark-200x200.png
rename to src/assets/images/talawa-logo-dark-200x200.png
diff --git a/src/assets/images/talawa-logo-lite-200x200.png b/src/assets/images/talawa-logo-lite-200x200.png
new file mode 100644
index 0000000000..a8d0a8fa7b
Binary files /dev/null and b/src/assets/images/talawa-logo-lite-200x200.png differ
diff --git a/src/App.css b/src/assets/scss/_colors.scss
similarity index 100%
rename from src/App.css
rename to src/assets/scss/_colors.scss
diff --git a/src/assets/scss/_general.scss b/src/assets/scss/_general.scss
new file mode 100644
index 0000000000..f2309504ce
--- /dev/null
+++ b/src/assets/scss/_general.scss
@@ -0,0 +1,63 @@
+:root {
+  --bs-body-font-family: Arial, Helvetica, sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  overflow-x: hidden;
+}
+
+body {
+  background-color: var(--bs-body-bg);
+}
+
+#root {
+  min-height: 100vh;
+  background-color: #f2f7ff;
+}
+
+input[type='checkbox'] {
+  transform: scale(1.5);
+}
+.form-switch {
+  padding-left: 3rem;
+}
+input[type='file']::file-selector-button {
+  background: var(--bs-gray-400);
+}
+
+.shimmer {
+  animation-duration: 2.2s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: shimmer;
+  animation-timing-function: linear;
+  background: var(--bs-gray-200);
+  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
+  background-size: 1200px 100%;
+}
+
+@-webkit-keyframes shimmer {
+  0% {
+    background-position: -100% 0;
+  }
+
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1200px 0;
+  }
+
+  100% {
+    background-position: 1200px 0;
+  }
+}
diff --git a/src/assets/scss/_talawa.scss b/src/assets/scss/_talawa.scss
new file mode 100644
index 0000000000..2537c2c682
--- /dev/null
+++ b/src/assets/scss/_talawa.scss
@@ -0,0 +1,136 @@
+/*
+    TALAWA SCSS
+    -----------
+    This file is used to import all partial scss files in the project.
+    It is used to compile the final CSS file to the CSS folder as main.css .
+
+=========  Table of Contents  =========
+1. Components
+2. Content
+3. Forms
+4. Utilities
+5. General
+6. Colors
+
+*/
+
+/*
+
+    1. COMPONENTS
+
+*/
+
+//  1.1. Accordion
+@import './components/accordion';
+
+//  1.2. Alert
+@import './components/alert';
+
+//  1.3. Badge
+@import './components/badge';
+
+//  1.4. Breadcrumb
+@import './components/breadcrumb';
+
+//  1.5. Button
+@import './components/buttons';
+
+//  1.6. Card
+@import './components/card';
+
+//  1.7. Carousel
+@import './components/carousel';
+
+//  1.8. Close
+@import './components/close';
+
+//  1.9. Dropdown
+@import './components/dropdown';
+
+//  1.10. List Group
+@import './components/list-group';
+
+//  1.11. Modal
+@import './components/modal';
+
+//  1.12. Navbar
+@import './components/navbar';
+
+//  1.13. Nav and Nav Tabs
+@import './components/nav';
+
+//  1.14 Offcanvas
+@import './components/offcanvas';
+
+//  1.15 Pagination
+@import './components/pagination';
+
+//  1.16 Placeholder
+@import './components/placeholder';
+
+//  1.17 Progress
+@import './components/progress';
+
+//  1.18 Spinners
+@import './components/spinners';
+
+/*
+
+    2. CONTENT
+
+*/
+
+//  2.1. Table
+@import './content/table';
+
+//  2.2. Typography
+@import './content/typography';
+
+/*
+
+    3. FORMS
+
+*/
+
+//  3.1. Checkbox & Radio
+@import './forms/check-radios';
+
+//  3.2. Floating Labels
+@import './forms/floating-label';
+
+//  3.3. Form Controls
+@import './forms/form-control';
+
+//  3.4. Input Group
+@import './forms/input-group';
+
+//  3.5. Range
+@import './forms/range';
+
+//  3.6. Select
+@import './forms/select';
+
+//  3.7. Validation
+@import './forms/validation';
+
+/*
+
+    4. UTILITIES
+
+*/
+
+@import './utilities';
+
+/*
+
+    5. General
+
+*/
+@import './general';
+
+/*
+
+    6. COLORS
+
+*/
+@import './colors';
diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
new file mode 100644
index 0000000000..2871cb9df2
--- /dev/null
+++ b/src/assets/scss/_variables.scss
@@ -0,0 +1,30 @@
+// Colors
+
+$primary: #31bb6b;
+$secondary: #707070;
+$success: #31bb6b;
+$warning: #febc59;
+
+$blue: #0d6efd;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #d63384;
+$red: #dc3545;
+$orange: #fd7e14;
+$yellow: #ffc107;
+$green: #198754;
+$teal: #20c997;
+$cyan: #0dcaf0;
+$placeholder-bg: #f2f2f2;
+// Colors
+
+// Links
+$link-color: $blue !default;
+$link-decoration: none !default;
+
+// Inputs and buttons
+$input-bg: $placeholder-bg;
+$input-border-width: 0;
+
+$input-btn-padding-y: 0.7rem;
+$input-btn-padding-x: 1rem;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
new file mode 100644
index 0000000000..8685a742db
--- /dev/null
+++ b/src/assets/scss/app.scss
@@ -0,0 +1,14 @@
+// Importing Bootstrap SCSS Functions and Mixins
+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/mixins';
+
+// Importing Our Bootstrap SCSS Variables
+@import './variables';
+
+// Importing Bootstrap Variables and SCSS
+@import '../../../node_modules/bootstrap/scss/variables';
+@import '../../../node_modules/bootstrap/scss/variables-dark';
+@import '../../../node_modules/bootstrap/scss/bootstrap.scss';
+
+// Importing Our Bootstrap SCSS Overrides
+@import './talawa';
diff --git a/src/assets/scss/components/_accordion.scss b/src/assets/scss/components/_accordion.scss
new file mode 100644
index 0000000000..64eb323b55
--- /dev/null
+++ b/src/assets/scss/components/_accordion.scss
@@ -0,0 +1,36 @@
+$accordion-padding-y: 1.25rem;
+$accordion-padding-x: 1.5rem;
+$accordion-color: var(--#{$prefix}body-color);
+$accordion-bg: var(--#{$prefix}body-bg);
+$accordion-border-width: var(--#{$prefix}border-width);
+$accordion-border-color: var(--#{$prefix}border-color);
+$accordion-border-radius: var(--#{$prefix}border-radius);
+$accordion-inner-border-radius: subtract(
+  $accordion-border-radius,
+  $accordion-border-width
+);
+
+$accordion-body-padding-y: $accordion-padding-y;
+$accordion-body-padding-x: $accordion-padding-x;
+
+$accordion-button-padding-y: $accordion-padding-y;
+$accordion-button-padding-x: $accordion-padding-x;
+$accordion-button-color: var(--#{$prefix}body-color);
+$accordion-button-bg: var(--#{$prefix}accordion-bg);
+$accordion-transition:
+  $btn-transition,
+  border-radius 0.15s ease;
+$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle);
+$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis);
+
+$accordion-button-focus-border-color: $input-focus-border-color;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow;
+
+$accordion-icon-width: 1.25rem;
+$accordion-icon-color: $body-color;
+$accordion-icon-active-color: $primary-text-emphasis;
+$accordion-icon-transition: transform 0.2s ease-in-out;
+$accordion-icon-transform: rotate(-180deg);
+
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
diff --git a/src/assets/scss/components/_alert.scss b/src/assets/scss/components/_alert.scss
new file mode 100644
index 0000000000..64f29bf3c0
--- /dev/null
+++ b/src/assets/scss/components/_alert.scss
@@ -0,0 +1,10 @@
+$alert-padding-y: $spacer;
+$alert-padding-x: $spacer;
+$alert-margin-bottom: 1rem;
+$alert-border-radius: var(--#{$prefix}border-radius);
+$alert-link-font-weight: $font-weight-bold;
+$alert-border-width: var(--#{$prefix}border-width);
+$alert-bg-scale: -80%;
+$alert-border-scale: -70%;
+$alert-color-scale: 40%;
+$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
diff --git a/src/assets/scss/components/_badge.scss b/src/assets/scss/components/_badge.scss
new file mode 100644
index 0000000000..9b0c6a8a3a
--- /dev/null
+++ b/src/assets/scss/components/_badge.scss
@@ -0,0 +1,6 @@
+$badge-font-size: 0.75em;
+$badge-font-weight: $font-weight-bold;
+$badge-color: $white;
+$badge-padding-y: 0.35em;
+$badge-padding-x: 0.65em;
+$badge-border-radius: var(--#{$prefix}border-radius);
diff --git a/src/assets/scss/components/_breadcrumb.scss b/src/assets/scss/components/_breadcrumb.scss
new file mode 100644
index 0000000000..73fb6bd692
--- /dev/null
+++ b/src/assets/scss/components/_breadcrumb.scss
@@ -0,0 +1,11 @@
+$breadcrumb-font-size: null;
+$breadcrumb-padding-y: 0;
+$breadcrumb-padding-x: 0;
+$breadcrumb-item-padding-x: 0.5rem;
+$breadcrumb-margin-bottom: 1rem;
+$breadcrumb-bg: null;
+$breadcrumb-divider-color: var(--#{$prefix}secondary-color);
+$breadcrumb-active-color: var(--#{$prefix}secondary-color);
+$breadcrumb-divider: quote('/');
+$breadcrumb-divider-flipped: $breadcrumb-divider;
+$breadcrumb-border-radius: null;
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
new file mode 100644
index 0000000000..c0400fbeae
--- /dev/null
+++ b/src/assets/scss/components/_buttons.scss
@@ -0,0 +1,73 @@
+$btn-color: $white;
+$btn-padding-y: $input-btn-padding-y;
+$btn-padding-x: $input-btn-padding-x;
+$btn-font-family: $input-btn-font-family;
+$btn-font-size: $input-btn-font-size;
+$btn-line-height: $input-btn-line-height;
+$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm;
+$btn-padding-x-sm: $input-btn-padding-x-sm;
+$btn-font-size-sm: $input-btn-font-size-sm;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg;
+$btn-padding-x-lg: $input-btn-padding-x-lg;
+$btn-font-size-lg: $input-btn-font-size-lg;
+
+$btn-border-width: $input-btn-border-width;
+
+$btn-font-weight: $font-weight-normal;
+$btn-box-shadow:
+  inset 0 1px 0 rgba($white, 0.15),
+  0 1px 1px rgba($black, 0.075);
+$btn-focus-width: $input-btn-focus-width;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow;
+$btn-disabled-opacity: 0.65;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);
+
+$btn-link-color: var(--#{$prefix}link-color);
+$btn-link-hover-color: var(--#{$prefix}link-hover-color);
+$btn-link-disabled-color: $gray-600;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: var(--#{$prefix}border-radius);
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm);
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg);
+
+$btn-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out;
+
+$btn-hover-bg-shade-amount: 15%;
+$btn-hover-bg-tint-amount: 15%;
+$btn-hover-border-shade-amount: 20%;
+$btn-hover-border-tint-amount: 10%;
+$btn-active-bg-shade-amount: 20%;
+$btn-active-bg-tint-amount: 20%;
+$btn-active-border-shade-amount: 25%;
+$btn-active-border-tint-amount: 10%;
+
+.btn-primary,
+.btn-secondary,
+.btn-success,
+.btn-warning,
+.btn-info {
+  color: $white;
+  &:hover,
+  &:active {
+    color: $white !important;
+  }
+}
+
+.btn-outline-primary,
+.btn-outline-secondary,
+.btn-outline-success,
+.btn-outline-warning,
+.btn-outline-info {
+  &:hover,
+  &:active {
+    color: $white !important;
+  }
+}
diff --git a/src/assets/scss/components/_card.scss b/src/assets/scss/components/_card.scss
new file mode 100644
index 0000000000..5fa5abb4ee
--- /dev/null
+++ b/src/assets/scss/components/_card.scss
@@ -0,0 +1,19 @@
+$card-spacer-y: $spacer;
+$card-spacer-x: $spacer;
+$card-title-spacer-y: $spacer * 0.5;
+$card-title-color: null;
+$card-subtitle-color: null;
+$card-border-width: var(--#{$prefix}border-width);
+$card-border-color: var(--#{$prefix}border-color-translucent);
+$card-border-radius: var(--#{$prefix}border-radius);
+$card-box-shadow: null;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
+$card-cap-padding-y: $card-spacer-y * 0.5;
+$card-cap-padding-x: $card-spacer-x;
+$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), 0.03);
+$card-cap-color: null;
+$card-height: null;
+$card-color: null;
+$card-bg: var(--#{$prefix}body-bg);
+$card-img-overlay-padding: $spacer;
+$card-group-margin: $grid-gutter-width * 0.5;
diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss
new file mode 100644
index 0000000000..5f7d77e4c6
--- /dev/null
+++ b/src/assets/scss/components/_carousel.scss
@@ -0,0 +1,27 @@
+$carousel-control-color: $white;
+$carousel-control-width: 15%;
+$carousel-control-opacity: 0.5;
+$carousel-control-hover-opacity: 0.9;
+$carousel-control-transition: opacity 0.15s ease;
+
+$carousel-indicator-width: 30px;
+$carousel-indicator-height: 3px;
+$carousel-indicator-hit-area-height: 10px;
+$carousel-indicator-spacer: 3px;
+$carousel-indicator-opacity: 0.5;
+$carousel-indicator-active-bg: $white;
+$carousel-indicator-active-opacity: 1;
+$carousel-indicator-transition: opacity 0.6s ease;
+
+$carousel-caption-width: 70%;
+$carousel-caption-color: $white;
+$carousel-caption-padding-y: 1.25rem;
+$carousel-caption-spacer: 1.25rem;
+
+$carousel-control-icon-width: 2rem;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
+
+$carousel-transition-duration: 0.6s;
+$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
diff --git a/src/assets/scss/components/_close.scss b/src/assets/scss/components/_close.scss
new file mode 100644
index 0000000000..2ae25d5353
--- /dev/null
+++ b/src/assets/scss/components/_close.scss
@@ -0,0 +1,12 @@
+$btn-close-width: 1em;
+$btn-close-height: $btn-close-width;
+$btn-close-padding-x: 0.25em;
+$btn-close-padding-y: $btn-close-padding-x;
+$btn-close-color: $black;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
+$btn-close-focus-shadow: $focus-ring-box-shadow;
+$btn-close-opacity: 0.5;
+$btn-close-hover-opacity: 0.75;
+$btn-close-focus-opacity: 1;
+$btn-close-disabled-opacity: 0.25;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
new file mode 100644
index 0000000000..1e1f1fa040
--- /dev/null
+++ b/src/assets/scss/components/_dropdown.scss
@@ -0,0 +1,35 @@
+$dropdown-min-width: 10rem;
+$dropdown-padding-x: 0;
+$dropdown-padding-y: 0.5rem;
+$dropdown-spacer: 0.125rem;
+$dropdown-font-size: $font-size-base;
+$dropdown-color: var(--#{$prefix}body-color);
+$dropdown-bg: var(--#{$prefix}body-bg);
+$dropdown-border-color: var(--#{$prefix}border-color-translucent);
+$dropdown-border-radius: var(--#{$prefix}border-radius);
+$dropdown-border-width: var(--#{$prefix}border-width);
+$dropdown-inner-border-radius: calc(
+  #{$dropdown-border-radius} - #{$dropdown-border-width}
+); // stylelint-disable-line function-disallowed-list
+$dropdown-divider-bg: $dropdown-border-color;
+$dropdown-divider-margin-y: $spacer * 0.5;
+$dropdown-box-shadow: $box-shadow;
+
+$dropdown-link-color: var(--#{$prefix}body-color);
+$dropdown-link-hover-color: $dropdown-link-color;
+$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg);
+
+$dropdown-link-active-color: $component-active-color;
+$dropdown-link-active-bg: $component-active-bg;
+
+$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color);
+
+$dropdown-item-padding-y: $spacer * 0.25;
+$dropdown-item-padding-x: $spacer;
+
+$dropdown-header-color: $gray-600;
+$dropdown-header-padding-x: $dropdown-item-padding-x;
+$dropdown-header-padding-y: $dropdown-padding-y;
+// fusv-disable
+$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
+// fusv-enable
diff --git a/src/assets/scss/components/_list-group.scss b/src/assets/scss/components/_list-group.scss
new file mode 100644
index 0000000000..2579f2e823
--- /dev/null
+++ b/src/assets/scss/components/_list-group.scss
@@ -0,0 +1,26 @@
+$list-group-color: var(--#{$prefix}body-color);
+$list-group-bg: var(--#{$prefix}body-bg);
+$list-group-border-color: var(--#{$prefix}border-color);
+$list-group-border-width: var(--#{$prefix}border-width);
+$list-group-border-radius: var(--#{$prefix}border-radius);
+
+$list-group-item-padding-y: $spacer * 0.5;
+$list-group-item-padding-x: $spacer;
+// fusv-disable
+$list-group-item-bg-scale: -80%; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40%; // Deprecated in v5.3.0
+// fusv-enable
+
+$list-group-hover-bg: var(--#{$prefix}tertiary-bg);
+$list-group-active-color: $component-active-color;
+$list-group-active-bg: $component-active-bg;
+$list-group-active-border-color: $list-group-active-bg;
+
+$list-group-disabled-color: var(--#{$prefix}secondary-color);
+$list-group-disabled-bg: $list-group-bg;
+
+$list-group-action-color: var(--#{$prefix}secondary-color);
+$list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+
+$list-group-action-active-color: var(--#{$prefix}body-color);
+$list-group-action-active-bg: var(--#{$prefix}secondary-bg);
diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
new file mode 100644
index 0000000000..b491a19f1c
--- /dev/null
+++ b/src/assets/scss/components/_modal.scss
@@ -0,0 +1,43 @@
+$modal-inner-padding: $spacer;
+
+$modal-footer-margin-between: 0.5rem;
+
+$modal-dialog-margin: 0.5rem;
+$modal-dialog-margin-y-sm-up: 1.75rem;
+
+$modal-title-line-height: $line-height-base;
+
+$modal-content-color: null;
+$modal-content-bg: var(--#{$prefix}body-bg);
+$modal-content-border-color: var(--#{$prefix}border-color-translucent);
+$modal-content-border-width: var(--#{$prefix}border-width);
+$modal-content-border-radius: var(--#{$prefix}border-radius-lg);
+$modal-content-inner-border-radius: subtract(
+  $modal-content-border-radius,
+  $modal-content-border-width
+);
+$modal-content-box-shadow-xs: $box-shadow-sm;
+$modal-content-box-shadow-sm-up: $box-shadow;
+
+$modal-backdrop-bg: $black;
+$modal-backdrop-opacity: 0.5;
+
+$modal-header-border-color: var(--#{$prefix}border-color);
+$modal-header-border-width: 0; // We dont want border here
+$modal-header-padding-y: $modal-inner-padding * 0.8;
+$modal-header-padding-x: $modal-inner-padding;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
+
+$modal-footer-bg: null;
+$modal-footer-border-color: $modal-header-border-color;
+$modal-footer-border-width: 0; // We don't want border here
+
+$modal-sm: 300px;
+$modal-md: 500px;
+$modal-lg: 800px;
+$modal-xl: 1140px;
+
+$modal-fade-transform: translate(0, -50px);
+$modal-show-transform: none;
+$modal-transition: transform 0.3s ease-out;
+$modal-scale-transform: scale(1.02);
diff --git a/src/assets/scss/components/_nav.scss b/src/assets/scss/components/_nav.scss
new file mode 100644
index 0000000000..84aeab343c
--- /dev/null
+++ b/src/assets/scss/components/_nav.scss
@@ -0,0 +1,30 @@
+$nav-link-padding-y: 0.5rem;
+$nav-link-padding-x: 1rem;
+$nav-link-font-size: null;
+$nav-link-font-weight: null;
+$nav-link-color: var(--#{$prefix}link-color);
+$nav-link-hover-color: var(--#{$prefix}link-hover-color);
+$nav-link-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out;
+$nav-link-disabled-color: var(--#{$prefix}secondary-color);
+$nav-link-focus-box-shadow: $focus-ring-box-shadow;
+
+$nav-tabs-border-color: var(--#{$prefix}border-color);
+$nav-tabs-border-width: var(--#{$prefix}border-width);
+$nav-tabs-border-radius: var(--#{$prefix}border-radius);
+$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg)
+  var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
+$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color);
+$nav-tabs-link-active-bg: var(--#{$prefix}body-bg);
+$nav-tabs-link-active-border-color: var(--#{$prefix}border-color)
+  var(--#{$prefix}border-color) $nav-tabs-link-active-bg;
+
+$nav-pills-border-radius: var(--#{$prefix}border-radius);
+$nav-pills-link-active-color: $component-active-color;
+$nav-pills-link-active-bg: $component-active-bg;
+
+$nav-underline-gap: 1rem;
+$nav-underline-border-width: 0.125rem;
+$nav-underline-link-active-color: var(--#{$prefix}emphasis-color);
diff --git a/src/assets/scss/components/_navbar.scss b/src/assets/scss/components/_navbar.scss
new file mode 100644
index 0000000000..aaf27bc8b2
--- /dev/null
+++ b/src/assets/scss/components/_navbar.scss
@@ -0,0 +1,31 @@
+$navbar-padding-y: $spacer * 0.5;
+$navbar-padding-x: null;
+
+$navbar-nav-link-padding-x: 0.5rem;
+
+$navbar-brand-font-size: $font-size-lg;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5;
+$navbar-brand-margin-end: 1rem;
+
+$navbar-toggler-padding-y: 0.25rem;
+$navbar-toggler-padding-x: 0.75rem;
+$navbar-toggler-font-size: $font-size-lg;
+$navbar-toggler-border-radius: $btn-border-radius;
+$navbar-toggler-focus-width: $btn-focus-width;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out;
+
+$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.65);
+$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.8);
+$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1);
+$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.3);
+$navbar-light-icon-color: rgba($body-color, 0.75);
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-light-toggler-border-color: rgba(
+  var(--#{$prefix}emphasis-color-rgb),
+  0.15
+);
+$navbar-light-brand-color: $navbar-light-active-color;
+$navbar-light-brand-hover-color: $navbar-light-active-color;
diff --git a/src/assets/scss/components/_offcanvas.scss b/src/assets/scss/components/_offcanvas.scss
new file mode 100644
index 0000000000..3226f970f4
--- /dev/null
+++ b/src/assets/scss/components/_offcanvas.scss
@@ -0,0 +1,13 @@
+$offcanvas-padding-y: $modal-inner-padding;
+$offcanvas-padding-x: $modal-inner-padding;
+$offcanvas-horizontal-width: 400px;
+$offcanvas-vertical-height: 30vh;
+$offcanvas-transition-duration: 0.3s;
+$offcanvas-border-color: $modal-content-border-color;
+$offcanvas-border-width: $modal-content-border-width;
+$offcanvas-title-line-height: $modal-title-line-height;
+$offcanvas-bg-color: var(--#{$prefix}body-bg);
+$offcanvas-color: var(--#{$prefix}body-color);
+$offcanvas-box-shadow: $modal-content-box-shadow-xs;
+$offcanvas-backdrop-bg: $modal-backdrop-bg;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity;
diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss
new file mode 100644
index 0000000000..830c140492
--- /dev/null
+++ b/src/assets/scss/components/_pagination.scss
@@ -0,0 +1,44 @@
+$pagination-padding-y: 0.375rem;
+$pagination-padding-x: 0.75rem;
+$pagination-padding-y-sm: 0.25rem;
+$pagination-padding-x-sm: 0.5rem;
+$pagination-padding-y-lg: 0.75rem;
+$pagination-padding-x-lg: 1.5rem;
+
+$pagination-font-size: $font-size-base;
+
+$pagination-color: var(--#{$prefix}link-color);
+$pagination-bg: var(--#{$prefix}body-bg);
+$pagination-border-radius: var(--#{$prefix}border-radius);
+$pagination-border-width: var(--#{$prefix}border-width);
+$pagination-margin-start: calc(
+  #{$pagination-border-width} * -1
+); // stylelint-disable-line function-disallowed-list
+$pagination-border-color: var(--#{$prefix}border-color);
+
+$pagination-focus-color: var(--#{$prefix}link-hover-color);
+$pagination-focus-bg: var(--#{$prefix}secondary-bg);
+$pagination-focus-box-shadow: $focus-ring-box-shadow;
+$pagination-focus-outline: 0;
+
+$pagination-hover-color: var(--#{$prefix}link-hover-color);
+$pagination-hover-bg: var(--#{$prefix}tertiary-bg);
+$pagination-hover-border-color: var(
+  --#{$prefix}border-color
+); // Todo in v6: remove this?
+
+$pagination-active-color: $component-active-color;
+$pagination-active-bg: $component-active-bg;
+$pagination-active-border-color: $component-active-bg;
+
+$pagination-disabled-color: var(--#{$prefix}secondary-color);
+$pagination-disabled-bg: var(--#{$prefix}secondary-bg);
+$pagination-disabled-border-color: var(--#{$prefix}border-color);
+
+$pagination-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out;
+
+$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm);
+$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg);
diff --git a/src/assets/scss/components/_placeholder.scss b/src/assets/scss/components/_placeholder.scss
new file mode 100644
index 0000000000..8e7b77d0a4
--- /dev/null
+++ b/src/assets/scss/components/_placeholder.scss
@@ -0,0 +1,2 @@
+$placeholder-opacity-max: 0.5;
+$placeholder-opacity-min: 0.2;
diff --git a/src/assets/scss/components/_progress.scss b/src/assets/scss/components/_progress.scss
new file mode 100644
index 0000000000..a40fa4676e
--- /dev/null
+++ b/src/assets/scss/components/_progress.scss
@@ -0,0 +1,17 @@
+$progress-height: 1rem;
+$progress-font-size: $font-size-base * 0.75;
+$progress-bg: var(--#{$prefix}secondary-bg);
+$progress-border-radius: var(--#{$prefix}border-radius);
+$progress-box-shadow: var(--#{$prefix}box-shadow-inset);
+$progress-bar-color: $white;
+$progress-bar-bg: $primary;
+$progress-bar-animation-timing: 1s linear infinite;
+$progress-bar-transition: width 0.6s ease;
+
+@if $enable-transitions {
+  @keyframes progress-bar-stripes {
+    0% {
+      background-position-x: $progress-height;
+    }
+  }
+}
diff --git a/src/assets/scss/components/_spinners.scss b/src/assets/scss/components/_spinners.scss
new file mode 100644
index 0000000000..08f4c51c90
--- /dev/null
+++ b/src/assets/scss/components/_spinners.scss
@@ -0,0 +1,24 @@
+$spinner-width: 2rem;
+$spinner-height: $spinner-width;
+$spinner-vertical-align: -0.125em;
+$spinner-border-width: 0.25em;
+$spinner-animation-speed: 0.75s;
+
+$spinner-width-sm: 1rem;
+$spinner-height-sm: $spinner-width-sm;
+$spinner-border-width-sm: 0.2em;
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) #{'/* rtl:ignore */'};
+  }
+}
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
diff --git a/src/assets/scss/content/_table.scss b/src/assets/scss/content/_table.scss
new file mode 100644
index 0000000000..f5c9c608fb
--- /dev/null
+++ b/src/assets/scss/content/_table.scss
@@ -0,0 +1,37 @@
+$table-cell-padding-y: 0.5rem;
+$table-cell-padding-x: 0.5rem;
+$table-cell-padding-y-sm: 0.25rem;
+$table-cell-padding-x-sm: 0.25rem;
+
+$table-cell-vertical-align: top;
+
+$table-color: var(--#{$prefix}body-color);
+$table-bg: var(--#{$prefix}body-bg);
+$table-accent-bg: transparent;
+
+$table-th-font-weight: null;
+
+$table-striped-color: $table-color;
+$table-striped-bg-factor: 0.05;
+$table-striped-bg: rgba($black, $table-striped-bg-factor);
+
+$table-active-color: $table-color;
+$table-active-bg-factor: 0.1;
+$table-active-bg: rgba($black, $table-active-bg-factor);
+
+$table-hover-color: $table-color;
+$table-hover-bg-factor: 0.075;
+$table-hover-bg: rgba($black, $table-hover-bg-factor);
+
+$table-border-factor: 0.1;
+$table-border-width: var(--#{$prefix}border-width);
+$table-border-color: var(--#{$prefix}border-color);
+
+$table-striped-order: odd;
+$table-striped-columns-order: even;
+
+$table-group-separator-color: currentcolor;
+
+$table-caption-color: var(--#{$prefix}secondary-color);
+
+$table-bg-scale: -80%;
diff --git a/src/assets/scss/content/_typography.scss b/src/assets/scss/content/_typography.scss
new file mode 100644
index 0000000000..6336f8554e
--- /dev/null
+++ b/src/assets/scss/content/_typography.scss
@@ -0,0 +1,69 @@
+/*
+    DISPLAY SASS VARIABLES
+*/
+
+$display-font-sizes: (
+  1: 5rem,
+  2: 4.5rem,
+  3: 4rem,
+  4: 3.5rem,
+  5: 3rem,
+  6: 2.5rem,
+);
+
+$display-font-family: null;
+$display-font-style: null;
+$display-font-weight: 300;
+$display-line-height: $headings-line-height;
+
+/*
+    DISPLAY SASS VARIABLES
+*/
+
+$lead-font-size: $font-size-base * 1.25;
+$lead-font-weight: 300;
+
+$small-font-size: 0.875em;
+
+$sub-sup-font-size: 0.75em;
+
+// fusv-disable
+$text-muted: var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
+// fusv-enable
+
+$headings-margin-bottom: $spacer * 0.5;
+$headings-font-family: null;
+$headings-font-style: null;
+$headings-font-weight: 500;
+$headings-line-height: 1.2;
+$headings-color: inherit;
+
+$initialism-font-size: $small-font-size;
+
+$blockquote-margin-y: $spacer;
+$blockquote-font-size: $font-size-base * 1.25;
+$blockquote-footer-color: $gray-600;
+$blockquote-footer-font-size: $small-font-size;
+
+$hr-margin-y: $spacer;
+$hr-color: inherit;
+
+// fusv-disable
+$hr-bg-color: null; // Deprecated in v5.2.0
+$hr-height: null; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color: null; // Allows for inherited colors
+$hr-border-width: var(--#{$prefix}border-width);
+$hr-opacity: 0.25;
+
+$legend-margin-bottom: 0.5rem;
+$legend-font-size: 1.5rem;
+$legend-font-weight: null;
+
+$dt-font-weight: $font-weight-bold;
+
+$list-inline-padding: 0.5rem;
+
+$mark-padding: 0.1875em;
+$mark-bg: $yellow-100;
diff --git a/src/assets/scss/forms/_check-radios.scss b/src/assets/scss/forms/_check-radios.scss
new file mode 100644
index 0000000000..1ed4d32fd0
--- /dev/null
+++ b/src/assets/scss/forms/_check-radios.scss
@@ -0,0 +1,34 @@
+$form-check-input-width: 1em;
+$form-check-min-height: $font-size-base * $line-height-base;
+$form-check-padding-start: $form-check-input-width + 0.5em;
+$form-check-margin-bottom: 0.125rem;
+$form-check-label-color: null;
+$form-check-label-cursor: null;
+$form-check-transition: null;
+
+$form-check-input-active-filter: brightness(90%);
+
+$form-check-input-bg: $input-bg;
+$form-check-input-border: var(--#{$prefix}border-width) solid
+  var(--#{$prefix}border-color);
+$form-check-input-border-radius: 0.25em;
+$form-check-radio-border-radius: 50%;
+$form-check-input-focus-border: $input-focus-border-color;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow;
+
+$form-check-input-checked-color: $component-active-color;
+$form-check-input-checked-bg-color: $component-active-bg;
+$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
+
+$form-check-input-indeterminate-color: $component-active-color;
+$form-check-input-indeterminate-bg-color: $component-active-bg;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+
+$form-check-input-disabled-opacity: 0.5;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity;
+
+$form-check-inline-margin-end: 1rem;
diff --git a/src/assets/scss/forms/_floating-label.scss b/src/assets/scss/forms/_floating-label.scss
new file mode 100644
index 0000000000..8ab47c4a25
--- /dev/null
+++ b/src/assets/scss/forms/_floating-label.scss
@@ -0,0 +1,14 @@
+$form-floating-height: add(3.5rem, $input-height-border);
+$form-floating-line-height: 1.25;
+$form-floating-padding-x: $input-padding-x;
+$form-floating-padding-y: 1rem;
+$form-floating-input-padding-t: 1.625rem;
+$form-floating-input-padding-b: 0.625rem;
+$form-floating-label-height: 1.5em;
+$form-floating-label-opacity: 0.65;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem)
+  translateX(0.15rem);
+$form-floating-label-disabled-color: $gray-600;
+$form-floating-transition:
+  opacity 0.1s ease-in-out,
+  transform 0.1s ease-in-out;
diff --git a/src/assets/scss/forms/_form-control.scss b/src/assets/scss/forms/_form-control.scss
new file mode 100644
index 0000000000..230b3ec76b
--- /dev/null
+++ b/src/assets/scss/forms/_form-control.scss
@@ -0,0 +1,108 @@
+$input-btn-padding-y: 0.375rem;
+$input-btn-padding-x: 0.75rem;
+$input-btn-font-family: null;
+$input-btn-font-size: $font-size-base;
+$input-btn-line-height: $line-height-base;
+
+$input-btn-focus-width: $focus-ring-width;
+$input-btn-focus-color-opacity: $focus-ring-opacity;
+$input-btn-focus-color: $focus-ring-color;
+$input-btn-focus-blur: $focus-ring-blur;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow;
+
+$input-btn-padding-y-sm: 0.25rem;
+$input-btn-padding-x-sm: 0.5rem;
+$input-btn-font-size-sm: $font-size-sm;
+
+$input-btn-padding-y-lg: 0.5rem;
+$input-btn-padding-x-lg: 1rem;
+$input-btn-font-size-lg: $font-size-lg;
+
+$input-btn-border-width: var(--#{$prefix}border-width);
+
+$input-padding-y: $input-btn-padding-y;
+$input-padding-x: $input-btn-padding-x;
+$input-font-family: $input-btn-font-family;
+$input-font-size: $input-btn-font-size;
+$input-font-weight: $font-weight-base;
+$input-line-height: $input-btn-line-height;
+
+$input-padding-y-sm: $input-btn-padding-y-sm;
+$input-padding-x-sm: $input-btn-padding-x-sm;
+$input-font-size-sm: $input-btn-font-size-sm;
+
+$input-padding-y-lg: $input-btn-padding-y-lg;
+$input-padding-x-lg: $input-btn-padding-x-lg;
+$input-font-size-lg: $input-btn-font-size-lg;
+
+$input-bg: var(--#{$prefix}body-bg);
+$input-disabled-color: null;
+$input-disabled-bg: var(--#{$prefix}secondary-bg);
+$input-disabled-border-color: null;
+
+$input-color: var(--#{$prefix}body-color);
+$input-border-color: var(--#{$prefix}border-color);
+$input-border-width: $input-btn-border-width;
+$input-box-shadow: $box-shadow-inset;
+
+$input-border-radius: var(--#{$prefix}border-radius);
+$input-border-radius-sm: var(--#{$prefix}border-radius-sm);
+$input-border-radius-lg: var(--#{$prefix}border-radius-lg);
+
+$input-focus-bg: $input-bg;
+$input-focus-border-color: tint-color($component-active-bg, 50%);
+$input-focus-color: $input-color;
+$input-focus-width: $input-btn-focus-width;
+$input-focus-box-shadow: $input-btn-focus-box-shadow;
+
+$input-placeholder-color: var(--#{$prefix}secondary-color);
+$input-plaintext-color: var(--#{$prefix}body-color);
+
+$input-height-border: calc(
+  #{$input-border-width} * 2
+); // stylelint-disable-line function-disallowed-list
+
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2);
+$input-height-inner-half: add($input-line-height * 0.5em, $input-padding-y);
+$input-height-inner-quarter: add(
+  $input-line-height * 0.25em,
+  $input-padding-y * 0.5
+);
+
+$input-height: add(
+  $input-line-height * 1em,
+  add($input-padding-y * 2, $input-height-border, false)
+);
+$input-height-sm: add(
+  $input-line-height * 1em,
+  add($input-padding-y-sm * 2, $input-height-border, false)
+);
+$input-height-lg: add(
+  $input-line-height * 1em,
+  add($input-padding-y-lg * 2, $input-height-border, false)
+);
+
+$input-transition:
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out;
+
+$form-color-width: 3rem;
+
+// Form Label Text
+$form-label-margin-bottom: 0.5rem;
+$form-label-font-size: null;
+$form-label-font-style: null;
+$form-label-font-weight: null;
+$form-label-color: null;
+
+// Form Text
+$form-text-margin-top: 0.25rem;
+$form-text-font-size: $small-font-size;
+$form-text-font-style: null;
+$form-text-font-weight: null;
+$form-text-color: var(--#{$prefix}secondary-color);
+
+// Form File Button
+$form-file-button-color: $input-color;
+$form-file-button-bg: var(--#{$prefix}tertiary-bg);
+$form-file-button-hover-bg: var(--#{$prefix}secondary-bg);
diff --git a/src/assets/scss/forms/_input-group.scss b/src/assets/scss/forms/_input-group.scss
new file mode 100644
index 0000000000..cd50a59126
--- /dev/null
+++ b/src/assets/scss/forms/_input-group.scss
@@ -0,0 +1,6 @@
+$input-group-addon-padding-y: $input-padding-y;
+$input-group-addon-padding-x: $input-padding-x;
+$input-group-addon-font-weight: $input-font-weight;
+$input-group-addon-color: $input-color;
+$input-group-addon-bg: var(--#{$prefix}tertiary-bg);
+$input-group-addon-border-color: $input-border-color;
diff --git a/src/assets/scss/forms/_range.scss b/src/assets/scss/forms/_range.scss
new file mode 100644
index 0000000000..c0cdc61171
--- /dev/null
+++ b/src/assets/scss/forms/_range.scss
@@ -0,0 +1,23 @@
+$form-range-track-width: 100%;
+$form-range-track-height: 0.5rem;
+$form-range-track-cursor: pointer;
+$form-range-track-bg: var(--#{$prefix}tertiary-bg);
+$form-range-track-border-radius: 1rem;
+$form-range-track-box-shadow: $box-shadow-inset;
+
+$form-range-thumb-width: 1rem;
+$form-range-thumb-height: $form-range-thumb-width;
+$form-range-thumb-bg: $component-active-bg;
+$form-range-thumb-border: 0;
+$form-range-thumb-border-radius: 1rem;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);
+$form-range-thumb-focus-box-shadow:
+  0 0 0 1px $body-bg,
+  $input-focus-box-shadow;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
+$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color);
+$form-range-thumb-transition:
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out;
diff --git a/src/assets/scss/forms/_select.scss b/src/assets/scss/forms/_select.scss
new file mode 100644
index 0000000000..4d5c428636
--- /dev/null
+++ b/src/assets/scss/forms/_select.scss
@@ -0,0 +1,44 @@
+$form-select-padding-y: $input-padding-y;
+$form-select-padding-x: $input-padding-x;
+$form-select-font-family: $input-font-family;
+$form-select-font-size: $input-font-size;
+$form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image
+$form-select-font-weight: $input-font-weight;
+$form-select-line-height: $input-line-height;
+$form-select-color: $input-color;
+$form-select-bg: $input-bg;
+$form-select-disabled-color: null;
+$form-select-disabled-bg: $input-disabled-bg;
+$form-select-disabled-border-color: $input-disabled-border-color;
+$form-select-bg-position: right $form-select-padding-x center;
+$form-select-bg-size: 16px 12px; // In pixels because image dimensions
+$form-select-indicator-color: $gray-800;
+$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +
+  $form-select-indicator-padding;
+$form-select-feedback-icon-position: center right $form-select-indicator-padding;
+$form-select-feedback-icon-size: $input-height-inner-half
+  $input-height-inner-half;
+
+$form-select-border-width: $input-border-width;
+$form-select-border-color: $input-border-color;
+$form-select-border-radius: $input-border-radius;
+$form-select-box-shadow: $box-shadow-inset;
+
+$form-select-focus-border-color: $input-focus-border-color;
+$form-select-focus-width: $input-focus-width;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width
+  $input-btn-focus-color;
+
+$form-select-padding-y-sm: $input-padding-y-sm;
+$form-select-padding-x-sm: $input-padding-x-sm;
+$form-select-font-size-sm: $input-font-size-sm;
+$form-select-border-radius-sm: $input-border-radius-sm;
+
+$form-select-padding-y-lg: $input-padding-y-lg;
+$form-select-padding-x-lg: $input-padding-x-lg;
+$form-select-font-size-lg: $input-font-size-lg;
+$form-select-border-radius-lg: $input-border-radius-lg;
+
+$form-select-transition: $input-transition;
diff --git a/src/assets/scss/forms/_validation.scss b/src/assets/scss/forms/_validation.scss
new file mode 100644
index 0000000000..9877dfe327
--- /dev/null
+++ b/src/assets/scss/forms/_validation.scss
@@ -0,0 +1,20 @@
+$form-feedback-margin-top: $form-text-margin-top;
+$form-feedback-font-size: $form-text-font-size;
+$form-feedback-font-style: $form-text-font-style;
+$form-feedback-valid-color: $success;
+$form-feedback-invalid-color: $danger;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
+
+$form-valid-color: $form-feedback-valid-color;
+$form-valid-border-color: $form-feedback-valid-color;
+$form-invalid-color: $form-feedback-invalid-color;
+$form-invalid-border-color: $form-feedback-invalid-color;
+
+$form-valid-color-dark: $green-300;
+$form-valid-border-color-dark: $green-300;
+$form-invalid-color-dark: $red-300;
+$form-invalid-border-color-dark: $red-300;
diff --git a/src/assets/svgs/Attendance.svg b/src/assets/svgs/Attendance.svg
new file mode 100644
index 0000000000..8dbc7b07ce
--- /dev/null
+++ b/src/assets/svgs/Attendance.svg
@@ -0,0 +1,9 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="35" height="35" fill="url(#pattern0_7315_197)"/>
+<defs>
+<pattern id="pattern0_7315_197" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_7315_197" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_7315_197" width="100" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJ2ElEQVR4nO1da6xcVRXeigqixvcDxfcjoonPYn3wEDGIGhSN8Rl/+EMKtSiIVgT1UoH44lKGezvn+/aZ5iY3ijp4S6tWE6MJgs/EaAAxQhRbii0FBaU1tjw6Zjn73sxdd585Z2b2mTMz53zJTprbmb3XrHXW3muv1zGmQoUKFSpUqFChQoUVaDabh8Vx/PQoil4cx/FrrbUvbzQaz5ybmzti5acrBMXU1NTDSa4m+RmS15D8M4CDJFsJYw/J75Bca609uhJHIGzatOnZJL9KcmcX5qeNBwB8M4qiZ1WC6RNxHD+JZJSiBb2Of5A8qRJKj4ii6B1uy0llMoA7Sd4K4HckbwSwC8B/u3x+P8lz4zh+USWYDABwNoAHuzCzKedCvV5/9fz8/GN8c0xNTT2C5GsAfJrkX7sI9CZr7ftbrdbDKuH4hXFmAuP+QnINySN7ZZwIB8AFKZr2W5LPqYTSAZInyeGrNOJBABtqtdrhgzKL5LdShLIHwKpKKG1mHam3FtmeAJwaikGNRuNx1tq3kFxPcjvJhxJM5aNKLxSSl2rNkIM9T8bIoU7yhx6h/FzuPKUVyuzs7GMB3KuYMj2MteUwJ3mZFkoURR8yZQXJdYohu0VIQ/YAbFca+gdTVgC4VjFjw7BpEB8YgENKS15pygaSjyd5f4cwDhVlfgL4kdLUc03ZQPLtSjtuKZCWtUog3zdlgzyFigmNomiJ4/gV6uH4uykbxHmomPDZomhx7paHOk1vibeYMgHANqUhHyySHucNXqJHgl2mTCD5U6UhJxdMz63qAXmpKRMA/Fox4MQi6XFOzCV6SueiJ/krpSEnFEzP7Z301Ov1F5gygeSPlUBOLZIe7cKp1+tPM2WCCzZ1blkfLYoW8Qarh+Ng6QJXJOtKIOcVRUscx8coWnaaskHuHYoJtQJpea/SkJ+ZskEzgeRPCqRlStFypSkbtLuC5B2jckm11n7clA3NZvNRnSk7aHt7n1KQ2+Rf6g5yjCkjSP5G7d2nDZsGAG9Qmrq3dBbWIgDMKGZ8pQAavqBoaJqyguRFSkOuKzpqKbnEpoyQ84LkPn0hm0/ISMzrQqjzhwHcNzMz82RTxrRRT6roumHGIeSsAHAGyf8oWs42ZYOUCKitYn1RtJD8vBLIvCkbAPygaAtrESTfVcXUyasUE9aYguCSuTtpucqUDS7PtpMJLJAWjkp8vzBEUfRmJZA9cnsfNh0kHylZJsp1crwpG8S81S4LAF+bnZ19hrgz8l5f1pC1SH5d0fDP6enpR5syAsA3lJa0HFO+nffarkrXt/YlpqyQegzxHXElY36R99oAfukRxq7Nmzc/1ZQZURS9yVOScHeea7pSt/3aqSgNCPJcd2xgrT1anyckX5jjeq9Sa/1bukLktd5YAsAWxaRP5bjWOWqr2pbXWmMLkmcpJv0pr7WkKEcJf11ea40tZtsm6FK9iAw5X0KvI9W2ShgPVG03MuZqIYfsD5JblUC2hl5jYgDgBI8pGszpSPI4Pb+19m2h5p9IcGUR5l0hEp8lNRTAbWrua8NQPcGIouhluquDBJCiKHr3AHO+znPXkQKdY8NSP6GAMkvd+GTApDwZXw5Ldcm2LgYUiLRzKnXHhn5AcqNi4jkBNWQhLLUlAIArQt3cPRqyJSy1JQDJWqhMEI+GZLp7yLYmBgHJ8wF8T7rWkbxHUodc+tA97m9Xy2fksxO7FZKcVQL5RL9zWWvf04vvSsICEhfRZW4Zx0733clq9QRgTjHxY/3ORfIUxbSLfZ+r1+tPFM3s1rcx63Bz1Obm5p5gJgFsbwOdfq339TuXtfb1HXPFvmRqt635gmWDCuZOmduMO0her37cKQFK1rbqPV4yJfV5pRh6n4SUpWZELpISUZTECBnyb3fpPMOFhPd1meeKse0OAeA0/YOkjVK/88m2Id2wpQOR+vsRnjhMZ8u/tb3kGstn5axz7Wt9Qtkydq3Qbbs34r7QPiddDOQ04xoP4w5IidsgjdRcp7wNvkbQIpSx0JRarXa4/AiPH0tiJKtDr+fbptyT/cbA3mXfubTRjLggziT5t4StI3go1+fbAvDHPBqoNRqN55K8Wa11SExxM0pwh+N6nTXIDqKlO3XodZ1pu9ejGbl1sxOhSBhBr1m4Sew6gZ7oEq0PdDEXd+fVakNKnvWZEXKbSoKkp3rOlFqR1VLnOUunm81+UNrEylOcEx1H6UufHOB5rJWw/oWey+PwbvRiqkrrvhRtaLkKpivzboLpXBrLTNthtqV15+VtQ09dlQuUdPvR7Vc9GnGL9F6s56QRnh69+sUwa03BtSgAduTmkJT3QUnmSIogxKxdIPnWYdaDR22v7bIbeJ4FptKy0Dkn75AOrIt/F4303LNW5fH0re/2RhxnTV1UVA4UyfOHkWHveHGpeiiXdRcC8F1Fy+eCESD7vqfWu3Ox68QxKL4fUyDQjmfk2s/E1bwsePiwM6WE7uogBMgNWtvXHeN6cYOYEQHJmzrpky0s9AvMPCmqi5bUO7t4n2XcODABYrt7Uvr/n0dlrf2IGTFQtYFNanQj+717l9Uukqdnmdsx2PferN0+t4/kiAUtv7DWvsST5yRj+6h2QYA635LqGZ0glgwQAB/oNq88fAkBrd8nvUNRzF/12QN9/zCpv9Pq78b0KHsx0Z9AEoWScHgvjoVuFlxQgTiPrCbgMjPiYPYt63SPx3mZUFzcY0uC/+2SNHM+2JYl7bc9rodt45BpwR4OdWF+klBSDu8PZ6El2KGuS4ilFGxciiShzF4Ju6Z83isUeZqzHt49vCKwd7PXRdi02/oCMyaguhhKDDztOwlCyXx4Z03g6KvxjnvX4DLt6Odlj0UhUq4TcV9kcZ2kCKXr4d0lvLt/YNeJp/vbWLUwmvI4F7Mm32mhZD28M9ZS9udc9PRq7ztxrShAud8laidd5bJ811lft7tLY9e7SYr7fUeWpL1UOFd5a5wGgJm0AJVovhkSSH4pWIDK5yYZ9QHgXt1IxpPELRfG40IxPaV+8n6dPDfI7bw1pmNd52+RxAJPItteSUQwOSGKoudpc3mgJAdXQ94a07FbW4OSBuRxedych1Cstc+XJghKGIeyOi7LXBDUcp7q4wNvUysukgAuD7XGxKDZbB6W4I+SM+XCQbrbOefhFxMiqAuj7IQtFLW2GepNtnbZIWt6yUpx8fKzPKbtkjBkzXx/1Zij2XYJbUxKzBDrUmLgzv+0Wjy1oj0ynNd2tfu/ZpIl6i6Sl1ea0QMk1zapjGCQIXOOXB7vuGCuXUcSrKRNDIfC83cnqBfkxZ7EuiyC2OG+O1lFn2YE4BySx0relLjMAdwgbWQXy6Ldv29w7nTJS1vVb7Duf38dteckUi0WAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/src/assets/svgs/actionItem.svg b/src/assets/svgs/actionItem.svg
new file mode 100644
index 0000000000..d660b378cd
--- /dev/null
+++ b/src/assets/svgs/actionItem.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clapperboard">
+  <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" fill="none"/>
+  <path d="m6.2 5.3 3.1 3.9"/>
+  <path d="m12.4 3.4 3.1 4"/>
+  <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" fill="none"/>
+</svg>
diff --git a/src/assets/svgs/admin.svg b/src/assets/svgs/admin.svg
new file mode 100644
index 0000000000..8ee42f611d
--- /dev/null
+++ b/src/assets/svgs/admin.svg
@@ -0,0 +1,5 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2324 26.8509C7.64159 25.4092 2.37206 19.2883 2.37206 12.8418V5.83715L14.2324 1.16742L26.0927 5.83715V12.8418C26.0927 19.2907 20.8231 25.4092 14.2324 26.8509ZM4.74412 7.00459V12.8418C4.8119 15.541 5.7764 18.144 7.48999 20.2525C9.20359 22.3609 11.5719 23.8585 14.2324 24.5161C16.8929 23.8585 19.2611 22.3609 20.9747 20.2525C22.6883 18.144 23.6528 15.541 23.7206 12.8418V7.00459L14.2324 3.50229L4.74412 7.00459Z" fill="current"/>
+<path d="M14.2324 12.8417C15.8699 12.8417 17.1974 11.535 17.1974 9.92316C17.1974 8.31127 15.8699 7.00458 14.2324 7.00458C12.5948 7.00458 11.2673 8.31127 11.2673 9.92316C11.2673 11.535 12.5948 12.8417 14.2324 12.8417Z" fill="current"/>
+<path d="M8.30221 17.5115C8.88679 18.56 9.74394 19.4369 10.7859 20.0523C11.8279 20.6677 13.0173 20.9995 14.2324 21.0138C15.4474 20.9995 16.6368 20.6677 17.6788 20.0523C18.7208 19.4369 19.5779 18.56 20.1625 17.5115C20.1329 15.298 16.1988 14.0092 14.2324 14.0092C12.2552 14.0092 8.33186 15.298 8.30221 17.5115Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/agenda-category-icon.svg b/src/assets/svgs/agenda-category-icon.svg
new file mode 100644
index 0000000000..8e3d4562f3
--- /dev/null
+++ b/src/assets/svgs/agenda-category-icon.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clapperboard" viewBox="0 0 95.9 122.88"><title>checklist</title><path d="M37.06,5v5a2.52,2.52,0,0,1-2.28,2.5,2.86,2.86,0,0,1-.89.14H24.6V23H71.29V12.68H62a2.81,2.81,0,0,1-.89-.14A2.52,2.52,0,0,1,58.84,10V5ZM18.4,49.25a2.25,2.25,0,1,1,3.74-2.51l1.23,1.82,4.87-5.92a2.25,2.25,0,0,1,3.48,2.86L25,53.7a2,2,0,0,1-.54.5,2.24,2.24,0,0,1-3.12-.61L18.4,49.25Zm0,23.28A2.25,2.25,0,1,1,22.14,70l1.23,1.82,4.87-5.93a2.25,2.25,0,0,1,3.48,2.86L25,77a1.88,1.88,0,0,1-.54.51,2.24,2.24,0,0,1-3.12-.62L18.4,72.53Zm0,24.2a2.25,2.25,0,1,1,3.74-2.51l1.23,1.83,4.87-5.93A2.25,2.25,0,0,1,31.72,93L25,101.18a2,2,0,0,1-.54.5,2.24,2.24,0,0,1-3.12-.61L18.4,96.73Zm5-68.57a3.85,3.85,0,0,1-2.68-1.11c-.09-.09-.14-.18-.23-.27a3.94,3.94,0,0,1-.89-2.41V19.28h-14a.49.49,0,0,0-.4.18.67.67,0,0,0-.18.4v97.4a.42.42,0,0,0,.18.4.56.56,0,0,0,.4.18H90.32a.56.56,0,0,0,.4-.18.44.44,0,0,0,.18-.4V19.86a.67.67,0,0,0-.18-.4.5.5,0,0,0-.4-.18h-14v5.09a3.89,3.89,0,0,1-.9,2.41c-.08.09-.13.18-.22.27a3.85,3.85,0,0,1-2.68,1.11ZM5.62,122.88A5.63,5.63,0,0,1,0,117.26V19.86a5.63,5.63,0,0,1,5.62-5.62h14V11.47A3.79,3.79,0,0,1,23.4,7.68h8.66V4.2a4.14,4.14,0,0,1,1.25-2.95A4.13,4.13,0,0,1,36.25,0h23.4a4.15,4.15,0,0,1,2.94,1.25,4.14,4.14,0,0,1,1.25,3V7.68H72.5a3.79,3.79,0,0,1,3.79,3.79v2.77h14a5.63,5.63,0,0,1,5.63,5.62v97.4a5.63,5.63,0,0,1-5.63,5.62ZM76.37,99.6a2.55,2.55,0,0,0,0-5.09H42.56a2.55,2.55,0,0,0,0,5.09H76.37Zm0-48.8a2.55,2.55,0,0,0,0-5.09H42.56a2.55,2.55,0,0,0,0,5.09Zm0,24.07a2.55,2.55,0,0,0,0-5.09H42.56a2.55,2.55,0,0,0,0,5.09Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/agenda-items.svg b/src/assets/svgs/agenda-items.svg
new file mode 100644
index 0000000000..343d1808b4
--- /dev/null
+++ b/src/assets/svgs/agenda-items.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill='none' stroke="currentColor" stroke-width="3.5" viewBox="0 0 112.83 122.88"><title>notebook</title><path class="cls-1" d="M103.3,34.19l8.23,3.52a2.15,2.15,0,0,1,1.13,2.82l-2,4.56L98.53,39.88l2-4.56a2.15,2.15,0,0,1,2.82-1.13ZM8.88,7.88h8.19V2.73a2.74,2.74,0,0,1,5.47,0V7.88h12V2.73a2.73,2.73,0,1,1,5.46,0V7.88H52V2.73a2.73,2.73,0,0,1,5.46,0V7.88h12V2.73a2.73,2.73,0,0,1,5.46,0V7.88h9.27a8.91,8.91,0,0,1,8.88,8.88V28.54a12.27,12.27,0,0,0-1.76,2.9l-2,4.56A10,10,0,0,0,89,37.16a11.24,11.24,0,0,0-.58,1.15l-.6,1.4V16.76a3.6,3.6,0,0,0-3.58-3.58H75v5.15a2.73,2.73,0,0,1-5.46,0V13.18h-12v5.15a2.73,2.73,0,0,1-5.46,0V13.18H40v5.15a2.73,2.73,0,1,1-5.46,0V13.18h-12v5.15a2.74,2.74,0,0,1-5.47,0V13.18H8.88A3.58,3.58,0,0,0,5.3,16.76v92a3.6,3.6,0,0,0,3.58,3.59H59.16l.56,5.29H8.88A8.89,8.89,0,0,1,0,108.77v-92A8.91,8.91,0,0,1,8.88,7.88ZM20.34,94.35a2.65,2.65,0,0,1,0-5.3H66.72l-2.27,5.3Zm0-17.48a2.65,2.65,0,0,1,0-5.3H72.78a2.52,2.52,0,0,1,1.27.35l-2.12,5Zm0-17.48a2.65,2.65,0,0,1,0-5.3H72.78a2.65,2.65,0,0,1,0,5.3Zm0-17.48a2.65,2.65,0,0,1,0-5.3H72.78a2.65,2.65,0,0,1,0,5.3ZM81,114.6l-6.19,5c-4.85,3.92-4.36,5.06-5-.88l-1-9.34h0L97.54,42.18l12.18,5.22L81,114.6Zm-10.09-4.31,8,3.42L74.82,117c-3.19,2.58-2.87,3.32-3.28-.57l-.66-6.14Z"/></svg>
diff --git a/src/assets/svgs/angleRight.svg b/src/assets/svgs/angleRight.svg
new file mode 100644
index 0000000000..4a3a498877
--- /dev/null
+++ b/src/assets/svgs/angleRight.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.72749 3.20999L8.64749 4.28999L16.3605 12L8.64749 19.71L9.72749 20.79L17.9775 12.54L18.492 12L17.9767 11.46L9.72674 3.20999H9.72749Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/article.svg b/src/assets/svgs/article.svg
new file mode 100644
index 0000000000..e828aa40fc
--- /dev/null
+++ b/src/assets/svgs/article.svg
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
+    />
+  </svg>
\ No newline at end of file
diff --git a/src/assets/svgs/blockUser.svg b/src/assets/svgs/blockUser.svg
new file mode 100644
index 0000000000..f9aef51775
--- /dev/null
+++ b/src/assets/svgs/blockUser.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 4C8.93913 4 7.92172 4.42143 7.17157 5.17157C6.42143 5.92172 6 6.93913 6 8C6 9.06087 6.42143 10.0783 7.17157 10.8284C7.92172 11.5786 8.93913 12 10 12C11.0609 12 12.0783 11.5786 12.8284 10.8284C13.5786 10.0783 14 9.06087 14 8C14 6.93913 13.5786 5.92172 12.8284 5.17157C12.0783 4.42143 11.0609 4 10 4ZM10 6C10.5304 6 11.0391 6.21071 11.4142 6.58579C11.7893 6.96086 12 7.46957 12 8C12 8.53043 11.7893 9.03914 11.4142 9.41421C11.0391 9.78929 10.5304 10 10 10C9.46957 10 8.96086 9.78929 8.58579 9.41421C8.21071 9.03914 8 8.53043 8 8C8 7.46957 8.21071 6.96086 8.58579 6.58579C8.96086 6.21071 9.46957 6 10 6ZM10 13C7.33 13 2 14.33 2 17V20H11.5C11.2483 19.394 11.0899 18.7534 11.03 18.1H3.9V17C3.9 16.36 7.03 14.9 10 14.9C10.5 14.9 11 14.95 11.5 15.03C11.7566 14.3985 12.1109 13.8114 12.55 13.29C11.61 13.1 10.71 13 10 13ZM17.5 13C15 13 13 15 13 17.5C13 20 15 22 17.5 22C20 22 22 20 22 17.5C22 15 20 13 17.5 13ZM17.5 14.5C19.16 14.5 20.5 15.84 20.5 17.5C20.5 18.06 20.35 18.58 20.08 19L16 14.92C16.42 14.65 16.94 14.5 17.5 14.5ZM14.92 16L19 20.08C18.58 20.35 18.06 20.5 17.5 20.5C15.84 20.5 14.5 19.16 14.5 17.5C14.5 16.94 14.65 16.42 14.92 16Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/blockedUser.svg b/src/assets/svgs/blockedUser.svg
new file mode 100644
index 0000000000..bbe0a51f84
--- /dev/null
+++ b/src/assets/svgs/blockedUser.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2473 0C8.88842 0 7.5852 0.531347 6.62433 1.47715C5.66346 2.42296 5.12365 3.70574 5.12365 5.04331C5.12365 6.38088 5.66346 7.66367 6.62433 8.60947C7.5852 9.55528 8.88842 10.0866 10.2473 10.0866C11.6062 10.0866 12.9094 9.55528 13.8703 8.60947C14.8311 7.66367 15.3709 6.38088 15.371 5.04331C15.3709 3.70574 14.8311 2.42296 13.8703 1.47715C12.9094 0.531347 11.6062 0 10.2473 0ZM10.2473 2.52166C10.9267 2.52166 11.5783 2.78733 12.0588 3.26023C12.5392 3.73313 12.8091 4.37453 12.8091 5.04331C12.8091 5.7121 12.5392 6.35349 12.0588 6.82639C11.5783 7.29929 10.9267 7.56497 10.2473 7.56497C9.56786 7.56497 8.91625 7.29929 8.43582 6.82639C7.95538 6.35349 7.68548 5.7121 7.68548 5.04331C7.68548 4.37453 7.95538 3.73313 8.43582 3.26023C8.91625 2.78733 9.56786 2.52166 10.2473 2.52166ZM10.2473 11.3475C6.82726 11.3475 0 13.0244 0 16.3908V20.1732H12.1687C11.8463 19.4092 11.6433 18.6015 11.5666 17.7777H2.43373V16.3908C2.43373 15.5838 6.44299 13.743 10.2473 13.743C10.8878 13.743 11.5282 13.8061 12.1687 13.9069C12.4974 13.1108 12.9512 12.3704 13.5136 11.7131C12.3096 11.4735 11.1567 11.3475 10.2473 11.3475ZM19.8541 11.3475C16.6519 11.3475 14.09 13.8691 14.09 17.0212C14.09 20.1732 16.6519 22.6949 19.8541 22.6949C23.0564 22.6949 25.6182 20.1732 25.6182 17.0212C25.6182 13.8691 23.0564 11.3475 19.8541 11.3475ZM19.8541 13.2387C21.9805 13.2387 23.6969 14.9282 23.6969 17.0212C23.6969 17.7272 23.5047 18.3829 23.1589 18.9124L17.9328 13.7682C18.4708 13.4278 19.1368 13.2387 19.8541 13.2387ZM16.5494 15.1299L21.7755 20.2741C21.2375 20.6145 20.5715 20.8037 19.8541 20.8037C17.7278 20.8037 16.0114 19.1142 16.0114 17.0212C16.0114 16.3151 16.2035 15.6595 16.5494 15.1299Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/cardItemDate.svg b/src/assets/svgs/cardItemDate.svg
new file mode 100644
index 0000000000..e3e738a3dc
--- /dev/null
+++ b/src/assets/svgs/cardItemDate.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 5.49705C5.05109 5.49705 4.86032 5.41803 4.71967 5.27738C4.57902 5.13672 4.5 4.94596 4.5 4.74705V4.00005C4.10218 4.00005 3.72064 4.15808 3.43934 4.43939C3.15804 4.72069 3 5.10222 3 5.50005V6.50005H13V5.50005C13 5.10222 12.842 4.72069 12.5607 4.43939C12.2794 4.15808 11.8978 4.00005 11.5 4.00005V4.75005C11.5 4.94896 11.421 5.13972 11.2803 5.28038C11.1397 5.42103 10.9489 5.50005 10.75 5.50005C10.5511 5.50005 10.3603 5.42103 10.2197 5.28038C10.079 5.13972 10 4.94896 10 4.75005V4.00005H6V4.74705C6 4.94596 5.92098 5.13672 5.78033 5.27738C5.63968 5.41803 5.44891 5.49705 5.25 5.49705ZM10 2.50005H6V1.74805C6 1.54913 5.92098 1.35837 5.78033 1.21772C5.63968 1.07706 5.44891 0.998047 5.25 0.998047C5.05109 0.998047 4.86032 1.07706 4.71967 1.21772C4.57902 1.35837 4.5 1.54913 4.5 1.74805V2.50005C3.70435 2.50005 2.94129 2.81612 2.37868 3.37873C1.81607 3.94134 1.5 4.7044 1.5 5.50005V11.5C1.5 12.2957 1.81607 13.0588 2.37868 13.6214C2.94129 14.184 3.70435 14.5 4.5 14.5H11.5C12.2956 14.5 13.0587 14.184 13.6213 13.6214C14.1839 13.0588 14.5 12.2957 14.5 11.5V5.50005C14.5 4.7044 14.1839 3.94134 13.6213 3.37873C13.0587 2.81612 12.2956 2.50005 11.5 2.50005V1.75005C11.5 1.55113 11.421 1.36037 11.2803 1.21972C11.1397 1.07906 10.9489 1.00005 10.75 1.00005C10.5511 1.00005 10.3603 1.07906 10.2197 1.21972C10.079 1.36037 10 1.55113 10 1.75005V2.50005ZM3 8.00005V11.5C3 11.8979 3.15804 12.2794 3.43934 12.5607C3.72064 12.842 4.10218 13 4.5 13H11.5C11.8978 13 12.2794 12.842 12.5607 12.5607C12.842 12.2794 13 11.8979 13 11.5V8.00005H3Z"/>
+</svg>
diff --git a/src/assets/svgs/cardItemEvent.svg b/src/assets/svgs/cardItemEvent.svg
new file mode 100644
index 0000000000..e37a084018
--- /dev/null
+++ b/src/assets/svgs/cardItemEvent.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="19" viewBox="0 0 22 19" fill="current" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5546 1.86111H16.4853V0.930554C16.4853 0.683756 16.3763 0.447066 16.1823 0.272553C15.9882 0.0980402 15.7251 0 15.4506 0C15.1762 0 14.9131 0.0980402 14.719 0.272553C14.525 0.447066 14.416 0.683756 14.416 0.930554V1.86111H8.20816V0.930554C8.20816 0.683756 8.09915 0.447066 7.90512 0.272553C7.71108 0.0980402 7.44792 0 7.17352 0C6.89911 0 6.63595 0.0980402 6.44191 0.272553C6.24788 0.447066 6.13887 0.683756 6.13887 0.930554V1.86111H4.06959C3.24638 1.86111 2.45688 2.15523 1.87479 2.67877C1.29269 3.20231 0.965668 3.91238 0.965668 4.65277V15.8194C0.965668 16.5598 1.29269 17.2699 1.87479 17.7934C2.45688 18.317 3.24638 18.6111 4.06959 18.6111H18.5546C19.3778 18.6111 20.1673 18.317 20.7494 17.7934C21.3315 17.2699 21.6585 16.5598 21.6585 15.8194V4.65277C21.6585 3.91238 21.3315 3.20231 20.7494 2.67877C20.1673 2.15523 19.3778 1.86111 18.5546 1.86111ZM19.5892 15.8194C19.5892 16.0662 19.4802 16.3029 19.2862 16.4774C19.0921 16.6519 18.829 16.75 18.5546 16.75H4.06959C3.79519 16.75 3.53202 16.6519 3.33799 16.4774C3.14396 16.3029 3.03495 16.0662 3.03495 15.8194V9.30554H19.5892V15.8194ZM19.5892 7.44444H3.03495V4.65277C3.03495 4.40597 3.14396 4.16928 3.33799 3.99477C3.53202 3.82026 3.79519 3.72222 4.06959 3.72222H6.13887V4.65277C6.13887 4.89957 6.24788 5.13626 6.44191 5.31077C6.63595 5.48529 6.89911 5.58333 7.17352 5.58333C7.44792 5.58333 7.71108 5.48529 7.90512 5.31077C8.09915 5.13626 8.20816 4.89957 8.20816 4.65277V3.72222H14.416V4.65277C14.416 4.89957 14.525 5.13626 14.719 5.31077C14.9131 5.48529 15.1762 5.58333 15.4506 5.58333C15.7251 5.58333 15.9882 5.48529 16.1823 5.31077C16.3763 5.13626 16.4853 4.89957 16.4853 4.65277V3.72222H18.5546C18.829 3.72222 19.0921 3.82026 19.2862 3.99477C19.4802 4.16928 19.5892 4.40597 19.5892 4.65277V7.44444Z"/>
+</svg>
diff --git a/src/assets/svgs/cardItemLocation.svg b/src/assets/svgs/cardItemLocation.svg
new file mode 100644
index 0000000000..1518f97a75
--- /dev/null
+++ b/src/assets/svgs/cardItemLocation.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87553 13.1257L6.40169 12.584C6.99872 11.9593 7.53572 11.3665 8.01351 10.8027L8.40792 10.3273C10.0548 8.29983 10.8786 6.69069 10.8786 5.50136C10.8786 2.96269 8.63889 0.904785 5.87553 0.904785C3.11217 0.904785 0.872467 2.96269 0.872467 5.50136C0.872467 6.69069 1.69631 8.29983 3.34315 10.3273L3.73756 10.8027C4.41917 11.6007 5.1323 12.3751 5.87553 13.1257Z" stroke="#current" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.87553 7.38093C7.02683 7.38093 7.96014 6.52814 7.96014 5.47617C7.96014 4.4242 7.02683 3.57141 5.87553 3.57141C4.72424 3.57141 3.79092 4.4242 3.79092 5.47617C3.79092 6.52814 4.72424 7.38093 5.87553 7.38093Z" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svgs/chat.svg b/src/assets/svgs/chat.svg
new file mode 100644
index 0000000000..72787fab78
--- /dev/null
+++ b/src/assets/svgs/chat.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.41675 19.5V23.5798L7.058 22.5951L12.2168 19.5H17.3334C18.5283 19.5 19.5001 18.5283 19.5001 17.3333V8.66667C19.5001 7.47175 18.5283 6.5 17.3334 6.5H4.33341C3.1385 6.5 2.16675 7.47175 2.16675 8.66667V17.3333C2.16675 18.5283 3.1385 19.5 4.33341 19.5H5.41675ZM4.33341 8.66667H17.3334V17.3333H11.6167L7.58342 19.7535V17.3333H4.33341V8.66667Z" fill="#808080" stroke="none"/>
+<path d="M21.6667 2.16675H8.66667C7.47175 2.16675 6.5 3.1385 6.5 4.33341H19.5C20.6949 4.33341 21.6667 5.30516 21.6667 6.50008V15.1667C22.8616 15.1667 23.8333 14.195 23.8333 13.0001V4.33341C23.8333 3.1385 22.8616 2.16675 21.6667 2.16675Z" fill="#808080" stroke="none"/>
+</svg>
diff --git a/src/assets/svgs/checkInRegistrants.svg b/src/assets/svgs/checkInRegistrants.svg
new file mode 100644
index 0000000000..0a663e3876
--- /dev/null
+++ b/src/assets/svgs/checkInRegistrants.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 65" version="1.1" x="0px" y="0px"><title>check_in</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-948.000000, -306.000000)" fill="#000000"><g transform="translate(943.000000, 302.000000)"><path d="M22.2940458,29 C20.2119227,32.1557922 19,35.9363662 19,40 C19,42.0904114 19.3207077,44.1059176 19.9156046,46 L7,46 C5.8954305,46 5,45.1045695 5,44 L5,35 C5,31.6862915 7.6862915,29 11,29 L22.2940458,29 Z M21,26 C16.0294373,26 12,17.6601058 12,12.8 C12,7.9398942 16.0294373,4 21,4 C25.9705627,4 30,7.9398942 30,12.8 C30,17.6601058 25.9705627,26 21,26 Z"/><path d="M36.1715729,42.2426407 L33.3431458,39.4142136 C32.5620972,38.633165 31.2957672,38.633165 30.5147186,39.4142136 C29.73367,40.1952621 29.73367,41.4615921 30.5147186,42.2426407 L34.7573593,46.4852814 C35.1478836,46.8758057 35.6597282,47.0710678 36.1715729,47.0710678 C36.6834175,47.0710678 37.1952621,46.8758057 37.5857864,46.4852814 L47.4852814,36.5857864 C48.26633,35.8047379 48.26633,34.5384079 47.4852814,33.7573593 C46.7042328,32.9763107 45.4379028,32.9763107 44.6568542,33.7573593 L36.1715729,42.2426407 Z M39,56 C30.163444,56 23,48.836556 23,40 C23,31.163444 30.163444,24 39,24 C47.836556,24 55,31.163444 55,40 C55,48.836556 47.836556,56 39,56 Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/dashboard.svg b/src/assets/svgs/dashboard.svg
new file mode 100644
index 0000000000..12e8b0fe63
--- /dev/null
+++ b/src/assets/svgs/dashboard.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H10V21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5ZM14 3H20C20.5304 3 21.0391 3.21071 21.4142 3.58579C21.7893 3.96086 22 4.46957 22 5V10H14V3ZM14 14H22V19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H14V14Z" stroke="current" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svgs/date.svg b/src/assets/svgs/date.svg
new file mode 100644
index 0000000000..9baf0768c4
--- /dev/null
+++ b/src/assets/svgs/date.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/event.svg b/src/assets/svgs/event.svg
new file mode 100644
index 0000000000..3c73e7b04e
--- /dev/null
+++ b/src/assets/svgs/event.svg
@@ -0,0 +1,3 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.065 2.32001H16.9302V1.26932C16.9302 0.990657 16.8177 0.72341 16.6175 0.526368C16.4173 0.329325 16.1458 0.218628 15.8627 0.218628C15.5796 0.218628 15.3081 0.329325 15.108 0.526368C14.9078 0.72341 14.7953 0.990657 14.7953 1.26932V2.32001H8.39075V1.26932C8.39075 0.990657 8.27829 0.72341 8.07811 0.526368C7.87793 0.329325 7.60642 0.218628 7.32333 0.218628C7.04023 0.218628 6.76872 0.329325 6.56854 0.526368C6.36836 0.72341 6.2559 0.990657 6.2559 1.26932V2.32001H4.12104C3.27175 2.32001 2.45723 2.6521 1.85669 3.24323C1.25614 3.83435 0.918762 4.6361 0.918762 5.47208V18.0804C0.918762 18.9163 1.25614 19.7181 1.85669 20.3092C2.45723 20.9003 3.27175 21.2324 4.12104 21.2324H19.065C19.9143 21.2324 20.7288 20.9003 21.3294 20.3092C21.9299 19.7181 22.2673 18.9163 22.2673 18.0804V5.47208C22.2673 4.6361 21.9299 3.83435 21.3294 3.24323C20.7288 2.6521 19.9143 2.32001 19.065 2.32001ZM20.1325 18.0804C20.1325 18.359 20.02 18.6263 19.8198 18.8233C19.6196 19.0203 19.3481 19.131 19.065 19.131H4.12104C3.83794 19.131 3.56644 19.0203 3.36626 18.8233C3.16608 18.6263 3.05362 18.359 3.05362 18.0804V10.7255H20.1325V18.0804ZM20.1325 8.62415H3.05362V5.47208C3.05362 5.19342 3.16608 4.92617 3.36626 4.72913C3.56644 4.53208 3.83794 4.42139 4.12104 4.42139H6.2559V5.47208C6.2559 5.75074 6.36836 6.01798 6.56854 6.21503C6.76872 6.41207 7.04023 6.52277 7.32333 6.52277C7.60642 6.52277 7.87793 6.41207 8.07811 6.21503C8.27829 6.01798 8.39075 5.75074 8.39075 5.47208V4.42139H14.7953V5.47208C14.7953 5.75074 14.9078 6.01798 15.108 6.21503C15.3081 6.41207 15.5796 6.52277 15.8627 6.52277C16.1458 6.52277 16.4173 6.41207 16.6175 6.21503C16.8177 6.01798 16.9302 5.75074 16.9302 5.47208V4.42139H19.065C19.3481 4.42139 19.6196 4.53208 19.8198 4.72913C20.02 4.92617 20.1325 5.19342 20.1325 5.47208V8.62415Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/events.svg b/src/assets/svgs/events.svg
new file mode 100644
index 0000000000..95b8a3b587
--- /dev/null
+++ b/src/assets/svgs/events.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 17V8H7V17H21ZM21 3C21.5304 3 22.0391 3.21071 22.4142 3.58579C22.7893 3.96086 23 4.46957 23 5V17C23 17.5304 22.7893 18.0391 22.4142 18.4142C22.0391 18.7893 21.5304 19 21 19H7C6.46957 19 5.96086 18.7893 5.58579 18.4142C5.21071 18.0391 5 17.5304 5 17V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H8V1H10V3H18V1H20V3H21ZM3 21H17V23H3C2.46957 23 1.96086 22.7893 1.58579 22.4142C1.21071 22.0391 1 21.5304 1 21V9H3V21ZM19 15H15V11H19V15Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/flask.svg b/src/assets/svgs/flask.svg
new file mode 100644
index 0000000000..599220a9d2
--- /dev/null
+++ b/src/assets/svgs/flask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 0H160 128C110.3 0 96 14.3 96 32s14.3 32 32 32V196.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512H378.6c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H288zM192 196.8V64h64V196.8c0 23.7 6.6 46.9 19 67.1L309.5 320h-171L173 263.9c12.4-20.2 19-43.4 19-67.1z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/funds.svg b/src/assets/svgs/funds.svg
new file mode 100644
index 0000000000..372a258577
--- /dev/null
+++ b/src/assets/svgs/funds.svg
@@ -0,0 +1 @@
+<svg fill="#808080" height="24" width="24" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 442.003 442.003" xml:space="preserve" stroke="#808080"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M337.897,189.476c-0.01-0.082-0.016-0.165-0.028-0.246c-0.058-0.404-0.135-0.807-0.244-1.205 c-0.001-0.004-0.003-0.008-0.004-0.013c-0.102-0.372-0.232-0.739-0.379-1.102c-0.042-0.104-0.088-0.204-0.133-0.306 c-0.116-0.262-0.245-0.52-0.385-0.774c-0.061-0.111-0.12-0.222-0.186-0.331c-0.035-0.059-0.063-0.12-0.1-0.179 c-0.148-0.235-0.31-0.456-0.474-0.675c-0.031-0.041-0.056-0.084-0.087-0.124c-0.25-0.324-0.52-0.625-0.803-0.91 c-0.053-0.054-0.111-0.104-0.166-0.156c-0.246-0.237-0.501-0.459-0.767-0.668c-0.068-0.053-0.134-0.106-0.204-0.157 c-0.356-0.264-0.723-0.51-1.106-0.723L185.506,98.164l84.825-53.414l142.207,80.832l-59.891,37.713 c-4.674,2.942-6.077,9.117-3.134,13.79c2.942,4.674,9.116,6.077,13.79,3.134l74.026-46.613c2.976-1.873,4.749-5.172,4.669-8.688 c-0.079-3.516-1.998-6.73-5.056-8.468L275.009,24.404c-3.203-1.822-7.15-1.732-10.27,0.231L160.783,90.096 c-0.021,0.013-0.043,0.027-0.064,0.04l-51.947,32.711c-0.024,0.015-0.048,0.03-0.071,0.045L4.674,188.398 c-2.976,1.873-4.749,5.172-4.669,8.688c0.079,3.516,1.998,6.73,5.056,8.468l161.934,92.046c1.534,0.873,3.238,1.307,4.941,1.307 c1.853,0,3.703-0.515,5.328-1.538l74.026-46.614c4.674-2.942,6.077-9.117,3.134-13.79c-2.941-4.674-9.117-6.078-13.79-3.134 l-68.961,43.424L29.466,196.421l84.826-53.415l151.67,86.212v114.182c0,3.642,1.979,6.995,5.167,8.755 c1.507,0.832,3.171,1.245,4.833,1.245c1.854,0,3.704-0.515,5.328-1.538l52.014-32.753c2.908-1.831,4.672-5.026,4.672-8.462v-120 c0-0.059-0.01-0.115-0.012-0.174C337.958,190.141,337.936,189.809,337.897,189.476z M285.962,325.287V223.401 c0-3.597-1.932-6.916-5.059-8.693l-147.411-83.791l32.813-20.663l142.206,80.833l-12.451,7.84 c-4.674,2.942-6.077,9.117-3.134,13.79c1.9,3.02,5.149,4.673,8.472,4.673c1.82,0,3.664-0.497,5.318-1.539l11.259-7.089v96.366 L285.962,325.287z"></path> <path d="M426.674,156.681l-74.026,46.613c-4.674,2.942-6.077,9.117-3.134,13.79c1.9,3.02,5.149,4.673,8.472,4.673 c1.82,0,3.664-0.497,5.318-1.539l74.026-46.613c4.674-2.942,6.077-9.117,3.134-13.79 C437.522,155.141,431.347,153.737,426.674,156.681z"></path> <path d="M240.633,273.83l-68.961,43.424L14.943,228.167c-4.798-2.728-10.906-1.052-13.635,3.752 c-2.729,4.801-1.05,10.906,3.752,13.635l161.934,92.046c1.534,0.873,3.238,1.307,4.941,1.307c1.853,0,3.703-0.515,5.328-1.538 l74.026-46.614c4.674-2.942,6.077-9.117,3.134-13.79C251.482,272.29,245.306,270.886,240.633,273.83z"></path> <path d="M426.674,196.681l-74.026,46.613c-4.674,2.942-6.077,9.117-3.134,13.79c1.9,3.02,5.149,4.673,8.472,4.673 c1.82,0,3.664-0.497,5.318-1.539l74.026-46.613c4.674-2.942,6.077-9.117,3.134-13.79 C437.522,195.14,431.347,193.737,426.674,196.681z"></path> <path d="M240.633,313.83l-68.961,43.424L14.943,268.167c-4.798-2.728-10.906-1.052-13.635,3.752 c-2.729,4.801-1.05,10.906,3.752,13.635l161.934,92.046c1.534,0.873,3.238,1.307,4.941,1.307c1.853,0,3.703-0.515,5.328-1.538 l74.026-46.614c4.674-2.942,6.077-9.117,3.134-13.79C251.482,312.289,245.306,310.886,240.633,313.83z"></path> <path d="M426.674,236.681l-74.026,46.613c-4.674,2.942-6.077,9.117-3.134,13.79c1.9,3.02,5.149,4.673,8.472,4.673 c1.82,0,3.664-0.497,5.318-1.539l74.026-46.613c4.674-2.942,6.077-9.117,3.134-13.79 C437.522,235.141,431.347,233.738,426.674,236.681z"></path> <path d="M240.633,353.83l-68.961,43.424L14.943,308.167c-4.798-2.728-10.906-1.052-13.635,3.752 c-2.729,4.801-1.05,10.906,3.752,13.635l161.934,92.046c1.534,0.873,3.238,1.307,4.941,1.307c1.853,0,3.703-0.515,5.328-1.538 l74.026-46.614c4.674-2.942,6.077-9.117,3.134-13.79C251.482,352.29,245.306,350.886,240.633,353.83z"></path> </g> </g></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/key.svg b/src/assets/svgs/key.svg
new file mode 100644
index 0000000000..a1f47615e8
--- /dev/null
+++ b/src/assets/svgs/key.svg
@@ -0,0 +1,4 @@
+
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.25 2.625C10.3148 2.625 7.12498 5.81484 7.12498 9.75C7.12498 11.3977 7.68513 12.9141 8.62263 14.1211L7.65935 15.0844L6.1992 13.6242C6.1635 13.5893 6.11554 13.5697 6.0656 13.5697C6.01566 13.5697 5.9677 13.5893 5.93201 13.6242L4.9992 14.557C4.96427 14.5927 4.94471 14.6407 4.94471 14.6906C4.94471 14.7406 4.96427 14.7885 4.9992 14.8242L6.45935 16.2844L5.40701 17.3367L3.94685 15.8766C3.91116 15.8416 3.8632 15.8221 3.81326 15.8221C3.76332 15.8221 3.71536 15.8416 3.67966 15.8766L2.74685 16.8094C2.71192 16.8451 2.69236 16.893 2.69236 16.943C2.69236 16.9929 2.71192 17.0409 2.74685 17.0766L4.20701 18.5367L2.67654 20.0672C2.64164 20.1024 2.62207 20.15 2.62207 20.1996C2.62207 20.2492 2.64164 20.2968 2.67654 20.332L3.66795 21.3234C3.7406 21.3961 3.86013 21.3961 3.93279 21.3234L9.87654 15.3797C11.1277 16.3502 12.6665 16.8763 14.25 16.875C18.1851 16.875 21.375 13.6852 21.375 9.75C21.375 5.81484 18.1851 2.625 14.25 2.625ZM18.0281 13.5281C17.0203 14.5383 15.6773 15.0938 14.25 15.0938C12.8226 15.0938 11.4797 14.5383 10.4719 13.5281C9.46169 12.5203 8.90623 11.1773 8.90623 9.75C8.90623 8.32266 9.46169 6.97969 10.4719 5.97188C11.4797 4.96172 12.8226 4.40625 14.25 4.40625C15.6773 4.40625 17.0203 4.96172 18.0281 5.97188C19.0383 6.97969 19.5937 8.32266 19.5937 9.75C19.5937 11.1773 19.0383 12.5203 18.0281 13.5281Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/listEventRegistrants.svg b/src/assets/svgs/listEventRegistrants.svg
new file mode 100644
index 0000000000..4d2874d641
--- /dev/null
+++ b/src/assets/svgs/listEventRegistrants.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 2" viewBox="0 0 128 160" x="0px" y="0px"><path d="M49.59,49.78c0,7.9,6.46,14.33,14.41,14.33s14.41-6.43,14.41-14.33-6.46-14.33-14.41-14.33-14.41,6.43-14.41,14.33Zm14.41,11.33c-6.29,0-11.41-5.08-11.41-11.33s5.12-11.33,11.41-11.33,11.41,5.08,11.41,11.33-5.12,11.33-11.41,11.33Z"/><path d="M88.67,39.1c0,6.72,5.49,12.18,12.24,12.18s12.24-5.46,12.24-12.18-5.49-12.18-12.24-12.18-12.24,5.46-12.24,12.18Zm21.49,0c0,5.06-4.15,9.18-9.24,9.18s-9.24-4.12-9.24-9.18,4.15-9.18,9.24-9.18,9.24,4.12,9.24,9.18Z"/><path d="M27.08,51.28c6.75,0,12.24-5.46,12.24-12.18s-5.49-12.18-12.24-12.18-12.24,5.46-12.24,12.18,5.49,12.18,12.24,12.18Zm0-21.36c5.1,0,9.24,4.12,9.24,9.18s-4.15,9.18-9.24,9.18-9.24-4.12-9.24-9.18,4.15-9.18,9.24-9.18Z"/><path d="M107.19,54.28h-12.54c-6.51,0-11.81,5.27-11.81,11.75v2.74c-1.53-.73-3.23-1.14-5.03-1.14-29.55,0-29.41-.39-32.64,1.14v-2.74c0-6.48-5.3-11.75-11.81-11.75h-12.54c-6.51,0-11.81,5.27-11.81,11.75v16.77c0,2.71,2.21,4.92,4.94,4.92h24.47v8.42c0,2.72,2.21,4.93,4.93,4.93h41.32c2.72,0,4.93-2.21,4.93-4.93v-8.42h24.47c2.72,0,4.94-2.21,4.94-4.92v-16.77c0-6.48-5.3-11.75-11.81-11.75Zm8.81,28.52c0,1.06-.87,1.92-1.94,1.92h-24.47c0-5.17,.63-9.38-3.29-13.46-.62-.64-.46,.27-.46-5.23,0-4.83,3.95-8.75,8.81-8.75h12.54c4.86,0,8.81,3.93,8.81,8.75v16.77Zm-104,0v-16.77c0-4.83,3.95-8.75,8.81-8.75h12.54c4.86,0,8.81,3.93,8.81,8.75,0,7.47,.34,3.09-2.21,7.56-1.93,3.37-1.54,5.96-1.54,11.13H13.94c-1.07,0-1.94-.86-1.94-1.92Zm29.41,13.34c0-18.7-.13-17.65,.42-19.4,1.15-3.57,4.51-6.11,8.37-6.11h27.61c4.3,0,7.95,3.15,8.64,7.28,.2,1.12,.14,.25,.14,18.24,0,1.06-.87,1.93-1.93,1.93H43.34c-1.06,0-1.93-.86-1.93-1.93Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/location.svg b/src/assets/svgs/location.svg
new file mode 100644
index 0000000000..b75f616dd6
--- /dev/null
+++ b/src/assets/svgs/location.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/logout.svg b/src/assets/svgs/logout.svg
new file mode 100644
index 0000000000..e71a973f0d
--- /dev/null
+++ b/src/assets/svgs/logout.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 21C4.45 21 3.979 20.804 3.587 20.412C3.195 20.02 2.99934 19.5493 3 19V5C3 4.45 3.196 3.979 3.588 3.587C3.98 3.195 4.45067 2.99934 5 3H12V5H5V19H12V21H5ZM16 17L14.625 15.55L17.175 13H9V11H17.175L14.625 8.45L16 7L21 12L16 17Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/media.svg b/src/assets/svgs/media.svg
new file mode 100644
index 0000000000..956c1e9a19
--- /dev/null
+++ b/src/assets/svgs/media.svg
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+    />
+  </svg>
\ No newline at end of file
diff --git a/src/assets/svgs/newChat.svg b/src/assets/svgs/newChat.svg
new file mode 100644
index 0000000000..e3609e2895
--- /dev/null
+++ b/src/assets/svgs/newChat.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7198 3.59098L15.8598 5.75095M15.0956 1.68812L9.30656 7.53137C9.00744 7.83286 8.80344 8.21699 8.72028 8.63533L8.18555 11.3371L10.8622 10.7963C11.2767 10.7127 11.6567 10.5076 11.9559 10.2056L17.745 4.36232C17.9189 4.18673 18.0569 3.97828 18.1511 3.74886C18.2452 3.51944 18.2937 3.27354 18.2937 3.02522C18.2937 2.7769 18.2452 2.53101 18.1511 2.30159C18.0569 2.07217 17.9189 1.86371 17.745 1.68812C17.571 1.51253 17.3645 1.37325 17.1372 1.27822C16.9099 1.18319 16.6663 1.13428 16.4203 1.13428C16.1743 1.13428 15.9307 1.18319 15.7034 1.27822C15.4761 1.37325 15.2696 1.51253 15.0956 1.68812Z" stroke="black" stroke-opacity="0.71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.2723 13.3778V16.4387C16.2723 16.9799 16.0593 17.4989 15.6802 17.8816C15.3011 18.2643 14.7868 18.4793 14.2507 18.4793H3.13153C2.59535 18.4793 2.08113 18.2643 1.70199 17.8816C1.32286 17.4989 1.10986 16.9799 1.10986 16.4387V5.2154C1.10986 4.6742 1.32286 4.15517 1.70199 3.77248C2.08113 3.3898 2.59535 3.1748 3.13153 3.1748H6.16402" stroke="black" stroke-opacity="0.71" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svgs/organizations.svg b/src/assets/svgs/organizations.svg
new file mode 100644
index 0000000000..5c616655d2
--- /dev/null
+++ b/src/assets/svgs/organizations.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.6666 25.6667H2.33331" stroke="current" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M19.8333 25.6667V7.00001C19.8333 4.79968 19.8333 3.70068 19.1497 3.01701C18.466 2.33334 17.367 2.33334 15.1667 2.33334H12.8333C10.633 2.33334 9.534 2.33334 8.85033 3.01701C8.16667 3.70068 8.16667 4.79968 8.16667 7.00001V25.6667M24.5 25.6667V13.4167C24.5 11.7775 24.5 10.9585 24.1068 10.3705C23.9366 10.1156 23.7177 9.89679 23.4628 9.72651C22.8748 9.33334 22.0547 9.33334 20.4167 9.33334M3.5 25.6667V13.4167C3.5 11.7775 3.5 10.9585 3.89317 10.3705C4.06345 10.1156 4.28228 9.89679 4.53717 9.72651C5.12517 9.33334 5.94533 9.33334 7.58333 9.33334" stroke="current" stroke-width="1.5"/>
+<path d="M14 25.6667V22.1667M11.6666 5.83334H16.3333M11.6666 9.33334H16.3333M11.6666 12.8333H16.3333M11.6666 16.3333H16.3333" stroke="current" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svgs/palisadoes.svg b/src/assets/svgs/palisadoes.svg
new file mode 100644
index 0000000000..dc57b69a42
--- /dev/null
+++ b/src/assets/svgs/palisadoes.svg
@@ -0,0 +1,12 @@
+<svg width="16769" height="12545" viewBox="0 0 16769 12545" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12708.3 1869.67L12813.1 4800.6C12816.3 4889.5 12874.2 4967.15 12958.5 4995.59C12973.9 5000.77 12989.8 5004.19 13005.9 5005.78L13071.3 5012.22C13139.3 5018.91 13207.7 5018.63 13275.6 5011.37L13326.8 5005.9C13342.4 5004.23 13357.8 5000.78 13372.7 4995.63C13454.7 4967.2 13510.3 4890.75 13512.2 4803.98L13547.3 3148.39L13581.6 1870.82C13584 1782.27 13527.2 1702.52 13443 1675.11C13414 1665.66 13384 1658.83 13353.7 1654.83L13274.5 1644.35C13187.4 1632.83 13099.2 1632.83 13012.2 1644.35L12933.1 1654.81C12902.8 1658.83 12872.9 1665.66 12843.8 1675.21C12760.4 1702.64 12705.1 1781.91 12708.3 1869.67Z" fill="#F7CB47"/>
+<rect x="12684.5" y="5228.13" width="919.466" height="905.867" rx="292" fill="#F7CB47"/>
+<path d="M8950 5272.91V5790.29C8950 5827.22 8988.65 5851.41 9021.86 5835.26L11634.4 4565.23C11655 4555.26 11669.8 4536.48 11674.8 4514.22L11678.4 4498.33C11718.6 4319.17 11717.4 4133.18 11674.7 3954.57C11669.8 3933.83 11655.8 3916.42 11636.5 3907.17L9021.67 2649.68C8988.47 2633.72 8950 2657.91 8950 2694.74V3171.04C8950 3237.25 8988.44 3297.43 9048.5 3325.28L10932.5 4198.69C10955.8 4209.45 10955.7 4242.48 10932.5 4253.17L9049.03 5118.43C8988.68 5146.16 8950 5206.49 8950 5272.91Z" fill="#F7CB47"/>
+<path d="M7739.95 2951.77L7815.44 5145.01C7817.63 5208.68 7858.65 5264.48 7918.77 5285.57C7930.23 5289.59 7942.11 5292.25 7954.19 5293.48L7991.88 5297.34C8046.15 5302.9 8100.85 5302.66 8155.07 5296.64L8182.57 5293.58C8194.29 5292.28 8205.81 5289.6 8216.9 5285.6C8275.39 5264.52 8314.83 5209.57 8316.1 5147.42L8341.4 3909.53L8366.05 2953C8367.69 2889.62 8327.86 2832.56 8267.81 2812.24C8246.14 2804.91 8223.83 2799.65 8201.17 2796.53L8187.59 2794.66C8097.55 2782.28 8006.25 2782.28 7916.21 2794.66L7902.59 2796.54C7879.96 2799.65 7857.68 2804.94 7836.07 2812.32C7776.82 2832.57 7737.79 2889.19 7739.95 2951.77Z" fill="#55AE58"/>
+<rect x="7723.12" y="5459.07" width="658.878" height="674.928" rx="292" fill="#55AE58"/>
+<path d="M5047 5518.43V5856.15C5047 5893.42 5086.3 5917.59 5119.55 5900.78L6969.31 4965.84C6984.87 4957.98 6996.05 4943.51 6999.73 4926.46L7002.29 4914.61C7031.06 4781.46 7030.16 4643.62 6999.68 4510.86C6996.03 4494.96 6985.46 4481.53 6970.88 4474.24L5119.36 3548.47C5086.12 3531.84 5047 3556.02 5047 3593.19V3900.52C5047 3965.8 5084.38 4025.32 5143.19 4053.66L6453.61 4685.29C6476.29 4696.22 6476.23 4728.54 6453.52 4739.39L5143.73 5365.03C5084.63 5393.26 5047 5452.93 5047 5518.43Z" fill="#55AE58"/>
+<path d="M4060.02 4022.95L4111.46 5531.26C4112.93 5574.59 4140.78 5612.61 4181.66 5627.08C4189.53 5629.86 4197.7 5631.71 4206.01 5632.56L4231.51 5635.2C4268.46 5639.02 4305.72 5638.86 4342.63 5634.72L4361.2 5632.63C4369.26 5631.73 4377.19 5629.87 4384.81 5627.1C4424.58 5612.63 4451.35 5575.2 4452.21 5532.9L4469.44 4681.75L4486.25 4023.79C4487.35 3980.7 4460.33 3941.89 4419.54 3927.96C4404.67 3922.88 4389.34 3919.24 4373.77 3917.08L4364.77 3915.83C4303.48 3907.32 4241.3 3907.32 4180 3915.83L4170.97 3917.08C4155.43 3919.24 4140.12 3922.9 4125.28 3928.02C4085.04 3941.9 4058.57 3980.41 4060.02 4022.95Z" fill="#404143"/>
+<rect x="4048.59" y="5746.31" width="448.488" height="463.686" rx="224.244" fill="#404143"/>
+<path d="M2227 5820.21V5993.33C2227 6030.67 2266.45 6054.84 2299.72 6037.87L3535.26 5407.57C3546 5402.09 3553.7 5392.07 3556.22 5380.29L3557.96 5372.14C3577.53 5280.72 3576.92 5186.14 3556.18 5094.98C3553.68 5083.99 3546.41 5074.69 3536.35 5069.61L2299.53 4445.44C2266.27 4428.66 2227 4452.83 2227 4490.08V4642.58C2227 4707.63 2264.13 4766.99 2322.63 4795.45L3167.09 5206.27C3189.64 5217.23 3189.58 5249.38 3167 5260.27L2323.17 5667.08C2264.37 5695.43 2227 5754.94 2227 5820.21Z" fill="#404143"/>
+<path d="M2403.21 10971.4H2102.91V9140.3H2367.81L2382.46 9311.2C2436.17 9250.16 2500.86 9202.55 2576.55 9168.37C2652.23 9133.38 2734.83 9115.88 2824.35 9115.88C2938.28 9115.88 3040.01 9143.55 3129.53 9198.89C3219.86 9254.23 3290.66 9329.91 3341.93 9425.94C3394.01 9521.16 3420.05 9629.39 3420.05 9750.65C3420.05 9871.9 3394.01 9980.55 3341.93 10076.6C3290.66 10171.8 3219.86 10247.1 3129.53 10302.4C3040.01 10357.7 2938.28 10385.4 2824.35 10385.4C2740.53 10385.4 2662.81 10370.4 2591.2 10340.2C2519.58 10310.1 2456.92 10267.8 2403.21 10213.3V10971.4ZM2759.65 10114.4C2828.01 10114.4 2888.64 10099 2941.54 10068C2995.25 10036.3 3036.75 9993.16 3066.05 9938.64C3096.16 9883.3 3111.21 9820.23 3111.21 9749.43C3111.21 9678.63 3096.16 9615.96 3066.05 9561.44C3035.94 9506.1 2994.43 9462.97 2941.54 9432.04C2888.64 9400.31 2828.01 9384.44 2759.65 9384.44C2695.36 9384.44 2637.18 9399.09 2585.09 9428.38C2533.01 9456.87 2491.1 9496.34 2459.36 9546.79C2427.62 9596.43 2408.9 9653.4 2403.21 9717.69V9784.83C2408.9 9849.12 2427.21 9906.08 2458.14 9955.73C2489.88 10005.4 2531.79 10044.4 2583.87 10072.9C2635.95 10100.6 2694.55 10114.4 2759.65 10114.4ZM4717.66 10361H4456.43L4439.34 10210.9C4394.58 10266.2 4338.84 10309.3 4272.1 10340.2C4205.37 10370.4 4131.32 10385.4 4049.94 10385.4C3963.67 10385.4 3886.77 10368.7 3819.22 10335.4C3751.68 10301.2 3698.37 10254.8 3659.31 10196.2C3621.06 10137.6 3601.94 10070.9 3601.94 9996.01C3601.94 9917.07 3622.69 9847.9 3664.19 9788.49C3706.51 9728.27 3763.88 9681.07 3836.31 9646.89C3909.55 9612.71 3992.97 9595.62 4086.56 9595.62C4143.52 9595.62 4200.49 9602.13 4257.46 9615.15C4315.24 9628.17 4368.54 9646.48 4417.37 9670.08V9631.02C4417.37 9577.31 4402.72 9530.92 4373.42 9491.86C4344.12 9452.8 4304.66 9422.69 4255.01 9401.53C4205.37 9379.55 4149.63 9368.57 4087.78 9368.57C4031.62 9368.57 3975.47 9378.33 3919.32 9397.87C3863.17 9416.58 3810.68 9444.66 3761.85 9482.09L3676.4 9246.5C3754.53 9203.37 3834.28 9170.81 3915.66 9148.84C3997.85 9126.87 4078.01 9115.88 4156.14 9115.88C4270.88 9115.88 4370.17 9138.67 4453.99 9184.24C4537.81 9229 4602.51 9293.29 4648.08 9377.11C4694.47 9460.12 4717.66 9558.18 4717.66 9671.3V10361ZM4112.19 10143.7C4165.09 10143.7 4213.92 10132.7 4258.68 10110.8C4304.25 10088.8 4341.28 10058.3 4369.76 10019.2C4399.06 9979.33 4414.52 9933.75 4416.15 9882.48V9869.06C4377.9 9841.39 4334.77 9820.23 4286.75 9805.58C4238.74 9790.12 4190.32 9782.39 4141.49 9782.39C4066.62 9782.39 4005.18 9799.48 3957.16 9833.66C3909.15 9867.02 3885.14 9910.97 3885.14 9965.49C3885.14 9998.86 3894.91 10029.4 3914.44 10057C3933.97 10083.9 3960.82 10105.1 3995 10120.5C4030 10136 4069.06 10143.7 4112.19 10143.7ZM5339 10361H5017.95V8481.12H5339V10361ZM5817.51 8816.81C5775.2 8816.81 5739.39 8802.16 5710.09 8772.87C5681.61 8742.75 5667.37 8706.54 5667.37 8664.22C5667.37 8622.72 5681.61 8587.32 5710.09 8558.02C5739.39 8527.91 5775.2 8512.86 5817.51 8512.86C5860.65 8512.86 5896.86 8527.91 5926.16 8558.02C5955.45 8587.32 5970.1 8622.72 5970.1 8664.22C5970.1 8706.54 5955.45 8742.75 5926.16 8772.87C5896.86 8802.16 5860.65 8816.81 5817.51 8816.81ZM5967.66 10361H5667.37V9140.3H5967.66V10361ZM6211.8 10256L6280.16 9994.79C6307.02 10021.6 6340.38 10046.1 6380.26 10068C6420.13 10090 6462.45 10107.5 6507.21 10120.5C6552.78 10132.7 6597.14 10138.8 6640.27 10138.8C6698.05 10138.8 6744.43 10127 6779.43 10103.4C6814.42 10079 6831.92 10047.3 6831.92 10008.2C6831.92 9977.29 6821.34 9951.66 6800.18 9931.31C6779.02 9910.15 6751.35 9891.84 6717.17 9876.38C6682.99 9860.1 6645.56 9844.24 6604.87 9828.77C6551.16 9809.24 6496.63 9786.05 6441.29 9759.19C6385.95 9731.52 6339.57 9695.31 6302.13 9650.55C6265.51 9604.98 6247.2 9544.76 6247.2 9469.89C6247.2 9397.46 6265.51 9334.8 6302.13 9281.9C6339.57 9229 6391.65 9188.31 6458.38 9159.83C6525.11 9130.53 6602.83 9115.88 6691.54 9115.88C6831.51 9115.88 6971.08 9150.88 7110.24 9220.86L7023.57 9467.45C6997.53 9447.91 6965.79 9430.01 6928.35 9413.73C6890.92 9397.46 6852.67 9384.44 6813.61 9374.67C6774.54 9364.91 6739.14 9360.02 6707.41 9360.02C6661.02 9360.02 6623.99 9370.2 6596.32 9390.54C6568.65 9410.89 6554.82 9437.74 6554.82 9471.11C6554.82 9493.89 6562.55 9514.65 6578.01 9533.36C6593.47 9551.27 6617.48 9568.76 6650.03 9585.85C6682.59 9602.94 6724.5 9622.07 6775.77 9643.23C6831.1 9664.39 6886.44 9689.21 6941.78 9717.69C6997.93 9745.36 7044.73 9782.39 7082.16 9828.77C7120.41 9874.35 7139.54 9934.97 7139.54 10010.7C7139.54 10085.5 7119.19 10151 7078.5 10207.2C7038.62 10263.3 6982.47 10307.3 6910.04 10339C6838.43 10370 6754.61 10385.4 6658.58 10385.4C6499.07 10385.4 6350.15 10342.3 6211.8 10256ZM8433.48 10361H8172.25L8155.16 10210.9C8110.4 10266.2 8054.66 10309.3 7987.92 10340.2C7921.19 10370.4 7847.14 10385.4 7765.76 10385.4C7679.49 10385.4 7602.59 10368.7 7535.04 10335.4C7467.5 10301.2 7414.19 10254.8 7375.13 10196.2C7336.88 10137.6 7317.76 10070.9 7317.76 9996.01C7317.76 9917.07 7338.51 9847.9 7380.01 9788.49C7422.33 9728.27 7479.7 9681.07 7552.13 9646.89C7625.38 9612.71 7708.79 9595.62 7802.38 9595.62C7859.34 9595.62 7916.31 9602.13 7973.28 9615.15C8031.06 9628.17 8084.36 9646.48 8133.19 9670.08V9631.02C8133.19 9577.31 8118.54 9530.92 8089.24 9491.86C8059.95 9452.8 8020.48 9422.69 7970.83 9401.53C7921.19 9379.55 7865.45 9368.57 7803.6 9368.57C7747.45 9368.57 7691.29 9378.33 7635.14 9397.87C7578.99 9416.58 7526.5 9444.66 7477.67 9482.09L7392.22 9246.5C7470.35 9203.37 7550.1 9170.81 7631.48 9148.84C7713.67 9126.87 7793.83 9115.88 7871.96 9115.88C7986.7 9115.88 8085.99 9138.67 8169.81 9184.24C8253.63 9229 8318.33 9293.29 8363.9 9377.11C8410.29 9460.12 8433.48 9558.18 8433.48 9671.3V10361ZM7828.01 10143.7C7880.91 10143.7 7929.74 10132.7 7974.5 10110.8C8020.07 10088.8 8057.1 10058.3 8085.58 10019.2C8114.88 9979.33 8130.34 9933.75 8131.97 9882.48V9869.06C8093.72 9841.39 8050.59 9820.23 8002.57 9805.58C7954.56 9790.12 7906.14 9782.39 7857.31 9782.39C7782.44 9782.39 7721 9799.48 7672.98 9833.66C7624.97 9867.02 7600.96 9910.97 7600.96 9965.49C7600.96 9998.86 7610.73 10029.4 7630.26 10057C7649.79 10083.9 7676.64 10105.1 7710.82 10120.5C7745.82 10136 7784.88 10143.7 7828.01 10143.7ZM9969.12 10361H9704.23L9688.36 10190.1C9635.47 10251.1 9571.18 10299.2 9495.49 10334.1C9419.81 10368.3 9337.61 10385.4 9248.91 10385.4C9134.16 10385.4 9031.62 10357.7 8941.29 10302.4C8850.96 10247.1 8779.75 10171.8 8727.67 10076.6C8676.4 9980.55 8650.77 9871.9 8650.77 9750.65C8650.77 9629.39 8676.4 9521.16 8727.67 9425.94C8779.75 9329.91 8850.96 9254.23 8941.29 9198.89C9031.62 9143.55 9134.16 9115.88 9248.91 9115.88C9332.73 9115.88 9410.45 9130.94 9482.06 9161.05C9553.68 9191.16 9615.93 9233.48 9668.83 9288V8529.95H9969.12V10361ZM9314.83 10115.6C9379.93 10115.6 9439.34 10101 9493.05 10071.7C9546.76 10041.6 9589.49 10000.5 9621.22 9948.4C9652.96 9896.32 9668.83 9836.91 9668.83 9770.18V9727.46C9668.83 9661.54 9652.96 9602.94 9621.22 9551.67C9589.49 9499.59 9546.76 9458.9 9493.05 9429.6C9439.34 9399.49 9379.93 9384.44 9314.83 9384.44C9246.47 9384.44 9185.43 9400.71 9131.72 9433.27C9078.01 9465 9035.69 9508.54 9004.77 9563.88C8973.85 9618.41 8958.38 9680.25 8958.38 9749.43C8958.38 9819.41 8973.85 9882.08 9004.77 9937.42C9035.69 9992.75 9078.01 10036.3 9131.72 10068C9185.43 10099.8 9246.47 10115.6 9314.83 10115.6ZM10861.5 10385.4C10736.9 10385.4 10625.5 10357.7 10527 10302.4C10429.3 10247.1 10352 10171.8 10295.1 10076.6C10238.9 9980.55 10210.8 9871.9 10210.8 9750.65C10210.8 9629.39 10238.9 9521.16 10295.1 9425.94C10352 9329.91 10429.3 9254.23 10527 9198.89C10625.5 9143.55 10736.9 9115.88 10861.5 9115.88C10985.2 9115.88 11095.8 9143.55 11193.5 9198.89C11291.1 9254.23 11367.6 9329.91 11423 9425.94C11479.1 9521.16 11507.2 9629.39 11507.2 9750.65C11507.2 9871.9 11479.1 9980.55 11423 10076.6C11367.6 10171.8 11291.1 10247.1 11193.5 10302.4C11095.8 10357.7 10985.2 10385.4 10861.5 10385.4ZM10859 10115.6C10924.1 10115.6 10982.3 10099.8 11033.6 10068C11084.8 10036.3 11125.1 9992.75 11154.4 9937.42C11184.5 9882.08 11199.6 9819.41 11199.6 9749.43C11199.6 9680.25 11184.5 9618.41 11154.4 9563.88C11125.1 9508.54 11084.8 9465 11033.6 9433.27C10982.3 9401.53 10924.1 9385.66 10859 9385.66C10794.7 9385.66 10736.5 9401.53 10684.5 9433.27C10633.2 9465 10592.5 9508.54 10562.4 9563.88C10533.1 9618.41 10518.4 9680.25 10518.4 9749.43C10518.4 9819.41 10533.1 9882.08 10562.4 9937.42C10592.5 9992.75 10633.2 10036.3 10684.5 10068C10736.5 10099.8 10794.7 10115.6 10859 10115.6ZM12856.1 10219.4C12703.9 10330.1 12537.5 10385.4 12356.8 10385.4C12225.8 10385.4 12108.2 10356.9 12004 10300C11899.9 10243 11817.3 10165.3 11756.2 10066.8C11696 9967.53 11665.9 9856.04 11665.9 9732.34C11665.9 9614.34 11693.2 9508.95 11747.7 9416.18C11803 9323.4 11878.3 9250.16 11973.5 9196.45C12069.5 9142.74 12177.8 9115.88 12298.2 9115.88C12423.6 9115.88 12533.4 9145.59 12627.8 9204.99C12723 9263.59 12797.1 9345.38 12850 9450.36C12902.9 9554.52 12929.3 9675.78 12929.3 9814.12V9853.19H11989.4C12004 9908.53 12029.7 9957.35 12066.3 9999.67C12103.7 10042 12150.1 10074.9 12205.5 10098.5C12260.8 10122.1 12323 10133.9 12392.2 10133.9C12522.4 10133.9 12642.9 10091.6 12753.5 10007L12856.1 10219.4ZM11977.2 9677.41H12651C12644.5 9616.37 12625.8 9563.07 12594.9 9517.49C12564.7 9471.92 12525.3 9436.52 12476.4 9411.29C12428.4 9385.25 12374.3 9372.23 12314.1 9372.23C12253.1 9372.23 12198.5 9385.25 12150.5 9411.29C12102.5 9437.33 12063.4 9473.55 12033.3 9519.94C12003.2 9565.51 11984.5 9618 11977.2 9677.41ZM13086.8 10256L13155.2 9994.79C13182 10021.6 13215.4 10046.1 13255.3 10068C13295.1 10090 13337.5 10107.5 13382.2 10120.5C13427.8 10132.7 13472.1 10138.8 13515.3 10138.8C13573 10138.8 13619.4 10127 13654.4 10103.4C13689.4 10079 13706.9 10047.3 13706.9 10008.2C13706.9 9977.29 13696.3 9951.66 13675.2 9931.31C13654 9910.15 13626.4 9891.84 13592.2 9876.38C13558 9860.1 13520.6 9844.24 13479.9 9828.77C13426.2 9809.24 13371.6 9786.05 13316.3 9759.19C13261 9731.52 13214.6 9695.31 13177.1 9650.55C13140.5 9604.98 13122.2 9544.76 13122.2 9469.89C13122.2 9397.46 13140.5 9334.8 13177.1 9281.9C13214.6 9229 13266.7 9188.31 13333.4 9159.83C13400.1 9130.53 13477.8 9115.88 13566.5 9115.88C13706.5 9115.88 13846.1 9150.88 13985.2 9220.86L13898.6 9467.45C13872.5 9447.91 13840.8 9430.01 13803.4 9413.73C13765.9 9397.46 13727.7 9384.44 13688.6 9374.67C13649.5 9364.91 13614.1 9360.02 13582.4 9360.02C13536 9360.02 13499 9370.2 13471.3 9390.54C13443.7 9410.89 13429.8 9437.74 13429.8 9471.11C13429.8 9493.89 13437.5 9514.65 13453 9533.36C13468.5 9551.27 13492.5 9568.76 13525 9585.85C13557.6 9602.94 13599.5 9622.07 13650.8 9643.23C13706.1 9664.39 13761.4 9689.21 13816.8 9717.69C13872.9 9745.36 13919.7 9782.39 13957.2 9828.77C13995.4 9874.35 14014.5 9934.97 14014.5 10010.7C14014.5 10085.5 13994.2 10151 13953.5 10207.2C13913.6 10263.3 13857.5 10307.3 13785 10339C13713.4 10370 13629.6 10385.4 13533.6 10385.4C13374.1 10385.4 13225.1 10342.3 13086.8 10256Z" fill="#7F7F7F"/>
+</svg>
diff --git a/src/assets/svgs/people.svg b/src/assets/svgs/people.svg
new file mode 100644
index 0000000000..cd8134aa67
--- /dev/null
+++ b/src/assets/svgs/people.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 11.2C10.9391 11.2 9.92172 10.7785 9.17157 10.0284C8.42143 9.27823 8 8.26082 8 7.19995C8 6.13909 8.42143 5.12167 9.17157 4.37152C9.92172 3.62138 10.9391 3.19995 12 3.19995C13.0609 3.19995 14.0783 3.62138 14.8284 4.37152C15.5786 5.12167 16 6.13909 16 7.19995C16 8.26082 15.5786 9.27823 14.8284 10.0284C14.0783 10.7785 13.0609 11.2 12 11.2ZM12 4.79995C10.672 4.79995 9.6 5.87195 9.6 7.19995C9.6 8.52795 10.672 9.59995 12 9.59995C13.328 9.59995 14.4 8.52795 14.4 7.19995C14.4 5.87195 13.328 4.79995 12 4.79995Z" fill="currentColor"/>
+    <path d="M21.6 17.6C21.152 17.6 20.8 17.248 20.8 16.8C20.8 16.352 21.152 16 21.6 16C22.048 16 22.4 15.648 22.4 15.2C22.4 14.1391 21.9786 13.1217 21.2284 12.3715C20.4783 11.6214 19.4609 11.2 18.4 11.2H16.8C16.352 11.2 16 10.848 16 10.4C16 9.95195 16.352 9.59995 16.8 9.59995C18.128 9.59995 19.2 8.52795 19.2 7.19995C19.2 5.87195 18.128 4.79995 16.8 4.79995C16.352 4.79995 16 4.44795 16 3.99995C16 3.55195 16.352 3.19995 16.8 3.19995C17.8609 3.19995 18.8783 3.62138 19.6284 4.37152C20.3786 5.12167 20.8 6.13909 20.8 7.19995C20.8 8.19195 20.448 9.08795 19.84 9.79195C22.224 10.432 24 12.608 24 15.2C24 16.528 22.928 17.6 21.6 17.6ZM2.4 17.6C1.072 17.6 0 16.528 0 15.2C0 12.608 1.76 10.432 4.16 9.79195C3.568 9.08795 3.2 8.19195 3.2 7.19995C3.2 6.13909 3.62143 5.12167 4.37157 4.37152C5.12172 3.62138 6.13913 3.19995 7.2 3.19995C7.648 3.19995 8 3.55195 8 3.99995C8 4.44795 7.648 4.79995 7.2 4.79995C5.872 4.79995 4.8 5.87195 4.8 7.19995C4.8 8.52795 5.872 9.59995 7.2 9.59995C7.648 9.59995 8 9.95195 8 10.4C8 10.848 7.648 11.2 7.2 11.2H5.6C4.53913 11.2 3.52172 11.6214 2.77157 12.3715C2.02143 13.1217 1.6 14.1391 1.6 15.2C1.6 15.648 1.952 16 2.4 16C2.848 16 3.2 16.352 3.2 16.8C3.2 17.248 2.848 17.6 2.4 17.6ZM16.8 22.4H7.2C5.872 22.4 4.8 21.328 4.8 20V18.4C4.8 15.312 7.312 12.8 10.4 12.8H13.6C16.688 12.8 19.2 15.312 19.2 18.4V20C19.2 21.328 18.128 22.4 16.8 22.4ZM10.4 14.4C9.33913 14.4 8.32172 14.8214 7.57157 15.5715C6.82143 16.3217 6.4 17.3391 6.4 18.4V20C6.4 20.448 6.752 20.8 7.2 20.8H16.8C17.248 20.8 17.6 20.448 17.6 20V18.4C17.6 17.3391 17.1786 16.3217 16.4284 15.5715C15.6783 14.8214 14.6609 14.4 13.6 14.4H10.4Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/svgs/plugins.svg b/src/assets/svgs/plugins.svg
new file mode 100644
index 0000000000..7da1701dc1
--- /dev/null
+++ b/src/assets/svgs/plugins.svg
@@ -0,0 +1,7 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.48838 7.83245C9.02413 7.50735 8.67606 7.04226 8.49506 6.50518C8.31406 5.9681 8.30962 5.3872 8.48239 4.84741C8.65516 4.30763 8.99609 3.83727 9.45531 3.50512C9.91454 3.17296 10.468 2.99642 11.0347 3.00132C11.6015 3.00622 12.1518 3.19229 12.6052 3.53233C13.0586 3.87238 13.3913 4.34855 13.5548 4.89124C13.7182 5.43393 13.7037 6.01467 13.5135 6.54854C13.3232 7.08241 12.9671 7.54142 12.4973 7.85845M4.40917 13.8921C4.75013 13.4393 5.22697 13.1075 5.76999 12.9452C6.31301 12.7829 6.89371 12.7985 7.4272 12.9899C7.96069 13.1812 8.41898 13.5382 8.73507 14.0086C9.05115 14.479 9.20845 15.0383 9.18396 15.6045C9.15948 16.1707 8.95449 16.7143 8.59898 17.1557C8.24346 17.5971 7.75607 17.9131 7.20805 18.0577C6.66004 18.2023 6.08015 18.1677 5.55317 17.9591C5.0262 17.7505 4.57977 17.3788 4.27917 16.8983" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9.48838 7.83252C9.66713 8.1651 9.63247 8.73169 8.78963 8.83244H3.56255V13.2958C3.54707 13.4019 3.56132 13.5103 3.60372 13.6088C3.64611 13.7073 3.715 13.7922 3.80272 13.8539C3.89044 13.9157 3.99356 13.9519 4.10062 13.9585C4.20768 13.9652 4.31449 13.942 4.40918 13.8916M4.27972 16.8979C4.1918 16.8569 4.0941 16.8416 3.99787 16.8538C3.90165 16.8659 3.81081 16.905 3.73585 16.9666C3.66089 17.0281 3.60484 17.1096 3.57418 17.2016C3.54352 17.2936 3.53949 17.3924 3.56255 17.4866V21.7821H14.6667" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M10.1866 18.662L11.5689 21.067C13.2308 20.0845 14.9283 21.0714 14.9283 22.9992H17.6892C17.6892 21.0714 19.2265 20.1749 21.0562 21.0714L22.4391 18.661C20.7334 17.6822 20.7323 15.7695 22.4391 14.788L21.0562 12.3847C19.4123 13.3607 17.6892 12.3868 17.6892 10.4498H14.9283C14.9283 12.3868 13.2313 13.3607 11.5678 12.3868L10.1866 14.7447C11.9351 15.7685 11.8333 17.7157 10.1866 18.662Z" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.3128 18.9821C17.5597 18.9821 18.5705 17.9713 18.5705 16.7245C18.5705 15.4776 17.5597 14.4668 16.3128 14.4668C15.066 14.4668 14.0552 15.4776 14.0552 16.7245C14.0552 17.9713 15.066 18.9821 16.3128 18.9821Z" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12.4973 7.85852C12.2438 8.06219 12.1832 8.72952 13.1398 8.83244H17.6892V10.4499" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svgs/post.svg b/src/assets/svgs/post.svg
new file mode 100644
index 0000000000..34e468523b
--- /dev/null
+++ b/src/assets/svgs/post.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.13486 24.2541V4.40982C2.13486 3.80347 2.34407 3.28421 2.7625 2.85204C3.18094 2.41988 3.68334 2.20416 4.26971 2.2049H21.3485C21.9356 2.2049 22.4384 2.42098 22.8568 2.85314C23.2752 3.28531 23.4841 3.8042 23.4834 4.40982V17.6394C23.4834 18.2457 23.2742 18.765 22.8557 19.1971C22.4373 19.6293 21.9349 19.845 21.3485 19.8443H6.40456L2.13486 24.2541ZM4.26971 18.9347L5.52394 17.6394H21.3485V4.40982H4.26971V18.9347Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/posts.svg b/src/assets/svgs/posts.svg
new file mode 100644
index 0000000000..181e25855a
--- /dev/null
+++ b/src/assets/svgs/posts.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 5V19H5V5H19ZM21 3H3V21H21V3ZM17 17H7V16H17V17ZM17 15H7V14H17V15ZM17 12H7V7H17V12Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/requests.svg b/src/assets/svgs/requests.svg
new file mode 100644
index 0000000000..ccf700e5fe
--- /dev/null
+++ b/src/assets/svgs/requests.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.713 11.493l-.035-.5.035.5zM1.5 1h12V0h-12v1zm12.5.5v12h1v-12h-1zM13.5 14h-12v1h12v-1zM1 13.5v-12H0v12h1zm.5.5a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1zm12.5-.5a.5.5 0 01-.5.5v1a1.5 1.5 0 001.5-1.5h-1zM13.5 1a.5.5 0 01.5.5h1A1.5 1.5 0 0013.5 0v1zm-12-1A1.5 1.5 0 000 1.5h1a.5.5 0 01.5-.5V0zm6 12c.083 0 .166-.003.248-.009l-.07-.997A2.546 2.546 0 017.5 11v1zm-.823-.098c.264.064.54.098.823.098v-1c-.203 0-.4-.024-.589-.07l-.234.973zm.234-.972c-.969-.233-1.9-.895-2.97-1.586C2.924 8.687 1.771 8 .5 8v1c.938 0 1.858.512 2.899 1.184.987.638 2.099 1.434 3.278 1.719l.234-.973zm.837 1.061c1.386-.097 2.7-.927 3.865-1.632C12.843 9.616 13.922 9 15 9V8c-1.407 0-2.732.794-3.905 1.503-1.237.749-2.324 1.414-3.417 1.49l.07.998z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svgs/roles.svg b/src/assets/svgs/roles.svg
new file mode 100644
index 0000000000..bc301784f9
--- /dev/null
+++ b/src/assets/svgs/roles.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0525 15.75L16.5 11.25L21.0525 6.75L22.125 7.8075L18.645 11.25L22.125 14.6925L21.0525 15.75ZM16.5 22.5H15V18.75C15 17.7554 14.6049 16.8016 13.9017 16.0983C13.1984 15.3951 12.2446 15 11.25 15H6.75C5.75544 15 4.80161 15.3951 4.09835 16.0983C3.39509 16.8016 3 17.7554 3 18.75V22.5H1.5V18.75C1.5 17.3576 2.05312 16.0223 3.03769 15.0377C4.02226 14.0531 5.35761 13.5 6.75 13.5H11.25C12.6424 13.5 13.9777 14.0531 14.9623 15.0377C15.9469 16.0223 16.5 17.3576 16.5 18.75V22.5ZM9 3C9.74168 3 10.4667 3.21993 11.0834 3.63199C11.7001 4.04404 12.1807 4.62971 12.4645 5.31494C12.7484 6.00016 12.8226 6.75416 12.6779 7.48159C12.5333 8.20902 12.1761 8.8772 11.6517 9.40165C11.1272 9.9261 10.459 10.2833 9.73159 10.4279C9.00416 10.5726 8.25016 10.4984 7.56494 10.2145C6.87971 9.93072 6.29404 9.45007 5.88199 8.83339C5.46993 8.2167 5.25 7.49168 5.25 6.75C5.25 5.75544 5.64509 4.80161 6.34835 4.09835C7.05161 3.39509 8.00544 3 9 3ZM9 1.5C7.96165 1.5 6.94661 1.80791 6.08326 2.38478C5.2199 2.96166 4.54699 3.7816 4.14963 4.74091C3.75227 5.70022 3.6483 6.75582 3.85088 7.77422C4.05345 8.79262 4.55346 9.72808 5.28769 10.4623C6.02191 11.1965 6.95738 11.6966 7.97578 11.8991C8.99418 12.1017 10.0498 11.9977 11.0091 11.6004C11.9684 11.203 12.7883 10.5301 13.3652 9.66674C13.9421 8.80339 14.25 7.78835 14.25 6.75C14.25 5.35761 13.6969 4.02226 12.7123 3.03769C11.7277 2.05312 10.3924 1.5 9 1.5Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/settings.svg b/src/assets/svgs/settings.svg
new file mode 100644
index 0000000000..fc111cfc08
--- /dev/null
+++ b/src/assets/svgs/settings.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="1.5"/>
+    <path d="M13.765 2.152C13.398 2 12.932 2 12 2C11.068 2 10.602 2 10.235 2.152C9.9922 2.25251 9.77158 2.3999 9.58575 2.58572C9.39992 2.77155 9.25254 2.99218 9.15202 3.235C9.06002 3.458 9.02302 3.719 9.00902 4.098C9.00279 4.37199 8.92702 4.6399 8.78884 4.87657C8.65065 5.11324 8.45457 5.31091 8.21902 5.451C7.97992 5.58504 7.71067 5.6561 7.43656 5.6575C7.16245 5.6589 6.89248 5.59059 6.65202 5.459C6.31602 5.281 6.07302 5.183 5.83202 5.151C5.30634 5.08187 4.77472 5.22431 4.35402 5.547C4.04002 5.79 3.80602 6.193 3.34002 7C2.87402 7.807 2.64002 8.21 2.58902 8.605C2.55466 8.86545 2.57194 9.13012 2.63989 9.38389C2.70784 9.63767 2.82511 9.87556 2.98502 10.084C3.13302 10.276 3.34002 10.437 3.66102 10.639C4.13402 10.936 4.43802 11.442 4.43802 12C4.43802 12.558 4.13402 13.064 3.66102 13.36C3.34002 13.563 3.13202 13.724 2.98502 13.916C2.82511 14.1244 2.70784 14.3623 2.63989 14.6161C2.57194 14.8699 2.55466 15.1345 2.58902 15.395C2.64102 15.789 2.87402 16.193 3.33902 17C3.80602 17.807 4.03902 18.21 4.35402 18.453C4.56246 18.6129 4.80036 18.7302 5.05413 18.7981C5.3079 18.8661 5.57257 18.8834 5.83302 18.849C6.07302 18.817 6.31602 18.719 6.65202 18.541C6.89248 18.4094 7.16245 18.3411 7.43656 18.3425C7.71067 18.3439 7.97992 18.415 8.21902 18.549C8.70202 18.829 8.98902 19.344 9.00902 19.902C9.02302 20.282 9.05902 20.542 9.15202 20.765C9.25254 21.0078 9.39992 21.2284 9.58575 21.4143C9.77158 21.6001 9.9922 21.7475 10.235 21.848C10.602 22 11.068 22 12 22C12.932 22 13.398 22 13.765 21.848C14.0078 21.7475 14.2285 21.6001 14.4143 21.4143C14.6001 21.2284 14.7475 21.0078 14.848 20.765C14.94 20.542 14.977 20.282 14.991 19.902C15.011 19.344 15.298 18.828 15.781 18.549C16.0201 18.415 16.2894 18.3439 16.5635 18.3425C16.8376 18.3411 17.1076 18.4094 17.348 18.541C17.684 18.719 17.927 18.817 18.167 18.849C18.4275 18.8834 18.6921 18.8661 18.9459 18.7981C19.1997 18.7302 19.4376 18.6129 19.646 18.453C19.961 18.211 20.194 17.807 20.66 17C21.126 16.193 21.36 15.79 21.411 15.395C21.4454 15.1345 21.4281 14.8699 21.3602 14.6161C21.2922 14.3623 21.1749 14.1244 21.015 13.916C20.867 13.724 20.66 13.563 20.339 13.361C20.1048 13.2186 19.9105 13.019 19.7746 12.7809C19.6387 12.5428 19.5655 12.2741 19.562 12C19.562 11.442 19.866 10.936 20.339 10.64C20.66 10.437 20.868 10.276 21.015 10.084C21.1749 9.87556 21.2922 9.63767 21.3602 9.38389C21.4281 9.13012 21.4454 8.86545 21.411 8.605C21.359 8.211 21.126 7.807 20.661 7C20.194 6.193 19.961 5.79 19.646 5.547C19.4376 5.38709 19.1997 5.26981 18.9459 5.20187C18.6921 5.13392 18.4275 5.11664 18.167 5.151C17.927 5.183 17.684 5.281 17.347 5.459C17.1067 5.59042 16.8369 5.65862 16.563 5.65722C16.2891 5.65582 16.02 5.58486 15.781 5.451C15.5455 5.31091 15.3494 5.11324 15.2112 4.87657C15.073 4.6399 14.9973 4.37199 14.991 4.098C14.977 3.718 14.941 3.458 14.848 3.235C14.7475 2.99218 14.6001 2.77155 14.4143 2.58572C14.2285 2.3999 14.0078 2.25251 13.765 2.152Z" stroke="currentColor" stroke-width="1.5"/>
+</svg>
diff --git a/src/assets/svgs/social-icons/Facebook-Logo.svg b/src/assets/svgs/social-icons/Facebook-Logo.svg
new file mode 100644
index 0000000000..a70f112dc7
--- /dev/null
+++ b/src/assets/svgs/social-icons/Facebook-Logo.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#1778F2"/>
+<path d="M28 18C28 12.48 23.52 8 18 8C12.48 8 8 12.48 8 18C8 22.84 11.44 26.87 16 27.8V21H14V18H16V15.5C16 13.57 17.57 12 19.5 12H22V15H20C19.45 15 19 15.45 19 16V18H22V21H19V27.95C24.05 27.45 28 23.19 28 18Z" fill="white"/>
+</svg>
diff --git a/src/assets/svgs/social-icons/Github-Logo.svg b/src/assets/svgs/social-icons/Github-Logo.svg
new file mode 100644
index 0000000000..7679af859c
--- /dev/null
+++ b/src/assets/svgs/social-icons/Github-Logo.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#24292D"/>
+<path d="M18 8C16.6868 8 15.3864 8.25866 14.1732 8.7612C12.9599 9.26375 11.8575 10.0003 10.9289 10.9289C9.05357 12.8043 8 15.3478 8 18C8 22.42 10.87 26.17 14.84 27.5C15.34 27.58 15.5 27.27 15.5 27V25.31C12.73 25.91 12.14 23.97 12.14 23.97C11.68 22.81 11.03 22.5 11.03 22.5C10.12 21.88 11.1 21.9 11.1 21.9C12.1 21.97 12.63 22.93 12.63 22.93C13.5 24.45 14.97 24 15.54 23.76C15.63 23.11 15.89 22.67 16.17 22.42C13.95 22.17 11.62 21.31 11.62 17.5C11.62 16.39 12 15.5 12.65 14.79C12.55 14.54 12.2 13.5 12.75 12.15C12.75 12.15 13.59 11.88 15.5 13.17C16.29 12.95 17.15 12.84 18 12.84C18.85 12.84 19.71 12.95 20.5 13.17C22.41 11.88 23.25 12.15 23.25 12.15C23.8 13.5 23.45 14.54 23.35 14.79C24 15.5 24.38 16.39 24.38 17.5C24.38 21.32 22.04 22.16 19.81 22.41C20.17 22.72 20.5 23.33 20.5 24.26V27C20.5 27.27 20.66 27.59 21.17 27.5C25.14 26.16 28 22.42 28 18C28 16.6868 27.7413 15.3864 27.2388 14.1732C26.7362 12.9599 25.9997 11.8575 25.0711 10.9289C24.1425 10.0003 23.0401 9.26375 21.8268 8.7612C20.6136 8.25866 19.3132 8 18 8Z" fill="white"/>
+</svg>
diff --git a/src/assets/svgs/social-icons/Instagram-Logo.svg b/src/assets/svgs/social-icons/Instagram-Logo.svg
new file mode 100644
index 0000000000..cbf278ae75
--- /dev/null
+++ b/src/assets/svgs/social-icons/Instagram-Logo.svg
@@ -0,0 +1,23 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_921_2571)">
+<path d="M27.5625 0H8.4375C3.7776 0 0 3.7776 0 8.4375V27.5625C0 32.2224 3.7776 36 8.4375 36H27.5625C32.2224 36 36 32.2224 36 27.5625V8.4375C36 3.7776 32.2224 0 27.5625 0Z" fill="url(#paint0_radial_921_2571)"/>
+<path d="M27.5625 0H8.4375C3.7776 0 0 3.7776 0 8.4375V27.5625C0 32.2224 3.7776 36 8.4375 36H27.5625C32.2224 36 36 32.2224 36 27.5625V8.4375C36 3.7776 32.2224 0 27.5625 0Z" fill="url(#paint1_radial_921_2571)"/>
+<path d="M18.001 7C15.0136 7 14.6386 7.01309 13.4654 7.06644C12.2943 7.12012 11.4949 7.30547 10.7956 7.57749C10.072 7.85843 9.45828 8.2343 8.8469 8.84589C8.23497 9.45738 7.8591 10.0711 7.57728 10.7943C7.30448 11.4939 7.11891 12.2936 7.06622 13.4641C7.01375 14.6374 7 15.0125 7 18C7 20.9875 7.0132 21.3612 7.06644 22.5345C7.12034 23.7055 7.30569 24.5049 7.5775 25.2043C7.85866 25.9278 8.23453 26.5415 8.84613 27.1529C9.4574 27.7648 10.0711 28.1416 10.7941 28.4225C11.4941 28.6945 12.2935 28.8799 13.4644 28.9336C14.6377 28.9869 15.0124 29 17.9997 29C20.9874 29 21.3612 28.9869 22.5344 28.9336C23.7055 28.8799 24.5057 28.6945 25.2057 28.4225C25.9289 28.1416 26.5417 27.7648 27.1529 27.1529C27.7648 26.5415 28.1406 25.9278 28.4225 25.2046C28.6929 24.5049 28.8786 23.7053 28.9336 22.5347C28.9862 21.3615 29 20.9875 29 18C29 15.0125 28.9862 14.6377 28.9336 13.4643C28.8786 12.2933 28.6929 11.494 28.4225 10.7946C28.1406 10.0711 27.7648 9.45738 27.1529 8.84589C26.5411 8.23408 25.9291 7.85821 25.205 7.5776C24.5037 7.30547 23.7039 7.12001 22.5329 7.06644C21.3595 7.01309 20.9859 7 17.9976 7H18.001ZM17.0142 8.98091C17.0142 8.98167 17.0148 8.98229 17.0156 8.98229C17.3081 8.98185 17.6345 8.98229 18.001 8.98229C20.9381 8.98229 21.2861 8.99285 22.446 9.04554C23.5185 9.0946 24.1006 9.27379 24.4883 9.42438C25.0017 9.62369 25.3677 9.86206 25.7525 10.2472C26.1375 10.6322 26.3757 10.9988 26.5756 11.5122C26.7262 11.8994 26.9056 12.4815 26.9544 13.554C27.0071 14.7136 27.0186 15.0618 27.0186 17.9975C27.0186 20.9331 27.0071 21.2815 26.9544 22.441C26.9054 23.5135 26.7262 24.0956 26.5756 24.4829C26.3763 24.9963 26.1375 25.3618 25.7525 25.7466C25.3675 26.1316 25.0019 26.3698 24.4883 26.5692C24.101 26.7205 23.5185 26.8992 22.446 26.9483C21.2864 27.001 20.9381 27.0124 18.001 27.0124C15.0638 27.0124 14.7156 27.001 13.5561 26.9483C12.4836 26.8988 11.9015 26.7196 11.5134 26.569C11.0001 26.3696 10.6334 26.1313 10.2484 25.7463C9.86341 25.3613 9.62515 24.9956 9.42528 24.482C9.27469 24.0947 9.09528 23.5126 9.04644 22.4401C8.99375 21.2805 8.98319 20.9322 8.98319 17.9947C8.98319 15.0573 8.99375 14.7108 9.04644 13.5512C9.0955 12.4787 9.27469 11.8966 9.42528 11.5089C9.62471 10.9955 9.86341 10.6289 10.2485 10.2439C10.6335 9.85887 11.0001 9.6205 11.5135 9.42075C11.9013 9.2695 12.4836 9.09075 13.5561 9.04147C14.5706 8.99561 14.9639 8.98186 17.0128 8.97954C17.0135 8.97954 17.0142 8.98016 17.0142 8.98091ZM23.8728 10.8085C23.8728 10.8086 23.8727 10.8087 23.8726 10.8087C23.1439 10.8088 22.5528 11.3995 22.5528 12.1283C22.5528 12.857 23.144 13.4482 23.8728 13.4482C24.6015 13.4482 25.1928 12.857 25.1928 12.1283C25.1928 11.3996 24.6017 10.8084 23.873 10.8083C23.8729 10.8083 23.8728 10.8084 23.8728 10.8085ZM18.001 12.351C14.8814 12.351 12.352 14.8803 12.352 18C12.352 21.1197 14.8814 23.6478 18.001 23.6478C21.1207 23.6478 23.6492 21.1197 23.6492 18C23.6492 14.8804 21.1205 12.351 18.0008 12.351H18.001ZM18.001 14.3333C20.026 14.3333 21.6677 15.9748 21.6677 18C21.6677 20.025 20.026 21.6667 18.001 21.6667C15.9759 21.6667 14.3344 20.025 14.3344 18C14.3344 15.9748 15.9759 14.3333 18.001 14.3333Z" fill="white"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_921_2571" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.5625 38.7727) rotate(-90) scale(35.6787 33.184)">
+<stop stop-color="#FFDD55"/>
+<stop offset="0.1" stop-color="#FFDD55"/>
+<stop offset="0.5" stop-color="#FF543E"/>
+<stop offset="1" stop-color="#C837AB"/>
+</radialGradient>
+<radialGradient id="paint1_radial_921_2571" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.03014 2.59327) rotate(78.681) scale(15.9486 65.7405)">
+<stop stop-color="#3771C8"/>
+<stop offset="0.128" stop-color="#3771C8"/>
+<stop offset="1" stop-color="#6600FF" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_921_2571">
+<rect width="36" height="36" rx="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svgs/social-icons/Linkedin-Logo.svg b/src/assets/svgs/social-icons/Linkedin-Logo.svg
new file mode 100644
index 0000000000..998dd1b826
--- /dev/null
+++ b/src/assets/svgs/social-icons/Linkedin-Logo.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#0D66C2"/>
+<path d="M25 9C25.5304 9 26.0391 9.21071 26.4142 9.58579C26.7893 9.96086 27 10.4696 27 11V25C27 25.5304 26.7893 26.0391 26.4142 26.4142C26.0391 26.7893 25.5304 27 25 27H11C10.4696 27 9.96086 26.7893 9.58579 26.4142C9.21071 26.0391 9 25.5304 9 25V11C9 10.4696 9.21071 9.96086 9.58579 9.58579C9.96086 9.21071 10.4696 9 11 9H25ZM24.5 24.5V19.2C24.5 18.3354 24.1565 17.5062 23.5452 16.8948C22.9338 16.2835 22.1046 15.94 21.24 15.94C20.39 15.94 19.4 16.46 18.92 17.24V16.13H16.13V24.5H18.92V19.57C18.92 18.8 19.54 18.17 20.31 18.17C20.6813 18.17 21.0374 18.3175 21.2999 18.5801C21.5625 18.8426 21.71 19.1987 21.71 19.57V24.5H24.5ZM12.88 14.56C13.3256 14.56 13.7529 14.383 14.0679 14.0679C14.383 13.7529 14.56 13.3256 14.56 12.88C14.56 11.95 13.81 11.19 12.88 11.19C12.4318 11.19 12.0019 11.3681 11.685 11.685C11.3681 12.0019 11.19 12.4318 11.19 12.88C11.19 13.81 11.95 14.56 12.88 14.56ZM14.27 24.5V16.13H11.5V24.5H14.27Z" fill="white"/>
+</svg>
diff --git a/src/assets/svgs/social-icons/Reddit-Logo.svg b/src/assets/svgs/social-icons/Reddit-Logo.svg
new file mode 100644
index 0000000000..8111415030
--- /dev/null
+++ b/src/assets/svgs/social-icons/Reddit-Logo.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_921_2584)">
+<path d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36Z" fill="#FF4500"/>
+<path d="M29.9742 18.1716C29.9742 16.7125 28.7942 15.5536 27.3562 15.5536C26.6769 15.5526 26.0235 15.8141 25.5323 16.2833C23.7298 14.9956 21.2618 14.1589 18.5151 14.0516L19.7166 8.42923L23.6222 9.26595C23.6654 10.2531 24.4806 11.0472 25.4894 11.0472C26.5193 11.0472 27.3562 10.2105 27.3562 9.18003C27.3562 8.15009 26.5195 7.31323 25.4894 7.31323C24.7598 7.31323 24.1158 7.74242 23.8154 8.36483L19.4594 7.44204C19.3306 7.42039 19.2018 7.44205 19.1159 7.50645C19.0086 7.57086 18.9443 7.67801 18.9231 7.80683L17.5922 14.0728C14.8026 14.1589 12.2918 14.9956 10.4679 16.3048C9.97659 15.8356 9.32312 15.5742 8.6438 15.5752C7.18454 15.5752 6.02579 16.7552 6.02579 18.1932C6.02579 19.2661 6.66943 20.1672 7.57098 20.5753C7.52719 20.8377 7.50565 21.1033 7.50657 21.3693C7.50657 25.4032 12.2063 28.6868 18.0001 28.6868C23.7942 28.6868 28.4939 25.4249 28.4939 21.3693C28.4937 21.1033 28.4722 20.8378 28.4295 20.5753C29.3306 20.1672 29.9742 19.2444 29.9742 18.1716ZM11.9914 20.0384C11.9914 19.0084 12.8281 18.1716 13.8586 18.1716C14.8885 18.1716 15.7254 19.0083 15.7254 20.0384C15.7254 21.0685 14.8887 21.9056 13.8586 21.9056C12.8282 21.9267 11.9914 21.0685 11.9914 20.0384ZM22.4422 24.9956C21.1546 26.2833 18.7082 26.3692 18.0001 26.3692C17.2706 26.3692 14.8243 26.2616 13.5578 24.9956C13.365 24.8025 13.365 24.502 13.5578 24.3089C13.751 24.1161 14.0514 24.1161 14.2446 24.3089C15.0602 25.1245 16.777 25.4032 18.0001 25.4032C19.2234 25.4032 20.9614 25.1244 21.7554 24.3089C21.9486 24.1161 22.249 24.1161 22.4422 24.3089C22.6138 24.502 22.6138 24.8025 22.4422 24.9956ZM22.0987 21.9268C21.0686 21.9268 20.2319 21.0901 20.2319 20.06C20.2319 19.03 21.0686 18.1932 22.0987 18.1932C23.129 18.1932 23.9657 19.03 23.9657 20.06C23.9657 21.0683 23.129 21.9268 22.0987 21.9268Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_921_2584">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svgs/social-icons/Slack-Logo.svg b/src/assets/svgs/social-icons/Slack-Logo.svg
new file mode 100644
index 0000000000..29a9087d21
--- /dev/null
+++ b/src/assets/svgs/social-icons/Slack-Logo.svg
@@ -0,0 +1,14 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.15" y="0.15" width="35.7" height="35.7" rx="17.85" fill="white" stroke="#DDDDDD" stroke-width="0.3"/>
+<g clip-path="url(#clip0_957_79)">
+<path d="M12.2586 20.6123C12.2586 21.7576 11.3245 22.6931 10.1791 22.6931C9.03375 22.6931 8.09843 21.7576 8.09843 20.6123C8.09843 19.467 9.0339 18.5316 10.1792 18.5316H12.2587L12.2586 20.6123ZM13.3069 20.6123C13.3069 19.467 14.2423 18.5316 15.3877 18.5316C16.533 18.5316 17.4684 19.4669 17.4684 20.6123V25.8209C17.4684 26.9662 16.5331 27.9017 15.3877 27.9017C14.2423 27.9017 13.3069 26.9662 13.3069 25.8209V20.6123Z" fill="#DE1C59"/>
+<path d="M15.3877 12.2586C14.2423 12.2586 13.3069 11.3245 13.3069 10.1791C13.3069 9.03376 14.2423 8.09845 15.3877 8.09845C16.533 8.09845 17.4684 9.03392 17.4684 10.1792V12.2588L15.3877 12.2586ZM15.3877 13.3069C16.533 13.3069 17.4684 14.2424 17.4684 15.3877C17.4684 16.533 16.5331 17.4684 15.3877 17.4684H10.1791C9.03375 17.4684 8.09843 16.5331 8.09843 15.3877C8.09843 14.2424 9.0339 13.3069 10.1792 13.3069H15.3877Z" fill="#35C5F0"/>
+<path d="M23.7414 15.3877C23.7414 14.2424 24.6755 13.3069 25.8209 13.3069C26.9663 13.3069 27.9017 14.2424 27.9017 15.3877C27.9017 16.533 26.9663 17.4684 25.8209 17.4684H23.7414V15.3877ZM22.6931 15.3877C22.6931 16.533 21.7577 17.4684 20.6123 17.4684C19.467 17.4684 18.5316 16.5331 18.5316 15.3877V10.1791C18.5316 9.03376 19.4669 8.09845 20.6123 8.09845C21.7577 8.09845 22.6931 9.03392 22.6931 10.1792V15.3877Z" fill="#2EB57D"/>
+<path d="M20.6123 23.7414C21.7577 23.7414 22.6931 24.6755 22.6931 25.8209C22.6931 26.9662 21.7577 27.9017 20.6123 27.9017C19.467 27.9017 18.5316 26.9662 18.5316 25.8209V23.7414H20.6123ZM20.6123 22.6931C19.467 22.6931 18.5316 21.7576 18.5316 20.6123C18.5316 19.467 19.4669 18.5316 20.6123 18.5316H25.8209C26.9663 18.5316 27.9017 19.4669 27.9017 20.6123C27.9017 21.7576 26.9663 22.6931 25.8209 22.6931H20.6123Z" fill="#EBB02E"/>
+</g>
+<defs>
+<clipPath id="clip0_957_79">
+<rect width="20" height="20" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svgs/social-icons/X-Logo.svg b/src/assets/svgs/social-icons/X-Logo.svg
new file mode 100644
index 0000000000..efa659339d
--- /dev/null
+++ b/src/assets/svgs/social-icons/X-Logo.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="black"/>
+<path d="M19.5067 16.7242L25.4 9.66669H24.0033L18.885 15.7942L14.7983 9.66669H10.0833L16.265 18.9334L10.0833 26.3334H11.48L16.885 19.8625L21.2017 26.3334H25.9167L19.5067 16.7242ZM17.5933 19.0142L16.9667 18.0917L11.9833 10.75H14.1292L18.1508 16.675L18.7767 17.5975L24.0042 25.2992H21.8592L17.5933 19.0142Z" fill="white"/>
+</svg>
diff --git a/src/assets/svgs/social-icons/Youtube-Logo.svg b/src/assets/svgs/social-icons/Youtube-Logo.svg
new file mode 100644
index 0000000000..112b9c2d3b
--- /dev/null
+++ b/src/assets/svgs/social-icons/Youtube-Logo.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#FF0000"/>
+<path d="M16 21L21.19 18L16 15V21ZM27.56 13.17C27.69 13.64 27.78 14.27 27.84 15.07C27.91 15.87 27.94 16.56 27.94 17.16L28 18C28 20.19 27.84 21.8 27.56 22.83C27.31 23.73 26.73 24.31 25.83 24.56C25.36 24.69 24.5 24.78 23.18 24.84C21.88 24.91 20.69 24.94 19.59 24.94L18 25C13.81 25 11.2 24.84 10.17 24.56C9.27 24.31 8.69 23.73 8.44 22.83C8.31 22.36 8.22 21.73 8.16 20.93C8.09 20.13 8.06 19.44 8.06 18.84L8 18C8 15.81 8.16 14.2 8.44 13.17C8.69 12.27 9.27 11.69 10.17 11.44C10.64 11.31 11.5 11.22 12.82 11.16C14.12 11.09 15.31 11.06 16.41 11.06L18 11C22.19 11 24.8 11.16 25.83 11.44C26.73 11.69 27.31 12.27 27.56 13.17Z" fill="white"/>
+</svg>
diff --git a/src/assets/svgs/social-icons/index.tsx b/src/assets/svgs/social-icons/index.tsx
new file mode 100644
index 0000000000..20544051e5
--- /dev/null
+++ b/src/assets/svgs/social-icons/index.tsx
@@ -0,0 +1,19 @@
+import FacebookLogo from './Facebook-Logo.svg';
+import GithubLogo from './Github-Logo.svg';
+import InstagramLogo from './Instagram-Logo.svg';
+import LinkedInLogo from './Linkedin-Logo.svg';
+import SlackLogo from './Slack-Logo.svg';
+import XLogo from './X-Logo.svg';
+import YoutubeLogo from './Youtube-Logo.svg';
+import RedditLogo from './Reddit-Logo.svg';
+
+export {
+  FacebookLogo,
+  GithubLogo,
+  InstagramLogo,
+  LinkedInLogo,
+  SlackLogo,
+  XLogo,
+  YoutubeLogo,
+  RedditLogo,
+};
diff --git a/src/assets/svgs/tag.svg b/src/assets/svgs/tag.svg
new file mode 100644
index 0000000000..e3646993be
--- /dev/null
+++ b/src/assets/svgs/tag.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag">
+    <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/>
+    <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>
+</svg>
diff --git a/src/assets/svgs/tags.svg b/src/assets/svgs/tags.svg
new file mode 100644
index 0000000000..32cb76851a
--- /dev/null
+++ b/src/assets/svgs/tags.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.5 2V8.879L15 19.379L21.879 12.5L11.379 2H4.5ZM3 2C3 1.60218 3.15804 1.22064 3.43934 0.93934C3.72064 0.658035 4.10218 0.5 4.5 0.5H11.379C11.7768 0.500085 12.1583 0.658176 12.4395 0.9395L22.9395 11.4395C23.2207 11.7208 23.3787 12.1023 23.3787 12.5C23.3787 12.8977 23.2207 13.2792 22.9395 13.5605L16.0605 20.4395C15.7792 20.7207 15.3977 20.8787 15 20.8787C14.6023 20.8787 14.2208 20.7207 13.9395 20.4395L3.4395 9.9395C3.15818 9.65826 3.00008 9.27679 3 8.879V2Z" fill="current"/>
+    <path d="M8.25 6.5C8.05109 6.5 7.86032 6.42098 7.71967 6.28033C7.57902 6.13968 7.5 5.94891 7.5 5.75C7.5 5.55109 7.57902 5.36032 7.71967 5.21967C7.86032 5.07902 8.05109 5 8.25 5C8.44891 5 8.63968 5.07902 8.78033 5.21967C8.92098 5.36032 9 5.55109 9 5.75C9 5.94891 8.92098 6.13968 8.78033 6.28033C8.63968 6.42098 8.44891 6.5 8.25 6.5ZM8.25 8C8.84674 8 9.41903 7.76295 9.84099 7.34099C10.2629 6.91903 10.5 6.34674 10.5 5.75C10.5 5.15326 10.2629 4.58097 9.84099 4.15901C9.41903 3.73705 8.84674 3.5 8.25 3.5C7.65326 3.5 7.08097 3.73705 6.65901 4.15901C6.23705 4.58097 6 5.15326 6 5.75C6 6.34674 6.23705 6.91903 6.65901 7.34099C7.08097 7.76295 7.65326 8 8.25 8ZM1.5 9.629C1.50008 10.0268 1.65818 10.4083 1.9395 10.6895L13.125 21.875L13.0605 21.9395C12.7792 22.2207 12.3977 22.3787 12 22.3787C11.6023 22.3787 11.2208 22.2207 10.9395 21.9395L0.4395 11.4395C0.158176 11.1583 8.49561e-05 10.7768 0 10.379L0 3.5C0 3.10218 0.158035 2.72064 0.43934 2.43934C0.720644 2.15804 1.10218 2 1.5 2V9.629Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/talawa.svg b/src/assets/svgs/talawa.svg
new file mode 100644
index 0000000000..0c89afbcca
--- /dev/null
+++ b/src/assets/svgs/talawa.svg
@@ -0,0 +1,7 @@
+<svg width="12322" height="9856" viewBox="0 0 12322 9856" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3106" y="5502.74" width="2873.8" height="1464.27" transform="rotate(-58 3106 5502.74)" fill="#737373"/>
+<rect x="2974" y="8451.2" width="5835.99" height="1558.13" transform="rotate(-58 2974 8451.2)" fill="#31BC6B"/>
+<rect x="7633.24" y="2955.84" width="2996.38" height="1572.13" transform="rotate(58 7633.24 2955.84)" fill="#737373"/>
+<rect x="6620.97" y="4182" width="4962.94" height="1556.48" transform="rotate(58 6620.97 4182)" fill="#31BC6B"/>
+<circle cx="5968" cy="2526" r="1920" fill="#FFBD59"/>
+</svg>
diff --git a/src/assets/svgs/user.svg b/src/assets/svgs/user.svg
new file mode 100644
index 0000000000..b23b34481e
--- /dev/null
+++ b/src/assets/svgs/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/userEvent.svg b/src/assets/svgs/userEvent.svg
new file mode 100644
index 0000000000..1623ca2e07
--- /dev/null
+++ b/src/assets/svgs/userEvent.svg
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
+    />
+  </svg>
\ No newline at end of file
diff --git a/src/assets/svgs/users.svg b/src/assets/svgs/users.svg
new file mode 100644
index 0000000000..a1a474206d
--- /dev/null
+++ b/src/assets/svgs/users.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.0421 19.175C26.9803 19.226 26.9099 19.263 26.8351 19.2841C26.7602 19.3052 26.6823 19.3098 26.6059 19.2978C26.5294 19.2858 26.4558 19.2574 26.3893 19.2141C26.3228 19.1709 26.2647 19.1137 26.2184 19.0458C25.7274 18.3206 25.0883 17.7323 24.3525 17.3281C23.6167 16.9239 22.8048 16.7152 21.9822 16.7187C21.8262 16.7187 21.6765 16.6506 21.5662 16.5294C21.4558 16.4082 21.3939 16.2438 21.3939 16.0723C21.3939 15.9009 21.4558 15.7365 21.5662 15.6153C21.6765 15.494 21.8262 15.4259 21.9822 15.4259C22.459 15.4258 22.9263 15.2788 23.3309 15.0016C23.7355 14.7244 24.0612 14.328 24.271 13.8576C24.4809 13.3872 24.5665 12.8616 24.518 12.3404C24.4696 11.8193 24.2891 11.3235 23.9971 10.9094C23.705 10.4952 23.3132 10.1794 22.8659 9.9977C22.4187 9.816 21.9341 9.77574 21.467 9.88148C21 9.98722 20.5694 10.2347 20.224 10.5959C19.8786 10.957 19.6323 11.4174 19.5131 11.9246C19.4741 12.0906 19.3766 12.2328 19.2422 12.3199C19.1078 12.407 18.9474 12.4318 18.7963 12.3889C18.6452 12.3461 18.5157 12.239 18.4365 12.0914C18.3572 11.9437 18.3346 11.7674 18.3736 11.6014C18.5215 10.9695 18.8047 10.3856 19.1997 9.89828C19.5947 9.411 20.0899 9.0345 20.6442 8.80016C21.1985 8.56582 21.7957 8.48043 22.3861 8.5511C22.9765 8.62178 23.543 8.84647 24.0383 9.20645C24.5336 9.56643 24.9435 10.0513 25.2337 10.6206C25.5238 11.1899 25.686 11.8271 25.7065 12.4792C25.7271 13.1313 25.6055 13.7793 25.3518 14.3693C25.0982 14.9593 24.7198 15.4741 24.2484 15.8709C25.4086 16.3465 26.4194 17.1795 27.1598 18.2701C27.2061 18.338 27.2398 18.4153 27.259 18.4975C27.2782 18.5797 27.2824 18.6653 27.2715 18.7493C27.2606 18.8334 27.2347 18.9142 27.1953 18.9873C27.156 19.0603 27.1039 19.1241 27.0421 19.175ZM21.7067 26.0915C21.7454 26.165 21.7705 26.2461 21.7807 26.3303C21.7909 26.4145 21.7858 26.5 21.7659 26.5821C21.7459 26.6641 21.7115 26.741 21.6645 26.8084C21.6175 26.8758 21.5588 26.9324 21.4919 26.9749C21.4027 27.0324 21.3011 27.0625 21.1977 27.0622C21.0944 27.0622 20.9929 27.0324 20.9033 26.9757C20.8138 26.9189 20.7395 26.8373 20.6878 26.739C20.1764 25.787 19.4479 24.998 18.5741 24.4499C17.7003 23.9018 16.7116 23.6135 15.7054 23.6135C14.6993 23.6135 13.7105 23.9018 12.8367 24.4499C11.963 24.998 11.2344 25.787 10.723 26.739C10.6862 26.8162 10.6356 26.8845 10.5742 26.9397C10.5128 26.9949 10.4418 27.0359 10.3656 27.0602C10.2894 27.0844 10.2095 27.0915 10.1307 27.081C10.052 27.0705 9.97594 27.0426 9.90724 26.999C9.83854 26.9554 9.77858 26.8969 9.73098 26.8272C9.68337 26.7574 9.6491 26.6778 9.63022 26.5931C9.61134 26.5085 9.60825 26.4205 9.62112 26.3344C9.634 26.2484 9.66259 26.1661 9.70516 26.0926C10.5065 24.5798 11.7613 23.4199 13.2549 22.811C12.439 22.229 11.8162 21.3728 11.4795 20.3701C11.1427 19.3675 11.11 18.2721 11.3863 17.2473C11.6625 16.2225 12.2329 15.3233 13.0123 14.6839C13.7918 14.0444 14.7385 13.6989 15.7113 13.6989C16.6841 13.6989 17.6308 14.0444 18.4103 14.6839C19.1897 15.3233 19.7601 16.2225 20.0363 17.2473C20.3126 18.2721 20.2799 19.3675 19.9431 20.3701C19.6064 21.3728 18.9836 22.229 18.1677 22.811C19.6572 23.422 20.9078 24.5813 21.7067 26.0915ZM15.7064 22.3208C16.3658 22.3208 17.0104 22.106 17.5587 21.7035C18.107 21.301 18.5343 20.729 18.7866 20.0597C19.039 19.3904 19.105 18.6539 18.9764 17.9433C18.8477 17.2328 18.5302 16.5801 18.0639 16.0679C17.5976 15.5556 17.0036 15.2067 16.3568 15.0654C15.7101 14.9241 15.0397 14.9966 14.4305 15.2738C13.8213 15.5511 13.3006 16.0206 12.9343 16.6229C12.5679 17.2253 12.3724 17.9335 12.3724 18.6579C12.3724 19.6294 12.7236 20.5611 13.3489 21.248C13.9741 21.9349 14.8222 22.3208 15.7064 22.3208ZM10.0189 16.0723C10.0189 15.9009 9.95696 15.7365 9.84662 15.6153C9.73628 15.494 9.58663 15.4259 9.43059 15.4259C8.95382 15.4258 8.48664 15.2787 8.0821 15.0015C7.67757 14.7243 7.35189 14.328 7.14206 13.8577C6.93222 13.3873 6.84663 12.8618 6.895 12.3407C6.94338 11.8196 7.12379 11.3238 7.41574 10.9097C7.70768 10.4956 8.09947 10.1797 8.54662 9.9979C8.99376 9.81613 9.47834 9.77574 9.94533 9.88133C10.4123 9.98692 10.843 10.2342 11.1885 10.5952C11.5339 10.9562 11.7804 11.4164 11.8997 11.9235C11.919 12.0057 11.9529 12.083 11.9994 12.1508C12.0459 12.2186 12.104 12.2757 12.1706 12.3188C12.2372 12.3619 12.3108 12.3902 12.3873 12.4021C12.4638 12.4139 12.5417 12.4091 12.6165 12.3879C12.6914 12.3667 12.7616 12.3294 12.8234 12.2784C12.8851 12.2273 12.9371 12.1634 12.9763 12.0903C13.0156 12.0171 13.0413 11.9362 13.0521 11.8522C13.0629 11.7681 13.0585 11.6825 13.0392 11.6003C12.8913 10.9684 12.6081 10.3845 12.2131 9.8972C11.8181 9.40992 11.3229 9.03343 10.7686 8.79909C10.2143 8.56475 9.6171 8.47935 9.0267 8.55003C8.4363 8.6207 7.86982 8.84539 7.37449 9.20537C6.87916 9.56535 6.46932 10.0502 6.17914 10.6195C5.88895 11.1888 5.72683 11.826 5.70627 12.4781C5.68572 13.1302 5.80733 13.7782 6.06098 14.3682C6.31463 14.9582 6.69296 15.473 7.16443 15.8698C6.00411 16.3458 4.99329 17.1791 4.25305 18.2701C4.20669 18.338 4.17296 18.4153 4.15378 18.4975C4.13461 18.5797 4.13036 18.6653 4.14129 18.7493C4.15222 18.8334 4.1781 18.9142 4.21747 18.9873C4.25683 19.0603 4.30891 19.1241 4.37072 19.175C4.43253 19.226 4.50287 19.263 4.57771 19.2841C4.65256 19.3052 4.73045 19.3098 4.80694 19.2978C4.88343 19.2858 4.95701 19.2574 5.0235 19.2141C5.08998 19.1709 5.14806 19.1137 5.19442 19.0458C5.68541 18.3206 6.32452 17.7323 7.0603 17.3281C7.79608 16.9239 8.60797 16.7152 9.43059 16.7187C9.58663 16.7187 9.73628 16.6506 9.84662 16.5294C9.95696 16.4082 10.0189 16.2438 10.0189 16.0723Z" fill="current"/>
+</svg>
diff --git a/src/assets/svgs/venues.svg b/src/assets/svgs/venues.svg
new file mode 100644
index 0000000000..c8cd52f4e7
--- /dev/null
+++ b/src/assets/svgs/venues.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='25' height='25' viewBox="0 0 384 512" fill='gray'><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" fill='current'/></svg>
\ No newline at end of file
diff --git a/src/assets/talawa-logo-lite-200x200.png b/src/assets/talawa-logo-lite-200x200.png
deleted file mode 100644
index 9d34137661..0000000000
Binary files a/src/assets/talawa-logo-lite-200x200.png and /dev/null differ
diff --git a/src/components/AddOn/AddOn.module.css b/src/components/AddOn/AddOn.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/AddOn/AddOn.test.tsx b/src/components/AddOn/AddOn.test.tsx
new file mode 100644
index 0000000000..68475e8196
--- /dev/null
+++ b/src/components/AddOn/AddOn.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { store } from 'state/store';
+import AddOn from './AddOn';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+const link = new StaticMockLink([], true);
+describe('Testing Addon component', () => {
+  const props = {
+    children: 'This is a dummy text',
+  };
+
+  test('should render with default props', () => {
+    const { getByTestId } = render(<AddOn />);
+    const container = getByTestId('pluginContainer');
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveClass('plugin-container');
+    expect(container).toHaveTextContent('Default text');
+  });
+
+  test('should render props and text elements test for the page component', () => {
+    const { getByTestId, getByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <AddOn {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(getByTestId('pluginContainer')).toBeInTheDocument();
+    expect(getByText(props.children)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/AddOn/AddOn.tsx b/src/components/AddOn/AddOn.tsx
new file mode 100644
index 0000000000..850cc05ee4
--- /dev/null
+++ b/src/components/AddOn/AddOn.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+interface InterfaceAddOnProps {
+  extras?: any;
+  name?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * The AddOn component is used to wrap children within a plugin container.
+ * It also accepts additional properties (`extras` and `name`) to allow for
+ * extensibility and custom naming.
+ *
+ * @param props - The props for the AddOn component.
+ * @param extras - Additional properties for the AddOn component.
+ * @param name - The name for the AddOn component.
+ * @param children - The child elements to be rendered within the AddOn component.
+ *
+ * @returns The JSX element representing the AddOn component.
+ */
+function AddOn({
+  children = 'Default text',
+  extras = {},
+  name = '',
+}: InterfaceAddOnProps): JSX.Element {
+  return (
+    <div className="plugin-container" data-testid="pluginContainer">
+      {children}
+    </div>
+  );
+}
+
+// PropTypes validation for the AddOn component
+AddOn.propTypes = {
+  extras: PropTypes.shape({
+    components: PropTypes.shape({}),
+    actions: PropTypes.shape({}),
+  }),
+  name: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default AddOn;
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css b/src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css
new file mode 100644
index 0000000000..1f1ea89996
--- /dev/null
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css
@@ -0,0 +1,20 @@
+.entrytoggle {
+  margin: 24px 24px 0 auto;
+  width: fit-content;
+}
+
+.entryaction {
+  margin-left: auto;
+  display: flex !important;
+  align-items: center;
+}
+
+.entryaction i {
+  margin-right: 8px;
+}
+
+.entryaction .spinner-grow {
+  height: 1rem;
+  width: 1rem;
+  margin-right: 8px;
+}
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx
new file mode 100644
index 0000000000..3d800eb59f
--- /dev/null
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx
@@ -0,0 +1,236 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import AddOnEntry from './AddOnEntry';
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  ApolloLink,
+  HttpLink,
+} from '@apollo/client';
+
+import type { NormalizedCacheObject } from '@apollo/client';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { BACKEND_URL } from 'Constant/constant';
+import i18nForTest from 'utils/i18nForTest';
+import { I18nextProvider } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider, wait } from '@apollo/react-testing';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { ADD_ON_ENTRY_MOCK } from './AddOnEntryMocks';
+import { ToastContainer } from 'react-toastify';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { getItem } = useLocalStorage();
+
+const link = new StaticMockLink(ADD_ON_ENTRY_MOCK, true);
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+  headers: {
+    authorization: 'Bearer ' + getItem('token') || '',
+  },
+});
+console.error = jest.fn();
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([httpLink]),
+});
+let mockID: string | undefined = '1';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockID }),
+}));
+
+describe('Testing AddOnEntry', () => {
+  const props = {
+    id: 'string',
+    enabled: true,
+    title: 'string',
+    description: 'string',
+    createdBy: 'string',
+    component: 'string',
+    installed: true,
+    configurable: true,
+    modified: true,
+    isInstalled: true,
+    getInstalledPlugins: (): { sample: string } => {
+      return { sample: 'sample' };
+    },
+  };
+
+  test('should render modal and take info to add plugin for registered organization', () => {
+    const { getByTestId } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<AddOnEntry uninstalledOrgs={[]} {...props} />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    expect(getByTestId('AddOnEntry')).toBeInTheDocument();
+  });
+
+  test('uses default values for title and description when not provided', () => {
+    // Render the component with only required parameters
+    const mockGetInstalledPlugins = jest.fn();
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AddOnEntry
+                id="123"
+                createdBy="user1"
+                uninstalledOrgs={['Org1']}
+                getInstalledPlugins={mockGetInstalledPlugins} // Providing an empty function
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    const titleElement = screen.getByText('No title provided'); // This will check for the default empty string in the title
+    const descriptionElement = screen.getByText('Description not available'); // This will check for the default empty string in the description
+    expect(titleElement).toBeInTheDocument(); // Ensure the title element with default value exists
+    expect(descriptionElement).toBeInTheDocument(); // Ensure the description element with default value exists
+  });
+
+  it('renders correctly', () => {
+    const props = {
+      id: '1',
+      title: 'Test Addon',
+      description: 'Test addon description',
+      createdBy: 'Test User',
+      component: 'string',
+      installed: true,
+      configurable: true,
+      modified: true,
+      isInstalled: true,
+      uninstalledOrgs: [],
+      enabled: true,
+      getInstalledPlugins: (): { sample: string } => {
+        return { sample: 'sample' };
+      },
+    };
+
+    const { getByText } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<AddOnEntry {...props} />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    expect(getByText('Test Addon')).toBeInTheDocument();
+    expect(getByText('Test addon description')).toBeInTheDocument();
+    expect(getByText('Test User')).toBeInTheDocument();
+  });
+
+  it('Uninstall Button works correctly', async () => {
+    const props = {
+      id: '1',
+      title: 'Test Addon',
+      description: 'Test addon description',
+      createdBy: 'Test User',
+      component: 'string',
+      installed: true,
+      configurable: true,
+      modified: true,
+      isInstalled: true,
+      uninstalledOrgs: [],
+      enabled: true,
+      getInstalledPlugins: (): { sample: string } => {
+        return { sample: 'sample' };
+      },
+    };
+    mockID = 'undefined';
+    const { findByText, getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              {<AddOnEntry {...props} />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    await wait(100);
+    const btn = getByTestId('AddOnEntry_btn_install');
+    await userEvent.click(btn);
+    await wait(100);
+    expect(btn.innerHTML).toMatch(/Install/i);
+    expect(
+      await findByText('This feature is now removed from your organization'),
+    ).toBeInTheDocument();
+    await userEvent.click(btn);
+    await wait(100);
+
+    expect(btn.innerHTML).toMatch(/Uninstall/i);
+    expect(
+      await findByText('This feature is now enabled in your organization'),
+    ).toBeInTheDocument();
+  });
+
+  it('Check if uninstalled orgs includes current org', async () => {
+    const props = {
+      id: '1',
+      title: 'Test Addon',
+      description: 'Test addon description',
+      createdBy: 'Test User',
+      component: 'string',
+      installed: true,
+      configurable: true,
+      modified: true,
+      isInstalled: true,
+      uninstalledOrgs: ['undefined'],
+      enabled: true,
+      getInstalledPlugins: (): { sample: string } => {
+        return { sample: 'sample' };
+      },
+    };
+
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<AddOnEntry {...props} />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    await wait(100);
+    const btn = getByTestId('AddOnEntry_btn_install');
+    expect(btn.innerHTML).toMatch(/install/i);
+  });
+  test('should be redirected to /orglist if orgId is undefined', async () => {
+    mockID = undefined;
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<AddOnEntry uninstalledOrgs={[]} {...props} />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    await wait(100);
+    expect(window.location.pathname).toEqual('/orglist');
+  });
+});
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
new file mode 100644
index 0000000000..257917e2c2
--- /dev/null
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import styles from './AddOnEntry.module.css';
+import { Button, Card, Spinner } from 'react-bootstrap';
+import { UPDATE_INSTALL_STATUS_PLUGIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useMutation } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { Navigate, useParams } from 'react-router-dom';
+
+/**
+ * Props for the `addOnEntry` component.
+ */
+interface InterfaceAddOnEntryProps {
+  id: string;
+  enabled?: boolean; // Optional props
+  title?: string; // Optional props
+  description?: string; // Optional props
+  createdBy: string;
+  component?: string; // Optional props
+  modified?: any; // Optional props
+  uninstalledOrgs: string[];
+  getInstalledPlugins: () => any;
+}
+
+/**
+ * A React component that represents an add-on entry, displaying its details and allowing installation or uninstallation.
+ *
+ * @param props - The properties for the component.
+ * @returns A JSX element containing the add-on entry.
+ *
+ * @example
+ * ```tsx
+ * <AddOnEntry
+ *   id="1"
+ *   enabled={true}
+ *   title="Sample Add-On"
+ *   description="This is a sample add-on."
+ *   createdBy="Author Name"
+ *   component="SampleComponent"
+ *   modified={new Date()}
+ *   uninstalledOrgs={['org1', 'org2']}
+ *   getInstalledPlugins={() => {}}
+ * />
+ * ```
+ */
+function addOnEntry({
+  id,
+  title = 'No title provided', // Default parameter
+  description = 'Description not available', // Default parameter
+  createdBy,
+  uninstalledOrgs,
+  getInstalledPlugins,
+  // enabled = false, // Default parameter
+  // component = '', // Default parameter
+  // modified = null, // Default parameter
+}: InterfaceAddOnEntryProps): JSX.Element {
+  // Translation hook with namespace 'addOnEntry'
+  const { t } = useTranslation('translation', { keyPrefix: 'addOnEntry' });
+
+  // Getting orgId from URL parameters
+  const { orgId: currentOrg } = useParams();
+  if (!currentOrg) {
+    // If orgId is not present in the URL, navigate to the org list page
+    return <Navigate to={'/orglist'} />;
+  }
+
+  // State to manage button loading state
+  const [buttonLoading, setButtonLoading] = useState(false);
+  // State to manage local installation status of the add-on
+  const [isInstalledLocal, setIsInstalledLocal] = useState(
+    uninstalledOrgs.includes(currentOrg),
+  );
+
+  // Mutation hook for updating the install status of the plugin
+  const [addOrgAsUninstalled] = useMutation(
+    UPDATE_INSTALL_STATUS_PLUGIN_MUTATION,
+  );
+
+  /**
+   * Function to toggle the installation status of the plugin.
+   */
+  const togglePluginInstall = async (): Promise<void> => {
+    setButtonLoading(true);
+    await addOrgAsUninstalled({
+      variables: {
+        id: id.toString(),
+        orgId: currentOrg.toString(),
+      },
+    });
+
+    // Toggle the local installation status
+    setIsInstalledLocal(!isInstalledLocal);
+    setButtonLoading(false);
+
+    // Display a success message based on the new installation status
+    const dialog: string = isInstalledLocal
+      ? t('installMsg')
+      : t('uninstallMsg');
+    toast.success(dialog);
+  };
+
+  return (
+    <>
+      <Card data-testid="AddOnEntry">
+        {/* {uninstalledOrgs.includes(currentOrg) && (
+          <Form.Check
+            type="switch"
+            id="custom-switch"
+            label={t('enable')}
+            className={styles.entrytoggle}
+            onChange={(): void => {}}
+            disabled={switchInProgress}
+            checked={enabled}
+          />
+        )} */}
+        <Card.Body>
+          <Card.Title>{title}</Card.Title>
+          <Card.Subtitle className="mb-2 text-muted author">
+            {createdBy}
+          </Card.Subtitle>
+          <Card.Text>{description}</Card.Text>
+          <Button
+            className={styles.entryaction}
+            variant="primary"
+            // disabled={buttonLoading || !configurable}
+            disabled={buttonLoading}
+            data-testid="AddOnEntry_btn_install"
+            onClick={(): void => {
+              togglePluginInstall();
+              getInstalledPlugins();
+            }}
+          >
+            {buttonLoading ? (
+              <Spinner animation="grow" />
+            ) : (
+              <i
+                className={!isInstalledLocal ? 'fa fa-trash' : 'fa fa-cubes'}
+              ></i>
+            )}
+            {/* {installed ? 'Remove' : configurable ? 'Installed' : 'Install'} */}
+            {uninstalledOrgs.includes(currentOrg)
+              ? t('install')
+              : t('uninstall')}
+          </Button>
+        </Card.Body>
+      </Card>
+      <br />
+    </>
+  );
+}
+
+export default addOnEntry;
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntryMocks.ts b/src/components/AddOn/core/AddOnEntry/AddOnEntryMocks.ts
new file mode 100644
index 0000000000..3967a0963a
--- /dev/null
+++ b/src/components/AddOn/core/AddOnEntry/AddOnEntryMocks.ts
@@ -0,0 +1,25 @@
+import { UPDATE_INSTALL_STATUS_PLUGIN_MUTATION } from 'GraphQl/Mutations/mutations';
+
+// Mock data representing the response structure of the mutation
+const updatePluginStatus = {
+  _id: '123',
+  pluginName: 'Sample Plugin',
+  pluginCreatedBy: 'John Doe',
+  pluginDesc: 'This is a sample plugin description.',
+  uninstalledOrgs: [],
+};
+
+// Creating the mock entry
+export const ADD_ON_ENTRY_MOCK = [
+  {
+    request: {
+      query: UPDATE_INSTALL_STATUS_PLUGIN_MUTATION,
+      variables: { id: '1', orgId: 'undefined' },
+    },
+    result: {
+      data: {
+        updatePluginStatus: updatePluginStatus,
+      },
+    },
+  },
+];
diff --git a/src/components/AddOn/core/AddOnRegister/AddOnRegister.module.css b/src/components/AddOn/core/AddOnRegister/AddOnRegister.module.css
new file mode 100644
index 0000000000..c122d386fa
--- /dev/null
+++ b/src/components/AddOn/core/AddOnRegister/AddOnRegister.module.css
@@ -0,0 +1,9 @@
+.modalbtn {
+  display: flex !important;
+  margin-left: auto;
+  align-items: center;
+}
+
+.modalbtn i {
+  margin-right: 8px;
+}
diff --git a/src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx b/src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx
new file mode 100644
index 0000000000..dc6a7c2091
--- /dev/null
+++ b/src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx
@@ -0,0 +1,207 @@
+import React, { act } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider } from '@apollo/react-testing';
+import { ADD_PLUGIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import AddOnRegister from './AddOnRegister';
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  ApolloLink,
+  HttpLink,
+} from '@apollo/client';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { BrowserRouter } from 'react-router-dom';
+import { BACKEND_URL } from 'Constant/constant';
+import i18nForTest from 'utils/i18nForTest';
+import { I18nextProvider } from 'react-i18next';
+import { toast } from 'react-toastify';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { getItem } = useLocalStorage();
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+  headers: {
+    authorization: 'Bearer ' + getItem('token') || '',
+  },
+});
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([httpLink]),
+});
+
+const mocks = [
+  {
+    request: {
+      query: ADD_PLUGIN_MUTATION,
+      variables: {
+        pluginName: 'Test Plugin',
+        pluginCreatedBy: 'AdminTest Creator',
+        pluginDesc: 'Test Description',
+        pluginInstallStatus: false,
+        installedOrgs: ['id'],
+      },
+    },
+    result: {
+      data: {
+        createPlugin: {
+          _id: '1',
+          pluginName: 'Test Plugin',
+          pluginCreatedBy: 'AdminTest Creator',
+          pluginDesc: 'Test Description',
+        },
+      },
+    },
+  },
+];
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const pluginData = {
+  pluginName: 'Test Plugin',
+  pluginCreatedBy: 'Test Creator',
+  pluginDesc: 'Test Description',
+};
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+  },
+}));
+
+const mockNavigate = jest.fn();
+let mockId: string | undefined = 'id';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockId }),
+  useNavigate: () => mockNavigate,
+}));
+
+describe('Testing AddOnRegister', () => {
+  const props = {
+    id: '6234d8bf6ud937ddk70ecc5c9',
+  };
+
+  test('should render modal and take info to add plugin for registered organization', async () => {
+    await act(async () => {
+      render(
+        <ApolloProvider client={client}>
+          <Provider store={store}>
+            <BrowserRouter>
+              <I18nextProvider i18n={i18nForTest}>
+                <AddOnRegister {...props} />
+              </I18nextProvider>
+            </BrowserRouter>
+          </Provider>
+        </ApolloProvider>,
+      );
+    });
+    // Wait for the button to be in the document
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', { name: /Add New/i }),
+      ).toBeInTheDocument(),
+    );
+
+    // Simulate user interactions
+    userEvent.click(screen.getByRole('button', { name: /Add New/i }));
+    userEvent.type(screen.getByPlaceholderText(/Ex: Donations/i), 'myplugin');
+    userEvent.type(
+      screen.getByPlaceholderText(/This Plugin enables UI for/i),
+      'test description',
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Ex: john Doe/i),
+      'test creator',
+    );
+  });
+
+  test('Expect toast.success to be called on successful plugin addition', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} mocks={mocks}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AddOnRegister {...props} />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await waitFor(() => new Promise((resolve) => setTimeout(resolve, 0)));
+
+    userEvent.click(screen.getByRole('button', { name: /Add New/i }));
+    await wait(100);
+    expect(screen.getByTestId('addonregisterBtn')).toBeInTheDocument();
+    userEvent.type(screen.getByTestId('pluginName'), pluginData.pluginName);
+    userEvent.type(
+      screen.getByTestId('pluginCreatedBy'),
+      pluginData.pluginCreatedBy,
+    );
+    userEvent.type(screen.getByTestId('pluginDesc'), pluginData.pluginDesc);
+    userEvent.click(screen.getByTestId('addonregisterBtn'));
+
+    await wait(100);
+    expect(toast.success).toHaveBeenCalledWith('Plugin added Successfully');
+  });
+
+  test('Expect the window to reload after successful plugin addition', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} mocks={mocks}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AddOnRegister {...props} />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await waitFor(() => new Promise((resolve) => setTimeout(resolve, 0)));
+
+    userEvent.click(screen.getByRole('button', { name: /Add New/i }));
+    await wait(100);
+    expect(screen.getByTestId('addonregisterBtn')).toBeInTheDocument();
+    userEvent.type(screen.getByTestId('pluginName'), pluginData.pluginName);
+    userEvent.type(
+      screen.getByTestId('pluginCreatedBy'),
+      pluginData.pluginCreatedBy,
+    );
+    userEvent.type(screen.getByTestId('pluginDesc'), pluginData.pluginDesc);
+    userEvent.click(screen.getByTestId('addonregisterBtn'));
+
+    await wait(3000); // Waiting for 3 seconds to reload the page as timeout is set to 2 seconds in the component
+    expect(mockNavigate).toHaveBeenCalledWith(0);
+  });
+
+  test('should be redirected to /orglist if orgId is undefined', async () => {
+    mockId = undefined;
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AddOnRegister {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    expect(window.location.pathname).toEqual('/orglist');
+  });
+});
diff --git a/src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx b/src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx
new file mode 100644
index 0000000000..6023e74ee1
--- /dev/null
+++ b/src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx
@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styles from './AddOnRegister.module.css';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { useMutation } from '@apollo/client';
+import { ADD_PLUGIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+
+/**
+ * Interface defining the form state for the `addOnRegister` component.
+ */
+interface InterfaceFormStateTypes {
+  pluginName: string;
+  pluginCreatedBy: string;
+  pluginDesc: string;
+  pluginInstallStatus: boolean;
+  installedOrgs: [string] | [];
+}
+
+interface InterfaceAddOnRegisterProps {
+  createdBy?: string;
+}
+
+/**
+ * A React component for registering a new add-on plugin.
+ *
+ * This component:
+ * - Displays a button to open a modal for plugin registration.
+ * - Contains a form in the modal for entering plugin details.
+ * - Uses GraphQL mutation to register the plugin.
+ * - Uses `react-i18next` for localization and `react-toastify` for notifications.
+ * - Redirects to the organization list page if no `orgId` is found in the URL.
+ *
+ * @returns A JSX element containing the button and modal for plugin registration.
+ */
+function addOnRegister({
+  createdBy = 'Admin',
+}: InterfaceAddOnRegisterProps): JSX.Element {
+  // Translation hook for the 'addOnRegister' namespace
+  const { t } = useTranslation('translation', { keyPrefix: 'addOnRegister' });
+  // Translation hook for the 'common' namespace
+  const { t: tCommon } = useTranslation('common');
+
+  // Get the organization ID from the URL parameters
+  const { orgId: currentUrl } = useParams();
+  const navigate = useNavigate();
+
+  // Redirect to the organization list if no organization ID is found
+  if (!currentUrl) {
+    return <Navigate to={'/orglist'} />;
+  }
+
+  // State to manage the visibility of the modal
+  const [show, setShow] = useState(false);
+
+  // Functions to show and hide the modal
+  const handleClose = (): void => setShow(false);
+  const handleShow = (): void => setShow(true);
+
+  // GraphQL mutation hook for adding a plugin
+  const [create] = useMutation(ADD_PLUGIN_MUTATION);
+
+  // Initial form state
+  const [formState, setFormState] = useState<InterfaceFormStateTypes>({
+    pluginName: '',
+    pluginCreatedBy: createdBy, // Using the default value here
+    pluginDesc: '',
+    pluginInstallStatus: false,
+    installedOrgs: [currentUrl],
+  });
+
+  /**
+   * Handles the registration of the plugin.
+   * Sends the form data to the GraphQL mutation and displays a success message.
+   */
+  const handleRegister = async (): Promise<void> => {
+    const { data } = await create({
+      variables: {
+        pluginName: formState.pluginName,
+        pluginCreatedBy: formState.pluginCreatedBy,
+        pluginDesc: formState.pluginDesc,
+        pluginInstallStatus: formState.pluginInstallStatus,
+        installedOrgs: formState.installedOrgs,
+      },
+    });
+
+    if (data) {
+      // Show a success message when the plugin is added
+      toast.success(tCommon('addedSuccessfully', { item: 'Plugin' }) as string);
+      // Refresh the page after 2 seconds
+      setTimeout(() => {
+        navigate(0);
+      }, 2000);
+    }
+  };
+
+  return (
+    <>
+      {/* Button to open the modal */}
+      <Button
+        className={styles.modalbtn}
+        variant="primary"
+        onClick={handleShow}
+      >
+        <i className="fa fa-plus"></i>
+        {t('addNew')}
+      </Button>
+
+      {/* Modal for plugin registration */}
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title> {t('addPlugin')}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            {/* Form group for plugin name */}
+            <Form.Group className="mb-3" controlId="registerForm.PluginName">
+              <Form.Label>{t('pluginName')}</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder={t('pName')}
+                data-testid="pluginName"
+                autoComplete="off"
+                required
+                value={formState.pluginName}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    pluginName: e.target.value,
+                  });
+                }}
+              />
+            </Form.Group>
+            <Form.Group className="mb-3" controlId="registerForm.PluginName">
+              <Form.Label>{t('creatorName')}</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder={t('cName')}
+                data-testid="pluginCreatedBy"
+                autoComplete="off"
+                required
+                value={formState.pluginCreatedBy}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    pluginCreatedBy: e.target.value,
+                  });
+                }}
+              />
+            </Form.Group>
+            {/* Form group for plugin description */}
+            <Form.Group className="mb-3" controlId="registerForm.PluginURL">
+              <Form.Label>{t('pluginDesc')}</Form.Label>
+              <Form.Control
+                // type="text"
+                rows={3}
+                as="textarea"
+                placeholder={t('pDesc')}
+                data-testid="pluginDesc"
+                required
+                value={formState.pluginDesc}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    pluginDesc: e.target.value,
+                  });
+                }}
+              />
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          {/* Button to close the modal */}
+          <Button
+            variant="secondary"
+            onClick={handleClose}
+            data-testid="addonclose"
+          >
+            {tCommon('close')}
+          </Button>
+          {/* Button to register the plugin */}
+          <Button
+            variant="primary"
+            onClick={handleRegister}
+            data-testid="addonregisterBtn"
+          >
+            {tCommon('register')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+// Prop types validation for the component
+addOnRegister.propTypes = {
+  createdBy: PropTypes.string,
+};
+
+export default addOnRegister;
diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.module.css b/src/components/AddOn/core/AddOnStore/AddOnStore.module.css
new file mode 100644
index 0000000000..8a34c03be5
--- /dev/null
+++ b/src/components/AddOn/core/AddOnStore/AddOnStore.module.css
@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+
+.actioninput {
+  text-decoration: none;
+  margin-bottom: 50px;
+  border-color: #e8e5e5;
+  width: 80%;
+  border-radius: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  box-shadow: none;
+}
+
+.actionradio input {
+  width: fit-content;
+  margin: inherit;
+}
diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx b/src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx
new file mode 100644
index 0000000000..e76e2a7b73
--- /dev/null
+++ b/src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx
@@ -0,0 +1,394 @@
+import React, { act } from 'react';
+import 'jest-location-mock';
+import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  ApolloLink,
+  HttpLink,
+} from '@apollo/client';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { BrowserRouter } from 'react-router-dom';
+import AddOnStore from './AddOnStore';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { BACKEND_URL } from 'Constant/constant';
+import i18nForTest from 'utils/i18nForTest';
+import { I18nextProvider } from 'react-i18next';
+import { ORGANIZATIONS_LIST, PLUGIN_GET } from 'GraphQl/Queries/Queries';
+import userEvent from '@testing-library/user-event';
+import useLocalStorage from 'utils/useLocalstorage';
+import { MockedProvider } from '@apollo/react-testing';
+
+const { getItem } = useLocalStorage();
+
+jest.mock('components/AddOn/support/services/Plugin.helper', () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    fetchStore: jest.fn().mockResolvedValue([
+      {
+        _id: '1',
+        pluginName: 'Plugin 1',
+        pluginDesc: 'Description 1',
+        pluginCreatedBy: 'User 1',
+        pluginInstallStatus: true,
+      },
+      {
+        _id: '2',
+        pluginName: 'Plugin 2',
+        pluginDesc: 'Description 2',
+        pluginCreatedBy: 'User 2',
+        pluginInstallStatus: false,
+      },
+      // Add more mock data as needed
+    ]),
+    fetchInstalled: jest.fn().mockResolvedValue([
+      {
+        _id: '1',
+        pluginName: 'Installed Plugin 1',
+        pluginDesc: 'Installed Description 1',
+        pluginCreatedBy: 'User 3',
+        pluginInstallStatus: true,
+      },
+      {
+        _id: '3',
+        pluginName: 'Installed Plugin 3',
+        pluginDesc: 'Installed Description 3',
+        pluginCreatedBy: 'User 4',
+        pluginInstallStatus: true,
+      },
+      // Add more mock data as needed
+    ]),
+    generateLinks: jest.fn().mockImplementation((plugins) => {
+      return plugins
+        .filter((plugin: { enabled: any }) => plugin.enabled)
+        .map((installedPlugin: { pluginName: any; component: string }) => {
+          return {
+            name: installedPlugin.pluginName,
+            url: `/plugin/${installedPlugin.component.toLowerCase()}`,
+          };
+        });
+    }),
+  })),
+}));
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+  headers: {
+    authorization: 'Bearer ' + getItem('token') || '',
+  },
+});
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([httpLink]),
+});
+
+jest.mock('components/AddOn/support/services/Plugin.helper', () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    fetchInstalled: jest.fn().mockResolvedValue([]),
+    fetchStore: jest.fn().mockResolvedValue([]),
+  })),
+}));
+
+const today = new Date();
+const tomorrow = today;
+tomorrow.setDate(today.getDate() + 1);
+
+const PLUGIN_GET_MOCK = {
+  request: {
+    query: PLUGIN_GET,
+  },
+  result: {
+    data: {
+      getPlugins: [
+        {
+          _id: '6581be50e88e74003aab436c',
+          pluginName: 'Plugin 1',
+          pluginCreatedBy: 'Talawa Team',
+          pluginDesc:
+            'User can share messages with other users in a chat user interface.',
+          uninstalledOrgs: [
+            '62ccfccd3eb7fd2a30f41601',
+            '62ccfccd3eb7fd2a30f41601',
+          ],
+          __typename: 'Plugin',
+        },
+        {
+          _id: '6581be50e88e74003aab436d',
+          pluginName: 'Plugin 2',
+          pluginCreatedBy: 'Talawa Team',
+          pluginDesc:
+            'User can share messages with other users in a chat user interface.',
+          uninstalledOrgs: ['6537904485008f171cf29924'],
+          __typename: 'Plugin',
+        },
+        {
+          _id: '6581be50e88e74003aab436e',
+          pluginName: 'Plugin 3',
+          pluginCreatedBy: 'Talawa Team',
+          pluginDesc:
+            'User can share messages with other users in a chat user interface.',
+          uninstalledOrgs: [
+            '62ccfccd3eb7fd2a30f41601',
+            '62ccfccd3eb7fd2a30f41601',
+          ],
+          __typename: 'Plugin',
+        },
+      ],
+    },
+    loading: false,
+  },
+};
+
+const PLUGIN_LOADING_MOCK = {
+  request: {
+    query: PLUGIN_GET,
+  },
+  result: {
+    data: {
+      getPlugins: [],
+    },
+    loading: true,
+  },
+};
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: 'undefined' }),
+}));
+const ORGANIZATIONS_LIST_MOCK = {
+  request: {
+    query: ORGANIZATIONS_LIST,
+    variables: {
+      id: 'undefined',
+    },
+  },
+  result: {
+    data: {
+      organizations: [
+        {
+          _id: 'undefined',
+          image: '',
+          creator: {
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+          name: 'name',
+          description: 'description',
+          userRegistrationRequired: true,
+
+          visibleInSearch: true,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          members: {
+            _id: 'id',
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+          admins: {
+            _id: 'id',
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+          membershipRequests: {
+            _id: 'id',
+            user: {
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+          },
+          blockedUsers: {
+            _id: 'id',
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+        },
+      ],
+    },
+  },
+};
+
+describe('Testing AddOnStore Component', () => {
+  test('for the working of the tabs', async () => {
+    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_GET_MOCK];
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <AddOnStore />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText('Installed'));
+
+    await wait();
+    userEvent.click(screen.getByText('Available'));
+  });
+
+  test('check the working search bar when on Available tab', async () => {
+    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_GET_MOCK];
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <AddOnStore />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText('Available'));
+
+    await wait();
+    let searchText = '';
+    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
+      target: { value: searchText },
+    });
+    expect(screen.getAllByText('Plugin 1').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('Plugin 2').length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText('Plugin 3').length).toBeGreaterThanOrEqual(1);
+
+    searchText = 'Plugin 1';
+    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
+      target: { value: searchText },
+    });
+    const plugin1Elements = screen.queryAllByText('Plugin 1');
+    expect(plugin1Elements.length).toBeGreaterThan(1);
+
+    searchText = 'Test Plugin';
+    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
+      target: { value: searchText },
+    });
+
+    const message = screen.getAllByText('Plugin does not exists');
+    expect(message.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('check filters enabled and disabled under Installed tab', async () => {
+    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_GET_MOCK];
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <AddOnStore />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText('Installed'));
+
+    expect(screen.getByText('Filters')).toBeInTheDocument();
+    expect(screen.getByLabelText('Enabled')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disabled')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('Enabled'));
+    expect(screen.getByLabelText('Enabled')).toBeChecked();
+    fireEvent.click(screen.getByLabelText('Disabled'));
+    expect(screen.getByLabelText('Disabled')).toBeChecked();
+  });
+
+  test('check the working search bar when on Installed tab', async () => {
+    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_GET_MOCK];
+
+    const { container } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <AddOnStore />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByText('Installed'));
+
+    await wait();
+    let searchText = '';
+    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
+      target: { value: searchText },
+    });
+    expect(container).toHaveTextContent('Plugin 1');
+    expect(container).toHaveTextContent('Plugin 3');
+
+    searchText = 'Plugin 1';
+    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
+      target: { value: searchText },
+    });
+    const plugin1Elements = screen.queryAllByText('Plugin 1');
+    expect(plugin1Elements.length).toBeGreaterThan(1);
+
+    searchText = 'Test Plugin';
+    fireEvent.change(screen.getByPlaceholderText('Ex: Donations'), {
+      target: { value: searchText },
+    });
+    const message = screen.getAllByText('Plugin does not exists');
+    expect(message.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('AddOnStore loading test', async () => {
+    expect(true).toBe(true);
+    const mocks = [ORGANIZATIONS_LIST_MOCK, PLUGIN_LOADING_MOCK];
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <AddOnStore />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    expect(screen.getByTestId('AddOnEntryStore')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/AddOn/core/AddOnStore/AddOnStore.tsx b/src/components/AddOn/core/AddOnStore/AddOnStore.tsx
new file mode 100644
index 0000000000..878ad64e31
--- /dev/null
+++ b/src/components/AddOn/core/AddOnStore/AddOnStore.tsx
@@ -0,0 +1,317 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from 'react';
+// import PropTypes from 'react';
+import styles from './AddOnStore.module.css';
+import AddOnEntry from '../AddOnEntry/AddOnEntry';
+import Action from '../../support/components/Action/Action';
+import { useQuery } from '@apollo/client';
+import { PLUGIN_GET } from 'GraphQl/Queries/Queries'; // GraphQL query for fetching plugins
+import { Col, Form, Row, Tab, Tabs } from 'react-bootstrap';
+import PluginHelper from 'components/AddOn/support/services/Plugin.helper';
+import { store } from './../../../../state/store';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+
+/**
+ * Component for managing and displaying plugins in the store.
+ *
+ * This component:
+ * - Displays a search input and filter options.
+ * - Uses tabs to switch between available and installed plugins.
+ * - Fetches plugins from a GraphQL endpoint and filters them based on search criteria.
+ * - Utilizes Redux store to manage plugin data.
+ *
+ * @returns A JSX element containing the UI for the add-on store.
+ */
+function addOnStore(): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'addOnStore' });
+  document.title = t('title');
+
+  const [isStore, setIsStore] = useState(true);
+  const [showEnabled, setShowEnabled] = useState(true);
+  const [searchText, setSearchText] = useState('');
+  const [, setDataList] = useState([]);
+
+  // type plugData = { pluginName: String, plug };
+  const { data, loading } = useQuery(PLUGIN_GET);
+
+  const { orgId } = useParams();
+
+  /**
+   * Fetches store plugins and updates the Redux store with the plugin data.
+   */
+  /* istanbul ignore next */
+  const getStorePlugins = async (): Promise<void> => {
+    let plugins = await new PluginHelper().fetchStore();
+    const installIds = (await new PluginHelper().fetchInstalled()).map(
+      (plugin: any) => plugin.id,
+    );
+    plugins = plugins.map((plugin: any) => {
+      plugin.installed = installIds.includes(plugin.id);
+      return plugin;
+    });
+    store.dispatch({ type: 'UPDATE_STORE', payload: plugins });
+  };
+
+  /**
+   * Sets the list of installed plugins in the component's state.
+   */
+  /* istanbul ignore next */
+  const getInstalledPlugins: () => any = () => {
+    setDataList(data);
+  };
+
+  /**
+   * Updates the currently selected tab and fetches the relevant plugin data.
+   *
+   * @param tab - The key of the selected tab (either 'available' or 'installed').
+   */
+  const updateSelectedTab = (tab: any): void => {
+    setIsStore(tab === 'available');
+    /* istanbul ignore next */
+    isStore ? getStorePlugins() : getInstalledPlugins();
+  };
+
+  /**
+   * Handles changes in the filter options.
+   *
+   * @param ev - The event object from the filter change.
+   */
+  const filterChange = (ev: any): void => {
+    setShowEnabled(ev.target.value === 'enabled');
+  };
+
+  // Show a loader while the data is being fetched
+  /* istanbul ignore next */
+  if (loading) {
+    return (
+      <>
+        <div data-testid="AddOnEntryStore" className={styles.loader}></div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Row>
+        <Col col={3}>
+          <Action label={t('search')}>
+            <Form.Control
+              type="name"
+              id="searchname"
+              className={styles.actioninput}
+              placeholder={t('searchName')}
+              autoComplete="off"
+              required
+              onChange={(e): void => setSearchText(e.target.value)}
+            />
+          </Action>
+          {!isStore && (
+            <Action label={t('filter')}>
+              <Form>
+                <div key={`inline-radio`} className="mb-3">
+                  <Form.Check
+                    inline
+                    label={t('enable')}
+                    name="radio-group"
+                    type="radio"
+                    value="enabled"
+                    onChange={filterChange}
+                    checked={showEnabled}
+                    className={styles.actionradio}
+                    id={`inline-radio-1`}
+                  />
+                  <Form.Check
+                    inline
+                    label={t('disable')}
+                    name="radio-group"
+                    type="radio"
+                    value="disabled"
+                    onChange={filterChange}
+                    checked={!showEnabled}
+                    className={styles.actionradio}
+                    id={`inline-radio-2`}
+                  />
+                </div>
+              </Form>
+            </Action>
+          )}
+        </Col>
+        <Col col={8}>
+          <div className={styles.justifysp}>
+            <p className={styles.logintitle}>{t('pHeading')}</p>
+            {searchText ? (
+              <p className="mb-2 text-muted author">
+                Search results for <b>{searchText}</b>
+              </p>
+            ) : null}
+
+            <Tabs
+              defaultActiveKey="available"
+              id="uncontrolled-tab-example"
+              className="mb-3"
+              onSelect={updateSelectedTab}
+            >
+              <Tab eventKey="available" title={t('available')}>
+                {data.getPlugins.filter(
+                  (val: {
+                    _id: string;
+                    pluginName: string | undefined;
+                    pluginDesc: string | undefined;
+                    pluginCreatedBy: string;
+                    pluginInstallStatus: boolean | undefined;
+                    getInstalledPlugins: () => any;
+                  }) => {
+                    if (searchText == '') {
+                      return val;
+                    } else if (
+                      val.pluginName
+                        ?.toLowerCase()
+                        .includes(searchText.toLowerCase())
+                    ) {
+                      return val;
+                    }
+                  },
+                ).length === 0 ? (
+                  <h4> {t('pMessage')}</h4>
+                ) : (
+                  data.getPlugins
+                    .filter(
+                      (val: {
+                        _id: string;
+                        pluginName: string | undefined;
+                        pluginDesc: string | undefined;
+                        pluginCreatedBy: string;
+                        pluginInstallStatus: boolean | undefined;
+                        getInstalledPlugins: () => any;
+                      }) => {
+                        if (searchText == '') {
+                          return val;
+                        } else if (
+                          val.pluginName
+                            ?.toLowerCase()
+                            .includes(searchText.toLowerCase())
+                        ) {
+                          return val;
+                        }
+                      },
+                    )
+                    .map(
+                      (
+                        plug: {
+                          _id: string;
+                          pluginName: string | undefined;
+                          pluginDesc: string | undefined;
+                          pluginCreatedBy: string;
+                          uninstalledOrgs: string[];
+                          getInstalledPlugins: () => any;
+                        },
+                        i: React.Key | null | undefined,
+                      ): JSX.Element => (
+                        <AddOnEntry
+                          id={plug._id}
+                          key={i}
+                          title={plug.pluginName}
+                          description={plug.pluginDesc}
+                          createdBy={plug.pluginCreatedBy}
+                          // isInstalled={plug.pluginInstallStatus}
+                          // configurable={plug.pluginInstallStatus}
+                          component={'Special  Component'}
+                          modified={true}
+                          getInstalledPlugins={getInstalledPlugins}
+                          uninstalledOrgs={plug.uninstalledOrgs}
+                        />
+                      ),
+                    )
+                )}
+              </Tab>
+              <Tab eventKey="installed" title={t('install')}>
+                {data.getPlugins
+                  .filter(
+                    (plugin: any) => !plugin.uninstalledOrgs.includes(orgId),
+                  )
+                  .filter(
+                    (val: {
+                      _id: string;
+                      pluginName: string | undefined;
+                      pluginDesc: string | undefined;
+                      pluginCreatedBy: string;
+                      pluginInstallStatus: boolean | undefined;
+                      getInstalledPlugins: () => any;
+                    }) => {
+                      if (searchText == '') {
+                        return val;
+                      } else if (
+                        val.pluginName
+                          ?.toLowerCase()
+                          .includes(searchText.toLowerCase())
+                      ) {
+                        return val;
+                      }
+                    },
+                  ).length === 0 ? (
+                  <h4>{t('pMessage')} </h4>
+                ) : (
+                  data.getPlugins
+                    .filter(
+                      (plugin: any) => !plugin.uninstalledOrgs.includes(orgId),
+                    )
+                    .filter(
+                      (val: {
+                        _id: string;
+                        pluginName: string | undefined;
+                        pluginDesc: string | undefined;
+                        pluginCreatedBy: string;
+                        pluginInstallStatus: boolean | undefined;
+                        getInstalledPlugins: () => any;
+                      }) => {
+                        if (searchText == '') {
+                          return val;
+                        } else if (
+                          val.pluginName
+                            ?.toLowerCase()
+                            .includes(searchText.toLowerCase())
+                        ) {
+                          return val;
+                        }
+                      },
+                    )
+                    .map(
+                      (
+                        plug: {
+                          _id: string;
+                          pluginName: string | undefined;
+                          pluginDesc: string | undefined;
+                          pluginCreatedBy: string;
+                          uninstalledOrgs: string[];
+                          pluginInstallStatus: boolean | undefined;
+                          getInstalledPlugins: () => any;
+                        },
+                        i: React.Key | null | undefined,
+                      ): JSX.Element => (
+                        <AddOnEntry
+                          id={plug._id}
+                          key={i}
+                          title={plug.pluginName}
+                          description={plug.pluginDesc}
+                          createdBy={plug.pluginCreatedBy}
+                          // isInstalled={plug.pluginInstallStatus}
+                          // configurable={plug.pluginInstallStatus}
+                          component={'Special  Component'}
+                          modified={true}
+                          getInstalledPlugins={getInstalledPlugins}
+                          uninstalledOrgs={plug.uninstalledOrgs}
+                        />
+                      ),
+                    )
+                )}
+              </Tab>
+            </Tabs>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default addOnStore;
diff --git a/src/components/AddOn/support/components/Action/Action.module.css b/src/components/AddOn/support/components/Action/Action.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/AddOn/support/components/Action/Action.test.tsx b/src/components/AddOn/support/components/Action/Action.test.tsx
new file mode 100644
index 0000000000..ce6cd633b9
--- /dev/null
+++ b/src/components/AddOn/support/components/Action/Action.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
+import { store } from 'state/store';
+import Action from './Action';
+
+describe('Testing Action Component', () => {
+  const props = {
+    children: 'dummy children',
+    label: 'dummy label',
+  };
+
+  test('should render props and text elements test for the page component', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <Action {...props} />
+      </Provider>,
+    );
+
+    expect(getByText(props.label)).toBeInTheDocument();
+    expect(getByText(props.children)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/AddOn/support/components/Action/Action.tsx b/src/components/AddOn/support/components/Action/Action.tsx
new file mode 100644
index 0000000000..f29d8492d3
--- /dev/null
+++ b/src/components/AddOn/support/components/Action/Action.tsx
@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+
+/**
+ * Props for the `action` component.
+ */
+interface InterfaceActionProps {
+  /**
+   * The child elements to be rendered inside the action component.
+   */
+  children: any;
+
+  /**
+   * The label to be displayed above the child elements.
+   */
+  label: string;
+}
+
+/**
+ * A React component that renders a labeled container for embedded actions.
+ *
+ * @param  props - The properties for the component.
+ * @returns  A JSX element containing the label and child elements.
+ *
+ * @example
+ * <Action label="My Label">
+ *   <button>Click Me</button>
+ * </Action>
+ */
+function action(props: InterfaceActionProps): JSX.Element {
+  const actionRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={actionRef}>
+      <h6 className="action-label">{props.label}</h6>
+      {props.children}
+    </div>
+  );
+}
+
+export default action;
diff --git a/src/components/AddOn/support/components/MainContent/MainContent.module.css b/src/components/AddOn/support/components/MainContent/MainContent.module.css
new file mode 100644
index 0000000000..3321cf6fd7
--- /dev/null
+++ b/src/components/AddOn/support/components/MainContent/MainContent.module.css
@@ -0,0 +1,4 @@
+.maincontainer {
+  width: 70vw;
+  margin-right: 2rem;
+}
diff --git a/src/components/AddOn/support/components/MainContent/MainContent.test.tsx b/src/components/AddOn/support/components/MainContent/MainContent.test.tsx
new file mode 100644
index 0000000000..81adbc916e
--- /dev/null
+++ b/src/components/AddOn/support/components/MainContent/MainContent.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+import { store } from 'state/store';
+import MainContent from './MainContent';
+
+describe('Testing MainContent component', () => {
+  const props = {
+    children: 'This is a dummy text',
+  };
+
+  test('should render props and children for the Main Content', () => {
+    const { getByTestId, getByText } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <MainContent {...props} />
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    expect(getByTestId('mainContentCheck')).toBeInTheDocument();
+    expect(getByText(props.children)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/AddOn/support/components/MainContent/MainContent.tsx b/src/components/AddOn/support/components/MainContent/MainContent.tsx
new file mode 100644
index 0000000000..eddc1b993d
--- /dev/null
+++ b/src/components/AddOn/support/components/MainContent/MainContent.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './MainContent.module.css';
+
+/**
+ * Props for the `mainContent` component.
+ */
+interface InterfaceMainContentProps {
+  /**
+   * The child elements to be rendered inside the main content container.
+   */
+  children: any;
+}
+
+/**
+ * A React component that renders a main content container with additional styles.
+ *
+ * @param props - The properties for the component.
+ * @returns  A JSX element containing the main content container with the provided child elements.
+ *
+ * @example
+ * <MainContent>
+ *   <p>Main content goes here</p>
+ * </MainContent>
+ */
+function mainContent({ children }: InterfaceMainContentProps): JSX.Element {
+  return (
+    <div className={styles.maincontainer} data-testid="mainContentCheck">
+      {children}
+    </div>
+  );
+}
+
+export default mainContent;
diff --git a/src/components/AddOn/support/components/SidePanel/SidePanel.module.css b/src/components/AddOn/support/components/SidePanel/SidePanel.module.css
new file mode 100644
index 0000000000..f337eeea1b
--- /dev/null
+++ b/src/components/AddOn/support/components/SidePanel/SidePanel.module.css
@@ -0,0 +1,12 @@
+.sidebarcontainer {
+  width: 30vw;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  height: fit-content;
+}
+
+.sidebarcollapsed {
+  display: none;
+}
diff --git a/src/components/AddOn/support/components/SidePanel/SidePanel.test.tsx b/src/components/AddOn/support/components/SidePanel/SidePanel.test.tsx
new file mode 100644
index 0000000000..d929278d0e
--- /dev/null
+++ b/src/components/AddOn/support/components/SidePanel/SidePanel.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SidePanel from './SidePanel';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { BACKEND_URL } from 'Constant/constant';
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  uri: BACKEND_URL,
+});
+
+describe('Testing Contribution Stats', () => {
+  const props = {
+    collapse: true,
+    children: '234',
+  };
+
+  test('should render props and text elements test for the SidePanel component', () => {
+    render(
+      <ApolloProvider client={client}>
+        <SidePanel {...props} />
+      </ApolloProvider>,
+    );
+    expect(screen.getByTestId('SidePanel')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/AddOn/support/components/SidePanel/SidePanel.tsx b/src/components/AddOn/support/components/SidePanel/SidePanel.tsx
new file mode 100644
index 0000000000..d4c0d65966
--- /dev/null
+++ b/src/components/AddOn/support/components/SidePanel/SidePanel.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import styles from './SidePanel.module.css';
+
+/**
+ * Props for the `sidePanel` component.
+ */
+interface InterfaceSidePanelProps {
+  /**
+   * Whether the side panel should be collapsed.
+   */
+  collapse?: boolean;
+
+  /**
+   * The child elements to be rendered inside the side panel.
+   */
+  children: any;
+}
+
+/**
+ * A React component that renders a side panel with an optional collapse state.
+ *
+ * @param  props - The properties for the component.
+ * @returns  A JSX element containing the side panel with the provided child elements.
+ *
+ * @example
+ * <SidePanel collapse="true">
+ *   <p>Side panel content</p>
+ * </SidePanel>
+ */
+function sidePanel({
+  collapse,
+  children,
+}: InterfaceSidePanelProps): JSX.Element {
+  return (
+    <div
+      data-testid="SidePanel"
+      className={`${styles.sidebarcontainer}${
+        collapse ? styles.sidebarcollapsed : ''
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default sidePanel;
diff --git a/src/components/AddOn/support/services/Plugin.helper.test.ts b/src/components/AddOn/support/services/Plugin.helper.test.ts
new file mode 100644
index 0000000000..e024734247
--- /dev/null
+++ b/src/components/AddOn/support/services/Plugin.helper.test.ts
@@ -0,0 +1,46 @@
+import PluginHelper from './Plugin.helper';
+
+describe('Testing src/components/AddOn/support/services/Plugin.helper.ts', () => {
+  test('Class should contain the required method definitions', () => {
+    const pluginHelper = new PluginHelper();
+    expect(pluginHelper).toHaveProperty('fetchStore');
+    expect(pluginHelper).toHaveProperty('fetchInstalled');
+    expect(pluginHelper).toHaveProperty('generateLinks');
+    expect(pluginHelper).toHaveProperty('generateLinks');
+  });
+  test('generateLinks should return proper objects', () => {
+    const obj = { enabled: true, name: 'demo', component: 'samplecomponent' };
+    const objToMatch = { name: 'demo', url: '/plugin/samplecomponent' };
+    const pluginHelper = new PluginHelper();
+    const val = pluginHelper.generateLinks([obj]);
+    expect(val).toMatchObject([objToMatch]);
+  });
+  it('fetchStore should return expected JSON', async () => {
+    const helper = new PluginHelper();
+    const spy = jest.spyOn(global, 'fetch').mockImplementation(() => {
+      const response = new Response();
+      response.json = jest
+        .fn()
+        .mockReturnValue(Promise.resolve({ data: 'mock data' }));
+      return Promise.resolve(response);
+    });
+
+    const result = await helper.fetchStore();
+    expect(result).toEqual({ data: 'mock data' });
+    spy.mockRestore();
+  });
+  it('fetchInstalled() should return expected JSON', async () => {
+    const pluginHelper = new PluginHelper();
+    const mockResponse = [
+      { name: 'plugin1', component: 'Component1', enabled: true },
+      { name: 'plugin2', component: 'Component2', enabled: false },
+    ];
+    jest.spyOn(global, 'fetch').mockImplementation(() => {
+      const response = new Response();
+      response.json = jest.fn().mockReturnValue(Promise.resolve(mockResponse));
+      return Promise.resolve(response);
+    }) as jest.Mock;
+    const result = await pluginHelper.fetchInstalled();
+    expect(result).toEqual(mockResponse);
+  });
+});
diff --git a/src/components/AddOn/support/services/Plugin.helper.ts b/src/components/AddOn/support/services/Plugin.helper.ts
new file mode 100644
index 0000000000..1ebefc351f
--- /dev/null
+++ b/src/components/AddOn/support/services/Plugin.helper.ts
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Helper class for managing plugin-related tasks such as fetching store data, installed plugins, and generating plugin links.
+ */
+class PluginHelper {
+  /**
+   * Fetches the store data from a local server.
+   *
+   * @returns A promise that resolves to the store data in JSON format.
+   */
+  fetchStore = async (): Promise<any> => {
+    const result = await fetch(`http://localhost:${process.env.PORT}/store`);
+    return await result.json();
+  };
+
+  /**
+   * Fetches the list of installed plugins from a local server.
+   *
+   * @returns A promise that resolves to the installed plugins data in JSON format.
+   */
+  fetchInstalled = async (): Promise<any> => {
+    const result = await fetch(`http://localhost:3005/installed`);
+    return await result.json();
+  };
+
+  /**
+   * Generates an array of links for the enabled plugins.
+   *
+   * @param  plugins - An array of plugin objects.
+   * @returns  An array of objects containing the name and URL of each enabled plugin.
+   */
+  generateLinks = (plugins: any[]): { name: string; url: string }[] => {
+    return plugins
+      .filter((plugin: any) => plugin.enabled)
+      .map((installedPlugin: any) => {
+        return {
+          name: installedPlugin.name,
+          url: `/plugin/${installedPlugin.component.toLowerCase()}`,
+        };
+      });
+  };
+}
+
+export default PluginHelper;
diff --git a/src/components/AddOn/support/services/Render.helper.ts b/src/components/AddOn/support/services/Render.helper.ts
new file mode 100644
index 0000000000..21202dc7af
--- /dev/null
+++ b/src/components/AddOn/support/services/Render.helper.ts
@@ -0,0 +1,3 @@
+class RenderHelper {}
+
+export default RenderHelper;
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/src/components/AddPeopleToTag/AddPeopleToTag.module.css
new file mode 100644
index 0000000000..5dd04ffed5
--- /dev/null
+++ b/src/components/AddPeopleToTag/AddPeopleToTag.module.css
@@ -0,0 +1,54 @@
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.scrollContainer {
+  height: 100px;
+  overflow-y: auto;
+  margin-bottom: 1rem;
+}
+
+.memberBadge {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px var(--bs-gray-400);
+  max-width: calc(100% - 2rem);
+}
+
+.removeFilterIcon {
+  cursor: pointer;
+}
+
+.loadingDiv {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.test.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.test.tsx
new file mode 100644
index 0000000000..824bc25654
--- /dev/null
+++ b/src/components/AddPeopleToTag/AddPeopleToTag.test.tsx
@@ -0,0 +1,316 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  cleanup,
+  waitFor,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import { store } from 'state/store';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import { InMemoryCache, type ApolloLink } from '@apollo/client';
+import type { InterfaceAddPeopleToTagProps } from './AddPeopleToTag';
+import AddPeopleToTag from './AddPeopleToTag';
+import i18n from 'utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './AddPeopleToTagsMocks';
+import type { TFunction } from 'i18next';
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR, true);
+
+async function wait(): Promise<void> {
+  await waitFor(() => {
+    // The waitFor utility automatically uses optimal timing
+    return Promise.resolve();
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(i18n.getDataByLanguage('en')?.translation.manageTag ?? {}),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const props: InterfaceAddPeopleToTagProps = {
+  addPeopleToTagModalIsOpen: true,
+  hideAddPeopleToTagModal: () => {},
+  refetchAssignedMembersData: () => {},
+  t: ((key: string) => translations[key]) as TFunction<
+    'translation',
+    'manageTag'
+  >,
+  tCommon: ((key: string) => translations[key]) as TFunction<
+    'common',
+    undefined
+  >,
+};
+
+const cache = new InMemoryCache({
+  typePolicies: {
+    Query: {
+      fields: {
+        getUserTag: {
+          merge(existing = {}, incoming) {
+            const merged = {
+              ...existing,
+              ...incoming,
+              usersToAssignTo: {
+                ...existing.usersToAssignTo,
+                ...incoming.usersToAssignTo,
+                edges: [
+                  ...(existing.usersToAssignTo?.edges || []),
+                  ...(incoming.usersToAssignTo?.edges || []),
+                ],
+              },
+            };
+
+            return merged;
+          },
+        },
+      },
+    },
+  },
+});
+
+const renderAddPeopleToTagModal = (
+  props: InterfaceAddPeopleToTagProps,
+  link: ApolloLink,
+): RenderResult => {
+  return render(
+    <MockedProvider cache={cache} addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgtags/123/manageTag/1']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <Routes>
+              <Route
+                path="/orgtags/:orgId/manageTag/:tagId"
+                element={<AddPeopleToTag {...props} />}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Organisation Tags Page', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+    cache.reset();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('Component loads correctly', async () => {
+    const { getByText } = renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.addPeople)).toBeInTheDocument();
+    });
+  });
+
+  test('Renders error component when when query is unsuccessful', async () => {
+    const { queryByText } = renderAddPeopleToTagModal(props, link2);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(queryByText(translations.addPeople)).not.toBeInTheDocument();
+    });
+  });
+
+  test('Selects and deselects members to assign to', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('selectMemberBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('selectMemberBtn')[0]);
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('selectMemberBtn')[1]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('selectMemberBtn')[1]);
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('clearSelectedMember')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('clearSelectedMember')[0]);
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('deselectMemberBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('deselectMemberBtn')[0]);
+  });
+
+  test('searchs for tags where the firstName matches the provided firstName search input', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.firstName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.firstName);
+    fireEvent.change(input, { target: { value: 'usersToAssignTo' } });
+
+    // should render the two users from the mock data
+    // where firstName starts with "usersToAssignTo"
+    await waitFor(() => {
+      const members = screen.getAllByTestId('memberName');
+      expect(members.length).toEqual(2);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'usersToAssignTo user1',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[1]).toHaveTextContent(
+        'usersToAssignTo user2',
+      );
+    });
+  });
+
+  test('searchs for tags where the lastName matches the provided lastName search input', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.lastName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.lastName);
+    fireEvent.change(input, { target: { value: 'userToAssignTo' } });
+
+    // should render the two users from the mock data
+    // where lastName starts with "usersToAssignTo"
+    await waitFor(() => {
+      const members = screen.getAllByTestId('memberName');
+      expect(members.length).toEqual(2);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'first userToAssignTo',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[1]).toHaveTextContent(
+        'second userToAssignTo',
+      );
+    });
+  });
+
+  test('Renders more members with infinite scroll', async () => {
+    const { getByText } = renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.addPeople)).toBeInTheDocument();
+    });
+
+    // Find the infinite scroll div by test ID or another selector
+    const addPeopleToTagScrollableDiv = screen.getByTestId(
+      'addPeopleToTagScrollableDiv',
+    );
+
+    const initialMemberDataLength = screen.getAllByTestId('memberName').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(addPeopleToTagScrollableDiv, {
+      target: { scrollY: addPeopleToTagScrollableDiv.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalMemberDataLength = screen.getAllByTestId('memberName').length;
+      expect(finalMemberDataLength).toBeGreaterThan(initialMemberDataLength);
+
+      expect(getByText(translations.addPeople)).toBeInTheDocument();
+    });
+  });
+
+  test('Toasts error when no one is selected while assigning', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('assignPeopleBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('assignPeopleBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(translations.noOneSelected);
+    });
+  });
+
+  test('Assigns tag to multiple people', async () => {
+    renderAddPeopleToTagModal(props, link);
+
+    await wait();
+
+    // select members and assign them
+    await waitFor(() => {
+      expect(screen.getAllByTestId('selectMemberBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('selectMemberBtn')[0]);
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('selectMemberBtn')[1]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('selectMemberBtn')[1]);
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('selectMemberBtn')[2]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('selectMemberBtn')[2]);
+
+    userEvent.click(screen.getByTestId('assignPeopleBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfullyAssignedToPeople,
+      );
+    });
+  });
+});
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx
new file mode 100644
index 0000000000..51d21a6a1c
--- /dev/null
+++ b/src/components/AddPeopleToTag/AddPeopleToTag.tsx
@@ -0,0 +1,419 @@
+import { useMutation, useQuery } from '@apollo/client';
+import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
+import { USER_TAGS_MEMBERS_TO_ASSIGN_TO } from 'GraphQl/Queries/userTagQueries';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import { useParams } from 'react-router-dom';
+import type { InterfaceQueryUserTagsMembersToAssignTo } from 'utils/interfaces';
+import styles from './AddPeopleToTag.module.css';
+import type { InterfaceTagUsersToAssignToQuery } from 'utils/organizationTagsUtils';
+import {
+  TAGS_QUERY_DATA_CHUNK_SIZE,
+  dataGridStyle,
+} from 'utils/organizationTagsUtils';
+import { Stack } from '@mui/material';
+import { toast } from 'react-toastify';
+import { ADD_PEOPLE_TO_TAG } from 'GraphQl/Mutations/TagMutations';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { WarningAmberRounded } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+import type { TFunction } from 'i18next';
+
+/**
+ * Props for the `AddPeopleToTag` component.
+ */
+export interface InterfaceAddPeopleToTagProps {
+  addPeopleToTagModalIsOpen: boolean;
+  hideAddPeopleToTagModal: () => void;
+  refetchAssignedMembersData: () => void;
+  t: TFunction<'translation', 'manageTag'>;
+  tCommon: TFunction<'common', undefined>;
+}
+
+interface InterfaceMemberData {
+  _id: string;
+  firstName: string;
+  lastName: string;
+}
+
+const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
+  addPeopleToTagModalIsOpen,
+  hideAddPeopleToTagModal,
+  refetchAssignedMembersData,
+  t,
+  tCommon,
+}) => {
+  const { tagId: currentTagId } = useParams();
+
+  const { t: tErrors } = useTranslation('error');
+
+  const [assignToMembers, setAssignToMembers] = useState<InterfaceMemberData[]>(
+    [],
+  );
+
+  const [memberToAssignToSearchFirstName, setMemberToAssignToSearchFirstName] =
+    useState('');
+  const [memberToAssignToSearchLastName, setMemberToAssignToSearchLastName] =
+    useState('');
+
+  const {
+    data: userTagsMembersToAssignToData,
+    loading: userTagsMembersToAssignToLoading,
+    error: userTagsMembersToAssignToError,
+    refetch: userTagsMembersToAssignToRefetch,
+    fetchMore: fetchMoreMembersToAssignTo,
+  }: InterfaceTagUsersToAssignToQuery = useQuery(
+    USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+    {
+      variables: {
+        id: currentTagId,
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: memberToAssignToSearchFirstName },
+          lastName: { starts_with: memberToAssignToSearchLastName },
+        },
+      },
+      skip: !addPeopleToTagModalIsOpen,
+    },
+  );
+
+  useEffect(() => {
+    setMemberToAssignToSearchFirstName('');
+    setMemberToAssignToSearchLastName('');
+    userTagsMembersToAssignToRefetch();
+  }, [addPeopleToTagModalIsOpen]);
+
+  const loadMoreMembersToAssignTo = (): void => {
+    fetchMoreMembersToAssignTo({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after:
+          userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo
+            .pageInfo.endCursor, // Fetch after the last loaded cursor
+      },
+      updateQuery: (
+        prevResult: {
+          getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
+        },
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult: {
+            getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
+          };
+        },
+      ) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          getUsersToAssignTo: {
+            ...fetchMoreResult.getUsersToAssignTo,
+            usersToAssignTo: {
+              ...fetchMoreResult.getUsersToAssignTo.usersToAssignTo,
+              edges: [
+                ...prevResult.getUsersToAssignTo.usersToAssignTo.edges,
+                ...fetchMoreResult.getUsersToAssignTo.usersToAssignTo.edges,
+              ],
+            },
+          },
+        };
+      },
+    });
+  };
+
+  const userTagMembersToAssignTo =
+    userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map(
+      (edge) => edge.node,
+    ) ?? /* istanbul ignore next */ [];
+
+  const handleAddOrRemoveMember = (member: InterfaceMemberData): void => {
+    setAssignToMembers((prevMembers) => {
+      const isAssigned = prevMembers.some((m) => m._id === member._id);
+      if (isAssigned) {
+        return prevMembers.filter((m) => m._id !== member._id);
+      } else {
+        return [...prevMembers, member];
+      }
+    });
+  };
+
+  const removeMember = (id: string): void => {
+    setAssignToMembers((prevMembers) =>
+      prevMembers.filter((m) => m._id !== id),
+    );
+  };
+
+  const [addPeople, { loading: addPeopleToTagLoading }] =
+    useMutation(ADD_PEOPLE_TO_TAG);
+
+  const addPeopleToCurrentTag = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+
+    if (!assignToMembers.length) {
+      toast.error(t('noOneSelected'));
+      return;
+    }
+
+    try {
+      const { data } = await addPeople({
+        variables: {
+          tagId: currentTagId,
+          userIds: assignToMembers.map((member) => member._id),
+        },
+      });
+
+      if (data) {
+        toast.success(t('successfullyAssignedToPeople'));
+        refetchAssignedMembersData();
+        hideAddPeopleToTagModal();
+        setAssignToMembers([]);
+      }
+    } catch (error: unknown) /* istanbul ignore next */ {
+      const errorMessage =
+        error instanceof Error ? error.message : tErrors('unknownError');
+      toast.error(errorMessage);
+    }
+  };
+
+  if (userTagsMembersToAssignToError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {t('errorOccurredWhileLoadingMembers')}
+            <br />
+            {userTagsMembersToAssignToError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: '#',
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'userName',
+      headerName: t('userName'),
+      flex: 2,
+      minWidth: 100,
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="memberName">
+            {params.row.firstName + ' ' + params.row.lastName}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'actions',
+      headerName: t('actions'),
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const isToBeAssigned = assignToMembers.some(
+          (member) => member._id === params.row._id,
+        );
+
+        return (
+          <Button
+            size="sm"
+            onClick={() => handleAddOrRemoveMember(params.row)}
+            data-testid={
+              isToBeAssigned ? 'deselectMemberBtn' : 'selectMemberBtn'
+            }
+            variant={!isToBeAssigned ? 'primary' : 'danger'}
+          >
+            {isToBeAssigned ? 'x' : '+'}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Modal
+        show={addPeopleToTagModalIsOpen}
+        onHide={hideAddPeopleToTagModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header
+          className="bg-primary"
+          data-testid="modalOrganizationHeader"
+          closeButton
+        >
+          <Modal.Title className="text-white">{t('addPeople')}</Modal.Title>
+        </Modal.Header>
+        <Form onSubmitCapture={addPeopleToCurrentTag}>
+          <Modal.Body>
+            <div
+              className={`d-flex flex-wrap align-items-center border border-2 border-dark-subtle bg-light-subtle rounded-3 p-2 ${styles.scrollContainer}`}
+            >
+              {assignToMembers.length === 0 ? (
+                <div className="text-body-tertiary mx-auto">
+                  {t('noOneSelected')}
+                </div>
+              ) : (
+                assignToMembers.map((member) => (
+                  <div
+                    key={member._id}
+                    className={`badge bg-dark-subtle text-secondary-emphasis lh-lg my-2 ms-2 d-flex align-items-center ${styles.memberBadge}`}
+                  >
+                    {member.firstName} {member.lastName}
+                    <i
+                      className={`${styles.removeFilterIcon} fa fa-times ms-2 text-body-tertiary`}
+                      onClick={() => removeMember(member._id)}
+                      data-testid="clearSelectedMember"
+                    />
+                  </div>
+                ))
+              )}
+            </div>
+
+            <div className="my-3 d-flex">
+              <div className="me-2 position-relative">
+                <i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
+                <Form.Control
+                  type="text"
+                  id="firstName"
+                  className="bg-light"
+                  placeholder={tCommon('firstName')}
+                  onChange={(e) =>
+                    setMemberToAssignToSearchFirstName(e.target.value.trim())
+                  }
+                  data-testid="searchByFirstName"
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mx-2 position-relative">
+                <i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
+                <Form.Control
+                  type="text"
+                  id="lastName"
+                  className="bg-light"
+                  placeholder={tCommon('lastName')}
+                  onChange={(e) =>
+                    setMemberToAssignToSearchLastName(e.target.value.trim())
+                  }
+                  data-testid="searchByLastName"
+                  autoComplete="off"
+                />
+              </div>
+            </div>
+
+            {userTagsMembersToAssignToLoading ? (
+              <div className={styles.loadingDiv}>
+                <InfiniteScrollLoader />
+              </div>
+            ) : (
+              <>
+                <div
+                  id="addPeopleToTagScrollableDiv"
+                  data-testid="addPeopleToTagScrollableDiv"
+                  style={{
+                    height: 300,
+                    overflow: 'auto',
+                  }}
+                >
+                  <InfiniteScroll
+                    dataLength={userTagMembersToAssignTo?.length ?? 0} // This is important field to render the next data
+                    next={loadMoreMembersToAssignTo}
+                    hasMore={
+                      userTagsMembersToAssignToData?.getUsersToAssignTo
+                        .usersToAssignTo.pageInfo.hasNextPage ??
+                      /* istanbul ignore next */ false
+                    }
+                    loader={<InfiniteScrollLoader />}
+                    scrollableTarget="addPeopleToTagScrollableDiv"
+                  >
+                    <DataGrid
+                      disableColumnMenu
+                      columnBufferPx={7}
+                      hideFooter={true}
+                      getRowId={(row) => row.id}
+                      slots={{
+                        noRowsOverlay: /* istanbul ignore next */ () => (
+                          <Stack
+                            height="100%"
+                            alignItems="center"
+                            justifyContent="center"
+                          >
+                            {t('noMoreMembersFound')}
+                          </Stack>
+                        ),
+                      }}
+                      sx={{
+                        ...dataGridStyle,
+                        '& .MuiDataGrid-topContainer': {
+                          position: 'static',
+                        },
+                        '& .MuiDataGrid-virtualScrollerContent': {
+                          marginTop: '0',
+                        },
+                      }}
+                      getRowClassName={() => `${styles.rowBackground}`}
+                      autoHeight
+                      rowHeight={65}
+                      rows={userTagMembersToAssignTo?.map(
+                        (membersToAssignTo, index) => ({
+                          id: index + 1,
+                          ...membersToAssignTo,
+                        }),
+                      )}
+                      columns={columns}
+                      isRowSelectable={() => false}
+                    />
+                  </InfiniteScroll>
+                </div>
+              </>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              onClick={hideAddPeopleToTagModal}
+              variant="outline-secondary"
+              data-testid="closeAddPeopleToTagModal"
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button
+              type="submit"
+              disabled={addPeopleToTagLoading}
+              variant="primary"
+              data-testid="assignPeopleBtn"
+            >
+              {t('assign')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default AddPeopleToTag;
diff --git a/src/components/AddPeopleToTag/AddPeopleToTagsMocks.ts b/src/components/AddPeopleToTag/AddPeopleToTagsMocks.ts
new file mode 100644
index 0000000000..fbaf812186
--- /dev/null
+++ b/src/components/AddPeopleToTag/AddPeopleToTagsMocks.ts
@@ -0,0 +1,292 @@
+import { ADD_PEOPLE_TO_TAG } from 'GraphQl/Mutations/TagMutations';
+import { USER_TAGS_MEMBERS_TO_ASSIGN_TO } from 'GraphQl/Queries/userTagQueries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: '' },
+        },
+      },
+    },
+    result: {
+      data: {
+        getUsersToAssignTo: {
+          name: 'tag1',
+          usersToAssignTo: {
+            edges: [
+              {
+                node: {
+                  _id: '1',
+                  firstName: 'member',
+                  lastName: '1',
+                },
+                cursor: '1',
+              },
+              {
+                node: {
+                  _id: '2',
+                  firstName: 'member',
+                  lastName: '2',
+                },
+                cursor: '2',
+              },
+              {
+                node: {
+                  _id: '3',
+                  firstName: 'member',
+                  lastName: '3',
+                },
+                cursor: '3',
+              },
+              {
+                node: {
+                  _id: '4',
+                  firstName: 'member',
+                  lastName: '4',
+                },
+                cursor: '4',
+              },
+              {
+                node: {
+                  _id: '5',
+                  firstName: 'member',
+                  lastName: '5',
+                },
+                cursor: '5',
+              },
+              {
+                node: {
+                  _id: '6',
+                  firstName: 'member',
+                  lastName: '6',
+                },
+                cursor: '6',
+              },
+              {
+                node: {
+                  _id: '7',
+                  firstName: 'member',
+                  lastName: '7',
+                },
+                cursor: '7',
+              },
+              {
+                node: {
+                  _id: '8',
+                  firstName: 'member',
+                  lastName: '8',
+                },
+                cursor: '8',
+              },
+              {
+                node: {
+                  _id: '9',
+                  firstName: 'member',
+                  lastName: '9',
+                },
+                cursor: '9',
+              },
+              {
+                node: {
+                  _id: '10',
+                  firstName: 'member',
+                  lastName: '10',
+                },
+                cursor: '10',
+              },
+            ],
+            pageInfo: {
+              startCursor: '1',
+              endCursor: '10',
+              hasNextPage: true,
+              hasPreviousPage: false,
+            },
+            totalCount: 12,
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: '10',
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: '' },
+        },
+      },
+    },
+    result: {
+      data: {
+        getUsersToAssignTo: {
+          name: 'tag1',
+          usersToAssignTo: {
+            edges: [
+              {
+                node: {
+                  _id: '11',
+                  firstName: 'member',
+                  lastName: '11',
+                },
+                cursor: '11',
+              },
+              {
+                node: {
+                  _id: '12',
+                  firstName: 'member',
+                  lastName: '12',
+                },
+                cursor: '12',
+              },
+            ],
+            pageInfo: {
+              startCursor: '11',
+              endCursor: '12',
+              hasNextPage: false,
+              hasPreviousPage: true,
+            },
+            totalCount: 12,
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: 'usersToAssignTo' },
+          lastName: { starts_with: '' },
+        },
+      },
+    },
+    result: {
+      data: {
+        getUsersToAssignTo: {
+          name: 'tag1',
+          usersToAssignTo: {
+            edges: [
+              {
+                node: {
+                  _id: '1',
+                  firstName: 'usersToAssignTo',
+                  lastName: 'user1',
+                },
+                cursor: '1',
+              },
+              {
+                node: {
+                  _id: '2',
+                  firstName: 'usersToAssignTo',
+                  lastName: 'user2',
+                },
+                cursor: '2',
+              },
+            ],
+            pageInfo: {
+              startCursor: '1',
+              endCursor: '2',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 2,
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: 'userToAssignTo' },
+        },
+      },
+    },
+    result: {
+      data: {
+        getUsersToAssignTo: {
+          name: 'tag1',
+          usersToAssignTo: {
+            edges: [
+              {
+                node: {
+                  _id: '1',
+                  firstName: 'first',
+                  lastName: 'userToAssignTo',
+                },
+                cursor: '1',
+              },
+              {
+                node: {
+                  _id: '2',
+                  firstName: 'second',
+                  lastName: 'userToAssignTo',
+                },
+                cursor: '2',
+              },
+            ],
+            pageInfo: {
+              startCursor: '1',
+              endCursor: '2',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 2,
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: ADD_PEOPLE_TO_TAG,
+      variables: {
+        tagId: '1',
+        userIds: ['1', '3', '5'],
+      },
+    },
+    result: {
+      data: {
+        addPeopleToUserTag: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: USER_TAGS_MEMBERS_TO_ASSIGN_TO,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: '' },
+        },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/components/Advertisements/Advertisements.module.css b/src/components/Advertisements/Advertisements.module.css
new file mode 100644
index 0000000000..8a34c03be5
--- /dev/null
+++ b/src/components/Advertisements/Advertisements.module.css
@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+
+.actioninput {
+  text-decoration: none;
+  margin-bottom: 50px;
+  border-color: #e8e5e5;
+  width: 80%;
+  border-radius: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  box-shadow: none;
+}
+
+.actionradio input {
+  width: fit-content;
+  margin: inherit;
+}
diff --git a/src/components/Advertisements/Advertisements.test.tsx b/src/components/Advertisements/Advertisements.test.tsx
new file mode 100644
index 0000000000..c0992a1012
--- /dev/null
+++ b/src/components/Advertisements/Advertisements.test.tsx
@@ -0,0 +1,730 @@
+import React, { act } from 'react';
+import {
+  ApolloClient,
+  ApolloLink,
+  ApolloProvider,
+  HttpLink,
+  InMemoryCache,
+} from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-location-mock';
+
+import type { DocumentNode, NormalizedCacheObject } from '@apollo/client';
+import userEvent from '@testing-library/user-event';
+import { BACKEND_URL } from 'Constant/constant';
+import { ADD_ADVERTISEMENT_MUTATION } from 'GraphQl/Mutations/mutations';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATION_ADVERTISEMENT_LIST,
+  PLUGIN_GET,
+} from 'GraphQl/Queries/Queries';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import useLocalStorage from 'utils/useLocalstorage';
+import Advertisement from './Advertisements';
+
+const { getItem } = useLocalStorage();
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+  headers: {
+    authorization: 'Bearer ' + getItem('token') || '',
+  },
+});
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([httpLink]),
+});
+
+jest.mock('components/AddOn/support/services/Plugin.helper', () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    fetchInstalled: jest.fn().mockResolvedValue([]),
+    fetchStore: jest.fn().mockResolvedValue([]),
+  })),
+}));
+let mockID: string | undefined = '1';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockID }),
+}));
+
+const today = new Date();
+const tomorrow = today;
+tomorrow.setDate(today.getDate() + 1);
+
+const ADVERTISEMENTS_LIST_MOCK: {
+  request:
+    | {
+        query: DocumentNode;
+        variables: { id: string; first: number; after: null };
+      }
+    | {
+        query: DocumentNode;
+        variables: {
+          id: string;
+          first: number;
+          after: null;
+          before: null;
+          last: null;
+        };
+      };
+  result:
+    | {
+        data: {
+          organizations: {
+            _id: string;
+            advertisements: {
+              edges: {
+                node: {
+                  _id: string;
+                  name: string;
+                  startDate: string;
+                  endDate: string;
+                  mediaUrl: string;
+                };
+                cursor: string;
+              }[];
+              pageInfo: {
+                startCursor: string;
+                endCursor: string;
+                hasNextPage: boolean;
+                hasPreviousPage: boolean;
+              };
+              totalCount: number;
+            };
+          }[];
+        };
+      }
+    | {
+        data: {
+          organizations: {
+            _id: string;
+            advertisements: {
+              edges: {
+                node: {
+                  _id: string;
+                  name: string;
+                  startDate: string;
+                  endDate: string;
+                  mediaUrl: string;
+                };
+                cursor: string;
+              }[];
+              pageInfo: {
+                startCursor: string;
+                endCursor: string;
+                hasNextPage: boolean;
+                hasPreviousPage: boolean;
+              };
+              totalCount: number;
+            };
+          }[];
+        };
+      };
+}[] = [];
+
+for (let i = 0; i < 4; i++) {
+  ADVERTISEMENTS_LIST_MOCK.push({
+    request: {
+      query: ORGANIZATION_ADVERTISEMENT_LIST,
+      variables: {
+        id: '1',
+        first: 6,
+        after: null,
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '1',
+            advertisements: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'Advertisement1',
+                    startDate: '2022-01-01',
+                    endDate: '2023-01-01',
+                    mediaUrl: 'http://example1.com',
+                  },
+                  cursor: 'cursor1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'Advertisement2',
+                    startDate: '2024-02-01',
+                    endDate: '2025-02-01',
+                    mediaUrl: 'http://example2.com',
+                  },
+                  cursor: 'cursor2',
+                },
+              ],
+              pageInfo: {
+                startCursor: 'cursor1',
+                endCursor: 'cursor2',
+                hasNextPage: true,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  });
+  ADVERTISEMENTS_LIST_MOCK.push({
+    request: {
+      query: ORGANIZATION_ADVERTISEMENT_LIST,
+      variables: {
+        id: '1',
+        first: 6,
+        after: null,
+        before: null,
+        last: null,
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '1',
+            advertisements: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'Advertisement1',
+                    startDate: '2022-01-01',
+                    endDate: '2023-01-01',
+                    mediaUrl: 'http://example1.com',
+                  },
+                  cursor: 'cursor1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'Advertisement2',
+                    startDate: '2024-02-01',
+                    endDate: '2025-02-01',
+                    mediaUrl: 'http://example2.com',
+                  },
+                  cursor: 'cursor2',
+                },
+              ],
+              pageInfo: {
+                startCursor: 'cursor1',
+                endCursor: 'cursor2',
+                hasNextPage: true,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  });
+}
+
+const PLUGIN_GET_MOCK = {
+  request: {
+    query: PLUGIN_GET,
+  },
+  result: {
+    data: {
+      getPlugins: [
+        {
+          _id: '6581be50e88e74003aab436c',
+          pluginName: 'Chats',
+          pluginCreatedBy: 'Talawa Team',
+          pluginDesc:
+            'User can share messages with other users in a chat user interface.',
+          uninstalledOrgs: [
+            '62ccfccd3eb7fd2a30f41601',
+            '62ccfccd3eb7fd2a30f41601',
+          ],
+          pluginInstallStatus: true,
+          __typename: 'Plugin',
+        },
+      ],
+    },
+    loading: false,
+  },
+};
+
+const ADD_ADVERTISEMENT_MUTATION_MOCK = {
+  request: {
+    query: ADD_ADVERTISEMENT_MUTATION,
+    variables: {
+      organizationId: '1',
+      name: 'Cookie Shop',
+      file: 'data:image/png;base64,bWVkaWEgY29udGVudA==',
+      type: 'POPUP',
+      startDate: '2023-01-01',
+      endDate: '2023-02-02',
+    },
+  },
+  result: {
+    data: {
+      createAdvertisement: {
+        _id: '65844efc814dd4003db811c4',
+        advertisement: null,
+        __typename: 'Advertisement',
+      },
+    },
+  },
+};
+
+const ORGANIZATIONS_LIST_MOCK = {
+  request: {
+    query: ORGANIZATIONS_LIST,
+    variables: {
+      id: '1',
+    },
+  },
+  result: {
+    data: {
+      organizations: [
+        {
+          _id: '1',
+          image: '',
+          creator: {
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+          name: 'name',
+          description: 'description',
+          userRegistrationRequired: true,
+
+          visibleInSearch: true,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          members: {
+            _id: 'id',
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+          admins: {
+            _id: 'id',
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+          membershipRequests: {
+            _id: 'id',
+            user: {
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+          },
+          blockedUsers: {
+            _id: 'id',
+            firstName: 'firstName',
+            lastName: 'lastName',
+            email: 'email',
+          },
+        },
+      ],
+    },
+  },
+};
+
+describe('Testing Advertisement Component', () => {
+  test('for creating new Advertisements', async () => {
+    const mocks = [
+      ORGANIZATIONS_LIST_MOCK,
+      PLUGIN_GET_MOCK,
+      ADD_ADVERTISEMENT_MUTATION_MOCK,
+      ...ADVERTISEMENTS_LIST_MOCK,
+    ];
+
+    render(
+      <MockedProvider addTypename={false} mocks={mocks}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Advertisement />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByText('Create Advertisement'));
+    userEvent.type(
+      screen.getByLabelText('Enter name of Advertisement'),
+      'Cookie Shop',
+    );
+    const mediaFile = new File(['media content'], 'test.png', {
+      type: 'image/png',
+    });
+
+    const mediaInput = screen.getByTestId('advertisementMedia');
+    fireEvent.change(mediaInput, {
+      target: {
+        files: [mediaFile],
+      },
+    });
+    const mediaPreview = await screen.findByTestId('mediaPreview');
+    expect(mediaPreview).toBeInTheDocument();
+    userEvent.selectOptions(
+      screen.getByLabelText('Select type of Advertisement'),
+      'POPUP',
+    );
+    userEvent.type(screen.getByLabelText('Select Start Date'), '2023-01-01');
+    userEvent.type(screen.getByLabelText('Select End Date'), '2023-02-02');
+
+    userEvent.click(screen.getByTestId('addonregister'));
+    expect(
+      await screen.findByText('Advertisement created successfully.'),
+    ).toBeInTheDocument();
+  });
+
+  test('for the working of the tabs', async () => {
+    const mocks = [
+      ORGANIZATIONS_LIST_MOCK,
+      PLUGIN_GET_MOCK,
+      ADD_ADVERTISEMENT_MUTATION_MOCK,
+      ...ADVERTISEMENTS_LIST_MOCK,
+    ];
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <Advertisement />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText('Active Campaigns'));
+
+    await wait();
+    userEvent.click(screen.getByText('Completed Campaigns'));
+  });
+
+  test('if the component renders correctly and ads are correctly categorized date wise', async () => {
+    mockID = '1';
+    const mocks = [...ADVERTISEMENTS_LIST_MOCK];
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <Advertisement />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    await wait();
+
+    const date = await screen.findAllByTestId('Ad_end_date');
+    const dateString = date[1].innerHTML;
+    const dateMatch = dateString.match(
+      /\b(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+(\d{1,2})\s+(\d{4})\b/,
+    );
+    let dateObject = new Date();
+
+    if (dateMatch) {
+      const monthName = dateMatch[1];
+      const day = parseInt(dateMatch[2], 10);
+      const year = parseInt(dateMatch[3], 10);
+
+      const monthIndex =
+        'JanFebMarAprMayJunJulAugSepOctNovDec'.indexOf(monthName) / 3;
+
+      dateObject = new Date(year, monthIndex, day);
+    }
+
+    expect(dateObject.getTime()).toBeLessThan(new Date().getTime());
+  });
+
+  test('delete ad', async () => {
+    mockID = '1';
+    const mocks = [...ADVERTISEMENTS_LIST_MOCK];
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <Advertisement />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    await wait();
+
+    const moreiconbtn = await screen.findAllByTestId('moreiconbtn');
+    fireEvent.click(moreiconbtn[1]);
+    const deleteBtn = await screen.findByTestId('deletebtn');
+    expect(deleteBtn).toBeInTheDocument();
+    fireEvent.click(deleteBtn);
+  });
+
+  test('infinite scroll', async () => {
+    mockID = '1';
+    const mocks = [
+      ...ADVERTISEMENTS_LIST_MOCK,
+      {
+        request: {
+          query: ORGANIZATION_ADVERTISEMENT_LIST,
+          variables: {
+            id: '1',
+            first: 2,
+            after: null,
+            last: null,
+            before: null,
+          },
+        },
+        result: {
+          data: {
+            organizations: [
+              {
+                _id: '1',
+                advertisements: {
+                  edges: [
+                    {
+                      node: {
+                        _id: '1',
+                        name: 'Advertisement1',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: 'cursor1',
+                    },
+                    {
+                      node: {
+                        _id: '2',
+                        name: 'Advertisement2',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: 'cursor2',
+                    },
+                    {
+                      node: {
+                        _id: '3',
+                        name: 'Advertisement1',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: 'cursor3',
+                    },
+                    {
+                      node: {
+                        _id: '4',
+                        name: 'Advertisement2',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: 'cursor4',
+                    },
+                    {
+                      node: {
+                        _id: '5',
+                        name: 'Advertisement1',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: 'cursor5',
+                    },
+                    {
+                      node: {
+                        _id: '6',
+                        name: 'Advertisement2',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: 'cursor6',
+                    },
+                  ],
+                  pageInfo: {
+                    startCursor: 'cursor1',
+                    endCursor: 'cursor6',
+                    hasNextPage: true,
+                    hasPreviousPage: false,
+                  },
+                  totalCount: 8,
+                },
+              },
+            ],
+          },
+        },
+      },
+      {
+        request: {
+          query: ORGANIZATION_ADVERTISEMENT_LIST,
+          variables: {
+            id: '1',
+            first: 6,
+            after: 'cursor6',
+            last: null,
+            before: null,
+          },
+        },
+        result: {
+          data: {
+            organizations: [
+              {
+                _id: '1',
+                advertisements: {
+                  edges: [
+                    {
+                      node: {
+                        _id: '7',
+                        name: 'Advertisement7',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: '5rdiyruyu3hkjkjiwfhwaify',
+                    },
+                    {
+                      node: {
+                        _id: '8',
+                        name: 'Advertisement8',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: '5rdiyrhgkjkjjyg3iwfhwaify',
+                    },
+                  ],
+                  pageInfo: {
+                    startCursor: '5rdiyruyu3hkjkjiwfhwaify',
+                    endCursor: '5rdiyrhgkjkjjyg3iwfhwaify',
+                    hasNextPage: false,
+                    hasPreviousPage: true,
+                  },
+                  totalCount: 8,
+                },
+              },
+            ],
+          },
+        },
+      },
+      {
+        request: {
+          query: ORGANIZATION_ADVERTISEMENT_LIST,
+          variables: {
+            id: '1',
+            first: 6,
+            after: 'cursor2',
+          },
+        },
+        result: {
+          data: {
+            organizations: [
+              {
+                _id: '1',
+                advertisements: {
+                  edges: [
+                    {
+                      node: {
+                        _id: '7',
+                        name: 'Advertisement7',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: '5rdiyruyu3hkjkjiwfhwaify',
+                    },
+                    {
+                      node: {
+                        _id: '8',
+                        name: 'Advertisement8',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: '5rdiyrhgkjkjjyg3iwfhwaify',
+                    },
+                  ],
+                  pageInfo: {
+                    startCursor: '5rdiyruyu3hkjkjiwfhwaify',
+                    endCursor: '5rdiyrhgkjkjjyg3iwfhwaify',
+                    hasNextPage: false,
+                    hasPreviousPage: true,
+                  },
+                  totalCount: 8,
+                },
+              },
+            ],
+          },
+        },
+      },
+    ];
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <Advertisement />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    let moreiconbtn = await screen.findAllByTestId('moreiconbtn');
+    console.log('before scroll', moreiconbtn);
+    fireEvent.scroll(window, { target: { scrollY: 500 } });
+    moreiconbtn = await screen.findAllByTestId('moreiconbtn');
+    console.log('after scroll', moreiconbtn);
+  });
+});
diff --git a/src/components/Advertisements/Advertisements.tsx b/src/components/Advertisements/Advertisements.tsx
new file mode 100644
index 0000000000..f20c2a7d8e
--- /dev/null
+++ b/src/components/Advertisements/Advertisements.tsx
@@ -0,0 +1,273 @@
+import React, { useEffect, useState } from 'react';
+import styles from './Advertisements.module.css';
+import { useQuery } from '@apollo/client';
+import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
+import { Col, Row, Tab, Tabs } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import AdvertisementEntry from './core/AdvertisementEntry/AdvertisementEntry';
+import AdvertisementRegister from './core/AdvertisementRegister/AdvertisementRegister';
+import { useParams } from 'react-router-dom';
+import type { InterfaceQueryOrganizationAdvertisementListItem } from 'utils/interfaces';
+import InfiniteScroll from 'react-infinite-scroll-component';
+
+/**
+ * The `Advertisements` component displays a list of advertisements for a specific organization.
+ * It uses a tab-based interface to toggle between active and archived advertisements.
+ *
+ * The component utilizes the `useQuery` hook from Apollo Client to fetch advertisements data
+ * and implements infinite scrolling to load more advertisements as the user scrolls.
+ *
+ * @example
+ * return (
+ *   <Advertisements />
+ * )
+ *
+ */
+
+export default function Advertisements(): JSX.Element {
+  // Retrieve the organization ID from URL parameters
+  const { orgId: currentOrgId } = useParams();
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', { keyPrefix: 'advertisement' });
+  const { t: tCommon } = useTranslation('common');
+
+  // Set the document title based on the translation
+  document.title = t('title');
+
+  // State to manage pagination cursor for infinite scrolling
+  const [after, setAfter] = useState<string | null | undefined>(null);
+
+  // Type definition for an advertisement object
+  type Ad = {
+    _id: string;
+    name: string;
+    type: 'BANNER' | 'MENU' | 'POPUP';
+    mediaUrl: string;
+    endDate: string; // Assuming it's a string in the format 'yyyy-MM-dd'
+    startDate: string; // Assuming it's a string in the format 'yyyy-MM-dd'
+  };
+
+  // GraphQL query to fetch the list of advertisements
+  const {
+    data: orgAdvertisementListData,
+    refetch,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationAdvertisementListItem[];
+    };
+    refetch: () => void;
+  } = useQuery(ORGANIZATION_ADVERTISEMENT_LIST, {
+    variables: {
+      id: currentOrgId,
+      after: after,
+      first: 6,
+    },
+  });
+
+  // State to manage the list of advertisements
+  const [advertisements, setAdvertisements] = useState<Ad[]>(
+    orgAdvertisementListData?.organizations[0].advertisements?.edges.map(
+      (edge: { node: Ad }) => edge.node,
+    ) || [],
+  );
+
+  // Effect hook to update advertisements list when data changes or pagination cursor changes
+  useEffect(() => {
+    if (orgAdvertisementListData && orgAdvertisementListData.organizations) {
+      const ads: Ad[] =
+        orgAdvertisementListData.organizations[0].advertisements?.edges.map(
+          (edge) => edge.node,
+        ) || [];
+      setAdvertisements(after ? [...advertisements, ...ads] : ads);
+    }
+  }, [orgAdvertisementListData, after]);
+
+  /**
+   * Fetches more advertisements for infinite scrolling.
+   */
+  async function loadMoreAdvertisements(): Promise<void> {
+    await refetch();
+
+    if (orgAdvertisementListData && orgAdvertisementListData.organizations) {
+      setAfter(
+        orgAdvertisementListData?.organizations[0]?.advertisements.pageInfo
+          .endCursor,
+      );
+    }
+  }
+
+  return (
+    <>
+      <Row data-testid="advertisements">
+        <Col col={8}>
+          <div className={styles.justifysp}>
+            {/* Component for registering a new advertisement */}
+            <AdvertisementRegister setAfter={setAfter} />
+
+            {/* Tabs for active and archived advertisements */}
+            <Tabs
+              defaultActiveKey="archievedAds"
+              id="uncontrolled-tab-example"
+              className="mb-3"
+            >
+              {/* Tab for active advertisements */}
+              <Tab eventKey="activeAds" title={t('activeAds')}>
+                <InfiniteScroll
+                  dataLength={advertisements?.length ?? 0}
+                  next={loadMoreAdvertisements}
+                  loader={
+                    <>
+                      {/* Skeleton loader while fetching more advertisements */}
+                      {[...Array(6)].map((_, index) => (
+                        <div key={index} className={styles.itemCard}>
+                          <div className={styles.loadingWrapper}>
+                            <div className={styles.innerContainer}>
+                              <div
+                                className={`${styles.orgImgContainer} shimmer`}
+                              ></div>
+                              <div className={styles.content}>
+                                <h5 className="shimmer" title="Name"></h5>
+                              </div>
+                            </div>
+                            <div className={`shimmer ${styles.button}`} />
+                          </div>
+                        </div>
+                      ))}
+                    </>
+                  }
+                  hasMore={
+                    orgAdvertisementListData?.organizations[0].advertisements
+                      .pageInfo.hasNextPage ?? false
+                  }
+                  className={styles.listBox}
+                  data-testid="organizations-list"
+                  endMessage={
+                    advertisements.filter(
+                      (ad: Ad) => new Date(ad.endDate) > new Date(),
+                    ).length !== 0 && (
+                      <div className={'w-100 text-center my-4'}>
+                        <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
+                      </div>
+                    )
+                  }
+                >
+                  {advertisements.filter(
+                    (ad: Ad) => new Date(ad.endDate) > new Date(),
+                  ).length === 0 ? (
+                    <h4>{t('pMessage')}</h4>
+                  ) : (
+                    advertisements
+                      .filter((ad: Ad) => new Date(ad.endDate) > new Date())
+                      .map(
+                        (
+                          ad: {
+                            _id: string;
+                            name: string | undefined;
+                            type: string | undefined;
+                            mediaUrl: string;
+                            endDate: string;
+                            startDate: string;
+                          },
+                          i: React.Key | null | undefined,
+                        ): JSX.Element => (
+                          <AdvertisementEntry
+                            id={ad._id}
+                            key={i}
+                            name={ad.name}
+                            type={ad.type}
+                            organizationId={currentOrgId}
+                            startDate={new Date(ad.startDate)}
+                            endDate={new Date(ad.endDate)}
+                            mediaUrl={ad.mediaUrl}
+                            data-testid="Ad"
+                            setAfter={setAfter}
+                          />
+                        ),
+                      )
+                  )}
+                </InfiniteScroll>
+              </Tab>
+
+              {/* Tab for archived advertisements */}
+              <Tab eventKey="archievedAds" title={t('archievedAds')}>
+                <InfiniteScroll
+                  dataLength={advertisements?.length ?? 0}
+                  next={loadMoreAdvertisements}
+                  loader={
+                    <>
+                      {/* Skeleton loader while fetching more advertisements */}
+                      {[...Array(6)].map((_, index) => (
+                        <div key={index} className={styles.itemCard}>
+                          <div className={styles.loadingWrapper}>
+                            <div className={styles.innerContainer}>
+                              <div
+                                className={`${styles.orgImgContainer} shimmer`}
+                              ></div>
+                              <div className={styles.content}>
+                                <h5 className="shimmer" title="Name"></h5>
+                              </div>
+                            </div>
+                            <div className={`shimmer ${styles.button}`} />
+                          </div>
+                        </div>
+                      ))}
+                    </>
+                  }
+                  hasMore={
+                    orgAdvertisementListData?.organizations[0].advertisements
+                      .pageInfo.hasNextPage ?? false
+                  }
+                  className={styles.listBox}
+                  data-testid="organizations-list"
+                  endMessage={
+                    advertisements.filter(
+                      (ad: Ad) => new Date(ad.endDate) < new Date(),
+                    ).length !== 0 && (
+                      <div className={'w-100 text-center my-4'}>
+                        <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
+                      </div>
+                    )
+                  }
+                >
+                  {advertisements.filter(
+                    (ad: Ad) => new Date(ad.endDate) < new Date(),
+                  ).length === 0 ? (
+                    <h4>{t('pMessage')}</h4>
+                  ) : (
+                    advertisements
+                      .filter((ad: Ad) => new Date(ad.endDate) < new Date())
+                      .map(
+                        (
+                          ad: {
+                            _id: string;
+                            name: string | undefined;
+                            type: string | undefined;
+                            mediaUrl: string;
+                            endDate: string;
+                            startDate: string;
+                          },
+                          i: React.Key | null | undefined,
+                        ): JSX.Element => (
+                          <AdvertisementEntry
+                            id={ad._id}
+                            key={i}
+                            name={ad.name}
+                            type={ad.type}
+                            organizationId={currentOrgId}
+                            startDate={new Date(ad.startDate)}
+                            endDate={new Date(ad.endDate)}
+                            mediaUrl={ad.mediaUrl}
+                            setAfter={setAfter}
+                          />
+                        ),
+                      )
+                  )}
+                </InfiniteScroll>
+              </Tab>
+            </Tabs>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}
diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css
new file mode 100644
index 0000000000..879d96a0a0
--- /dev/null
+++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css
@@ -0,0 +1,75 @@
+.entrytoggle {
+  margin: 24px 24px 0 auto;
+  width: fit-content;
+}
+
+.entryaction {
+  display: flex !important;
+}
+
+.entryaction i {
+  margin-right: 8px;
+  margin-top: 4px;
+}
+
+.entryaction .spinner-grow {
+  height: 1rem;
+  width: 1rem;
+  margin-right: 8px;
+}
+
+.admedia {
+  object-fit: cover;
+  height: 20rem;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dropdownButton {
+  background-color: transparent;
+  color: #000;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  padding: 8px 10px;
+}
+
+.dropdownContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownmenu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  background-color: white;
+  width: 120px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 5px 0;
+  margin: 0;
+  list-style-type: none;
+  right: 0;
+  top: 100%;
+}
+
+.dropdownmenu li {
+  cursor: pointer;
+  padding: 8px 16px;
+  text-decoration: none;
+  display: block;
+  color: #333;
+}
+
+.dropdownmenu li:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdownContainer:hover .dropdownmenu {
+  display: block;
+}
diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx
new file mode 100644
index 0000000000..dbd6f88cc3
--- /dev/null
+++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx
@@ -0,0 +1,637 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  ApolloLink,
+  HttpLink,
+} from '@apollo/client';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { BrowserRouter } from 'react-router-dom';
+import AdvertisementEntry from './AdvertisementEntry';
+import AdvertisementRegister from '../AdvertisementRegister/AdvertisementRegister';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { BACKEND_URL } from 'Constant/constant';
+import i18nForTest from 'utils/i18nForTest';
+import { I18nextProvider } from 'react-i18next';
+import dayjs from 'dayjs';
+import useLocalStorage from 'utils/useLocalstorage';
+import { MockedProvider } from '@apollo/client/testing';
+import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations';
+
+const { getItem } = useLocalStorage();
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+  headers: {
+    authorization: 'Bearer ' + getItem('token') || '',
+  },
+});
+
+const translations = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation?.advertisement ?? null,
+  ),
+);
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([httpLink]),
+});
+
+const mockUseMutation = jest.fn();
+jest.mock('@apollo/client', () => {
+  const originalModule = jest.requireActual('@apollo/client');
+  return {
+    ...originalModule,
+    useMutation: () => mockUseMutation(),
+  };
+});
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: '1' }),
+}));
+
+describe('Testing Advertisement Entry Component', () => {
+  test('Testing rendering and deleting of advertisement', async () => {
+    const deleteAdByIdMock = jest.fn();
+    mockUseMutation.mockReturnValue([deleteAdByIdMock]);
+    const { getByTestId, getAllByText } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AdvertisementEntry
+                endDate={new Date()}
+                startDate={new Date()}
+                id="1"
+                key={1}
+                mediaUrl="data:videos"
+                name="Advert1"
+                organizationId="1"
+                type="POPUP"
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    //Testing rendering
+    expect(getByTestId('AdEntry')).toBeInTheDocument();
+    expect(getAllByText('POPUP')[0]).toBeInTheDocument();
+    expect(getAllByText('Advert1')[0]).toBeInTheDocument();
+    expect(screen.getByTestId('media')).toBeInTheDocument();
+
+    //Testing successful deletion
+    fireEvent.click(getByTestId('moreiconbtn'));
+    fireEvent.click(getByTestId('deletebtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('delete_title')).toBeInTheDocument();
+      expect(screen.getByTestId('delete_body')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByTestId('delete_yes'));
+
+    await waitFor(() => {
+      expect(deleteAdByIdMock).toHaveBeenCalledWith({
+        variables: {
+          id: '1',
+        },
+      });
+      const deletedMessage = screen.queryByText('Advertisement Deleted');
+      expect(deletedMessage).toBeNull();
+    });
+
+    //Testing unsuccessful deletion
+    deleteAdByIdMock.mockRejectedValueOnce(new Error('Deletion Failed'));
+
+    fireEvent.click(getByTestId('moreiconbtn'));
+
+    fireEvent.click(getByTestId('delete_yes'));
+
+    await waitFor(() => {
+      expect(deleteAdByIdMock).toHaveBeenCalledWith({
+        variables: {
+          id: '1',
+        },
+      });
+      const deletionFailedText = screen.queryByText((content, element) => {
+        return (
+          element?.textContent === 'Deletion Failed' &&
+          element.tagName.toLowerCase() === 'div'
+        );
+      });
+      expect(deletionFailedText).toBeNull();
+    });
+  });
+  it('should use default props when none are provided', () => {
+    render(
+      <AdvertisementEntry
+        id={''}
+        setAfter={function (
+          _value: React.SetStateAction<string | null | undefined>,
+        ): void {
+          throw new Error('Function not implemented.');
+        }}
+      />,
+    );
+
+    //Check if component renders with default ''(empty string)
+    const elements = screen.getAllByText(''); // This will return an array of matching elements
+    elements.forEach((element) => expect(element).toBeInTheDocument());
+
+    // Check that the component renders with default `mediaUrl` (empty string)
+    const mediaElement = screen.getByTestId('media');
+    expect(mediaElement).toHaveAttribute('src', '');
+
+    // Check that the component renders with default `endDate`
+    const defaultEndDate = new Date().toDateString();
+    expect(screen.getByText(`Ends on ${defaultEndDate}`)).toBeInTheDocument();
+
+    // Check that the component renders with default `startDate`
+    const defaultStartDate = new Date().toDateString();
+    console.log(screen.getByText);
+    expect(screen.getByText(`Ends on ${defaultStartDate}`)).toBeInTheDocument(); //fix text "Ends on"?
+  });
+  it('should correctly override default props when values are provided', () => {
+    const mockName = 'Test Ad';
+    const mockType = 'Banner';
+    const mockMediaUrl = 'https://example.com/media.png';
+    const mockEndDate = new Date(2025, 11, 31);
+    const mockStartDate = new Date(2024, 0, 1);
+    const mockOrganizationId = 'org123';
+
+    const { getByText } = render(
+      <AdvertisementEntry
+        name={mockName}
+        type={mockType}
+        mediaUrl={mockMediaUrl}
+        endDate={mockEndDate}
+        startDate={mockStartDate}
+        organizationId={mockOrganizationId}
+        id={''}
+        setAfter={function (
+          _value: React.SetStateAction<string | null | undefined>,
+        ): void {
+          throw new Error('Function not implemented.');
+        }}
+      />,
+    );
+
+    // Check that the component renders with provided values
+    expect(getByText(mockName)).toBeInTheDocument();
+    // Add more checks based on how each prop affects rendering
+  });
+  it('should open and close the dropdown when options button is clicked', () => {
+    const { getByTestId, queryByText, getAllByText } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AdvertisementEntry
+                endDate={new Date()}
+                startDate={new Date()}
+                id="1"
+                key={1}
+                mediaUrl=""
+                name="Advert1"
+                organizationId="1"
+                type="POPUP"
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    // Test initial rendering
+    expect(getByTestId('AdEntry')).toBeInTheDocument();
+    expect(getAllByText('POPUP')[0]).toBeInTheDocument();
+    expect(getAllByText('Advert1')[0]).toBeInTheDocument();
+
+    // Test dropdown functionality
+    const optionsButton = getByTestId('moreiconbtn');
+
+    // Initially, the dropdown should not be visible
+    expect(queryByText('Edit')).toBeNull();
+
+    // Click to open the dropdown
+    fireEvent.click(optionsButton);
+
+    // After clicking the button, the dropdown should be visible
+    expect(queryByText('Edit')).toBeInTheDocument();
+
+    // Click again to close the dropdown
+    fireEvent.click(optionsButton);
+
+    // After the second click, the dropdown should be hidden again
+    expect(queryByText('Edit')).toBeNull();
+  });
+
+  test('Updates the advertisement and shows success toast on successful update', async () => {
+    const updateAdByIdMock = jest.fn().mockResolvedValue({
+      data: {
+        updateAdvertisement: {
+          advertisement: {
+            _id: '1',
+            name: 'Updated Advertisement',
+            mediaUrl: '',
+            startDate: dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD'),
+            endDate: dayjs(new Date()).add(2, 'days').format('YYYY-MM-DD'),
+            type: 'BANNER',
+          },
+        },
+      },
+    });
+
+    mockUseMutation.mockReturnValue([updateAdByIdMock]);
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AdvertisementEntry
+                endDate={new Date()}
+                startDate={new Date()}
+                type="POPUP"
+                name="Advert1"
+                organizationId="1"
+                mediaUrl=""
+                id="1"
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    const optionsButton = screen.getByTestId('moreiconbtn');
+    fireEvent.click(optionsButton);
+    fireEvent.click(screen.getByTestId('editBtn'));
+
+    fireEvent.change(screen.getByLabelText('Enter name of Advertisement'), {
+      target: { value: 'Updated Advertisement' },
+    });
+
+    expect(screen.getByLabelText('Enter name of Advertisement')).toHaveValue(
+      'Updated Advertisement',
+    );
+
+    fireEvent.change(screen.getByLabelText(translations.Rtype), {
+      target: { value: 'BANNER' },
+    });
+    expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+
+    fireEvent.change(screen.getByLabelText(translations.RstartDate), {
+      target: { value: dayjs().add(1, 'day').format('YYYY-MM-DD') },
+    });
+
+    fireEvent.change(screen.getByLabelText(translations.RendDate), {
+      target: { value: dayjs().add(2, 'days').format('YYYY-MM-DD') },
+    });
+
+    fireEvent.click(screen.getByTestId('addonupdate'));
+
+    expect(updateAdByIdMock).toHaveBeenCalledWith({
+      variables: {
+        id: '1',
+        name: 'Updated Advertisement',
+        type: 'BANNER',
+        startDate: dayjs().add(1, 'day').format('YYYY-MM-DD'),
+        endDate: dayjs().add(2, 'days').format('YYYY-MM-DD'),
+      },
+    });
+  });
+
+  test('Simulating if the mutation doesnt have data variable while updating', async () => {
+    const updateAdByIdMock = jest.fn().mockResolvedValue({
+      updateAdvertisement: {
+        _id: '1',
+        name: 'Updated Advertisement',
+        type: 'BANNER',
+      },
+    });
+
+    mockUseMutation.mockReturnValue([updateAdByIdMock]);
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AdvertisementEntry
+                endDate={new Date()}
+                startDate={new Date()}
+                type="POPUP"
+                name="Advert1"
+                organizationId="1"
+                mediaUrl=""
+                id="1"
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    const optionsButton = screen.getByTestId('moreiconbtn');
+    fireEvent.click(optionsButton);
+    fireEvent.click(screen.getByTestId('editBtn'));
+
+    fireEvent.change(screen.getByLabelText('Enter name of Advertisement'), {
+      target: { value: 'Updated Advertisement' },
+    });
+
+    expect(screen.getByLabelText('Enter name of Advertisement')).toHaveValue(
+      'Updated Advertisement',
+    );
+
+    fireEvent.change(screen.getByLabelText(translations.Rtype), {
+      target: { value: 'BANNER' },
+    });
+    expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+
+    fireEvent.click(screen.getByTestId('addonupdate'));
+
+    expect(updateAdByIdMock).toHaveBeenCalledWith({
+      variables: {
+        id: '1',
+        name: 'Updated Advertisement',
+        type: 'BANNER',
+      },
+    });
+  });
+
+  test('Simulating if the mutation does not have data variable while registering', async () => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        reload: jest.fn(),
+        href: 'https://example.com/page/id=1',
+      },
+    });
+    const createAdByIdMock = jest.fn().mockResolvedValue({
+      data1: {
+        createAdvertisement: {
+          _id: '1',
+        },
+      },
+    });
+
+    mockUseMutation.mockReturnValue([createAdByIdMock]);
+
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {
+                <AdvertisementRegister
+                  setAfter={jest.fn()}
+                  formStatus="register"
+                />
+              }
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    fireEvent.click(screen.getByTestId('createAdvertisement'));
+
+    fireEvent.change(screen.getByLabelText('Enter name of Advertisement'), {
+      target: { value: 'Updated Advertisement' },
+    });
+
+    expect(screen.getByLabelText('Enter name of Advertisement')).toHaveValue(
+      'Updated Advertisement',
+    );
+
+    fireEvent.change(screen.getByLabelText(translations.Rtype), {
+      target: { value: 'BANNER' },
+    });
+    expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+
+    fireEvent.change(screen.getByLabelText(translations.RstartDate), {
+      target: { value: '2023-01-01' },
+    });
+    expect(screen.getByLabelText(translations.RstartDate)).toHaveValue(
+      '2023-01-01',
+    );
+
+    fireEvent.change(screen.getByLabelText(translations.RendDate), {
+      target: { value: '2023-02-01' },
+    });
+    expect(screen.getByLabelText(translations.RendDate)).toHaveValue(
+      '2023-02-01',
+    );
+
+    fireEvent.click(screen.getByTestId('addonregister'));
+
+    expect(createAdByIdMock).toHaveBeenCalledWith({
+      variables: {
+        organizationId: '1',
+        name: 'Updated Advertisement',
+        file: '',
+        type: 'BANNER',
+        startDate: dayjs(new Date('2023-01-01')).format('YYYY-MM-DD'),
+        endDate: dayjs(new Date('2023-02-01')).format('YYYY-MM-DD'),
+      },
+    });
+  });
+  test('delet advertisement', async () => {
+    const deleteAdByIdMock = jest.fn();
+    const mocks = [
+      {
+        request: {
+          query: ORGANIZATION_ADVERTISEMENT_LIST,
+          variables: {
+            id: '1',
+            first: 2,
+            after: null,
+            last: null,
+            before: null,
+          },
+        },
+        result: {
+          data: {
+            organizations: [
+              {
+                _id: '1',
+                advertisements: {
+                  edges: [
+                    {
+                      node: {
+                        _id: '1',
+                        name: 'Advertisement1',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: 'cursor1',
+                    },
+                    {
+                      node: {
+                        _id: '2',
+                        name: 'Advertisement2',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: 'cursor2',
+                    },
+                    {
+                      node: {
+                        _id: '3',
+                        name: 'Advertisement1',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: 'cursor3',
+                    },
+                    {
+                      node: {
+                        _id: '4',
+                        name: 'Advertisement2',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: 'cursor4',
+                    },
+                    {
+                      node: {
+                        _id: '5',
+                        name: 'Advertisement1',
+                        startDate: '2022-01-01',
+                        endDate: '2023-01-01',
+                        mediaUrl: 'http://example1.com',
+                      },
+                      cursor: 'cursor5',
+                    },
+                    {
+                      node: {
+                        _id: '6',
+                        name: 'Advertisement2',
+                        startDate: '2024-02-01',
+                        endDate: '2025-02-01',
+                        mediaUrl: 'http://example2.com',
+                      },
+                      cursor: 'cursor6',
+                    },
+                  ],
+                  pageInfo: {
+                    startCursor: 'cursor1',
+                    endCursor: 'cursor6',
+                    hasNextPage: true,
+                    hasPreviousPage: false,
+                  },
+                  totalCount: 8,
+                },
+              },
+            ],
+          },
+        },
+      },
+      {
+        request: {
+          query: DELETE_ADVERTISEMENT_BY_ID,
+          variables: {
+            id: '1',
+          },
+        },
+        result: {
+          data: {
+            advertisements: {
+              _id: null,
+            },
+          },
+        },
+      },
+    ];
+    mockUseMutation.mockReturnValue([deleteAdByIdMock]);
+    const { getByTestId, getAllByText } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <MockedProvider mocks={mocks} addTypename={false}>
+                <AdvertisementEntry
+                  endDate={new Date()}
+                  startDate={new Date()}
+                  id="1"
+                  key={1}
+                  mediaUrl="data:videos"
+                  name="Advert1"
+                  organizationId="1"
+                  type="POPUP"
+                  setAfter={jest.fn()}
+                />
+              </MockedProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    //Testing rendering
+    expect(getByTestId('AdEntry')).toBeInTheDocument();
+    expect(getAllByText('POPUP')[0]).toBeInTheDocument();
+    expect(getAllByText('Advert1')[0]).toBeInTheDocument();
+    expect(screen.getByTestId('media')).toBeInTheDocument();
+
+    //Testing successful deletion
+    fireEvent.click(getByTestId('moreiconbtn'));
+    fireEvent.click(getByTestId('deletebtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('delete_title')).toBeInTheDocument();
+      expect(screen.getByTestId('delete_body')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByTestId('delete_yes'));
+
+    await waitFor(() => {
+      expect(deleteAdByIdMock).toHaveBeenCalledWith({
+        variables: {
+          id: '1',
+        },
+      });
+      const deletedMessage = screen.queryByText('Advertisement Deleted');
+      expect(deletedMessage).toBeNull();
+    });
+
+    //Testing unsuccessful deletion
+    deleteAdByIdMock.mockRejectedValueOnce(new Error('Deletion Failed'));
+
+    fireEvent.click(getByTestId('moreiconbtn'));
+
+    fireEvent.click(getByTestId('delete_yes'));
+
+    await waitFor(() => {
+      expect(deleteAdByIdMock).toHaveBeenCalledWith({
+        variables: {
+          id: '1',
+        },
+      });
+      const deletionFailedText = screen.queryByText((content, element) => {
+        return (
+          element?.textContent === 'Deletion Failed' &&
+          element.tagName.toLowerCase() === 'div'
+        );
+      });
+      expect(deletionFailedText).toBeNull();
+    });
+  });
+});
diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
new file mode 100644
index 0000000000..7368ded68e
--- /dev/null
+++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx
@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styles from './AdvertisementEntry.module.css';
+import { Button, Card, Col, Row, Spinner, Modal } from 'react-bootstrap';
+import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations';
+import { useMutation } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
+import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
+import AdvertisementRegister from '../AdvertisementRegister/AdvertisementRegister';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { toast } from 'react-toastify';
+
+interface InterfaceAddOnEntryProps {
+  id: string;
+  name?: string;
+  mediaUrl?: string;
+  type?: string;
+  organizationId?: string;
+  startDate?: Date;
+  endDate?: Date;
+  setAfter: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+}
+
+/**
+ * Component for displaying an advertisement entry.
+ * Allows viewing, editing, and deleting of the advertisement.
+ *
+ * @param  props - Component properties
+ * @returns  The rendered component
+ */
+function AdvertisementEntry({
+  id,
+  name = '',
+  type = '',
+  mediaUrl = '',
+  endDate = new Date(),
+  organizationId = '',
+  startDate = new Date(),
+  setAfter,
+}: InterfaceAddOnEntryProps): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'advertisement' });
+  const { t: tCommon } = useTranslation('common');
+
+  // State for loading button
+  const [buttonLoading, setButtonLoading] = useState(false);
+  // State for dropdown menu visibility
+  const [dropdown, setDropdown] = useState(false);
+  // State for delete confirmation modal visibility
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  // Mutation hook for deleting an advertisement
+  const [deleteAdById] = useMutation(DELETE_ADVERTISEMENT_BY_ID, {
+    refetchQueries: [
+      {
+        query: ORGANIZATION_ADVERTISEMENT_LIST,
+        variables: { first: 6, after: null, id: organizationId },
+      },
+    ],
+  });
+
+  /**
+   * Toggles the visibility of the delete confirmation modal.
+   */
+  const toggleShowDeleteModal = (): void => setShowDeleteModal((prev) => !prev);
+
+  /**
+   * Handles advertisement deletion.
+   * Displays a success or error message based on the result.
+   */
+  const onDelete = async (): Promise<void> => {
+    setButtonLoading(true);
+    try {
+      await deleteAdById({
+        variables: {
+          id: id.toString(),
+        },
+      });
+      toast.success(t('advertisementDeleted') as string);
+      setButtonLoading(false);
+      setAfter?.(null);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+      setButtonLoading(false);
+    }
+  };
+
+  /**
+   * Toggles the visibility of the dropdown menu.
+   */
+  const handleOptionsClick = (): void => {
+    setDropdown(!dropdown);
+  };
+
+  return (
+    <>
+      <Row data-testid="AdEntry" xs={1} md={2} className="g-4">
+        {Array.from({ length: 1 }).map((_, idx) => (
+          <Col key={idx}>
+            <Card>
+              <div className={styles.dropdownContainer}>
+                <button
+                  className={styles.dropdownButton}
+                  onClick={handleOptionsClick}
+                  data-testid="moreiconbtn"
+                >
+                  <MoreVertIcon />
+                </button>
+                {dropdown && (
+                  <ul className={styles.dropdownmenu}>
+                    <li>
+                      <AdvertisementRegister
+                        formStatus="edit"
+                        idEdit={id}
+                        nameEdit={name}
+                        typeEdit={type}
+                        orgIdEdit={organizationId}
+                        advertisementMediaEdit={mediaUrl}
+                        endDateEdit={endDate}
+                        startDateEdit={startDate}
+                        setAfter={setAfter}
+                      />
+                    </li>
+                    <li onClick={toggleShowDeleteModal} data-testid="deletebtn">
+                      {tCommon('delete')}
+                    </li>
+                  </ul>
+                )}
+              </div>
+              {mediaUrl?.includes('videos') ? (
+                <video
+                  muted
+                  className={styles.admedia}
+                  autoPlay={true}
+                  loop={true}
+                  playsInline
+                  data-testid="media"
+                  crossOrigin="anonymous"
+                >
+                  <source src={mediaUrl} type="video/mp4" />
+                </video>
+              ) : (
+                <Card.Img
+                  className={styles.admedia}
+                  variant="top"
+                  src={mediaUrl}
+                  data-testid="media"
+                />
+              )}
+              <Card.Body>
+                <Card.Title>{name}</Card.Title>
+                <Card.Text data-testid="Ad_end_date">
+                  Ends on {endDate?.toDateString()}
+                </Card.Text>
+                <Card.Subtitle className="mb-2 text-muted author">
+                  {type}
+                </Card.Subtitle>
+                <div className={styles.buttons}>
+                  <Button
+                    className={styles.entryaction}
+                    variant="primary"
+                    disabled={buttonLoading}
+                    data-testid="AddOnEntry_btn_install"
+                  >
+                    {buttonLoading ? (
+                      <Spinner animation="grow" />
+                    ) : (
+                      <i className={'fa fa-eye'}></i>
+                    )}
+                    {t('view')}
+                  </Button>
+                </div>
+                <Modal show={showDeleteModal} onHide={toggleShowDeleteModal}>
+                  <Modal.Header>
+                    <h5 data-testid="delete_title">
+                      {t('deleteAdvertisement')}
+                    </h5>
+                    <Button variant="danger" onClick={toggleShowDeleteModal}>
+                      <i className="fa fa-times"></i>
+                    </Button>
+                  </Modal.Header>
+                  <Modal.Body data-testid="delete_body">
+                    {t('deleteAdvertisementMsg')}
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <Button variant="danger" onClick={toggleShowDeleteModal}>
+                      {tCommon('no')}
+                    </Button>
+                    <Button
+                      type="button"
+                      className="btn btn-success"
+                      onClick={(): void => {
+                        onDelete();
+                      }}
+                      data-testid="delete_yes"
+                    >
+                      {tCommon('yes')}
+                    </Button>
+                  </Modal.Footer>
+                </Modal>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+      <br />
+    </>
+  );
+}
+
+AdvertisementEntry.propTypes = {
+  name: PropTypes.string,
+  type: PropTypes.string,
+  organizationId: PropTypes.string,
+  mediaUrl: PropTypes.string,
+  endDate: PropTypes.instanceOf(Date),
+  startDate: PropTypes.instanceOf(Date),
+};
+
+export default AdvertisementEntry;
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css
new file mode 100644
index 0000000000..0c5678676b
--- /dev/null
+++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css
@@ -0,0 +1,56 @@
+.modalbtn {
+  margin-top: 1rem;
+  display: flex !important;
+  margin-left: auto;
+  align-items: center;
+}
+
+.modalbtn i,
+.button i {
+  margin-right: 8px;
+}
+
+.preview {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.preview img {
+  width: 400px;
+  height: auto;
+}
+.preview video {
+  width: 400px;
+  height: auto;
+}
+
+.closeButton {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.button {
+  min-width: 102px;
+}
+
+.editHeader {
+  background-color: #31bb6b;
+  color: white;
+}
+
+.link_check {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx
new file mode 100644
index 0000000000..0646a94819
--- /dev/null
+++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx
@@ -0,0 +1,641 @@
+import React, { act } from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  ApolloLink,
+  HttpLink,
+} from '@apollo/client';
+
+import type { NormalizedCacheObject } from '@apollo/client';
+import { BrowserRouter } from 'react-router-dom';
+import AdvertisementRegister from './AdvertisementRegister';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { BACKEND_URL } from 'Constant/constant';
+// import i18nForTest from 'utils/i18nForTest';
+import { I18nextProvider } from 'react-i18next';
+import { MockedProvider } from '@apollo/client/testing';
+import i18n from 'utils/i18nForTest';
+import { toast } from 'react-toastify';
+import { ADD_ADVERTISEMENT_MUTATION } from 'GraphQl/Mutations/mutations';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import userEvent from '@testing-library/user-event';
+import useLocalStorage from 'utils/useLocalstorage';
+import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
+
+const { getItem } = useLocalStorage();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: ADD_ADVERTISEMENT_MUTATION,
+      variables: {
+        organizationId: '1',
+        name: 'Ad1',
+        type: 'BANNER',
+        startDate: '2023-01-01',
+        endDate: '2023-02-01',
+        file: 'data:image/png;base64,bWVkaWEgY29udGVudA==',
+      },
+    },
+    result: {
+      data: {
+        createAdvertisement: {
+          _id: '1',
+          advertisement: null,
+          __typename: 'Advertisement',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_ADVERTISEMENT_LIST,
+      variables: {
+        id: '1',
+        first: 6,
+        after: null,
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '1',
+            advertisements: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'Advertisement1',
+                    startDate: '2022-01-01',
+                    endDate: '2023-01-01',
+                    mediaUrl: 'http://example1.com',
+                  },
+                  cursor: '5rdiyr3iwfhwaify',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'Advertisement2',
+                    startDate: '2024-02-01',
+                    endDate: '2025-02-01',
+                    mediaUrl: 'http://example2.com',
+                  },
+                  cursor: '5rdiyr3iwfhwaify',
+                },
+              ],
+              pageInfo: {
+                startCursor: 'erdftgyhujkerty',
+                endCursor: 'edrftgyhujikl',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+  headers: {
+    authorization: 'Bearer ' + getItem('token') || '',
+  },
+});
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: ApolloLink.from([httpLink]),
+});
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.advertisement ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: '1' }),
+}));
+describe('Testing Advertisement Register Component', () => {
+  test('AdvertismentRegister component loads correctly in register mode', async () => {
+    const { getByText } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              <AdvertisementRegister
+                endDateEdit={new Date()}
+                startDateEdit={new Date()}
+                typeEdit="BANNER"
+                nameEdit="Advert1"
+                orgIdEdit="1"
+                advertisementMediaEdit=""
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    await waitFor(() => {
+      expect(getByText(translations.createAdvertisement)).toBeInTheDocument();
+    });
+  });
+
+  test('create advertisement', async () => {
+    jest.useFakeTimers();
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <Provider store={store}>
+            <BrowserRouter>
+              <I18nextProvider i18n={i18n}>
+                <AdvertisementRegister
+                  endDateEdit={new Date()}
+                  startDateEdit={new Date()}
+                  typeEdit="BANNER"
+                  nameEdit="Ad1"
+                  orgIdEdit="1"
+                  advertisementMediaEdit=""
+                  setAfter={jest.fn()}
+                />
+              </I18nextProvider>
+            </BrowserRouter>
+          </Provider>
+        </MockedProvider>,
+      );
+    });
+
+    expect(
+      screen.getByText(translations.createAdvertisement),
+    ).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(translations.createAdvertisement));
+    });
+
+    expect(screen.queryByText(translations.addNew)).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText(translations.Rname), {
+        target: { value: 'Ad1' },
+      });
+
+      const mediaFile = new File(['media content'], 'test.png', {
+        type: 'image/png',
+      });
+
+      fireEvent.change(screen.getByLabelText(translations.Rmedia), {
+        target: {
+          files: [mediaFile],
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('mediaPreview')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText(translations.Rtype), {
+        target: { value: 'BANNER' },
+      });
+
+      fireEvent.change(screen.getByLabelText(translations.RstartDate), {
+        target: { value: '2023-01-01' },
+      });
+
+      fireEvent.change(screen.getByLabelText(translations.RendDate), {
+        target: { value: '2023-02-01' },
+      });
+    });
+
+    expect(screen.getByLabelText(translations.Rname)).toHaveValue('Ad1');
+    expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+    expect(screen.getByLabelText(translations.RstartDate)).toHaveValue(
+      '2023-01-01',
+    );
+    expect(screen.getByLabelText(translations.RendDate)).toHaveValue(
+      '2023-02-01',
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(translations.register));
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        'Advertisement created successfully.',
+      );
+      expect(setTimeoutSpy).toHaveBeenCalled();
+    });
+    jest.useRealTimers();
+  });
+
+  test('update advertisement', async () => {
+    jest.useFakeTimers();
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <Provider store={store}>
+            <BrowserRouter>
+              <I18nextProvider i18n={i18n}>
+                <AdvertisementRegister
+                  endDateEdit={new Date()}
+                  startDateEdit={new Date()}
+                  typeEdit="BANNER"
+                  nameEdit="Ad1"
+                  orgIdEdit="1"
+                  advertisementMediaEdit=""
+                  setAfter={jest.fn()}
+                  formStatus="edit"
+                />
+              </I18nextProvider>
+            </BrowserRouter>
+          </Provider>
+        </MockedProvider>,
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(translations.edit)).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(translations.edit));
+    });
+
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText(translations.Rname), {
+        target: { value: 'Ad1' },
+      });
+
+      const mediaFile = new File(['media content'], 'test.png', {
+        type: 'image/png',
+      });
+
+      fireEvent.change(screen.getByLabelText(translations.Rmedia), {
+        target: {
+          files: [mediaFile],
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('mediaPreview')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText(translations.Rtype), {
+        target: { value: 'BANNER' },
+      });
+
+      fireEvent.change(screen.getByLabelText(translations.RstartDate), {
+        target: { value: '2023-01-01' },
+      });
+
+      fireEvent.change(screen.getByLabelText(translations.RendDate), {
+        target: { value: '2023-02-01' },
+      });
+    });
+
+    expect(screen.getByLabelText(translations.Rname)).toHaveValue('Ad1');
+    expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+    expect(screen.getByLabelText(translations.RstartDate)).toHaveValue(
+      '2023-01-01',
+    );
+    expect(screen.getByLabelText(translations.RendDate)).toHaveValue(
+      '2023-02-01',
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(translations.saveChanges));
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        'Advertisement created successfully.',
+      );
+      expect(setTimeoutSpy).toHaveBeenCalled();
+    });
+
+    jest.useRealTimers();
+  });
+
+  test('Logs error to the console and shows error toast when advertisement creation fails', async () => {
+    jest.useFakeTimers();
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    const toastErrorSpy = jest.spyOn(toast, 'error');
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <Provider store={store}>
+            <BrowserRouter>
+              <I18nextProvider i18n={i18n}>
+                <AdvertisementRegister
+                  endDateEdit={new Date()}
+                  startDateEdit={new Date()}
+                  typeEdit="BANNER"
+                  nameEdit="Ad1"
+                  orgIdEdit="1"
+                  advertisementMediaEdit=""
+                  setAfter={jest.fn()}
+                />
+              </I18nextProvider>
+            </BrowserRouter>
+          </Provider>
+        </MockedProvider>,
+      );
+    });
+
+    expect(
+      screen.getByText(translations.createAdvertisement),
+    ).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(translations.createAdvertisement));
+    });
+
+    expect(screen.queryByText(translations.addNew)).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(translations.register));
+    });
+
+    await waitFor(() => {
+      expect(toastErrorSpy).toHaveBeenCalledWith(
+        `An error occurred. Couldn't create advertisement`,
+      );
+    });
+
+    expect(setTimeoutSpy).toHaveBeenCalled();
+    jest.useRealTimers();
+  });
+
+  test('Throws error when the end date is less than the start date', async () => {
+    jest.useFakeTimers();
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    const { getByText, queryByText, getByLabelText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              <AdvertisementRegister
+                endDateEdit={new Date()}
+                startDateEdit={new Date()}
+                typeEdit="BANNER"
+                nameEdit="Ad1"
+                orgIdEdit="1"
+                advertisementMediaEdit=""
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(getByText(translations.createAdvertisement)).toBeInTheDocument();
+
+    fireEvent.click(getByText(translations.createAdvertisement));
+    expect(queryByText(translations.addNew)).toBeInTheDocument();
+
+    fireEvent.change(getByLabelText(translations.Rname), {
+      target: { value: 'Ad1' },
+    });
+    expect(getByLabelText(translations.Rname)).toHaveValue('Ad1');
+
+    const mediaFile = new File(['media content'], 'test.png', {
+      type: 'image/png',
+    });
+
+    const mediaInput = getByLabelText(translations.Rmedia);
+    fireEvent.change(mediaInput, {
+      target: {
+        files: [mediaFile],
+      },
+    });
+
+    const mediaPreview = await screen.findByTestId('mediaPreview');
+    expect(mediaPreview).toBeInTheDocument();
+
+    fireEvent.change(getByLabelText(translations.Rtype), {
+      target: { value: 'BANNER' },
+    });
+    expect(getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+
+    fireEvent.change(getByLabelText(translations.RstartDate), {
+      target: { value: '2023-01-01' },
+    });
+    expect(getByLabelText(translations.RstartDate)).toHaveValue('2023-01-01');
+
+    fireEvent.change(getByLabelText(translations.RendDate), {
+      target: { value: '2022-02-01' },
+    });
+    expect(getByLabelText(translations.RendDate)).toHaveValue('2022-02-01');
+
+    await waitFor(() => {
+      fireEvent.click(getByText(translations.register));
+    });
+    expect(toast.error).toHaveBeenCalledWith(
+      'End Date should be greater than or equal to Start Date',
+    );
+    expect(setTimeoutSpy).toHaveBeenCalled();
+    jest.useRealTimers();
+  });
+
+  test('AdvertismentRegister component loads correctly in edit mode', async () => {
+    jest.useFakeTimers();
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              <AdvertisementRegister
+                endDateEdit={new Date()}
+                startDateEdit={new Date()}
+                typeEdit="BANNER"
+                nameEdit="Advert1"
+                orgIdEdit="1"
+                advertisementMediaEdit="google.com"
+                formStatus="edit"
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('editBtn')).toBeInTheDocument();
+    });
+    jest.useRealTimers();
+  });
+
+  test('Opens and closes modals on button click', async () => {
+    jest.useFakeTimers();
+    const { getByText, queryByText } = render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              <AdvertisementRegister
+                endDateEdit={new Date()}
+                startDateEdit={new Date()}
+                typeEdit="BANNER"
+                nameEdit="Advert1"
+                orgIdEdit="1"
+                advertisementMediaEdit=""
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+    fireEvent.click(getByText(translations.createAdvertisement));
+    await waitFor(() => {
+      expect(queryByText(translations.addNew)).toBeInTheDocument();
+    });
+    fireEvent.click(getByText(translations.close));
+    await waitFor(() => {
+      expect(queryByText(translations.close)).not.toBeInTheDocument();
+    });
+    jest.useRealTimers();
+  });
+
+  test('Throws error when the end date is less than the start date while editing the advertisement', async () => {
+    jest.useFakeTimers();
+    const { getByText, getByLabelText, queryByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              {
+                <AdvertisementRegister
+                  formStatus="edit"
+                  endDateEdit={new Date()}
+                  startDateEdit={new Date()}
+                  typeEdit="BANNER"
+                  nameEdit="Advert1"
+                  orgIdEdit="1"
+                  advertisementMediaEdit="google.com"
+                  setAfter={jest.fn()}
+                />
+              }
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.click(getByText(translations.edit));
+    expect(queryByText(translations.editAdvertisement)).toBeInTheDocument();
+    fireEvent.change(getByLabelText(translations.Rname), {
+      target: { value: 'Test Advertisement' },
+    });
+    expect(getByLabelText(translations.Rname)).toHaveValue(
+      'Test Advertisement',
+    );
+
+    const mediaFile = new File(['video content'], 'test.mp4', {
+      type: 'video/mp4',
+    });
+    const mediaInput = screen.getByTestId('advertisementMedia');
+    userEvent.upload(mediaInput, mediaFile);
+
+    const mediaPreview = await screen.findByTestId('mediaPreview');
+    expect(mediaPreview).toBeInTheDocument();
+
+    fireEvent.change(getByLabelText(translations.Rtype), {
+      target: { value: 'BANNER' },
+    });
+    expect(getByLabelText(translations.Rtype)).toHaveValue('BANNER');
+
+    fireEvent.change(getByLabelText(translations.RstartDate), {
+      target: { value: '2023-02-02' },
+    });
+    expect(getByLabelText(translations.RstartDate)).toHaveValue('2023-02-02');
+
+    fireEvent.change(getByLabelText(translations.RendDate), {
+      target: { value: '2023-01-01' },
+    });
+    expect(getByLabelText(translations.RendDate)).toHaveValue('2023-01-01');
+
+    fireEvent.click(getByText(translations.saveChanges));
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(
+        'End Date should be greater than or equal to Start Date',
+      );
+    });
+    jest.useRealTimers();
+  });
+
+  test('Media preview renders correctly', async () => {
+    jest.useFakeTimers();
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              <AdvertisementRegister
+                endDateEdit={new Date()}
+                startDateEdit={new Date()}
+                typeEdit="BANNER"
+                nameEdit="Advert1"
+                orgIdEdit="1"
+                advertisementMediaEdit="test.mp4"
+                setAfter={jest.fn()}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.click(screen.getByText(translations.createAdvertisement));
+    await screen.findByText(translations.addNew);
+
+    const mediaFile = new File(['video content'], 'test.mp4', {
+      type: 'video/mp4',
+    });
+    const mediaInput = screen.getByTestId('advertisementMedia');
+    userEvent.upload(mediaInput, mediaFile);
+
+    const mediaPreview = await screen.findByTestId('mediaPreview');
+    expect(mediaPreview).toBeInTheDocument();
+
+    const closeButton = await screen.findByTestId('closePreview');
+    fireEvent.click(closeButton);
+    expect(mediaPreview).not.toBeInTheDocument();
+  });
+  jest.useRealTimers();
+});
diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
new file mode 100644
index 0000000000..1d5c51ce84
--- /dev/null
+++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx
@@ -0,0 +1,445 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styles from './AdvertisementRegister.module.css';
+import { Button, Form, Modal } from 'react-bootstrap';
+import {
+  ADD_ADVERTISEMENT_MUTATION,
+  UPDATE_ADVERTISEMENT_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { useMutation } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import dayjs from 'dayjs';
+import convertToBase64 from 'utils/convertToBase64';
+import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
+import { useParams } from 'react-router-dom';
+
+/**
+ * Props for the `advertisementRegister` component.
+ */
+interface InterfaceAddOnRegisterProps {
+  id?: string; // Optional organization ID
+  createdBy?: string; // Optional user who created the advertisement
+  formStatus?: string; // Determines if the form is in register or edit mode
+  idEdit?: string; // ID of the advertisement to edit
+  nameEdit?: string; // Name of the advertisement to edit
+  typeEdit?: string; // Type of the advertisement to edit
+  orgIdEdit?: string; // Organization ID associated with the advertisement
+  advertisementMediaEdit?: string; // Media URL of the advertisement to edit
+  endDateEdit?: Date; // End date of the advertisement to edit
+  startDateEdit?: Date; // Start date of the advertisement to edit
+  setAfter: React.Dispatch<React.SetStateAction<string | null | undefined>>; // Function to update parent state
+}
+
+/**
+ * State for the advertisement form.
+ */
+interface InterfaceFormStateTypes {
+  name: string; // Name of the advertisement
+  advertisementMedia: string; // Base64-encoded media of the advertisement
+  type: string; // Type of advertisement (e.g., BANNER, POPUP)
+  startDate: Date; // Start date of the advertisement
+  endDate: Date; // End date of the advertisement
+  organizationId: string | undefined; // Organization ID
+}
+
+/**
+ * Component for registering or editing an advertisement.
+ *
+ * @param props - Contains form status, advertisement details, and a function to update parent state.
+ * @returns A JSX element that renders a form inside a modal for creating or editing an advertisement.
+ *
+ * @example
+ * ```tsx
+ * <AdvertisementRegister
+ *   formStatus="register"
+ *   setAfter={(value) => console.log(value)}
+ * />
+ * ```
+ */
+function advertisementRegister({
+  formStatus = 'register',
+  idEdit,
+  nameEdit = '',
+  typeEdit = 'BANNER',
+  advertisementMediaEdit = '',
+  endDateEdit = new Date(),
+  startDateEdit = new Date(),
+  setAfter,
+}: InterfaceAddOnRegisterProps): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'advertisement' });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  const { orgId: currentOrg } = useParams();
+
+  const [show, setShow] = useState(false);
+  const handleClose = (): void => setShow(false); // Closes the modal
+  const handleShow = (): void => setShow(true); // Shows the modal
+
+  const [create] = useMutation(ADD_ADVERTISEMENT_MUTATION, {
+    refetchQueries: [
+      {
+        query: ORGANIZATION_ADVERTISEMENT_LIST,
+        variables: { first: 6, after: null, id: currentOrg },
+      },
+    ],
+  });
+
+  const [updateAdvertisement] = useMutation(UPDATE_ADVERTISEMENT_MUTATION, {
+    refetchQueries: [
+      {
+        query: ORGANIZATION_ADVERTISEMENT_LIST,
+        variables: { first: 6, after: null, id: currentOrg },
+      },
+    ],
+  });
+
+  // Initialize form state
+  const [formState, setFormState] = useState<InterfaceFormStateTypes>({
+    name: '',
+    advertisementMedia: '',
+    type: 'BANNER',
+    startDate: new Date(),
+    endDate: new Date(),
+    organizationId: currentOrg,
+  });
+
+  // Set form state if editing
+  useEffect(() => {
+    if (formStatus === 'edit') {
+      setFormState((prevState) => ({
+        ...prevState,
+        name: nameEdit || '',
+        advertisementMedia: advertisementMediaEdit || '',
+        type: typeEdit || 'BANNER',
+        startDate: startDateEdit || new Date(),
+        endDate: endDateEdit || new Date(),
+        orgId: currentOrg,
+      }));
+    }
+  }, [
+    formStatus,
+    nameEdit,
+    advertisementMediaEdit,
+    typeEdit,
+    startDateEdit,
+    endDateEdit,
+    currentOrg,
+  ]);
+  /**
+   * Handles advertisement registration.
+   * Validates the date range and performs the mutation to create an advertisement.
+   */
+  const handleRegister = async (): Promise<void> => {
+    try {
+      console.log('At handle register', formState);
+      if (formState.endDate < formState.startDate) {
+        toast.error(t('endDateGreaterOrEqual') as string);
+        return;
+      }
+      const { data } = await create({
+        variables: {
+          organizationId: currentOrg,
+          name: formState.name as string,
+          type: formState.type as string,
+          startDate: dayjs(formState.startDate).format('YYYY-MM-DD'),
+          endDate: dayjs(formState.endDate).format('YYYY-MM-DD'),
+          file: formState.advertisementMedia as string,
+        },
+      });
+
+      if (data) {
+        toast.success(t('advertisementCreated') as string);
+        setFormState({
+          name: '',
+          advertisementMedia: '',
+          type: 'BANNER',
+          startDate: new Date(),
+          endDate: new Date(),
+          organizationId: currentOrg,
+        });
+      }
+      setAfter(null);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(
+          tErrors('errorOccurredCouldntCreate', {
+            entity: 'advertisement',
+          }) as string,
+        );
+        console.log('error occured', error.message);
+      }
+    }
+  };
+
+  /**
+   * Handles advertisement update.
+   * Validates the date range and performs the mutation to update the advertisement.
+   */
+  const handleUpdate = async (): Promise<void> => {
+    try {
+      const updatedFields: Partial<InterfaceFormStateTypes> = {};
+
+      // Only include the fields which are updated
+      if (formState.name !== nameEdit) {
+        updatedFields.name = formState.name;
+      }
+      if (formState.advertisementMedia !== advertisementMediaEdit) {
+        updatedFields.advertisementMedia = formState.advertisementMedia;
+      }
+      if (formState.type !== typeEdit) {
+        updatedFields.type = formState.type;
+      }
+      if (formState.endDate < formState.startDate) {
+        toast.error(t('endDateGreaterOrEqual') as string);
+        return;
+      }
+      const startDateFormattedString = dayjs(formState.startDate).format(
+        'YYYY-MM-DD',
+      );
+      const endDateFormattedString = dayjs(formState.endDate).format(
+        'YYYY-MM-DD',
+      );
+
+      const startDateDate = dayjs(
+        startDateFormattedString,
+        'YYYY-MM-DD',
+      ).toDate();
+      const endDateDate = dayjs(endDateFormattedString, 'YYYY-MM-DD').toDate();
+
+      if (!dayjs(startDateDate).isSame(startDateEdit, 'day')) {
+        updatedFields.startDate = startDateDate;
+      }
+      if (!dayjs(endDateDate).isSame(endDateEdit, 'day')) {
+        updatedFields.endDate = endDateDate;
+      }
+
+      console.log('At handle update', updatedFields);
+      const { data } = await updateAdvertisement({
+        variables: {
+          id: idEdit,
+          ...(updatedFields.name && { name: updatedFields.name }),
+          ...(updatedFields.advertisementMedia && {
+            file: updatedFields.advertisementMedia,
+          }),
+          ...(updatedFields.type && { type: updatedFields.type }),
+          ...(updatedFields.startDate && {
+            startDate: startDateFormattedString,
+          }),
+          ...(updatedFields.endDate && { endDate: endDateFormattedString }),
+        },
+      });
+
+      if (data) {
+        toast.success(
+          tCommon('updatedSuccessfully', { item: 'Advertisement' }) as string,
+        );
+        handleClose();
+        setAfter(null);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+  return (
+    //If register show register button else show edit button
+    <>
+      {formStatus === 'register' ? (
+        <Button
+          className={styles.modalbtn}
+          variant="primary"
+          onClick={handleShow}
+          data-testid="createAdvertisement"
+        >
+          <i className="fa fa-plus"></i>
+          {t('createAdvertisement')}
+        </Button>
+      ) : (
+        <div onClick={handleShow} data-testid="editBtn">
+          {tCommon('edit')}
+        </div>
+      )}
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton className={styles.editHeader}>
+          {formStatus === 'register' ? (
+            <Modal.Title> {t('addNew')}</Modal.Title>
+          ) : (
+            <Modal.Title>{t('editAdvertisement')}</Modal.Title>
+          )}
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <Form.Group className="mb-3" controlId="registerForm.Rname">
+              <Form.Label>{t('Rname')}</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder={t('EXname')}
+                autoComplete="off"
+                required
+                value={formState.name}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    name: e.target.value,
+                  });
+                }}
+              />
+            </Form.Group>
+            <Form.Group className="mb-3">
+              <Form.Label htmlFor="advertisementMedia">
+                {t('Rmedia')}
+              </Form.Label>
+              <Form.Control
+                accept="image/*, video/*"
+                data-testid="advertisementMedia"
+                name="advertisementMedia"
+                type="file"
+                id="advertisementMedia"
+                multiple={false}
+                onChange={async (
+                  e: React.ChangeEvent<HTMLInputElement>,
+                ): Promise<void> => {
+                  const target = e.target as HTMLInputElement;
+                  const file = target.files && target.files[0];
+                  if (file) {
+                    const mediaBase64 = await convertToBase64(file);
+                    setFormState({
+                      ...formState,
+                      advertisementMedia: mediaBase64,
+                    });
+                  }
+                }}
+              />
+              {formState.advertisementMedia && (
+                <div className={styles.preview} data-testid="mediaPreview">
+                  {formState.advertisementMedia.includes('video') ? (
+                    <video
+                      muted
+                      autoPlay={true}
+                      loop={true}
+                      playsInline
+                      crossOrigin="anonymous"
+                    >
+                      <source
+                        src={formState.advertisementMedia}
+                        type="video/mp4"
+                      />
+                    </video>
+                  ) : (
+                    <img src={formState.advertisementMedia} />
+                  )}
+                  <button
+                    className={styles.closeButton}
+                    onClick={(e): void => {
+                      e.preventDefault();
+                      setFormState({
+                        ...formState,
+                        advertisementMedia: '',
+                      });
+                      const fileInput = document.getElementById(
+                        'advertisementMedia',
+                      ) as HTMLInputElement;
+                      if (fileInput) {
+                        fileInput.value = '';
+                      }
+                    }}
+                    data-testid="closePreview"
+                  >
+                    <i className="fa fa-times"></i>
+                  </button>
+                </div>
+              )}
+            </Form.Group>
+            <Form.Group className="mb-3" controlId="registerForm.Rtype">
+              <Form.Label>{t('Rtype')}</Form.Label>
+              <Form.Select
+                aria-label={t('Rtype')}
+                value={formState.type}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    type: e.target.value,
+                  });
+                }}
+              >
+                <option value="POPUP">Popup Ad</option>
+                <option value="BANNER">Banner Ad </option>
+              </Form.Select>
+            </Form.Group>
+
+            <Form.Group className="mb-3" controlId="registerForm.RstartDate">
+              <Form.Label>{t('RstartDate')}</Form.Label>
+              <Form.Control
+                type="date"
+                required
+                value={formState.startDate.toISOString().slice(0, 10)}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    startDate: new Date(e.target.value),
+                  });
+                }}
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3" controlId="registerForm.RDate">
+              <Form.Label>{t('RendDate')}</Form.Label>
+              <Form.Control
+                type="date"
+                required
+                value={formState.endDate.toISOString().slice(0, 10)}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    endDate: new Date(e.target.value),
+                  });
+                }}
+              />
+            </Form.Group>
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="secondary"
+            onClick={handleClose}
+            data-testid="addonclose"
+          >
+            {tCommon('close')}
+          </Button>
+          {formStatus === 'register' ? (
+            <Button
+              variant="primary"
+              onClick={handleRegister}
+              data-testid="addonregister"
+            >
+              {tCommon('register')}
+            </Button>
+          ) : (
+            <Button
+              variant="primary"
+              onClick={handleUpdate}
+              data-testid="addonupdate"
+            >
+              {tCommon('saveChanges')}
+            </Button>
+          )}
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+advertisementRegister.propTypes = {
+  name: PropTypes.string,
+  advertisementMedia: PropTypes.string,
+  type: PropTypes.string,
+  startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
+  organizationId: PropTypes.string,
+  formStatus: PropTypes.string,
+};
+
+export default advertisementRegister;
diff --git a/src/components/AgendaCategory/AgendaCategoryContainer.module.css b/src/components/AgendaCategory/AgendaCategoryContainer.module.css
new file mode 100644
index 0000000000..7ad16b4c7c
--- /dev/null
+++ b/src/components/AgendaCategory/AgendaCategoryContainer.module.css
@@ -0,0 +1,20 @@
+.createModal {
+  margin-top: 20vh;
+  margin-left: 13vw;
+  max-width: 80vw;
+}
+
+.titlemodal {
+  color: var(--bs-gray-600);
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid var(--bs-primary);
+  width: 65%;
+}
+
+.agendaCategoryOptionsButton {
+  width: 24px;
+  height: 24px;
+}
diff --git a/src/components/AgendaCategory/AgendaCategoryContainer.test.tsx b/src/components/AgendaCategory/AgendaCategoryContainer.test.tsx
new file mode 100644
index 0000000000..d8e27c3cb2
--- /dev/null
+++ b/src/components/AgendaCategory/AgendaCategoryContainer.test.tsx
@@ -0,0 +1,419 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+  waitForElementToBeRemoved,
+  fireEvent,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { MockedProvider } from '@apollo/client/testing';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import i18nForTest from 'utils/i18nForTest';
+import { toast } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import AgendaCategoryContainer from './AgendaCategoryContainer';
+import { props, props2 } from './AgendaCategoryContainerProps';
+import { MOCKS, MOCKS_ERROR_MUTATIONS } from './AgendaCategoryContainerMocks';
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true);
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+async function wait(ms = 100): Promise<void> {
+  await act(async () => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+const translations = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.organizationAgendaCategory,
+  ),
+);
+
+describe('Testing Agenda Category Component', () => {
+  const formData = {
+    name: 'AgendaCategory 1 Edited',
+    description: 'AgendaCategory 1 Description Edited',
+  };
+
+  test('component loads correctly with categories', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaCategoryContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText(translations.noAgendaCategories),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('component loads correctly with no agenda Categories', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaCategoryContainer {...props2} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText(translations.noAgendaCategories),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the update modal correctly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaCategoryContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('editAgendCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('editAgendCategoryModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('updateAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateAgendaCategoryModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('updateAgendaCategoryModalCloseBtn'),
+    );
+  });
+
+  test('opens and closes the preview modal correctly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaCategoryContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaCategoryModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('previewAgendaCategoryModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('previewAgendaCategoryModalCloseBtn'),
+    );
+  });
+
+  test('opens and closes the update and delete modals through the preview modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaCategoryContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaCategoryModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('deleteAgendaCategoryModalBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaCategoryModalBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('deleteAgendaCategoryCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaCategoryCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('deleteAgendaCategoryCloseBtn'),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('editAgendaCategoryPreviewModalBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('editAgendaCategoryPreviewModalBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('updateAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateAgendaCategoryModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('updateAgendaCategoryModalCloseBtn'),
+    );
+  });
+
+  test('updates an agenda category and toasts success', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AgendaCategoryContainer {...props} />
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('editAgendCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('editAgendCategoryModalBtn')[0]);
+
+    const name = screen.getByPlaceholderText(translations.name);
+    const description = screen.getByPlaceholderText(translations.description);
+
+    fireEvent.change(name, { target: { value: '' } });
+    userEvent.type(name, formData.name);
+
+    fireEvent.change(description, { target: { value: '' } });
+    userEvent.type(description, formData.description);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('editAgendaCategoryBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('editAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaCategoryUpdated,
+      );
+    });
+  });
+
+  test('toasts error on unsuccessful updation', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AgendaCategoryContainer {...props} />
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('editAgendCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('editAgendCategoryModalBtn')[0]);
+
+    const nameInput = screen.getByLabelText(translations.name);
+    const descriptionInput = screen.getByLabelText(translations.description);
+    fireEvent.change(nameInput, { target: { value: '' } });
+    fireEvent.change(descriptionInput, {
+      target: { value: '' },
+    });
+    userEvent.type(nameInput, formData.name);
+    userEvent.type(descriptionInput, formData.description);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('editAgendaCategoryBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('editAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  test('deletes the agenda category and toasts success', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AgendaCategoryContainer {...props} />
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaCategoryModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('deleteAgendaCategoryModalBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaCategoryModalBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('deleteAgendaCategoryCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('deleteAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaCategoryDeleted,
+      );
+    });
+  });
+
+  test('toasts error on unsuccessful deletion', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaCategoryContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaCategoryModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaCategoryModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('deleteAgendaCategoryModalBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaCategoryModalBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('deleteAgendaCategoryCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/AgendaCategory/AgendaCategoryContainer.tsx b/src/components/AgendaCategory/AgendaCategoryContainer.tsx
new file mode 100644
index 0000000000..7b4c5cf8f4
--- /dev/null
+++ b/src/components/AgendaCategory/AgendaCategoryContainer.tsx
@@ -0,0 +1,324 @@
+import React, { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { Button, Col, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { useMutation } from '@apollo/client';
+
+import {
+  DELETE_AGENDA_ITEM_CATEGORY_MUTATION,
+  UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import type { InterfaceAgendaItemCategoryInfo } from 'utils/interfaces';
+import styles from './AgendaCategoryContainer.module.css';
+
+import AgendaCategoryDeleteModal from 'components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal';
+import AgendaCategoryPreviewModal from 'components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal';
+import AgendaCategoryUpdateModal from 'components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal';
+
+/**
+ * Component for displaying and managing agenda item categories.
+ *
+ * @param props - Contains agenda category data and functions for data management.
+ * @returns A JSX element that renders agenda item categories with options to preview, edit, and delete.
+ *
+ * @example
+ * ```tsx
+ * <AgendaCategoryContainer
+ *   agendaCategoryConnection="Organization"
+ *   agendaCategoryData={data}
+ *   agendaCategoryRefetch={refetch}
+ * />
+ * ```
+ */
+function agendaCategoryContainer({
+  agendaCategoryConnection,
+  agendaCategoryData,
+  agendaCategoryRefetch,
+}: {
+  agendaCategoryConnection: 'Organization';
+  agendaCategoryData: InterfaceAgendaItemCategoryInfo[] | undefined;
+  agendaCategoryRefetch: () => void;
+}): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationAgendaCategory',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // State management for modals and form data
+  const [
+    agendaCategoryPreviewModalIsOpen,
+    setAgendaCategoryPreviewModalIsOpen,
+  ] = useState(false);
+  const [agendaCategoryUpdateModalIsOpen, setAgendaCategoryUpdateModalIsOpen] =
+    useState(false);
+  const [agendaCategoryDeleteModalIsOpen, setAgendaCategoryDeleteModalIsOpen] =
+    useState(false);
+
+  const [agendaCategoryId, setAgendaCategoryId] = useState('');
+
+  const [formState, setFormState] = useState({
+    name: '',
+    description: '',
+    createdBy: '',
+  });
+
+  /**
+   * Opens the preview modal and sets the state for the selected agenda category.
+   *
+   * @param agendaItemCategory - The agenda category to preview.
+   */
+  const showPreviewModal = (
+    agendaItemCategory: InterfaceAgendaItemCategoryInfo,
+  ): void => {
+    setAgendaCategoryState(agendaItemCategory);
+    setAgendaCategoryPreviewModalIsOpen(true);
+  };
+
+  /**
+   * Closes the preview modal.
+   */
+  const hidePreviewModal = (): void => {
+    setAgendaCategoryPreviewModalIsOpen(false);
+  };
+
+  /**
+   * Toggles the visibility of the update modal.
+   */
+  const showUpdateModal = (): void => {
+    setAgendaCategoryUpdateModalIsOpen(!agendaCategoryUpdateModalIsOpen);
+  };
+
+  /**
+   * Toggles the visibility of the update modal.
+   */
+  const hideUpdateModal = (): void => {
+    setAgendaCategoryUpdateModalIsOpen(!agendaCategoryUpdateModalIsOpen);
+  };
+
+  /**
+   * Toggles the visibility of the delete modal.
+   */
+  const toggleDeleteModal = (): void => {
+    setAgendaCategoryDeleteModalIsOpen(!agendaCategoryDeleteModalIsOpen);
+  };
+
+  const [updateAgendaCategory] = useMutation(
+    UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+  );
+
+  /**
+   * Handles the update of an agenda category.
+   *
+   * @param event - The form submit event.
+   */
+  const updateAgendaCategoryHandler = async (
+    event: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    event.preventDefault();
+    try {
+      await updateAgendaCategory({
+        variables: {
+          updateAgendaCategoryId: agendaCategoryId,
+          input: {
+            name: formState.name,
+            description: formState.description,
+          },
+        },
+      });
+
+      agendaCategoryRefetch();
+      hideUpdateModal();
+      toast.success(t('agendaCategoryUpdated') as string);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(`Agenda Category Update Failed ${error.message}`);
+      }
+    }
+  };
+
+  const [deleteAgendaCategory] = useMutation(
+    DELETE_AGENDA_ITEM_CATEGORY_MUTATION,
+  );
+
+  /**
+   * Handles the deletion of an agenda category.
+   */
+  const deleteAgendaCategoryHandler = async (): Promise<void> => {
+    try {
+      await deleteAgendaCategory({
+        variables: {
+          deleteAgendaCategoryId: agendaCategoryId,
+        },
+      });
+      agendaCategoryRefetch();
+      toggleDeleteModal();
+      toast.success(t('agendaCategoryDeleted') as string);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(`Agenda Category Delete Failed, ${error.message}`);
+      }
+    }
+  };
+
+  /**
+   * Prepares the form state and shows the update modal for the selected agenda category.
+   *
+   * @param agendaItemCategory - The agenda category to edit.
+   */
+  const handleEditClick = (
+    agendaItemCategory: InterfaceAgendaItemCategoryInfo,
+  ): void => {
+    setAgendaCategoryState(agendaItemCategory);
+    showUpdateModal();
+  };
+
+  /**
+   * Updates the form state with the selected agenda category's details.
+   *
+   * @param agendaItemCategory - The agenda category details.
+   */
+  const setAgendaCategoryState = (
+    agendaItemCategory: InterfaceAgendaItemCategoryInfo,
+  ): void => {
+    setFormState({
+      ...formState,
+      name: `${agendaItemCategory.name} `,
+      description: `${agendaItemCategory.description}`,
+      createdBy: `${agendaItemCategory.createdBy.firstName} ${agendaItemCategory.createdBy.lastName}`,
+    });
+    setAgendaCategoryId(agendaItemCategory._id);
+  };
+
+  return (
+    <>
+      <div
+        className={`mx-1 ${agendaCategoryConnection === 'Organization' ? 'my-4' : 'my-0'}`}
+      >
+        <div
+          className={`shadow-sm ${agendaCategoryConnection === 'Organization' ? 'rounded-top-4 mx-4' : 'rounded-top-2 mx-0'}`}
+        >
+          <Row
+            className={`mx-0 border border-light-subtle py-3 ${agendaCategoryConnection === 'Organization' ? 'rounded-top-4' : 'rounded-top-2'}`}
+          >
+            <Col
+              xs={7}
+              sm={4}
+              md={3}
+              lg={2}
+              className="align-self-center ps-3 fw-bold"
+            >
+              <div className="ms-3">{t('name')}</div>
+            </Col>
+            <Col
+              className="align-self-center fw-bold d-none d-md-block"
+              md={6}
+              lg={2}
+            >
+              {t('description')}
+            </Col>
+            <Col className="d-none d-lg-block fw-bold align-self-center" lg={2}>
+              <div className="ms-1">{t('createdBy')}</div>
+            </Col>
+            <Col xs={5} sm={3} lg={2} className="fw-bold align-self-center">
+              <div className="ms-2">{t('options')}</div>
+            </Col>
+          </Row>
+        </div>
+        <div
+          className={`bg-light-subtle border border-light-subtle border-top-0 shadow-sm ${agendaCategoryConnection === 'Organization' ? 'rounded-bottom-4 mx-4' : 'rounded-bottom-2 mb-2 mx-0'}`}
+        >
+          {agendaCategoryData?.map((agendaCategory, index) => (
+            <div key={index}>
+              <Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2 `}>
+                <Col
+                  sm={4}
+                  xs={7}
+                  md={3}
+                  lg={2}
+                  className="align-self-center text-body-secondary"
+                >
+                  {`${agendaCategory.name}`}
+                </Col>
+                <Col
+                  md={6}
+                  lg={2}
+                  className="p-1 d-none d-md-block align-self-center text-body-secondary"
+                >
+                  {agendaCategory.description}
+                </Col>
+                <Col
+                  lg={2}
+                  className="p-1 d-none d-lg-block align-self-center text-body-secondary"
+                >
+                  {`${agendaCategory.createdBy.firstName} ${agendaCategory.createdBy.lastName}`}
+                </Col>
+
+                <Col xs={5} sm={3} lg={2} className="p-0 align-self-center">
+                  <div className="d-flex align-items-center ms-4 gap-2">
+                    <Button
+                      data-testid="previewAgendaCategoryModalBtn"
+                      className={`${styles.agendaCategoryOptionsButton} d-flex align-items-center justify-content-center`}
+                      variant="outline-secondary"
+                      size="sm"
+                      onClick={() => showPreviewModal(agendaCategory)}
+                    >
+                      <i className="fas fa-info fa-sm" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      data-testid="editAgendCategoryModalBtn"
+                      onClick={() => handleEditClick(agendaCategory)}
+                      className={`${styles.agendaCategoryOptionsButton} d-flex align-items-center justify-content-center`}
+                      variant="outline-secondary"
+                    >
+                      <i className="fas fa-edit fa-sm" />
+                    </Button>
+                  </div>
+                </Col>
+              </Row>
+
+              {index !== agendaCategoryData.length - 1 && (
+                <hr className="mx-3" />
+              )}
+            </div>
+          ))}
+          {agendaCategoryData?.length === 0 && (
+            <div className="lh-lg text-center fw-semibold text-body-tertiary">
+              {t('noAgendaCategories')}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Preview modal */}
+      <AgendaCategoryPreviewModal
+        agendaCategoryPreviewModalIsOpen={agendaCategoryPreviewModalIsOpen}
+        hidePreviewModal={hidePreviewModal}
+        showUpdateModal={showUpdateModal}
+        toggleDeleteModal={toggleDeleteModal}
+        formState={formState}
+        t={t}
+      />
+      {/* Update modal */}
+      <AgendaCategoryUpdateModal
+        agendaCategoryUpdateModalIsOpen={agendaCategoryUpdateModalIsOpen}
+        hideUpdateModal={hideUpdateModal}
+        formState={formState}
+        setFormState={setFormState}
+        updateAgendaCategoryHandler={updateAgendaCategoryHandler}
+        t={t}
+      />
+      {/* Delete modal */}
+      <AgendaCategoryDeleteModal
+        agendaCategoryDeleteModalIsOpen={agendaCategoryDeleteModalIsOpen}
+        toggleDeleteModal={toggleDeleteModal}
+        deleteAgendaCategoryHandler={deleteAgendaCategoryHandler}
+        t={t}
+        tCommon={tCommon}
+      />
+    </>
+  );
+}
+
+export default agendaCategoryContainer;
diff --git a/src/components/AgendaCategory/AgendaCategoryContainerMocks.ts b/src/components/AgendaCategory/AgendaCategoryContainerMocks.ts
new file mode 100644
index 0000000000..f5dee5cffd
--- /dev/null
+++ b/src/components/AgendaCategory/AgendaCategoryContainerMocks.ts
@@ -0,0 +1,104 @@
+import {
+  UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+  DELETE_AGENDA_ITEM_CATEGORY_MUTATION,
+} from 'GraphQl/Mutations/AgendaCategoryMutations';
+
+export const MOCKS = [
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        updateAgendaCategoryId: 'agendaCategory1',
+        input: {
+          name: 'AgendaCategory 1 Edited',
+          description: 'AgendaCategory 1 Description Edited',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateAgendaCategory: {
+          _id: 'agendaCategory1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        updateAgendaCategoryId: 'agendaCategory1',
+        input: {
+          name: 'AgendaCategory 1',
+          description: 'AgendaCategory 1 Description',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateAgendaCategory: {
+          _id: 'agendaCategory1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        updateAgendaCategoryId: 'agendaCategory2',
+        input: {
+          name: 'AgendaCategory 2 edited',
+          description: 'AgendaCategory 2 Description',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateAgendaCategory: {
+          _id: 'agendaCategory2',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        deleteAgendaCategoryId: 'agendaCategory1',
+      },
+    },
+    result: {
+      data: {
+        deleteAgendaCategory: {
+          _id: 'agendaCategory1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR_MUTATIONS = [
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        updateAgendaCategoryId: 'agendaCategory1',
+        input: {
+          name: 'AgendaCategory 1 Edited',
+          description: 'AgendaCategory 1 Description Edited',
+        },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: DELETE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        deleteAgendaCategoryId: 'agendaCategory1',
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/components/AgendaCategory/AgendaCategoryContainerProps.ts b/src/components/AgendaCategory/AgendaCategoryContainerProps.ts
new file mode 100644
index 0000000000..5181eec153
--- /dev/null
+++ b/src/components/AgendaCategory/AgendaCategoryContainerProps.ts
@@ -0,0 +1,34 @@
+type AgendaCategoryConnectionType = 'Organization';
+
+export const props = {
+  agendaCategoryConnection: 'Organization' as AgendaCategoryConnectionType,
+  agendaCategoryData: [
+    {
+      _id: 'agendaCategory1',
+      name: 'AgendaCategory 1',
+      description: 'AgendaCategory 1 Description',
+      createdBy: {
+        _id: 'user0',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+    {
+      _id: 'agendaCategory2',
+      name: 'AgendaCategory 2',
+      description: 'AgendaCategory 2 Description',
+      createdBy: {
+        _id: 'user0',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  ],
+  agendaCategoryRefetch: jest.fn(),
+};
+
+export const props2 = {
+  agendaCategoryConnection: 'Organization' as AgendaCategoryConnectionType,
+  agendaCategoryData: [],
+  agendaCategoryRefetch: jest.fn(),
+};
diff --git a/src/components/AgendaItems/AgendaItemsContainer.module.css b/src/components/AgendaItems/AgendaItemsContainer.module.css
new file mode 100644
index 0000000000..f254e7aad7
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsContainer.module.css
@@ -0,0 +1,230 @@
+.createModal {
+  margin-top: 20vh;
+  margin-left: 13vw;
+  max-width: 80vw;
+}
+
+.titlemodal {
+  color: var(--bs-gray-600);
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid var(--bs-primary);
+  width: 65%;
+}
+
+.agendaItemsOptionsButton {
+  width: 24px;
+  height: 24px;
+}
+
+.agendaItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 1px;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px var(--bs-gray-300);
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: var(--bs-primary);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--bs-gray-600);
+}
+
+.previewFile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.previewFile img,
+.previewFile video {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  margin-bottom: 10px;
+}
+
+.attachmentPreview {
+  position: relative;
+  width: 100%;
+}
+
+.closeButtonFile {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 16px;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.categoryContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+}
+
+.categoryChip {
+  display: inline-flex;
+  align-items: center;
+  background-color: #e0e0e0;
+  border-radius: 16px;
+  padding: 0 12px;
+  font-size: 14px;
+  height: 32px;
+  margin: 5px;
+}
+
+.urlListItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.urlIcon {
+  margin-right: 10px;
+}
+
+.deleteButton {
+  margin-left: auto;
+  padding: 2px 5px;
+}
+
+.urlListItem a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.urlListItem a:hover {
+  text-decoration: underline;
+}
+
+.agendaItemRow {
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  transition: box-shadow 0.2s ease;
+  background-color: #fff;
+}
+.agendaItemRow:hover {
+  background-color: #f0f0f0;
+}
+
+.dragging {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  background-color: #f0f0f0;
+}
+
+.droppable {
+  background-color: #f9f9f9; /* Background color of droppable area */
+}
+
+.droppableDraggingOver {
+  background-color: #e6f7ff; /* Background color of droppable area while dragging over */
+}
+
+.tableHead {
+  background-color: #31bb6b !important;
+  color: white;
+  border-radius: 20px 20px 0px 0px !important;
+  padding: 20px;
+}
+
+@media (max-width: 768px) {
+  .createModal,
+  .agendaItemModal {
+    margin: 10vh auto;
+    max-width: 90%;
+  }
+
+  .titlemodal {
+    width: 90%;
+  }
+
+  .greenregbtn {
+    width: 90%;
+  }
+
+  /* Add more specific styles for smaller screens as needed */
+}
+
+@media (max-width: 576px) {
+  .createModal,
+  .agendaItemModal {
+    margin: 5vh auto;
+    max-width: 95%;
+  }
+
+  .titlemodal {
+    width: 100%;
+  }
+
+  .greenregbtn {
+    width: 100%;
+  }
+
+  /* Additional specific styles for even smaller screens */
+}
diff --git a/src/components/AgendaItems/AgendaItemsContainer.test.tsx b/src/components/AgendaItems/AgendaItemsContainer.test.tsx
new file mode 100644
index 0000000000..8b391a2073
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsContainer.test.tsx
@@ -0,0 +1,428 @@
+import React, { act } from 'react';
+import {
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+  fireEvent,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { MockedProvider } from '@apollo/client/testing';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import i18nForTest from 'utils/i18nForTest';
+import { toast } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import { props, props2 } from './AgendaItemsContainerProps';
+import { MOCKS, MOCKS_ERROR } from './AgendaItemsContainerMocks';
+import AgendaItemsContainer from './AgendaItemsContainer';
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR, true);
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+//temporarily fixes react-beautiful-dnd droppable method's depreciation error
+//needs to be fixed in React 19
+jest.spyOn(console, 'error').mockImplementation((message) => {
+  if (message.includes('Support for defaultProps will be removed')) {
+    return;
+  }
+  console.error(message);
+});
+
+async function wait(ms = 100): Promise<void> {
+  await act(async () => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.agendaItems),
+);
+
+describe('Testing Agenda Items components', () => {
+  const formData = {
+    title: 'AgendaItem 1 Edited',
+    description: 'AgendaItem 1 Description Edited',
+  };
+
+  test('component loads correctly with items', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText(translations.noAgendaItems),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('component loads correctly with no agenda items', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsContainer {...props2} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText(translations.noAgendaItems),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the update modal correctly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('editAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('editAgendaItemModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('updateAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateAgendaItemModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('updateAgendaItemModalCloseBtn'),
+    );
+  });
+
+  test('opens and closes the preview modal correctly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaItemModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('previewAgendaItemModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('previewAgendaItemModalCloseBtn'),
+    );
+  });
+
+  test('opens and closes the update and delete modals through the preview modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaItemModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('previewAgendaItemModalDeleteBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('previewAgendaItemModalDeleteBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('deleteAgendaItemCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaItemCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('deleteAgendaItemCloseBtn'),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('previewAgendaItemModalUpdateBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('previewAgendaItemModalUpdateBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('updateAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateAgendaItemModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('updateAgendaItemModalCloseBtn'),
+    );
+  });
+
+  test('updates an agenda Items and toasts success', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AgendaItemsContainer {...props} />
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('editAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('editAgendaItemModalBtn')[0]);
+
+    const title = screen.getByPlaceholderText(translations.enterTitle);
+    const description = screen.getByPlaceholderText(
+      translations.enterDescription,
+    );
+
+    fireEvent.change(title, { target: { value: '' } });
+    userEvent.type(title, formData.title);
+
+    fireEvent.change(description, { target: { value: '' } });
+    userEvent.type(description, formData.description);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateAgendaItemBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateAgendaItemBtn'));
+
+    await waitFor(() => {
+      // expect(toast.success).toBeCalledWith(translations.agendaItemUpdated);
+    });
+  });
+
+  test('toasts error on unsuccessful updation', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AgendaItemsContainer {...props} />
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('editAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('editAgendaItemModalBtn')[0]);
+
+    const titleInput = screen.getByLabelText(translations.title);
+    const descriptionInput = screen.getByLabelText(translations.description);
+    fireEvent.change(titleInput, { target: { value: '' } });
+    fireEvent.change(descriptionInput, {
+      target: { value: '' },
+    });
+    userEvent.type(titleInput, formData.title);
+    userEvent.type(descriptionInput, formData.description);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateAgendaItemBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateAgendaItemBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  test('deletes the agenda item and toasts success', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <AgendaItemsContainer {...props} />
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaItemModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('previewAgendaItemModalDeleteBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('previewAgendaItemModalDeleteBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('deleteAgendaItemCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('deleteAgendaItemBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaItemDeleted,
+      );
+    });
+  });
+
+  test('toasts error on unsuccessful deletion', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('previewAgendaItemModalBtn')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('previewAgendaItemModalBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('previewAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('previewAgendaItemModalDeleteBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('previewAgendaItemModalDeleteBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('deleteAgendaItemCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteAgendaItemBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  // write test case for drag and drop line:- 172-202
+});
diff --git a/src/components/AgendaItems/AgendaItemsContainer.tsx b/src/components/AgendaItems/AgendaItemsContainer.tsx
new file mode 100644
index 0000000000..4e50cb5fe8
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsContainer.tsx
@@ -0,0 +1,456 @@
+import React, { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { Button, Col, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { useMutation } from '@apollo/client';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import type { DropResult } from 'react-beautiful-dnd';
+
+import {
+  DELETE_AGENDA_ITEM_MUTATION,
+  UPDATE_AGENDA_ITEM_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import type {
+  InterfaceAgendaItemInfo,
+  InterfaceAgendaItemCategoryInfo,
+} from 'utils/interfaces';
+import styles from './AgendaItemsContainer.module.css';
+
+import AgendaItemsPreviewModal from 'components/AgendaItems/AgendaItemsPreviewModal';
+import AgendaItemsDeleteModal from 'components/AgendaItems/AgendaItemsDeleteModal';
+import AgendaItemsUpdateModal from 'components/AgendaItems/AgendaItemsUpdateModal';
+
+/**
+ * Component for displaying and managing agenda items.
+ * Supports drag-and-drop functionality, and includes modals for previewing,
+ * updating, and deleting agenda items.
+ *
+ * @param props - The props for the component.
+ * @returns JSX.Element
+ */
+function AgendaItemsContainer({
+  agendaItemConnection,
+  agendaItemData,
+  agendaItemRefetch,
+  agendaItemCategories,
+}: {
+  agendaItemConnection: 'Event';
+  agendaItemData: InterfaceAgendaItemInfo[] | undefined;
+  agendaItemRefetch: () => void;
+  agendaItemCategories: InterfaceAgendaItemCategoryInfo[] | undefined;
+}): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'agendaItems',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // State for modals
+  const [agendaItemPreviewModalIsOpen, setAgendaItemPreviewModalIsOpen] =
+    useState(false);
+  const [agendaItemUpdateModalIsOpen, setAgendaItemUpdateModalIsOpen] =
+    useState(false);
+  const [agendaItemDeleteModalIsOpen, setAgendaItemDeleteModalIsOpen] =
+    useState(false);
+
+  // State for current agenda item ID and form data
+  const [agendaItemId, setAgendaItemId] = useState('');
+
+  const [formState, setFormState] = useState<{
+    agendaItemCategoryIds: string[];
+    agendaItemCategoryNames: string[];
+    title: string;
+    description: string;
+    duration: string;
+    attachments: string[];
+    urls: string[];
+    createdBy: {
+      firstName: string;
+      lastName: string;
+    };
+  }>({
+    agendaItemCategoryIds: [],
+    agendaItemCategoryNames: [],
+    title: '',
+    description: '',
+    duration: '',
+    attachments: [],
+    urls: [],
+    createdBy: {
+      firstName: '',
+      lastName: '',
+    },
+  });
+
+  /**
+   * Shows the preview modal with the details of the selected agenda item.
+   * @param agendaItem - The agenda item to preview.
+   */
+  const showPreviewModal = (agendaItem: InterfaceAgendaItemInfo): void => {
+    setAgendaItemState(agendaItem);
+    setAgendaItemPreviewModalIsOpen(true);
+  };
+
+  /**
+   * Hides the preview modal.
+   */
+  const hidePreviewModal = (): void => {
+    setAgendaItemPreviewModalIsOpen(false);
+  };
+
+  /**
+   * Toggles the visibility of the update modal.
+   */
+  const showUpdateModal = (): void => {
+    setAgendaItemUpdateModalIsOpen(!agendaItemUpdateModalIsOpen);
+  };
+
+  /**
+   * Toggles the visibility of the update modal.
+   */
+  const hideUpdateModal = (): void => {
+    setAgendaItemUpdateModalIsOpen(!agendaItemUpdateModalIsOpen);
+  };
+
+  /**
+   * Toggles the visibility of the delete modal.
+   */
+  const toggleDeleteModal = (): void => {
+    setAgendaItemDeleteModalIsOpen(!agendaItemDeleteModalIsOpen);
+  };
+
+  const [updateAgendaItem] = useMutation(UPDATE_AGENDA_ITEM_MUTATION);
+
+  /**
+   * Handles updating an agenda item.
+   * @param e - The form submission event.
+   */
+  const updateAgendaItemHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await updateAgendaItem({
+        variables: {
+          updateAgendaItemId: agendaItemId,
+          input: {
+            title: formState.title,
+            description: formState.description,
+            duration: formState.duration,
+            categories: formState.agendaItemCategoryIds,
+            attachments: formState.attachments,
+            urls: formState.urls,
+          },
+        },
+      });
+      agendaItemRefetch();
+      hideUpdateModal();
+      toast.success(t('agendaItemUpdated') as string);
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`${error.message}`);
+      }
+    }
+  };
+
+  const [deleteAgendaItem] = useMutation(DELETE_AGENDA_ITEM_MUTATION);
+
+  /**
+   * Handles deleting an agenda item.
+   */
+  const deleteAgendaItemHandler = async (): Promise<void> => {
+    try {
+      await deleteAgendaItem({
+        variables: {
+          removeAgendaItemId: agendaItemId,
+        },
+      });
+      agendaItemRefetch();
+      toggleDeleteModal();
+      toast.success(t('agendaItemDeleted') as string);
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`${error.message}`);
+      }
+    }
+  };
+
+  /**
+   * Handles click event to show the update modal for the selected agenda item.
+   * @param agendaItem - The agenda item to update.
+   */
+  const handleEditClick = (agendaItem: InterfaceAgendaItemInfo): void => {
+    setAgendaItemState(agendaItem);
+    showUpdateModal();
+  };
+
+  /**
+   * Sets the state for the selected agenda item.
+   * @param agendaItem - The agenda item to set in the state.
+   */
+  const setAgendaItemState = (agendaItem: InterfaceAgendaItemInfo): void => {
+    setFormState({
+      ...formState,
+      agendaItemCategoryIds: agendaItem.categories.map(
+        (category) => category._id,
+      ),
+      agendaItemCategoryNames: agendaItem.categories.map(
+        (category) => category.name,
+      ),
+      title: agendaItem.title,
+      description: agendaItem.description,
+      duration: agendaItem.duration,
+      attachments: agendaItem.attachments,
+      urls: agendaItem.urls,
+      createdBy: {
+        firstName: agendaItem.createdBy.firstName,
+        lastName: agendaItem.createdBy.lastName,
+      },
+    });
+    setAgendaItemId(agendaItem._id);
+  };
+
+  /**
+   * Handles the end of a drag-and-drop operation.
+   * @param result - The result of the drag-and-drop operation.
+   */
+  const onDragEnd = async (result: DropResult): Promise<void> => {
+    if (!result.destination || !agendaItemData) {
+      return;
+    }
+
+    const reorderedAgendaItems = Array.from(agendaItemData);
+    const [removed] = reorderedAgendaItems.splice(result.source.index, 1);
+    reorderedAgendaItems.splice(result.destination.index, 0, removed);
+
+    try {
+      await Promise.all(
+        reorderedAgendaItems.map(async (item, index) => {
+          if (item.sequence !== index + 1) {
+            // Only update if the sequence has changed
+            await updateAgendaItem({
+              variables: {
+                updateAgendaItemId: item._id,
+                input: {
+                  sequence: index + 1, // Update sequence based on new index
+                },
+              },
+            });
+          }
+        }),
+      );
+
+      // After updating all items, refetch data and notify success
+      agendaItemRefetch();
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`${error.message}`);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`mx-1 ${agendaItemConnection == 'Event' ? 'my-4' : 'my-0'}`}
+      >
+        <div
+          className={` shadow-sm ${agendaItemConnection === 'Event' ? 'rounded-top-4 mx-4' : 'rounded-top-2 mx-0'}`}
+        >
+          <Row
+            className={`${styles.tableHead} mx-0 border border-light-subtle py-3 ${agendaItemConnection === 'Event' ? 'rounded-top-4' : 'rounded-top-2'}`}
+          >
+            <Col
+              xs={6}
+              sm={4}
+              md={2}
+              lg={1}
+              className="align-self-center ps-3 fw-bold"
+            >
+              <div>{t('sequence')}</div>
+            </Col>
+            <Col
+              xs={6}
+              sm={4}
+              md={2}
+              lg={3}
+              className="align-self-center fw-bold text-center"
+            >
+              {t('title')}
+            </Col>
+            <Col
+              className="fw-bold align-self-center d-none d-md-block text-center"
+              md={3}
+              lg={3}
+            >
+              {t('category')}
+            </Col>
+            <Col
+              className="fw-bold align-self-center d-none d-md-block text-center"
+              md={3}
+              lg={3}
+            >
+              {t('description')}
+            </Col>
+            <Col
+              xs={12}
+              sm={4}
+              md={2}
+              lg={2}
+              className="fw-bold align-self-center text-center"
+            >
+              <div>{t('options')}</div>
+            </Col>
+          </Row>
+        </div>
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="agendaItems">
+            {(provided) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                className={`bg-light-subtle border border-light-subtle border-top-0 shadow-sm ${agendaItemConnection === 'Event' ? 'rounded-bottom-4 mx-4' : 'rounded-bottom-2 mb-2 mx-0'}`}
+              >
+                {agendaItemData &&
+                  agendaItemData.map((agendaItem, index) => (
+                    <Draggable
+                      key={agendaItem._id}
+                      draggableId={agendaItem._id}
+                      index={index}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          className={`${styles.agendaItemRow} ${
+                            snapshot.isDragging ? styles.dragging : ''
+                          }`}
+                        >
+                          <Row
+                            className={`${index === 0 ? 'pt-3' : ''} mb-2 mt-2 mx-3 `}
+                          >
+                            <Col
+                              xs={6}
+                              sm={4}
+                              md={2}
+                              lg={1}
+                              className="align-self-center text-body-secondary text-center"
+                            >
+                              <i className="fas fa-bars fa-sm" />
+                            </Col>
+                            <Col
+                              xs={6}
+                              sm={4}
+                              md={2}
+                              lg={3}
+                              className="p-1 align-self-center text-body-secondary text-center"
+                            >
+                              {agendaItem.title}
+                            </Col>
+                            <Col
+                              md={3}
+                              lg={3}
+                              className="p-1 d-none d-md-block align-self-center text-body-secondary text-center"
+                            >
+                              <div className={styles.categoryContainer}>
+                                {agendaItem.categories.length > 0 ? (
+                                  agendaItem.categories.map((category, idx) => (
+                                    <span
+                                      key={category._id}
+                                      className={styles.categoryChip}
+                                    >
+                                      {category.name}
+                                      {idx < agendaItem.categories.length - 1 &&
+                                        ', '}
+                                    </span>
+                                  ))
+                                ) : (
+                                  <span className={styles.categoryChip}>
+                                    No Category
+                                  </span>
+                                )}
+                              </div>
+                            </Col>{' '}
+                            <Col
+                              md={3}
+                              lg={3}
+                              className="p-1 d-none d-md-block align-self-center text-body-secondary text-center"
+                            >
+                              {agendaItem.description}
+                            </Col>
+                            <Col
+                              xs={12}
+                              sm={4}
+                              md={2}
+                              lg={2}
+                              className="p-0 align-self-center d-flex justify-content-center"
+                            >
+                              <div className="d-flex align-items-center gap-2">
+                                <Button
+                                  data-testid="previewAgendaItemModalBtn"
+                                  className={`${styles.agendaCategoryOptionsButton} d-flex align-items-center justify-content-center`}
+                                  variant="outline-secondary"
+                                  size="sm"
+                                  onClick={() => showPreviewModal(agendaItem)}
+                                >
+                                  <i className="fas fa-info fa-sm" />
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  data-testid="editAgendaItemModalBtn"
+                                  onClick={() => handleEditClick(agendaItem)}
+                                  className={`${styles.agendaItemsOptionsButton} d-flex align-items-center justify-content-center`}
+                                  variant="outline-secondary"
+                                >
+                                  <i className="fas fa-edit fa-sm" />
+                                </Button>
+                              </div>
+                            </Col>
+                          </Row>
+                        </div>
+                      )}
+                    </Draggable>
+                  ))}
+                {agendaItemData?.length === 0 && (
+                  <div className="lh-lg text-center fw-semibold text-body-tertiary">
+                    {t('noAgendaItems')}
+                  </div>
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+      {/* Preview modal */}
+      <AgendaItemsPreviewModal
+        agendaItemPreviewModalIsOpen={agendaItemPreviewModalIsOpen}
+        hidePreviewModal={hidePreviewModal}
+        showUpdateModal={showUpdateModal}
+        toggleDeleteModal={toggleDeleteModal}
+        formState={formState}
+        t={t}
+      />
+      {/* Delete modal */}
+      <AgendaItemsDeleteModal
+        agendaItemDeleteModalIsOpen={agendaItemDeleteModalIsOpen}
+        toggleDeleteModal={toggleDeleteModal}
+        deleteAgendaItemHandler={deleteAgendaItemHandler}
+        t={t}
+        tCommon={tCommon}
+      />
+      {/* Update modal */}
+      <AgendaItemsUpdateModal
+        agendaItemUpdateModalIsOpen={agendaItemUpdateModalIsOpen}
+        hideUpdateModal={hideUpdateModal}
+        formState={formState}
+        setFormState={setFormState}
+        updateAgendaItemHandler={updateAgendaItemHandler}
+        t={t}
+        agendaItemCategories={agendaItemCategories}
+      />
+    </>
+  );
+}
+
+export default AgendaItemsContainer;
diff --git a/src/components/AgendaItems/AgendaItemsContainerMocks.ts b/src/components/AgendaItems/AgendaItemsContainerMocks.ts
new file mode 100644
index 0000000000..11cd8b254e
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsContainerMocks.ts
@@ -0,0 +1,119 @@
+import {
+  UPDATE_AGENDA_ITEM_MUTATION,
+  DELETE_AGENDA_ITEM_MUTATION,
+} from 'GraphQl/Mutations/AgendaItemMutations';
+
+export const MOCKS = [
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_MUTATION,
+      variables: {
+        updateAgendaItemId: 'agendaItem1',
+        input: {
+          title: 'AgendaItem 1 Edited',
+          description: 'AgendaItem 1 Description Edited',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateAgendaItem: {
+          _id: 'agendaItem1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_MUTATION,
+      variables: {
+        updateAgendaItemId: 'agendaItem1',
+        input: {
+          title: 'AgendaItem 1',
+          description: 'AgendaItem 1 Description',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateAgendaItem: {
+          _id: 'agendaItem1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_MUTATION,
+      variables: {
+        updateAgendaItemId: 'agendaItem2',
+        input: {
+          title: 'AgendaItem 2 edited',
+          description: 'AgendaItem 2 Description',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateAgendaItem: {
+          _id: 'agendaItem2',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_AGENDA_ITEM_MUTATION,
+      variables: {
+        removeAgendaItemId: 'agendaItem1',
+      },
+    },
+    result: {
+      data: {
+        removeAgendaItem: {
+          _id: 'agendaItem1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_AGENDA_ITEM_MUTATION,
+      variables: {
+        removeAgendaItemId: 'agendaItem2',
+      },
+    },
+    result: {
+      data: {
+        removeAgendaItem: {
+          _id: 'agendaItem2',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: UPDATE_AGENDA_ITEM_MUTATION,
+      variables: {
+        updateAgendaItemId: 'agendaItem1',
+        input: {
+          title: 'AgendaItem 1 Edited',
+          description: 'AgendaItem 1 Description Edited',
+        },
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: DELETE_AGENDA_ITEM_MUTATION,
+      variables: {
+        removeAgendaItemId: 'agendaItem1',
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+];
diff --git a/src/components/AgendaItems/AgendaItemsContainerProps.ts b/src/components/AgendaItems/AgendaItemsContainerProps.ts
new file mode 100644
index 0000000000..d6dcf3feca
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsContainerProps.ts
@@ -0,0 +1,101 @@
+type AgendaItemConnectionType = 'Event';
+
+export const props = {
+  agendaItemConnection: 'Event' as AgendaItemConnectionType,
+  agendaItemData: [
+    {
+      _id: 'agendaItem1',
+      title: 'AgendaItem 1',
+      description: 'AgendaItem 1 Description',
+      duration: '2h',
+      attachments: ['attachment1'],
+      createdBy: {
+        _id: 'user0',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+      urls: [],
+      users: [],
+      sequence: 1,
+      categories: [
+        {
+          _id: 'category1',
+          name: 'Category 1',
+        },
+      ],
+      organization: {
+        _id: 'org1',
+        name: 'Unity Foundation',
+      },
+      relatedEvent: {
+        _id: 'event1',
+        title: 'Aerobics for Everyone',
+      },
+    },
+    {
+      _id: 'agendaItem2',
+      title: 'AgendaItem 2',
+      description: 'AgendaItem 2 Description',
+      duration: '1h',
+      attachments: ['attachment3'],
+      createdBy: {
+        _id: 'user1',
+        firstName: 'Jane',
+        lastName: 'Doe',
+      },
+      urls: ['http://example.com'],
+      users: [
+        {
+          _id: 'user2',
+          firstName: 'John',
+          lastName: 'Smith',
+        },
+      ],
+      sequence: 2,
+      categories: [
+        {
+          _id: 'category2',
+          name: 'Category 2',
+        },
+      ],
+      organization: {
+        _id: 'org2',
+        name: 'Health Organization',
+      },
+      relatedEvent: {
+        _id: 'event2',
+        title: 'Yoga for Beginners',
+      },
+    },
+  ],
+  agendaItemRefetch: jest.fn(),
+  agendaItemCategories: [
+    {
+      _id: 'agendaCategory1',
+      name: 'AgendaCategory 1',
+      description: 'AgendaCategory 1 Description',
+      createdBy: {
+        _id: 'user0',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+    {
+      _id: 'agendaCategory2',
+      name: 'AgendaCategory 2',
+      description: 'AgendaCategory 2 Description',
+      createdBy: {
+        _id: 'user1',
+        firstName: 'Jane',
+        lastName: 'Doe',
+      },
+    },
+  ],
+};
+
+export const props2 = {
+  agendaItemConnection: 'Event' as AgendaItemConnectionType,
+  agendaItemData: [],
+  agendaItemRefetch: jest.fn(),
+  agendaItemCategories: [],
+};
diff --git a/src/components/AgendaItems/AgendaItemsCreateModal.test.tsx b/src/components/AgendaItems/AgendaItemsCreateModal.test.tsx
new file mode 100644
index 0000000000..5b7339ad67
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsCreateModal.test.tsx
@@ -0,0 +1,368 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AgendaItemsCreateModal from './AgendaItemsCreateModal';
+import { toast } from 'react-toastify';
+import convertToBase64 from 'utils/convertToBase64';
+
+const mockFormState = {
+  title: 'Test Title',
+  description: 'Test Description',
+  duration: '20',
+  attachments: ['Test Attachment'],
+  urls: ['https://example.com'],
+  agendaItemCategoryIds: ['category'],
+};
+const mockHideCreateModal = jest.fn();
+const mockSetFormState = jest.fn();
+const mockCreateAgendaItemHandler = jest.fn();
+const mockT = (key: string): string => key;
+const mockAgendaItemCategories = [
+  {
+    _id: '1',
+    name: 'Test Name',
+    description: 'Test Description',
+    createdBy: {
+      _id: '1',
+      firstName: 'Test',
+      lastName: 'User',
+    },
+  },
+  {
+    _id: '2',
+    name: 'Another Category',
+    description: 'Another Description',
+    createdBy: {
+      _id: '2',
+      firstName: 'Another',
+      lastName: 'Creator',
+    },
+  },
+  {
+    _id: '3',
+    name: 'Third Category',
+    description: 'Third Description',
+    createdBy: {
+      _id: '3',
+      firstName: 'Third',
+      lastName: 'User',
+    },
+  },
+];
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+jest.mock('utils/convertToBase64');
+const mockedConvertToBase64 = convertToBase64 as jest.MockedFunction<
+  typeof convertToBase64
+>;
+
+describe('AgendaItemsCreateModal', () => {
+  test('renders modal correctly', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsCreateModal
+                  agendaItemCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaItemHandler={mockCreateAgendaItemHandler}
+                  t={mockT}
+                  agendaItemCategories={[]}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('agendaItemDetails')).toBeInTheDocument();
+    expect(screen.getByTestId('createAgendaItemFormBtn')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('createAgendaItemModalCloseBtn'),
+    ).toBeInTheDocument();
+  });
+
+  test('tests the condition for formState', async () => {
+    const mockFormState = {
+      title: 'Test Title',
+      description: 'Test Description',
+      duration: '20',
+      attachments: ['Test Attachment'],
+      urls: ['https://example.com'],
+      agendaItemCategoryIds: ['1'],
+    };
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsCreateModal
+                  agendaItemCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaItemHandler={mockCreateAgendaItemHandler}
+                  t={mockT}
+                  agendaItemCategories={[]}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'New title' },
+    });
+
+    fireEvent.change(screen.getByLabelText('description'), {
+      target: { value: 'New description' },
+    });
+
+    fireEvent.change(screen.getByLabelText('duration'), {
+      target: { value: '30' },
+    });
+
+    fireEvent.click(screen.getByTestId('deleteUrl'));
+    fireEvent.click(screen.getByTestId('deleteAttachment'));
+
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      title: 'New title',
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      description: 'New description',
+    });
+
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      duration: '30',
+    });
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        urls: [],
+      });
+    });
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        attachments: [],
+      });
+    });
+  });
+  test('handleAddUrl correctly adds valid URL', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsCreateModal
+                agendaItemCreateModalIsOpen
+                hideCreateModal={mockHideCreateModal}
+                formState={mockFormState}
+                setFormState={mockSetFormState}
+                createAgendaItemHandler={mockCreateAgendaItemHandler}
+                t={mockT}
+                agendaItemCategories={[]}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const urlInput = screen.getByTestId('urlInput');
+    const linkBtn = screen.getByTestId('linkBtn');
+
+    fireEvent.change(urlInput, { target: { value: 'https://example.com' } });
+    fireEvent.click(linkBtn);
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        urls: [...mockFormState.urls, 'https://example.com'],
+      });
+    });
+  });
+
+  test('shows error toast for invalid URL', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsCreateModal
+                  agendaItemCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaItemHandler={mockCreateAgendaItemHandler}
+                  t={mockT}
+                  agendaItemCategories={[]}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const urlInput = screen.getByTestId('urlInput');
+    const linkBtn = screen.getByTestId('linkBtn');
+
+    fireEvent.change(urlInput, { target: { value: 'invalid-url' } });
+    fireEvent.click(linkBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('invalidUrl');
+    });
+  });
+
+  test('shows error toast for file size exceeding limit', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsCreateModal
+                  agendaItemCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaItemHandler={mockCreateAgendaItemHandler}
+                  t={mockT}
+                  agendaItemCategories={[]}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const fileInput = screen.getByTestId('attachment');
+    const largeFile = new File(
+      ['a'.repeat(11 * 1024 * 1024)],
+      'large-file.jpg',
+    ); // 11 MB file
+
+    Object.defineProperty(fileInput, 'files', {
+      value: [largeFile],
+    });
+
+    fireEvent.change(fileInput);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('fileSizeExceedsLimit');
+    });
+  });
+
+  test('adds files correctly when within size limit', async () => {
+    mockedConvertToBase64.mockResolvedValue('base64-file');
+
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsCreateModal
+                  agendaItemCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaItemHandler={mockCreateAgendaItemHandler}
+                  t={mockT}
+                  agendaItemCategories={[]}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const fileInput = screen.getByTestId('attachment');
+    const smallFile = new File(['small-file-content'], 'small-file.jpg'); // Small file
+
+    Object.defineProperty(fileInput, 'files', {
+      value: [smallFile],
+    });
+
+    fireEvent.change(fileInput);
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        attachments: [...mockFormState.attachments, 'base64-file'],
+      });
+    });
+  });
+  test('renders autocomplete and selects categories correctly', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsCreateModal
+                  agendaItemCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaItemHandler={mockCreateAgendaItemHandler}
+                  t={mockT}
+                  agendaItemCategories={mockAgendaItemCategories}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const autocomplete = screen.getByTestId('categorySelect');
+    expect(autocomplete).toBeInTheDocument();
+
+    const input = within(autocomplete).getByRole('combobox');
+    fireEvent.mouseDown(input);
+
+    const options = screen.getAllByRole('option');
+    expect(options).toHaveLength(mockAgendaItemCategories.length);
+
+    fireEvent.click(options[0]);
+    fireEvent.click(options[1]);
+  });
+});
diff --git a/src/components/AgendaItems/AgendaItemsCreateModal.tsx b/src/components/AgendaItems/AgendaItemsCreateModal.tsx
new file mode 100644
index 0000000000..a37ab329a2
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsCreateModal.tsx
@@ -0,0 +1,330 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Button, Row, Col } from 'react-bootstrap';
+import { Autocomplete, TextField } from '@mui/material';
+
+import { FaLink, FaTrash } from 'react-icons/fa';
+import { toast } from 'react-toastify';
+import styles from './AgendaItemsContainer.module.css';
+import type { ChangeEvent } from 'react';
+import type { InterfaceAgendaItemCategoryInfo } from 'utils/interfaces';
+import convertToBase64 from 'utils/convertToBase64';
+
+interface InterfaceFormStateType {
+  agendaItemCategoryIds: string[];
+  title: string;
+  description: string;
+  duration: string;
+  attachments: string[];
+  urls: string[];
+}
+
+interface InterfaceAgendaItemsCreateModalProps {
+  agendaItemCreateModalIsOpen: boolean;
+  hideCreateModal: () => void;
+  formState: InterfaceFormStateType;
+  setFormState: (state: React.SetStateAction<InterfaceFormStateType>) => void;
+  createAgendaItemHandler: (e: ChangeEvent<HTMLFormElement>) => Promise<void>;
+  t: (key: string) => string;
+  agendaItemCategories: InterfaceAgendaItemCategoryInfo[] | undefined;
+}
+
+/**
+ * Component for creating a new agenda item.
+ * Displays a modal form where users can input details for a new agenda item, including title, description, duration, categories, URLs, and attachments.
+ *
+ * @param agendaItemCreateModalIsOpen - Boolean flag indicating if the modal is open.
+ * @param hideCreateModal - Function to close the modal.
+ * @param formState - Current state of the form fields.
+ * @param setFormState - Function to update the form state.
+ * @param createAgendaItemHandler - Function to handle form submission.
+ * @param t - Function for translating text based on keys.
+ * @param agendaItemCategories - List of agenda item categories for selection.
+ */
+const AgendaItemsCreateModal: React.FC<
+  InterfaceAgendaItemsCreateModalProps
+> = ({
+  agendaItemCreateModalIsOpen,
+  hideCreateModal,
+  formState,
+  setFormState,
+  createAgendaItemHandler,
+  t,
+  agendaItemCategories,
+}) => {
+  const [newUrl, setNewUrl] = useState('');
+
+  useEffect(() => {
+    // Ensure URLs and attachments do not have empty or invalid entries
+    setFormState((prevState) => ({
+      ...prevState,
+      urls: prevState.urls.filter((url) => url.trim() !== ''),
+      attachments: prevState.attachments.filter((att) => att !== ''),
+    }));
+  }, []);
+
+  /**
+   * Validates if a given URL is in a correct format.
+   *
+   * @param url - URL string to validate.
+   * @returns True if the URL is valid, false otherwise.
+   */
+  const isValidUrl = (url: string): boolean => {
+    // Regular expression for basic URL validation
+    const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
+    return urlRegex.test(url);
+  };
+
+  /**
+   * Handles adding a new URL to the form state.
+   *
+   * Checks if the URL is valid before adding it.
+   */
+  const handleAddUrl = (): void => {
+    if (newUrl.trim() !== '' && isValidUrl(newUrl.trim())) {
+      setFormState({
+        ...formState,
+        urls: [...formState.urls.filter((url) => url.trim() !== ''), newUrl],
+      });
+      setNewUrl('');
+    } else {
+      toast.error(t('invalidUrl'));
+    }
+  };
+
+  /**
+   * Handles removing a URL from the form state.
+   *
+   * @param url - URL to remove.
+   */
+  const handleRemoveUrl = (url: string): void => {
+    setFormState({
+      ...formState,
+      urls: formState.urls.filter((item) => item !== url),
+    });
+  };
+
+  /**
+   * Handles file selection and converts files to base64 before updating the form state.
+   *
+   * @param e - File input change event.
+   */
+  const handleFileChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
+    const target = e.target as HTMLInputElement;
+    if (target.files) {
+      const files = Array.from(target.files);
+      let totalSize = 0;
+      files.forEach((file) => {
+        totalSize += file.size;
+      });
+      if (totalSize > 10 * 1024 * 1024) {
+        toast.error(t('fileSizeExceedsLimit'));
+        return;
+      }
+      const base64Files = await Promise.all(
+        files.map(async (file) => await convertToBase64(file)),
+      );
+      setFormState({
+        ...formState,
+        attachments: [...formState.attachments, ...base64Files],
+      });
+    }
+  };
+
+  /**
+   * Handles removing an attachment from the form state.
+   *
+   * @param attachment - Attachment to remove.
+   */
+  const handleRemoveAttachment = (attachment: string): void => {
+    setFormState({
+      ...formState,
+      attachments: formState.attachments.filter((item) => item !== attachment),
+    });
+  };
+
+  return (
+    <Modal
+      className={styles.AgendaItemsModal}
+      show={agendaItemCreateModalIsOpen}
+      onHide={hideCreateModal}
+    >
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('agendaItemDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={hideCreateModal}
+          data-testid="createAgendaItemModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={createAgendaItemHandler}>
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              multiple
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="categorySelect"
+              options={agendaItemCategories || []}
+              value={
+                agendaItemCategories?.filter((category) =>
+                  formState.agendaItemCategoryIds.includes(category._id),
+                ) || []
+              }
+              filterSelectedOptions={true}
+              getOptionLabel={(
+                category: InterfaceAgendaItemCategoryInfo,
+              ): string => category.name}
+              onChange={(_, newCategories): void => {
+                setFormState({
+                  ...formState,
+                  agendaItemCategoryIds: newCategories.map(
+                    (category) => category._id,
+                  ),
+                });
+              }}
+              renderInput={(params) => (
+                <TextField {...params} label={t('category')} />
+              )}
+            />
+          </Form.Group>
+          <Row className="mb-3">
+            <Col>
+              <Form.Group className="mb-3" controlId="title">
+                <Form.Label>{t('title')}</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder={t('enterTitle')}
+                  value={formState.title}
+                  required
+                  onChange={(e) =>
+                    setFormState({ ...formState, title: e.target.value })
+                  }
+                />
+              </Form.Group>
+            </Col>
+            <Col>
+              <Form.Group controlId="duration">
+                <Form.Label>{t('duration')}</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder={t('enterDuration')}
+                  value={formState.duration}
+                  required
+                  onChange={(e) =>
+                    setFormState({ ...formState, duration: e.target.value })
+                  }
+                />
+              </Form.Group>
+            </Col>
+          </Row>
+          <Form.Group className="mb-3" controlId="description">
+            <Form.Label>{t('description')}</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={1}
+              placeholder={t('enterDescription')}
+              value={formState.description}
+              required
+              onChange={(e) =>
+                setFormState({ ...formState, description: e.target.value })
+              }
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>{t('url')}</Form.Label>
+            <div className="d-flex">
+              <Form.Control
+                type="text"
+                placeholder={t('enterUrl')}
+                id="basic-url"
+                data-testid="urlInput"
+                value={newUrl}
+                onChange={(e) => setNewUrl(e.target.value)}
+              />
+              <Button onClick={handleAddUrl} data-testid="linkBtn">
+                {t('link')}
+              </Button>
+            </div>
+
+            {formState.urls.map((url, index) => (
+              <li key={index} className={styles.urlListItem}>
+                <FaLink className={styles.urlIcon} />
+                <a href={url} target="_blank" rel="noopener noreferrer">
+                  {url.length > 50 ? url.substring(0, 50) + '...' : url}
+                </a>
+                <Button
+                  variant="danger"
+                  size="sm"
+                  className={styles.deleteButton}
+                  data-testid="deleteUrl"
+                  onClick={() => handleRemoveUrl(url)}
+                >
+                  <FaTrash />
+                </Button>
+              </li>
+            ))}
+          </Form.Group>
+          <Form.Group className="mb-3">
+            <Form.Label>{t('attachments')}</Form.Label>
+            <Form.Control
+              accept="image/*, video/*"
+              data-testid="attachment"
+              name="attachment"
+              type="file"
+              id="attachment"
+              multiple={true}
+              onChange={handleFileChange}
+            />
+            <Form.Text>{t('attachmentLimit')}</Form.Text>
+          </Form.Group>
+          {formState.attachments && (
+            <div className={styles.previewFile} data-testid="mediaPreview">
+              {formState.attachments.map((attachment, index) => (
+                <div key={index} className={styles.attachmentPreview}>
+                  {attachment.includes('video') ? (
+                    <video
+                      muted
+                      autoPlay={true}
+                      loop={true}
+                      playsInline
+                      crossOrigin="anonymous"
+                    >
+                      <source src={attachment} type="video/mp4" />
+                    </video>
+                  ) : (
+                    <img src={attachment} alt="Attachment preview" />
+                  )}
+                  <button
+                    className={styles.closeButtonFile}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleRemoveAttachment(attachment);
+                    }}
+                    data-testid="deleteAttachment"
+                  >
+                    <i className="fa fa-times" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            value="createAgendaItem"
+            data-testid="createAgendaItemFormBtn"
+          >
+            {t('createAgendaItem')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default AgendaItemsCreateModal;
diff --git a/src/components/AgendaItems/AgendaItemsDeleteModal.tsx b/src/components/AgendaItems/AgendaItemsDeleteModal.tsx
new file mode 100644
index 0000000000..cba3b29446
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsDeleteModal.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import styles from './AgendaItemsContainer.module.css';
+
+interface InterfaceAgendaItemsDeleteModalProps {
+  agendaItemDeleteModalIsOpen: boolean;
+  toggleDeleteModal: () => void;
+  deleteAgendaItemHandler: () => Promise<void>;
+  t: (key: string) => string;
+  tCommon: (key: string) => string;
+}
+
+/**
+ * Modal component for confirming the deletion of an agenda item.
+ * Displays a confirmation dialog when a user attempts to delete an agenda item.
+ *
+ * @param agendaItemDeleteModalIsOpen - Boolean flag indicating if the modal is open.
+ * @param toggleDeleteModal - Function to toggle the visibility of the modal.
+ * @param deleteAgendaItemHandler - Function to handle the deletion of the agenda item.
+ * @param t - Function for translating text based on keys.
+ * @param tCommon - Function for translating common text keys.
+ */
+const AgendaItemsDeleteModal: React.FC<
+  InterfaceAgendaItemsDeleteModalProps
+> = ({
+  agendaItemDeleteModalIsOpen,
+  toggleDeleteModal,
+  deleteAgendaItemHandler,
+  t,
+  tCommon,
+}) => {
+  return (
+    <Modal
+      size="sm"
+      id={`deleteAgendaItemModal`}
+      className={styles.agendaItemModal}
+      show={agendaItemDeleteModalIsOpen}
+      onHide={toggleDeleteModal}
+      backdrop="static"
+      keyboard={false}
+    >
+      <Modal.Header closeButton className="bg-primary">
+        <Modal.Title className="text-white" id={`deleteAgendaItem`}>
+          {t('deleteAgendaItem')}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p>{t('deleteAgendaItemMsg')}</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          type="button"
+          className="btn btn-danger"
+          data-dismiss="modal"
+          onClick={toggleDeleteModal}
+          data-testid="deleteAgendaItemCloseBtn"
+        >
+          {tCommon('no')}
+        </Button>
+        <Button
+          type="button"
+          className="btn btn-success"
+          onClick={deleteAgendaItemHandler}
+          data-testid="deleteAgendaItemBtn"
+        >
+          {tCommon('yes')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default AgendaItemsDeleteModal;
diff --git a/src/components/AgendaItems/AgendaItemsPreviewModal.test.tsx b/src/components/AgendaItems/AgendaItemsPreviewModal.test.tsx
new file mode 100644
index 0000000000..0a7b4646ba
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsPreviewModal.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AgendaItemsPreviewModal from './AgendaItemsPreviewModal';
+
+const mockFormState = {
+  title: 'Test Title',
+  description: 'Test Description',
+  duration: '20',
+  attachments: [
+    'https://example.com/video.mp4',
+    'https://example.com/image.jpg',
+  ],
+  urls: [
+    'https://example.com',
+    'https://thisisaverylongurlthatexceedsfiftycharacters.com/very/long/path',
+  ],
+  agendaItemCategoryIds: ['category'],
+  agendaItemCategoryNames: ['category'],
+  createdBy: {
+    firstName: 'Test',
+    lastName: 'User',
+  },
+};
+
+const mockT = (key: string): string => key;
+
+describe('AgendaItemsPreviewModal', () => {
+  test('check url and attachment links', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsPreviewModal
+                  agendaItemPreviewModalIsOpen
+                  hidePreviewModal={jest.fn()}
+                  formState={mockFormState}
+                  showUpdateModal={jest.fn()}
+                  toggleDeleteModal={jest.fn()}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+    expect(screen.getByText('20')).toBeInTheDocument();
+    expect(screen.getByText('https://example.com')).toBeInTheDocument();
+
+    // Check attachments
+    const videoLink = screen.getByText(
+      (content, element) =>
+        element?.tagName.toLowerCase() === 'a' &&
+        (element as HTMLAnchorElement)?.href ===
+          'https://example.com/video.mp4',
+    );
+    expect(videoLink).toBeInTheDocument();
+
+    const imageLink = screen.getByText(
+      (content, element) =>
+        element?.tagName.toLowerCase() === 'a' &&
+        (element as HTMLAnchorElement)?.href ===
+          'https://example.com/image.jpg',
+    );
+    expect(imageLink).toBeInTheDocument();
+
+    // Check URLs
+    const shortUrlLink = screen.getByText(
+      (content, element) =>
+        element?.tagName.toLowerCase() === 'a' &&
+        (element as HTMLAnchorElement)?.href === 'https://example.com/',
+    );
+    expect(shortUrlLink).toBeInTheDocument();
+    expect(shortUrlLink).toHaveTextContent('https://example.com');
+
+    const longUrlLink = screen.getByText(
+      (content, element) =>
+        element?.tagName.toLowerCase() === 'a' &&
+        (element as HTMLAnchorElement)?.href ===
+          'https://thisisaverylongurlthatexceedsfiftycharacters.com/very/long/path',
+    );
+    expect(longUrlLink).toBeInTheDocument();
+    expect(longUrlLink).toHaveTextContent(
+      'https://thisisaverylongurlthatexceedsfiftycharacte...',
+    );
+  });
+});
diff --git a/src/components/AgendaItems/AgendaItemsPreviewModal.tsx b/src/components/AgendaItems/AgendaItemsPreviewModal.tsx
new file mode 100644
index 0000000000..299165656c
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsPreviewModal.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import styles from './AgendaItemsContainer.module.css';
+import { FaLink } from 'react-icons/fa';
+
+interface InterfaceFormStateType {
+  agendaItemCategoryIds: string[];
+  agendaItemCategoryNames: string[];
+  title: string;
+  description: string;
+  duration: string;
+  attachments: string[];
+  urls: string[];
+  createdBy: {
+    firstName: string;
+    lastName: string;
+  };
+}
+
+interface InterfaceAgendaItemsPreviewModalProps {
+  agendaItemPreviewModalIsOpen: boolean;
+  hidePreviewModal: () => void;
+  showUpdateModal: () => void;
+  toggleDeleteModal: () => void;
+  formState: InterfaceFormStateType;
+  t: (key: string) => string;
+}
+
+/**
+ * Modal component for previewing details of an agenda item.
+ * Displays the details of the selected agenda item, including its categories, title, description, duration, creator, URLs, and attachments.
+ * Also provides options to update or delete the agenda item.
+ *
+ * @param agendaItemPreviewModalIsOpen - Boolean flag indicating if the preview modal is open.
+ * @param hidePreviewModal - Function to hide the preview modal.
+ * @param showUpdateModal - Function to show the update modal.
+ * @param toggleDeleteModal - Function to toggle the delete modal.
+ * @param formState - The current state of the form containing agenda item details.
+ * @param t - Function for translating text based on keys.
+ */
+const AgendaItemsPreviewModal: React.FC<
+  InterfaceAgendaItemsPreviewModalProps
+> = ({
+  agendaItemPreviewModalIsOpen,
+  hidePreviewModal,
+  showUpdateModal,
+  toggleDeleteModal,
+  formState,
+  t,
+}) => {
+  /**
+   * Renders the attachments preview.
+   *
+   * @returns JSX elements for each attachment, displaying videos and images.
+   */
+  const renderAttachments = (): JSX.Element[] => {
+    return formState.attachments.map((attachment, index) => (
+      <div key={index} className={styles.previewFile}>
+        {attachment.includes('video') ? (
+          <a href={attachment} target="_blank" rel="noopener noreferrer">
+            <video
+              muted
+              autoPlay={true}
+              loop={true}
+              playsInline
+              crossOrigin="anonymous"
+              controls
+            >
+              <source src={attachment} type="video/mp4" />
+            </video>
+          </a>
+        ) : (
+          <a href={attachment} target="_blank" rel="noopener noreferrer">
+            <img src={attachment} alt="Attachment preview" />
+          </a>
+        )}
+      </div>
+    ));
+  };
+
+  /**
+   * Renders the URLs list.
+   *
+   * @returns JSX elements for each URL, displaying clickable links.
+   */
+  const renderUrls = (): JSX.Element[] => {
+    return formState.urls.map((url, index) => (
+      <li key={index} className={styles.urlListItem}>
+        <FaLink className={styles.urlIcon} />
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          {url.length > 50 ? `${url.substring(0, 50)}...` : url}
+        </a>
+      </li>
+    ));
+  };
+
+  return (
+    <Modal
+      className={styles.agendaItemModal}
+      show={agendaItemPreviewModalIsOpen}
+      onHide={hidePreviewModal}
+    >
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('agendaItemDetails')}</p>
+        <Button
+          onClick={hidePreviewModal}
+          data-testid="previewAgendaItemModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form>
+          <div>
+            <div className={styles.preview}>
+              <p>{t('category')}</p>
+              <span className={styles.view}>
+                {formState.agendaItemCategoryNames.join(', ')}
+              </span>
+            </div>
+            <div className={styles.preview}>
+              <p>{t('title')}</p>
+              <span className={styles.view}>{formState.title}</span>
+            </div>
+            <div className={styles.preview}>
+              <p>{t('description')}</p>
+              <span className={styles.view}>{formState.description}</span>
+            </div>
+            <div className={styles.preview}>
+              <p>{t('duration')}</p>
+              <span className={styles.view}>{formState.duration}</span>
+            </div>
+            <div className={styles.preview}>
+              <p>{t('createdBy')}</p>
+              <span className={styles.view}>
+                {`${formState.createdBy.firstName} ${formState.createdBy.lastName}`}
+              </span>
+            </div>
+            <div className={styles.preview}>
+              <p>{t('urls')}</p>
+              <span className={styles.view}>{renderUrls()}</span>
+            </div>
+            <div className={styles.preview}>
+              <p>{t('attachments')}</p>
+              <span className={styles.view}>{renderAttachments()}</span>
+            </div>
+          </div>
+          <div className={styles.iconContainer}>
+            <Button
+              size="sm"
+              onClick={showUpdateModal}
+              className={styles.icon}
+              data-testid="previewAgendaItemModalUpdateBtn"
+            >
+              <i className="fas fa-edit"></i>
+            </Button>
+            <Button
+              size="sm"
+              onClick={toggleDeleteModal}
+              className={styles.icon}
+              data-testid="previewAgendaItemModalDeleteBtn"
+              variant="danger"
+            >
+              <i className="fas fa-trash"></i>
+            </Button>
+          </div>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default AgendaItemsPreviewModal;
diff --git a/src/components/AgendaItems/AgendaItemsUpdateModal.test.tsx b/src/components/AgendaItems/AgendaItemsUpdateModal.test.tsx
new file mode 100644
index 0000000000..0f11ea31b2
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsUpdateModal.test.tsx
@@ -0,0 +1,369 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AgendaItemsUpdateModal from './AgendaItemsUpdateModal';
+import { toast } from 'react-toastify';
+import convertToBase64 from 'utils/convertToBase64';
+
+const mockFormState = {
+  title: 'Test Title',
+  description: 'Test Description',
+  duration: '20',
+  attachments: ['Test Attachment'],
+  urls: ['https://example.com'],
+  agendaItemCategoryIds: ['category'],
+  agendaItemCategoryNames: ['category'],
+  createdBy: {
+    firstName: 'Test',
+    lastName: 'User',
+  },
+};
+
+const mockAgendaItemCategories = [
+  {
+    _id: '1',
+    name: 'Test Name',
+    description: 'Test Description',
+    createdBy: {
+      _id: '1',
+      firstName: 'Test',
+      lastName: 'User',
+    },
+  },
+  {
+    _id: '2',
+    name: 'Another Category',
+    description: 'Another Description',
+    createdBy: {
+      _id: '2',
+      firstName: 'Another',
+      lastName: 'Creator',
+    },
+  },
+  {
+    _id: '3',
+    name: 'Third Category',
+    description: 'Third Description',
+    createdBy: {
+      _id: '3',
+      firstName: 'Third',
+      lastName: 'User',
+    },
+  },
+];
+
+const mockHideUpdateModal = jest.fn();
+const mockSetFormState = jest.fn();
+const mockUpdateAgendaItemHandler = jest.fn();
+const mockT = (key: string): string => key;
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+jest.mock('utils/convertToBase64');
+const mockedConvertToBase64 = convertToBase64 as jest.MockedFunction<
+  typeof convertToBase64
+>;
+
+describe('AgendaItemsUpdateModal', () => {
+  test('renders modal correctly', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsUpdateModal
+                  agendaItemCategories={[]}
+                  agendaItemUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('updateAgendaItem')).toBeInTheDocument();
+    expect(screen.getByTestId('updateAgendaItemBtn')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('updateAgendaItemModalCloseBtn'),
+    ).toBeInTheDocument();
+  });
+
+  test('tests the condition for formState.title and formState.description', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsUpdateModal
+                  agendaItemCategories={[]}
+                  agendaItemUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'New title' },
+    });
+
+    fireEvent.change(screen.getByLabelText('description'), {
+      target: { value: 'New description' },
+    });
+
+    fireEvent.change(screen.getByLabelText('duration'), {
+      target: { value: '30' },
+    });
+
+    fireEvent.click(screen.getByTestId('deleteUrl'));
+    fireEvent.click(screen.getByTestId('deleteAttachment'));
+
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      title: 'New title',
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      description: 'New description',
+    });
+
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      duration: '30',
+    });
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        urls: [],
+      });
+    });
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        attachments: [],
+      });
+    });
+  });
+
+  test('handleAddUrl correctly adds valid URL', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AgendaItemsUpdateModal
+                agendaItemCategories={[]}
+                agendaItemUpdateModalIsOpen
+                hideUpdateModal={mockHideUpdateModal}
+                formState={mockFormState}
+                setFormState={mockSetFormState}
+                updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                t={mockT}
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const urlInput = screen.getByTestId('urlInput');
+    const linkBtn = screen.getByTestId('linkBtn');
+
+    fireEvent.change(urlInput, { target: { value: 'https://example.com' } });
+    fireEvent.click(linkBtn);
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        urls: [...mockFormState.urls, 'https://example.com'],
+      });
+    });
+  });
+
+  test('shows error toast for invalid URL', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsUpdateModal
+                  agendaItemCategories={[]}
+                  agendaItemUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const urlInput = screen.getByTestId('urlInput');
+    const linkBtn = screen.getByTestId('linkBtn');
+
+    fireEvent.change(urlInput, { target: { value: 'invalid-url' } });
+    fireEvent.click(linkBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('invalidUrl');
+    });
+  });
+
+  test('shows error toast for file size exceeding limit', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsUpdateModal
+                  agendaItemCategories={[]}
+                  agendaItemUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const fileInput = screen.getByTestId('attachment');
+    const largeFile = new File(
+      ['a'.repeat(11 * 1024 * 1024)],
+      'large-file.jpg',
+    ); // 11 MB file
+
+    Object.defineProperty(fileInput, 'files', {
+      value: [largeFile],
+    });
+
+    fireEvent.change(fileInput);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('fileSizeExceedsLimit');
+    });
+  });
+
+  test('adds files correctly when within size limit', async () => {
+    mockedConvertToBase64.mockResolvedValue('base64-file');
+
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsUpdateModal
+                  agendaItemCategories={[]}
+                  agendaItemUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const fileInput = screen.getByTestId('attachment');
+    const smallFile = new File(['small-file-content'], 'small-file.jpg'); // Small file
+
+    Object.defineProperty(fileInput, 'files', {
+      value: [smallFile],
+    });
+
+    fireEvent.change(fileInput);
+
+    await waitFor(() => {
+      expect(mockSetFormState).toHaveBeenCalledWith({
+        ...mockFormState,
+        attachments: [...mockFormState.attachments, 'base64-file'],
+      });
+    });
+  });
+  test('renders autocomplete and selects categories correctly', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaItemsUpdateModal
+                  agendaItemCategories={mockAgendaItemCategories}
+                  agendaItemUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaItemHandler={mockUpdateAgendaItemHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    const autocomplete = screen.getByTestId('categorySelect');
+    expect(autocomplete).toBeInTheDocument();
+
+    const input = within(autocomplete).getByRole('combobox');
+    fireEvent.mouseDown(input);
+
+    const options = screen.getAllByRole('option');
+    expect(options).toHaveLength(mockAgendaItemCategories.length);
+
+    fireEvent.click(options[0]);
+    fireEvent.click(options[1]);
+  });
+});
diff --git a/src/components/AgendaItems/AgendaItemsUpdateModal.tsx b/src/components/AgendaItems/AgendaItemsUpdateModal.tsx
new file mode 100644
index 0000000000..7761c912ca
--- /dev/null
+++ b/src/components/AgendaItems/AgendaItemsUpdateModal.tsx
@@ -0,0 +1,334 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Button, Row, Col } from 'react-bootstrap';
+import type { ChangeEvent } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { FaLink, FaTrash } from 'react-icons/fa';
+import { toast } from 'react-toastify';
+import convertToBase64 from 'utils/convertToBase64';
+
+import styles from './AgendaItemsContainer.module.css';
+import type { InterfaceAgendaItemCategoryInfo } from 'utils/interfaces';
+
+interface InterfaceFormStateType {
+  agendaItemCategoryIds: string[];
+  agendaItemCategoryNames: string[];
+  title: string;
+  description: string;
+  duration: string;
+  attachments: string[];
+  urls: string[];
+  createdBy: {
+    firstName: string;
+    lastName: string;
+  };
+}
+
+interface InterfaceAgendaItemsUpdateModalProps {
+  agendaItemUpdateModalIsOpen: boolean;
+  hideUpdateModal: () => void;
+  formState: InterfaceFormStateType;
+  setFormState: (state: React.SetStateAction<InterfaceFormStateType>) => void;
+  updateAgendaItemHandler: (e: ChangeEvent<HTMLFormElement>) => Promise<void>;
+  t: (key: string) => string;
+  agendaItemCategories: InterfaceAgendaItemCategoryInfo[] | undefined;
+}
+
+/**
+ * Modal component for updating details of an agenda item.
+ * Provides a form to update the agenda item's title, description, duration, categories, URLs, and attachments.
+ * Also includes functionality to add, remove URLs and attachments.
+ *
+ * @param agendaItemUpdateModalIsOpen - Boolean flag indicating if the update modal is open.
+ * @param hideUpdateModal - Function to hide the update modal.
+ * @param formState - The current state of the form containing agenda item details.
+ * @param setFormState - Function to update the form state.
+ * @param updateAgendaItemHandler - Handler function for submitting the form.
+ * @param t - Function for translating text based on keys.
+ * @param agendaItemCategories - List of agenda item categories for selection.
+ */
+const AgendaItemsUpdateModal: React.FC<
+  InterfaceAgendaItemsUpdateModalProps
+> = ({
+  agendaItemUpdateModalIsOpen,
+  hideUpdateModal,
+  formState,
+  setFormState,
+  updateAgendaItemHandler,
+  t,
+  agendaItemCategories,
+}) => {
+  const [newUrl, setNewUrl] = useState('');
+
+  useEffect(() => {
+    setFormState((prevState) => ({
+      ...prevState,
+      urls: prevState.urls.filter((url) => url.trim() !== ''),
+      attachments: prevState.attachments.filter((att) => att !== ''),
+    }));
+  }, []);
+
+  /**
+   * Validates if a given URL is in a correct format.
+   *
+   * @param url - The URL to validate.
+   * @returns True if the URL is valid, false otherwise.
+   */
+  const isValidUrl = (url: string): boolean => {
+    // Regular expression for basic URL validation
+    const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
+    return urlRegex.test(url);
+  };
+
+  /**
+   * Handles adding a new URL to the form state.
+   * Displays an error toast if the URL is invalid.
+   */
+  const handleAddUrl = (): void => {
+    if (newUrl.trim() !== '' && isValidUrl(newUrl.trim())) {
+      setFormState({
+        ...formState,
+        urls: [...formState.urls.filter((url) => url.trim() !== ''), newUrl],
+      });
+      setNewUrl('');
+    } else {
+      toast.error(t('invalidUrl'));
+    }
+  };
+
+  /**
+   * Handles removing a URL from the form state.
+   *
+   * @param url - The URL to remove.
+   */
+  const handleRemoveUrl = (url: string): void => {
+    setFormState({
+      ...formState,
+      urls: formState.urls.filter((item) => item !== url),
+    });
+  };
+
+  /**
+   * Handles file input change event.
+   * Converts selected files to base64 format and updates the form state.
+   * Displays an error toast if the total file size exceeds the limit.
+   *
+   * @param e - The change event for file input.
+   */
+  const handleFileChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
+    const target = e.target as HTMLInputElement;
+    if (target.files) {
+      const files = Array.from(target.files);
+      let totalSize = 0;
+      files.forEach((file) => {
+        totalSize += file.size;
+      });
+      if (totalSize > 10 * 1024 * 1024) {
+        toast.error(t('fileSizeExceedsLimit'));
+        return;
+      }
+      const base64Files = await Promise.all(
+        files.map(async (file) => await convertToBase64(file)),
+      );
+      setFormState({
+        ...formState,
+        attachments: [...formState.attachments, ...base64Files],
+      });
+    }
+  };
+
+  /**
+   * Handles removing an attachment from the form state.
+   *
+   * @param attachment - The attachment to remove.
+   */
+  const handleRemoveAttachment = (attachment: string): void => {
+    setFormState({
+      ...formState,
+      attachments: formState.attachments.filter((item) => item !== attachment),
+    });
+  };
+
+  return (
+    <Modal
+      className={styles.AgendaItemModal}
+      show={agendaItemUpdateModalIsOpen}
+      onHide={hideUpdateModal}
+    >
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('updateAgendaItem')}</p>
+        <Button
+          onClick={hideUpdateModal}
+          data-testid="updateAgendaItemModalCloseBtn"
+        >
+          <i className="fa fa-times" />
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={updateAgendaItemHandler}>
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              multiple
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="categorySelect"
+              options={agendaItemCategories || []}
+              value={
+                agendaItemCategories?.filter((category) =>
+                  formState.agendaItemCategoryIds.includes(category._id),
+                ) || []
+              }
+              filterSelectedOptions={true}
+              getOptionLabel={(
+                category: InterfaceAgendaItemCategoryInfo,
+              ): string => category.name}
+              onChange={(_, newCategories): void => {
+                setFormState({
+                  ...formState,
+                  agendaItemCategoryIds: newCategories.map(
+                    (category) => category._id,
+                  ),
+                });
+              }}
+              renderInput={(params) => (
+                <TextField {...params} label={t('category')} />
+              )}
+            />
+          </Form.Group>
+
+          <Row className="mb-3">
+            <Col>
+              <Form.Group className="mb-3" controlId="title">
+                <Form.Label>{t('title')}</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder={t('enterTitle')}
+                  value={formState.title}
+                  onChange={(e) =>
+                    setFormState({ ...formState, title: e.target.value })
+                  }
+                />
+              </Form.Group>
+            </Col>
+            <Col>
+              <Form.Group controlId="duration">
+                <Form.Label>{t('duration')}</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder={t('enterDuration')}
+                  value={formState.duration}
+                  required
+                  onChange={(e) =>
+                    setFormState({ ...formState, duration: e.target.value })
+                  }
+                />
+              </Form.Group>
+            </Col>
+          </Row>
+
+          <Form.Group className="mb-3" controlId="description">
+            <Form.Label>{t('description')}</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={1}
+              placeholder={t('enterDescription')}
+              value={formState.description}
+              onChange={(e) =>
+                setFormState({ ...formState, description: e.target.value })
+              }
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>{t('url')}</Form.Label>
+            <div className="d-flex">
+              <Form.Control
+                type="text"
+                placeholder={t('enterUrl')}
+                id="basic-url"
+                data-testid="urlInput"
+                value={newUrl}
+                onChange={(e) => setNewUrl(e.target.value)}
+              />
+              <Button onClick={handleAddUrl} data-testid="linkBtn">
+                {t('link')}
+              </Button>
+            </div>
+
+            {formState.urls.map((url, index) => (
+              <li key={index} className={styles.urlListItem}>
+                <FaLink className={styles.urlIcon} />
+                <a href={url} target="_blank" rel="noopener noreferrer">
+                  {url.length > 50 ? url.substring(0, 50) + '...' : url}
+                </a>
+                <Button
+                  variant="danger"
+                  size="sm"
+                  data-testid="deleteUrl"
+                  className={styles.deleteButton}
+                  onClick={() => handleRemoveUrl(url)}
+                >
+                  <FaTrash />
+                </Button>
+              </li>
+            ))}
+          </Form.Group>
+          <Form.Group className="mb-3">
+            <Form.Label>{t('attachments')}</Form.Label>
+            <Form.Control
+              accept="image/*, video/*"
+              data-testid="attachment"
+              name="attachment"
+              type="file"
+              id="attachment"
+              multiple={true}
+              onChange={handleFileChange}
+            />
+            <Form.Text>{t('attachmentLimit')}</Form.Text>
+          </Form.Group>
+          {formState.attachments && (
+            <div className={styles.previewFile} data-testid="mediaPreview">
+              {formState.attachments.map((attachment, index) => (
+                <div key={index} className={styles.attachmentPreview}>
+                  {attachment.includes('video') ? (
+                    <video
+                      muted
+                      autoPlay={true}
+                      loop={true}
+                      playsInline
+                      crossOrigin="anonymous"
+                    >
+                      <source src={attachment} type="video/mp4" />
+                    </video>
+                  ) : (
+                    <img src={attachment} alt="Attachment preview" />
+                  )}
+                  <button
+                    className={styles.closeButtonFile}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleRemoveAttachment(attachment);
+                    }}
+                    data-testid="deleteAttachment"
+                  >
+                    <i className="fa fa-times" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            data-testid="updateAgendaItemBtn"
+          >
+            {t('update')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default AgendaItemsUpdateModal;
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
new file mode 100644
index 0000000000..13fe1bbbc6
--- /dev/null
+++ b/src/components/Avatar/Avatar.module.css
@@ -0,0 +1,14 @@
+.imageContainer {
+  width: fit-content;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+}
+.imageContainer img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 100%;
+}
diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
new file mode 100644
index 0000000000..d178c48a4a
--- /dev/null
+++ b/src/components/Avatar/Avatar.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Avatar from './Avatar';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+
+describe('Avatar component', () => {
+  test('renders with name and alt attribute', () => {
+    const testName = 'John Doe';
+    const testAlt = 'Test Alt Text';
+    const testSize = 64;
+
+    const { getByAltText } = render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <Avatar name={testName} alt={testAlt} size={testSize} />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+    const avatarElement = getByAltText(testAlt);
+
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+  });
+
+  test('renders with custom style and data-testid', () => {
+    const testName = 'Jane Doe';
+    const testStyle = 'custom-avatar-style';
+    const testDataTestId = 'custom-avatar-test-id';
+
+    const { getByAltText } = render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <Avatar
+            name={testName}
+            avatarStyle={testStyle}
+            dataTestId={testDataTestId}
+          />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+    const avatarElement = getByAltText('Dummy Avatar');
+
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+    expect(avatarElement.getAttribute('class')).toContain(testStyle);
+    expect(avatarElement.getAttribute('data-testid')).toBe(testDataTestId);
+  });
+});
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000000..3e2f818e3f
--- /dev/null
+++ b/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { createAvatar } from '@dicebear/core';
+import { initials } from '@dicebear/collection';
+import styles from 'components/Avatar/Avatar.module.css';
+
+interface InterfaceAvatarProps {
+  name: string;
+  alt?: string;
+  size?: number;
+  containerStyle?: string;
+  avatarStyle?: string;
+  dataTestId?: string;
+  radius?: number;
+}
+
+/**
+ * A component that generates and displays an avatar based on the provided name.
+ * The avatar is generated using the DiceBear library with the initials style.
+ *
+ * @param name - The name used to generate the avatar.
+ * @param alt - Alternative text for the avatar image.
+ * @param size - Size of the avatar image.
+ * @param avatarStyle - Custom CSS class for the avatar image.
+ * @param dataTestId - Data-testid attribute for testing purposes.
+ * @param radius - Radius of the avatar corners.
+ *
+ * @returns JSX.Element - The rendered avatar image component.
+ */
+const Avatar = ({
+  name,
+  alt = 'Dummy Avatar',
+  size,
+  avatarStyle,
+  containerStyle,
+  dataTestId,
+  radius,
+}: InterfaceAvatarProps): JSX.Element => {
+  // Memoize the avatar creation to avoid unnecessary recalculations
+  const avatar = useMemo(() => {
+    return createAvatar(initials, {
+      size: size || 128,
+      seed: name,
+      radius: radius || 0,
+    }).toDataUri();
+  }, [name, size]);
+
+  const svg = avatar?.toString();
+
+  return (
+    <div className={`${containerStyle ?? styles.imageContainer}`}>
+      <img
+        src={svg}
+        alt={alt}
+        className={avatarStyle ? avatarStyle : ''}
+        data-testid={dataTestId ? dataTestId : ''}
+      />
+    </div>
+  );
+};
+
+export default Avatar;
diff --git a/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx b/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx
new file mode 100644
index 0000000000..ac758be867
--- /dev/null
+++ b/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+import i18next from 'i18next';
+import { languages } from 'utils/languages';
+import cookies from 'js-cookie';
+import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useMutation } from '@apollo/client';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { getItem } = useLocalStorage();
+
+interface InterfaceChangeLanguageDropDownProps {
+  parentContainerStyle?: string;
+  btnStyle?: string;
+  btnTextStyle?: string;
+}
+
+/**
+ * A dropdown component that allows users to change the application's language.
+ * It updates the user's language preference in the backend and stores the selection in cookies.
+ *
+ * @param props - The properties for customizing the dropdown component.
+ * @param parentContainerStyle - Custom style for the dropdown container.
+ * @param btnStyle - Custom style for the dropdown button.
+ * @param btnTextStyle - Custom style for the button text.
+ *
+ * @returns JSX.Element - The rendered dropdown component for changing languages.
+ */
+const ChangeLanguageDropDown = (
+  props: InterfaceChangeLanguageDropDownProps,
+): JSX.Element => {
+  const currentLanguageCode = cookies.get('i18next') || 'en';
+  const userId = getItem('userId');
+  const [updateUser] = useMutation(UPDATE_USER_MUTATION);
+
+  /**
+   * Changes the application's language and updates the user's language preference.
+   *
+   * @param languageCode - The code of the language to switch to.
+   */
+  const changeLanguage = async (languageCode: string): Promise<void> => {
+    if (userId) {
+      try {
+        await updateUser({
+          variables: {
+            appLanguageCode: languageCode,
+          },
+        });
+        await i18next.changeLanguage(languageCode);
+        cookies.set('i18next', languageCode);
+      } catch (error) {
+        console.log('Error in changing language', error);
+      }
+    }
+  };
+
+  return (
+    <Dropdown
+      title="Change Langauge"
+      className={`${props?.parentContainerStyle ?? ''}`}
+      data-testid="language-dropdown-container"
+    >
+      <Dropdown.Toggle
+        variant="outline-success"
+        className={`${props?.btnStyle ?? ''}`}
+        data-testid="language-dropdown-btn"
+      >
+        {languages.map((language, index: number) => (
+          <span
+            key={`dropdown-btn-${index}`}
+            data-testid={`dropdown-btn-${index}`}
+          >
+            {currentLanguageCode === language.code ? (
+              <span className={`${props?.btnTextStyle ?? ''}`}>
+                <span className={`fi fi-${language.country_code} me-2`}></span>
+                {language.name}
+              </span>
+            ) : null}
+          </span>
+        ))}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {languages.map((language, index: number) => (
+          <Dropdown.Item
+            key={`dropdown-item-${index}`}
+            className={`dropdown-item`}
+            onClick={async (): Promise<void> => changeLanguage(language.code)}
+            disabled={currentLanguageCode === language.code}
+            data-testid={`change-language-btn-${language.code}`}
+          >
+            <span className={`fi fi-${language.country_code} me-2`}></span>
+            {language.name}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default ChangeLanguageDropDown;
diff --git a/src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.test.tsx b/src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.test.tsx
new file mode 100644
index 0000000000..dc14f6ce17
--- /dev/null
+++ b/src/components/ChangeLanguageDropdown/ChangeLanguageDropdown.test.tsx
@@ -0,0 +1,158 @@
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+import i18nForTest from 'utils/i18nForTest';
+import { languages } from 'utils/languages';
+import ChangeLanguageDropDown from './ChangeLanguageDropDown';
+import cookies from 'js-cookie';
+import { MockedProvider } from '@apollo/react-testing';
+import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import useLocalStorage from 'utils/useLocalstorage';
+// import { Provider } from 'react-redux';
+// import { store } from 'state/store';
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const MOCKS = [
+  {
+    request: {
+      query: UPDATE_USER_MUTATION,
+      variables: {
+        appLanguageCode: 'fr',
+      },
+    },
+    result: {
+      data: {
+        updateUserProfile: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_USER_MUTATION,
+      variables: {
+        appLanguageCode: 'hi',
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+describe('Testing Change Language Dropdown', () => {
+  test('Component Should be rendered properly', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <ChangeLanguageDropDown />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(getByTestId('language-dropdown-container')).toBeInTheDocument();
+    expect(getByTestId('language-dropdown-btn')).toBeInTheDocument();
+    expect(getByTestId('dropdown-btn-0')).toBeInTheDocument();
+
+    getByTestId('language-dropdown-container').className.includes('');
+    getByTestId('language-dropdown-btn').className.includes('');
+    getByTestId('dropdown-btn-0').className.includes('');
+
+    userEvent.click(getByTestId('dropdown-btn-0'));
+    await wait();
+
+    languages.map((language) => {
+      expect(
+        getByTestId(`change-language-btn-${language.code}`),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('Component Should accept props properly', async () => {
+    const props = {
+      parentContainerStyle: 'parentContainerStyle',
+      btnStyle: 'btnStyle',
+      btnTextStyle: 'btnTextStyle',
+    };
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <ChangeLanguageDropDown {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    getByTestId('language-dropdown-container').className.includes(
+      props.parentContainerStyle,
+    );
+    getByTestId('language-dropdown-btn').className.includes(props.btnStyle);
+    getByTestId('dropdown-btn-0').className.includes(props.btnTextStyle);
+  });
+
+  test('Testing when language cookie is not set', async () => {
+    Object.defineProperty(window.document, 'cookie', {
+      writable: true,
+      value: 'i18next=',
+    });
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ChangeLanguageDropDown />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(cookies.get('i18next')).toBe('');
+  });
+
+  test('Testing change language functionality', async () => {
+    Object.defineProperty(window.document, 'cookie', {
+      writable: true,
+      value: 'i18next=sp',
+    });
+    setItem('userId', '1');
+
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ChangeLanguageDropDown />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    userEvent.click(getByTestId('language-dropdown-btn'));
+    await wait();
+    const changeLanguageBtn = getByTestId(`change-language-btn-fr`);
+    await wait();
+    expect(changeLanguageBtn).toBeInTheDocument();
+    await wait();
+    userEvent.click(changeLanguageBtn);
+    await wait();
+    expect(cookies.get('i18next')).toBe('fr');
+    await wait();
+    userEvent.click(getByTestId('language-dropdown-btn'));
+    await wait();
+    const changeLanguageBtnHi = getByTestId(`change-language-btn-hi`);
+    await wait();
+    expect(changeLanguageBtnHi).toBeInTheDocument();
+    await wait();
+    userEvent.click(changeLanguageBtnHi);
+    await wait();
+  });
+});
diff --git a/src/components/CheckIn/CheckInModal.module.css b/src/components/CheckIn/CheckInModal.module.css
new file mode 100644
index 0000000000..0f78d81c01
--- /dev/null
+++ b/src/components/CheckIn/CheckInModal.module.css
@@ -0,0 +1,43 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/CheckIn/CheckInModal.test.tsx b/src/components/CheckIn/CheckInModal.test.tsx
new file mode 100644
index 0000000000..1660c7c4bb
--- /dev/null
+++ b/src/components/CheckIn/CheckInModal.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { CheckInModal } from './CheckInModal';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { checkInQueryMock } from './mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const link = new StaticMockLink(checkInQueryMock, true);
+
+describe('Testing Check In Attendees Modal', () => {
+  const props = {
+    show: true,
+    eventId: 'event123',
+    handleClose: jest.fn(),
+  };
+
+  test('The modal should be rendered, and all the fetched users should be shown properly and user filtering should work', async () => {
+    const { queryByText, queryByLabelText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <CheckInModal {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Event Check In Management')).toBeInTheDocument(),
+    );
+
+    await waitFor(() => expect(queryByText('John Doe')).toBeInTheDocument());
+    await waitFor(() => expect(queryByText('John2 Doe2')).toBeInTheDocument());
+
+    // Tetst filtering of users
+    fireEvent.change(queryByLabelText('Search Attendees') as Element, {
+      target: { value: 'John Doe' },
+    });
+
+    await waitFor(() => expect(queryByText('John Doe')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText('John2 Doe2')).not.toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/CheckIn/CheckInModal.tsx b/src/components/CheckIn/CheckInModal.tsx
new file mode 100644
index 0000000000..8c75bab598
--- /dev/null
+++ b/src/components/CheckIn/CheckInModal.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { Modal } from 'react-bootstrap';
+import { useQuery } from '@apollo/client';
+import { EVENT_CHECKINS } from 'GraphQl/Queries/Queries';
+import styles from 'components/CheckIn/CheckInModal.module.css';
+import { TableRow } from './TableRow';
+import type {
+  InterfaceAttendeeCheckIn,
+  InterfaceModalProp,
+  InterfaceTableData,
+} from './types';
+import type { GridColDef, GridRowHeightReturnValue } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
+import TextField from '@mui/material/TextField';
+
+/**
+ * Modal component for managing event check-ins. Displays a list of attendees
+ * and their check-in statuses, allowing for filtering by user name.
+ *
+ * @param show - Boolean indicating whether the modal is visible.
+ * @param eventId - ID of the event whose check-ins are to be displayed.
+ * @param handleClose - Function to call when the modal is closed.
+ *
+ * @returns JSX.Element - The rendered modal component.
+ */
+export const CheckInModal = ({
+  show,
+  eventId,
+  handleClose,
+}: InterfaceModalProp): JSX.Element => {
+  // State to hold the data for the table
+  const [tableData, setTableData] = useState<InterfaceTableData[]>([]);
+
+  // State for search filter input
+  const [userFilterQuery, setUserFilterQuery] = useState('');
+
+  // State for filter model used in DataGrid
+  const [filterQueryModel, setFilterQueryModel] = useState({
+    items: [{ field: 'userName', operator: 'contains', value: '' }],
+  });
+
+  // Query to get check-in data from the server
+  const {
+    data: checkInData,
+    loading: checkInLoading,
+    refetch: checkInRefetch,
+  } = useQuery(EVENT_CHECKINS, {
+    variables: { id: eventId },
+  });
+
+  // Effect runs whenever checkInData, eventId, or checkInLoading changes
+  useEffect(() => {
+    checkInRefetch(); // Refetch data when component mounts or updates
+    if (checkInLoading) {
+      setTableData([]); // Clear table data while loading
+    } else {
+      // Map the check-in data to table rows
+      setTableData(
+        checkInData.event.attendeesCheckInStatus.map(
+          (checkIn: InterfaceAttendeeCheckIn) => ({
+            userName: `${checkIn.user.firstName} ${checkIn.user.lastName}`,
+            id: checkIn._id,
+            checkInData: {
+              id: checkIn._id,
+              name: `${checkIn.user.firstName} ${checkIn.user.lastName}`,
+              userId: checkIn.user._id,
+              checkIn: checkIn.checkIn,
+              eventId,
+            },
+          }),
+        ),
+      );
+    }
+  }, [checkInData, eventId, checkInLoading]);
+
+  // Define columns for the DataGrid
+  const columns: GridColDef[] = [
+    { field: 'userName', headerName: 'User', width: 300 }, // Column for user names
+    {
+      field: 'checkInData',
+      headerName: 'Check In Status',
+      width: 400,
+      renderCell: (props) => (
+        // Render a custom row component for check-in status
+        <TableRow data={props.value} refetch={checkInRefetch} />
+      ),
+    },
+  ];
+
+  // Show a loading indicator while data is loading
+  if (checkInLoading) {
+    return (
+      <>
+        <div className={styles.loader}></div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Modal
+        show={show}
+        onHide={handleClose}
+        backdrop="static"
+        centered
+        size="lg"
+      >
+        <Modal.Header closeButton className="bg-primary">
+          <Modal.Title className="text-white" data-testid="modal-title">
+            Event Check In Management
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="p-2">
+            <TextField
+              id="searchAttendees"
+              label="Search Attendees"
+              variant="outlined"
+              value={userFilterQuery}
+              onChange={(e): void => {
+                setUserFilterQuery(e.target.value);
+                setFilterQueryModel({
+                  items: [
+                    {
+                      field: 'userName',
+                      operator: 'contains',
+                      value: e.target.value,
+                    },
+                  ],
+                });
+              }}
+              fullWidth
+            />
+          </div>
+          <div style={{ height: 500, width: '100%' }}>
+            <DataGrid
+              rows={tableData}
+              getRowHeight={(): GridRowHeightReturnValue => 'auto'}
+              columns={columns}
+              filterModel={filterQueryModel}
+            />
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/CheckIn/CheckInWrapper.module.css b/src/components/CheckIn/CheckInWrapper.module.css
new file mode 100644
index 0000000000..f5f42546c3
--- /dev/null
+++ b/src/components/CheckIn/CheckInWrapper.module.css
@@ -0,0 +1,13 @@
+button .iconWrapper {
+  width: 32px;
+  padding-right: 4px;
+  margin-right: 4px;
+  transform: translateY(4px);
+}
+
+button .iconWrapperSm {
+  width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/CheckIn/CheckInWrapper.test.tsx b/src/components/CheckIn/CheckInWrapper.test.tsx
new file mode 100644
index 0000000000..81f53d0043
--- /dev/null
+++ b/src/components/CheckIn/CheckInWrapper.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { CheckInWrapper } from './CheckInWrapper';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { checkInQueryMock } from './mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const link = new StaticMockLink(checkInQueryMock, true);
+
+describe('Testing CheckIn Wrapper', () => {
+  const props = {
+    eventId: 'event123',
+  };
+
+  test('The button to open and close the modal should work properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <CheckInWrapper {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Open the modal
+    fireEvent.click(screen.getByLabelText('checkInRegistrants') as Element);
+
+    await waitFor(() =>
+      expect(screen.queryByTestId('modal-title')).toBeInTheDocument(),
+    );
+
+    //  Close the modal
+    const closebtn = screen.getByLabelText('Close');
+
+    fireEvent.click(closebtn as Element);
+
+    await waitFor(() =>
+      expect(screen.queryByTestId('modal-title')).not.toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/CheckIn/CheckInWrapper.tsx b/src/components/CheckIn/CheckInWrapper.tsx
new file mode 100644
index 0000000000..859ae1f869
--- /dev/null
+++ b/src/components/CheckIn/CheckInWrapper.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { CheckInModal } from './CheckInModal';
+import { Button } from 'react-bootstrap';
+import IconComponent from 'components/IconComponent/IconComponent';
+import styles from './CheckInWrapper.module.css';
+
+type PropType = {
+  eventId: string;
+};
+
+/**
+ * Wrapper component that displays a button to open the CheckInModal.
+ *
+ * @param eventId - The ID of the event for which check-in management is being handled.
+ *
+ * @returns JSX.Element - The rendered CheckInWrapper component.
+ */
+export const CheckInWrapper = ({ eventId }: PropType): JSX.Element => {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <Button
+        variant="light"
+        className="text-secondary"
+        aria-label="checkInRegistrants"
+        onClick={(): void => {
+          setShowModal(true);
+        }}
+      >
+        <div className={styles.iconWrapper}>
+          <IconComponent
+            name="Check In Registrants"
+            fill="var(--bs-secondary)"
+          />
+        </div>
+        Check In Registrants
+      </Button>
+      {showModal && (
+        <CheckInModal
+          show={showModal}
+          handleClose={(): void => setShowModal(false)}
+          eventId={eventId}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/components/CheckIn/TableRow.test.tsx b/src/components/CheckIn/TableRow.test.tsx
new file mode 100644
index 0000000000..1a08f40a3d
--- /dev/null
+++ b/src/components/CheckIn/TableRow.test.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { TableRow } from './TableRow';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MockedProvider } from '@apollo/react-testing';
+import { checkInMutationSuccess, checkInMutationUnsuccess } from './mocks';
+
+describe('Testing Table Row for CheckIn Table', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('If the user is not checked in, button to check in should be displayed, and the user should be able to check in successfully', async () => {
+    const props = {
+      data: {
+        id: `123`,
+        name: `John Doe`,
+        userId: `user123`,
+        checkIn: null,
+        eventId: `event123`,
+      },
+      refetch: jest.fn(),
+    };
+
+    const { findByText } = render(
+      <BrowserRouter>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <MockedProvider addTypename={false} mocks={checkInMutationSuccess}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <TableRow {...props} />
+              </I18nextProvider>
+            </Provider>
+          </MockedProvider>
+        </LocalizationProvider>
+      </BrowserRouter>,
+    );
+
+    expect(await findByText('Check In')).toBeInTheDocument();
+
+    fireEvent.click(await findByText('Check In'));
+
+    expect(await findByText('Checked in successfully')).toBeInTheDocument();
+  });
+
+  test('If the user is checked in, the option to download tag should be shown', async () => {
+    const props = {
+      data: {
+        id: '123',
+        name: 'John Doe',
+        userId: 'user123',
+        checkIn: {
+          _id: '123',
+          time: '12:00:00',
+        },
+        eventId: 'event123',
+      },
+      refetch: jest.fn(),
+    };
+
+    const { findByText } = render(
+      <BrowserRouter>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <MockedProvider addTypename={false} mocks={checkInMutationSuccess}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <TableRow {...props} />
+              </I18nextProvider>
+            </Provider>
+          </MockedProvider>
+        </LocalizationProvider>
+      </BrowserRouter>,
+    );
+
+    global.URL.createObjectURL = jest.fn(() => 'mockURL');
+    global.window.open = jest.fn();
+
+    expect(await findByText('Checked In')).toBeInTheDocument();
+    expect(await findByText('Download Tag')).toBeInTheDocument();
+
+    fireEvent.click(await findByText('Download Tag'));
+
+    expect(await findByText('Generating pdf...')).toBeInTheDocument();
+    expect(await findByText('PDF generated successfully!')).toBeInTheDocument();
+
+    // Cleanup mocks
+    jest.clearAllMocks();
+  });
+
+  test('Upon failing of check in mutation, the appropriate error message should be shown', async () => {
+    const props = {
+      data: {
+        id: `123`,
+        name: `John Doe`,
+        userId: `user123`,
+        checkIn: null,
+        eventId: `event123`,
+      },
+      refetch: jest.fn(),
+    };
+
+    const { findByText } = render(
+      <BrowserRouter>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <MockedProvider addTypename={false} mocks={checkInMutationUnsuccess}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <TableRow {...props} />
+              </I18nextProvider>
+            </Provider>
+          </MockedProvider>
+        </LocalizationProvider>
+      </BrowserRouter>,
+    );
+
+    expect(await findByText('Check In')).toBeInTheDocument();
+
+    fireEvent.click(await findByText('Check In'));
+
+    expect(await findByText('Error checking in')).toBeInTheDocument();
+    expect(await findByText('Oops')).toBeInTheDocument();
+  });
+
+  test('If PDF generation fails, the error message should be shown', async () => {
+    const props = {
+      data: {
+        id: `123`,
+        name: '',
+        userId: `user123`,
+        checkIn: {
+          _id: '123',
+          time: '12:00:00',
+        },
+        eventId: `event123`,
+      },
+      refetch: jest.fn(),
+    };
+
+    const { findByText } = render(
+      <BrowserRouter>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <MockedProvider addTypename={false} mocks={checkInMutationSuccess}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <TableRow {...props} />
+              </I18nextProvider>
+            </Provider>
+          </MockedProvider>
+        </LocalizationProvider>
+      </BrowserRouter>,
+    );
+
+    // Mocking the PDF generation function to throw an error
+    global.URL.createObjectURL = jest.fn(() => 'mockURL');
+    global.window.open = jest.fn();
+
+    fireEvent.click(await findByText('Download Tag'));
+
+    expect(
+      await findByText('Error generating pdf: Invalid or empty name provided'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/CheckIn/TableRow.tsx b/src/components/CheckIn/TableRow.tsx
new file mode 100644
index 0000000000..b2bd6e11cb
--- /dev/null
+++ b/src/components/CheckIn/TableRow.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import type { InterfaceTableCheckIn } from './types';
+import Button from '@mui/material/Button';
+import { useMutation } from '@apollo/client';
+import { MARK_CHECKIN } from 'GraphQl/Mutations/mutations';
+import { toast } from 'react-toastify';
+import { generate } from '@pdfme/generator';
+import { tagTemplate } from './tagTemplate';
+import { useTranslation } from 'react-i18next';
+/**
+ * Component that represents a single row in the check-in table.
+ * Allows users to mark themselves as checked in and download a tag if they are already checked in.
+ *
+ * @param data - The data for the current row, including user and event information.
+ * @param refetch - Function to refetch the check-in data after marking a check-in.
+ *
+ * @returns JSX.Element - The rendered TableRow component.
+ */
+export const TableRow = ({
+  data,
+  refetch,
+}: {
+  data: InterfaceTableCheckIn;
+  refetch: () => void;
+}): JSX.Element => {
+  const [checkInMutation] = useMutation(MARK_CHECKIN);
+  const { t } = useTranslation('translation', { keyPrefix: 'checkIn' });
+
+  /**
+   * Marks the user as checked in for the event.
+   * Displays success or error messages based on the result of the mutation.
+   */
+  const markCheckIn = (): void => {
+    // as we do not want to clutter the UI currently with the same (only provide the most basic of operations)
+    checkInMutation({
+      variables: {
+        userId: data.userId,
+        eventId: data.eventId,
+      },
+    })
+      .then(() => {
+        toast.success(t('checkedInSuccessfully') as string);
+        refetch();
+      })
+      .catch((err) => {
+        toast.error(t('errorCheckingIn') as string);
+        toast.error(err.message);
+      });
+  };
+  /**
+   * Triggers a notification while generating and downloading a PDF tag.
+   *
+   * @returns A promise that resolves when the PDF is generated and opened.
+   */
+  const notify = (): Promise<void> =>
+    toast.promise(generateTag, {
+      pending: 'Generating pdf...',
+      success: 'PDF generated successfully!',
+      error: 'Error generating pdf!',
+    });
+
+  /**
+   * Generates a PDF tag based on the provided data and opens it in a new tab.
+   *
+   * @returns A promise that resolves when the PDF is successfully generated and opened.
+   */
+  const generateTag = async (): Promise<void> => {
+    try {
+      const inputs = [];
+      if (typeof data.name !== 'string' || !data.name.trim()) {
+        throw new Error('Invalid or empty name provided');
+      }
+      inputs.push({ name: data.name.trim() });
+      const pdf = await generate({ template: tagTemplate, inputs });
+      // istanbul ignore next
+      const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
+      // istanbul ignore next
+      const url = URL.createObjectURL(blob);
+      // istanbul ignore next
+      window.open(url);
+      // istanbul ignore next
+      toast.success('PDF generated successfully!');
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Error generating pdf: ${errorMessage}`);
+    }
+  };
+
+  return (
+    <>
+      {data.checkIn !== null ? (
+        <div>
+          <Button variant="contained" disabled className="m-2 p-2">
+            Checked In
+          </Button>
+          <Button variant="contained" className="m-2 p-2" onClick={notify}>
+            Download Tag
+          </Button>
+        </div>
+      ) : (
+        <Button
+          variant="contained"
+          color="success"
+          onClick={markCheckIn}
+          className="m-2 p-2"
+        >
+          Check In
+        </Button>
+      )}
+    </>
+  );
+};
diff --git a/src/components/CheckIn/mocks.ts b/src/components/CheckIn/mocks.ts
new file mode 100644
index 0000000000..a4e78aa2fc
--- /dev/null
+++ b/src/components/CheckIn/mocks.ts
@@ -0,0 +1,76 @@
+import { EVENT_CHECKINS } from 'GraphQl/Queries/Queries';
+import { MARK_CHECKIN } from 'GraphQl/Mutations/mutations';
+import type { InterfaceAttendeeQueryResponse } from './types';
+
+const checkInQueryData: InterfaceAttendeeQueryResponse = {
+  event: {
+    _id: 'event123',
+    attendeesCheckInStatus: [
+      {
+        _id: 'eventAttendee1',
+        user: {
+          _id: 'user1',
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+        checkIn: null,
+      },
+      {
+        _id: 'eventAttendee2',
+        user: {
+          _id: 'user2',
+          firstName: 'John2',
+          lastName: 'Doe2',
+        },
+        checkIn: {
+          _id: 'checkin1',
+          time: '08:00:00',
+        },
+      },
+    ],
+  },
+};
+
+export const checkInQueryMock = [
+  {
+    request: {
+      query: EVENT_CHECKINS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: checkInQueryData,
+    },
+  },
+];
+
+export const checkInMutationSuccess = [
+  {
+    request: {
+      query: MARK_CHECKIN,
+      variables: {
+        userId: 'user123',
+        eventId: 'event123',
+      },
+    },
+    result: {
+      data: {
+        checkIn: {
+          _id: '123',
+        },
+      },
+    },
+  },
+];
+
+export const checkInMutationUnsuccess = [
+  {
+    request: {
+      query: MARK_CHECKIN,
+      variables: {
+        userId: 'user123',
+        eventId: 'event123',
+      },
+    },
+    error: new Error('Oops'),
+  },
+];
diff --git a/src/components/CheckIn/tagTemplate.ts b/src/components/CheckIn/tagTemplate.ts
new file mode 100644
index 0000000000..acd35fca0d
--- /dev/null
+++ b/src/components/CheckIn/tagTemplate.ts
@@ -0,0 +1,22 @@
+import { Template } from '@pdfme/common';
+
+export const tagTemplate: Template = {
+  schemas: [
+    {
+      name: {
+        type: 'text',
+        position: { x: 14.91, y: 27.03 },
+        width: 58.55,
+        height: 5.67,
+        alignment: 'center',
+        fontSize: 16,
+        characterSpacing: 0,
+        lineHeight: 1,
+        fontName: 'Roboto',
+        fontColor: '#08780b',
+      },
+    },
+  ],
+  basePdf:
+    'data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovVmVyc2lvbiAvMS40Ci9QYWdlcyAyIDAgUgovU3RydWN0VHJlZVJvb3QgMyAwIFIKL01hcmtJbmZvIDQgMCBSCi9MYW5nIChlbikKL1ZpZXdlclByZWZlcmVuY2VzIDUgMCBSCj4+CmVuZG9iago2IDAgb2JqCjw8Ci9DcmVhdG9yIChDYW52YSkKL1Byb2R1Y2VyIChDYW52YSkKL0NyZWF0aW9uRGF0ZSAoRDoyMDIzMDYyMDA3MjgxMyswMCcwMCcpCi9Nb2REYXRlIChEOjIwMjMwNjIwMDcyODEzKzAwJzAwJykKL0tleXdvcmRzIChEQUZjMjhYSXViTSxCQUUycS01WEdhaykKL0F1dGhvciAoRXNoYWFuIEFnZ2Fyd2FsKQovVGl0bGUgKEJsYW5rIE5hbWUgVGFnIGluIEVtZXJhbGQgTWludCBHcmVlbiBBc3BpcmF0aW9uYWwgRWxlZ2FuY2UgU3R5bGUpCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9UeXBlIC9QYWdlcwovS2lkcyBbNyAwIFJdCi9Db3VudCAxCj4+CmVuZG9iagozIDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RUcmVlUm9vdAovUGFyZW50VHJlZSA4IDAgUgovUGFyZW50VHJlZU5leHRLZXkgMQovSyBbOSAwIFJdCi9JRFRyZWUgMTAgMCBSCj4+CmVuZG9iago0IDAgb2JqCjw8Ci9NYXJrZWQgdHJ1ZQovU3VzcGVjdHMgZmFsc2UKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0Rpc3BsYXlEb2NUaXRsZSB0cnVlCj4+CmVuZG9iago3IDAgb2JqCjw8Ci9UeXBlIC9QYWdlCi9SZXNvdXJjZXMgMTEgMCBSCi9NZWRpYUJveCBbMC4wIDcuOTIwMDAyNSAyNTIuMCAxNTEuOTJdCi9Db250ZW50cyAxMiAwIFIKL1N0cnVjdFBhcmVudHMgMAovUGFyZW50IDIgMCBSCi9UYWJzIC9TCi9CbGVlZEJveCBbMC4wIDcuOTIwMDAyNSAyNTIuMCAxNTEuOTJdCi9UcmltQm94IFswLjAgNy45MjAwMDI1IDI1Mi4wIDE1MS45Ml0KL0Nyb3BCb3ggWzAuMCA3LjkyMDAwMjUgMjUyLjAgMTUxLjkyXQovUm90YXRlIDAKL0Fubm90cyBbXQo+PgplbmRvYmoKOCAwIG9iago8PAovTGltaXRzIFswIDBdCi9OdW1zIFswIFsxMyAwIFIgMTQgMCBSIDE1IDAgUiAxNiAwIFIgMTcgMCBSIDE4IDAgUiAxOSAwIFJdCl0KPj4KZW5kb2JqCjkgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RvY3VtZW50Ci9MYW5nIChlbikKL1AgMyAwIFIKL0sgWzIwIDAgUl0KL0lEIChub2RlMDAwMDE3MzgpCj4+CmVuZG9iagoxMCAwIG9iago8PAovTmFtZXMgWyhub2RlMDAwMDE3MzgpIDkgMCBSIChub2RlMDAwMDE3MzkpIDEzIDAgUiAobm9kZTAwMDAxNzQwKSAyMCAwIFIgKG5vZGUwMDAwMTc0MSkgMjEgMCBSIChub2RlMDAwMDE3NDIpIDIyIDAgUgoobm9kZTAwMDAxNzQzKSAyMyAwIFIgKG5vZGUwMDAwMTc0NCkgMjQgMCBSIChub2RlMDAwMDE3NDUpIDI1IDAgUiAobm9kZTAwMDAxNzQ2KSAyNiAwIFIgKG5vZGUwMDAwMTc0NykgMjcgMCBSCihub2RlMDAwMDE3NjEpIDI4IDAgUiAobm9kZTAwMDAxNzYyKSAyOSAwIFIgKG5vZGUwMDAwMTc2MykgMzAgMCBSIChub2RlMDAwMDE3NjQpIDMxIDAgUiAobm9kZTAwMDAxNzY1KSAzMiAwIFIKKG5vZGUwMDAwMTc2NikgMzMgMCBSIChub2RlMDAwMDE3NjcpIDE0IDAgUiAobm9kZTAwMDAxNzY4KSAzNCAwIFIgKG5vZGUwMDAwMTc2OSkgMzUgMCBSIChub2RlMDAwMDE3NzApIDM2IDAgUgoobm9kZTAwMDAxNzcxKSAxNSAwIFIgKG5vZGUwMDAwMTc3MikgMzcgMCBSIChub2RlMDAwMDE3NzMpIDM4IDAgUiAobm9kZTAwMDAxNzc0KSAzOSAwIFIgKG5vZGUwMDAwMTc3NSkgMTYgMCBSCihub2RlMDAwMDE3NzYpIDE3IDAgUiAobm9kZTAwMDAxNzc3KSA0MCAwIFIgKG5vZGUwMDAwMTc3OCkgMTggMCBSIChub2RlMDAwMDE3NzkpIDQxIDAgUiAobm9kZTAwMDAxNzgwKSA0MiAwIFIKKG5vZGUwMDAwMTc4MSkgNDMgMCBSIChub2RlMDAwMDE3ODIpIDQ0IDAgUiAobm9kZTAwMDAxNzgzKSAxOSAwIFJdCj4+CmVuZG9iagoxMSAwIG9iago8PAovUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0KL0V4dEdTdGF0ZSA0NSAwIFIKL1hPYmplY3QgPDwKL1g1IDQ2IDAgUgo+PgovRm9udCA0NyAwIFIKPj4KZW5kb2JqCjEyIDAgb2JqCjw8Ci9MZW5ndGggOTc4Ci9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQ0KeJytVk2PGzcMvc+v0LlAtCQl6gNYLODYmyCHAE1roL27SYDC2yDJ/wfyJM2MNFnvJpuuDdsyKZGPj0/SWHG5vgzh/cIOf1nZZsY4mdPd9HkqE5iUTHBsRc2X99Nfv5n/4HGW8b/4+whL2JT3H69NG3z5OF29dubj1xrJuWCEpET5ML3De0xA9AzROf+P6JY4B2N9/ZYMoMh03/iErJ005L0H5gEbO7HBc0AqCWw5M5uYyboCVbK2wTI5kI0hbCbfTSk7m1KKrhvPU6ZsvXDI3ZhFUJ8r86KzMTlKoy1l5ApsTlM3qkRMVEklYrd6h6nJmZ5EVSElwsSOpttOI/JuPk/sFYJ0muNgHihZM422FdNpw96C/7yxrpUOqVZGLvF5qkx/nsSmRS3z8FKripBS0YnNkj2+CZupCOmecSskSVyk8JPyjQTcg4RZyYpn55zxDmx4CqFpmlyGcMWpsaySm6a/N1YovkGxCgXhTLDJowPl73n683mkHXywpI68AfUM3OyxgbwNKaKEPIYM0VuOaTP1bsoo04vqaIUOA4SiScNgzTFZVcJMBR3klcJggwbEReWimG4VipbR2FBiditUHtnD2vOAOesoFNuKqNtOA/puPU9BE+SiRS2rtVPS8wy2FdFpIK+jPw/WXmfP0/m4xOfDwr7UqF8VNgNnSKOug2JjlkXYbFReUAGF0nwGw2F7zzRHvamkjqksXCIItn7KSSq8OenV7+b6+urt/s0Bi25uXh7209Xfag6fptu3+6fdDJtzA4LwPuhTt1XF9PI4wuIF1quInWtzyvXKPX7ADVcrLUcB2UDZlY0h5ng3XYOm/Y05/jsxFJdy9KFMPv5jrnEGH6oHLU7OMyQwO8SHxaGCDSarI3J1iM05Ek6TxUHK84oEghmofrjitiWP6AhWxNXB2hyF9dtjpf0ev9BZUhSD01jYeoer1P2S0rYEy0gwLgxpDzgjwUWYM6+H2HgVHKEx8VoylFsdCoyRUpBema8OZ5VY3Eo3025eoLh4ci21OUJzBBu4PF7p9xyhpxEezT9OvvT0EVodo33kcQV4bDEBxPgMqnUjqbIh03tLsV2JNJMKMnjn24cTCn2FX27jubS5gm0W/3CWFMuzRb0r5iwQ5SrMi9H04WiitkGWdX9p6WwRdIVaglf4YdfGeljgV3u17XfVz7v9pcawxbNJTOKkZh3+as4Ww1ILqsJRS/roE+62rPBIK5Kdj42lE3zbIBb45QOotRvu0Mrb9/Jq6fDVXzd3aym7rFnKTocWcz93N9NMzUwb5RJ3S8e76RuIroTkDQplbmRzdHJlYW0KZW5kb2JqCjEzIDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9GaWd1cmUKL1AgMzAgMCBSCi9LIFs0OCAwIFJdCi9JRCAobm9kZTAwMDAxNzM5KQo+PgplbmRvYmoKMTQgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL05vblN0cnVjdAovUCAzMyAwIFIKL0sgWzQ5IDAgUl0KL0lEIChub2RlMDAwMDE3NjcpCj4+CmVuZG9iagoxNSAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvTm9uU3RydWN0Ci9QIDM2IDAgUgovSyBbNTAgMCBSXQovSUQgKG5vZGUwMDAwMTc3MSkKPj4KZW5kb2JqCjE2IDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9Ob25TdHJ1Y3QKL1AgMzkgMCBSCi9LIFs1MSAwIFJdCi9JRCAobm9kZTAwMDAxNzc1KQo+PgplbmRvYmoKMTcgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL05vblN0cnVjdAovUCAzOSAwIFIKL0sgWzUyIDAgUl0KL0lEIChub2RlMDAwMDE3NzYpCj4+CmVuZG9iagoxOCAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvTm9uU3RydWN0Ci9QIDQwIDAgUgovSyBbNTMgMCBSXQovSUQgKG5vZGUwMDAwMTc3OCkKPj4KZW5kb2JqCjE5IDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9Ob25TdHJ1Y3QKL1AgNDQgMCBSCi9LIFs1NCAwIFJdCi9JRCAobm9kZTAwMDAxNzgzKQo+PgplbmRvYmoKMjAgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCA5IDAgUgovSyBbMjEgMCBSXQovSUQgKG5vZGUwMDAwMTc0MCkKPj4KZW5kb2JqCjIxIDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgMjAgMCBSCi9LIFsyMiAwIFJdCi9JRCAobm9kZTAwMDAxNzQxKQo+PgplbmRvYmoKMjIgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCAyMSAwIFIKL0sgWzIzIDAgUl0KL0lEIChub2RlMDAwMDE3NDIpCj4+CmVuZG9iagoyMyAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvRGl2Ci9QIDIyIDAgUgovSyBbMjQgMCBSXQovSUQgKG5vZGUwMDAwMTc0MykKPj4KZW5kb2JqCjI0IDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgMjMgMCBSCi9LIFsyNSAwIFJdCi9JRCAobm9kZTAwMDAxNzQ0KQo+PgplbmRvYmoKMjUgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCAyNCAwIFIKL0sgWzI2IDAgUl0KL0lEIChub2RlMDAwMDE3NDUpCj4+CmVuZG9iagoyNiAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvRGl2Ci9QIDI1IDAgUgovSyBbMjcgMCBSXQovSUQgKG5vZGUwMDAwMTc0NikKPj4KZW5kb2JqCjI3IDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgMjYgMCBSCi9LIFsyOCAwIFIgMzEgMCBSIDM0IDAgUiAzNyAwIFIgNDEgMCBSXQovSUQgKG5vZGUwMDAwMTc0NykKPj4KZW5kb2JqCjI4IDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgMjcgMCBSCi9LIFsyOSAwIFJdCi9JRCAobm9kZTAwMDAxNzYxKQo+PgplbmRvYmoKMjkgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCAyOCAwIFIKL0sgWzMwIDAgUl0KL0lEIChub2RlMDAwMDE3NjIpCj4+CmVuZG9iagozMCAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvRGl2Ci9QIDI5IDAgUgovSyBbMTMgMCBSXQovSUQgKG5vZGUwMDAwMTc2MykKPj4KZW5kb2JqCjMxIDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgMjcgMCBSCi9LIFszMiAwIFJdCi9JRCAobm9kZTAwMDAxNzY0KQo+PgplbmRvYmoKMzIgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCAzMSAwIFIKL0sgWzMzIDAgUl0KL0lEIChub2RlMDAwMDE3NjUpCj4+CmVuZG9iagozMyAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvUAovUCAzMiAwIFIKL0sgWzE0IDAgUl0KL0lEIChub2RlMDAwMDE3NjYpCj4+CmVuZG9iagozNCAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvRGl2Ci9QIDI3IDAgUgovSyBbMzUgMCBSXQovSUQgKG5vZGUwMDAwMTc2OCkKPj4KZW5kb2JqCjM1IDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgMzQgMCBSCi9LIFszNiAwIFJdCi9JRCAobm9kZTAwMDAxNzY5KQo+PgplbmRvYmoKMzYgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL1AKL1AgMzUgMCBSCi9LIFsxNSAwIFJdCi9JRCAobm9kZTAwMDAxNzcwKQo+PgplbmRvYmoKMzcgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCAyNyAwIFIKL0sgWzM4IDAgUl0KL0lEIChub2RlMDAwMDE3NzIpCj4+CmVuZG9iagozOCAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvRGl2Ci9QIDM3IDAgUgovSyBbMzkgMCBSIDQwIDAgUl0KL0lEIChub2RlMDAwMDE3NzMpCj4+CmVuZG9iagozOSAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvUAovUCAzOCAwIFIKL0sgWzE2IDAgUiAxNyAwIFJdCi9JRCAobm9kZTAwMDAxNzc0KQo+PgplbmRvYmoKNDAgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL1AKL1AgMzggMCBSCi9LIFsxOCAwIFJdCi9JRCAobm9kZTAwMDAxNzc3KQo+PgplbmRvYmoKNDEgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL0RpdgovUCAyNyAwIFIKL0sgWzQyIDAgUl0KL0lEIChub2RlMDAwMDE3NzkpCj4+CmVuZG9iago0MiAwIG9iago8PAovVHlwZSAvU3RydWN0RWxlbQovUyAvRGl2Ci9QIDQxIDAgUgovSyBbNDMgMCBSXQovSUQgKG5vZGUwMDAwMTc4MCkKPj4KZW5kb2JqCjQzIDAgb2JqCjw8Ci9UeXBlIC9TdHJ1Y3RFbGVtCi9TIC9EaXYKL1AgNDIgMCBSCi9LIFs0NCAwIFJdCi9JRCAobm9kZTAwMDAxNzgxKQo+PgplbmRvYmoKNDQgMCBvYmoKPDwKL1R5cGUgL1N0cnVjdEVsZW0KL1MgL1AKL1AgNDMgMCBSCi9LIFsxOSAwIFJdCi9JRCAobm9kZTAwMDAxNzgyKQo+PgplbmRvYmoKNDUgMCBvYmoKPDwKL0czIDU1IDAgUgovRzQgNTYgMCBSCj4+CmVuZG9iago0NiAwIG9iago8PAovTGVuZ3RoIDMwMTg4Ci9UeXBlIC9YT2JqZWN0Ci9TdWJ0eXBlIC9JbWFnZQovV2lkdGggMzQ3Ci9IZWlnaHQgMjMzCi9Db2xvclNwYWNlIC9EZXZpY2VSR0IKL1NNYXNrIDU3IDAgUgovQml0c1BlckNvbXBvbmVudCA4Ci9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQ0KeJzsfQl4FNeVbgmpN6GuajDYY1tIIpPJm8dbJhkyb5LJTIaZJCaYRRvCwTEOjmNi42DAZjGLpNbGamOMgVgJGGMMxo3QvqKltQsBXuKQxFlmPEPGkziLd0BSd6vfuefcul29SOqWhBa7zldff6VWdS237vnv2Y8k6aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTp9Y8sI2T/KulrzFkrdL8l6SvM2St0ryOvCzGb+B79+UvG9JXu94365OOul0Ywi42/uO5H0RMcEueZ3I+7Q51E1848Tjf4ew8I6ODDrp9Ikixt20XWbM7noqpq/U5GoyulqNrgajq9roLjW6qozueqO7xeRymnpeiWEHX8Lj6VeO8X4GnXTSaZSI0MDzG6P7kqmvxfJeia2n2NpXJ/fUTu2ps/bWxPXWwKe1p8rqqlP6auT3q5XfOqTeCwb3a0bPRQMTHi7rcoJOOn1CqP/fTe7XpvbWTXO1Wl1Oub9N6b+g9F9S+i+qn2Lngq3/kq2/W3E1w2b1tFh7GhV3t4VByhUdFnTSaRITCQZuQIMm2dMoA5szfm9VPM2Kp0XxtA68tSj9zUp/u+xlEKG4Wmye8xYmJ8AJ3x7vp9JJJ52GRbSgey6Y+hoVb6sMUOB2Iho4ZU9zOJviaVI8nSA82NxVcn9nDLMqvDneT6WTTjoNi7ydzBjoaTN5Wm2w0LtBSAA2B5WhWRly8ziVfic7mO20yG62Y2Tehzd0rUEnnSYlkTOxv8rEVICLCkGBh/E7Y3MPlxbwM2BzqgcLQGiyepqM3B2pA4JOOk1C4oBQbfK2MlOAp0nmS3+YEoIfIMTpgKCTTpOaSGXwtpu87QgIPgkhHEDg6OFpZsYHTyPs6CqDTjpNYmKOQq/U/4aJWRQv+Hg8HEDoV82PbL9N9oDK0GqiwGaddNJpMhKJ9/1vmdwtSv/5yADBI+SEFuZ/dDWC7mCi3AeddNJpMhK5HfsvmNxNtv7OSFUG1fbYIgMgMJWhycQUEB0QdNJpchLjX7vUX2nyAhR0RGhUVCUETytICIqn0drfpEsIOuk0ickHCCj2e5rURT98QGhGQAAwAZWh3Ui5kDrppNNkJKEyuJqm9bfKPAIBDYaRAUKn0tcgM7ejLiHopNOkJWFUZF4Gpw8NIpUQvOcVb1Ocp9ZIdVR00kmnyUi8msEFs9dpY+EELb74wwgAoU3p71Lc9db+ciNFOumkk06TkRgg2BEQmqZzQAjbrugHCN2K+5zcr0sIOuk0mcknIbTI/hJCJF6GNsXbrXgb5P5G3Yagk06TmHjZtLdUlaE1cgkBAYFlStbH9bfqXgaddJrExCun/ZvJ23gTS3hsJc9jJIDQJHswD8JdbfXogKCTTpOZOCD8yvRRXRyTENowUwlDESKUEGyuBpnnMuiAoJNOk5Oo6JmnxOQttjIoaCcbghyB25EkhIuKq07xtOmAoNMkI2ZUPyR5a/VyoIy82diF4Uist3o6Uxk6IjcqIiB4LyneBmu/LiHoNKnIbpecdsQEKgd65dPeUMBL2w7F65jpBwgRSggMEKrlfqee/qzTZCIABNiuPGfoqzG5f2pkmEAdyuo/3bBQfou37hZWej2ShEc/G8JFpa9S8TSYWIGUtvF+Hp10Goq8KBj85ED0mw7LB0WyqyXuWvX0vs5Y9wUjb1VWi+3JPpWw4C23eStuo4DDYbodL9l6q6a56xAQnOP9PDrpNBQxu4Fdcr9kuFZtcXUrni7F3a30OpXrTpuryeJujiHdgZUU+/TZFrxnzaz2civWSGkapoTQW2F11eqAoNMNI+BK5zzpcoZUu17qvF9yZLBP2Idv4PsIedZ7AuuNlxi9Ttn7uq2/nenLzMvWzVjgWp2lp8ncWxfDbQvvsm4jnx5Y8J7CUqutsg8QIpUQLio9JYqrxqgDgk6jTMCGl+dIV+LZ5kW1H5Z2QAPavGgFoGMOrWYb/BnOWcvYRO2vNbGcvg7F3SwzaxgLxUFLWhdIC/Ifz8VeazP3UrcR76eoejCDwWNSf7uVAULjMCMVr5Va+ioMDBBqx/t5dPokERm+Ge9LMU1fNJ9bbC2+V675lnImTa5dbi1ZGVeTHOf4mqlhLjsG0GCeUxpKXGCsfQ4XQYfR7aTwG3UyEyw0M2nZ3YGwcDb2Wqe5902DryHyJx0WGCBUS5FWYg8AhKtnY3tLsOtr2Xg/j06fDEIoiP3tLUrrV5Tuv5Pr/kU6Nm/G0W/En1yUWJw66/TChNKM20+n3vbcHbfsveOW08nTX7x7ak6miiCDnpiaBaCs0e+09rdQ1j9Xlj3UfqgFZ3i34mpVepvl3xfHfdwd2/OWUQsLn1Rk8J5GTGiz+QAhIhsCGh8+LLa6ivX0Z51GiViIALMM3NL6pcSz82eVpyaWpc4qTU0oSU4sT02qTEusTEuqTE8sT0soSUkoTYH/JlakxjuSb87fZnl0L1coBiAqFMY2Z5IvEs8ZBAsUstuCybytcm+78k7D1Gvdlt6fmPp+GfMJhgXvYclbKHk7sHlT+BKCaNTSong7FW/9NE8lGmGOjPfz6PQJILQGxFUsSHrpm0nV6bMbliXVpCdWpAEaJJSlJpSmJpbSZ0oCg4I0+C87pm7prOLFclHaEIBAaOBlQXRuvgLK/aJDmTMAFpAp2lCJaFGutVqvVVh6z1tc/6YqEZ+scCb2RKfY+Hg6ZB8gNIdRIMXJG0HCiHnbZW+FKobpNgSdRk6184GjlfI7QQAAfmcgALIBsD+AQBmAgNgQE1BIgAOSapfCAfLJ5QwNjtw/0Lm1gOCb8MT7TtFwxCczwKe7Gc1rHYqnQ3G3KT0t1utV5r43zK7/MnzCwpk4ygEgtCkRAoKipkGxvOnLDvVUl8f7kXT6BFDnl0BfUM59fVYJcj1jfPwsSyHxQN3ovyn0L9AjZpWlysfuYxrHvvUDndsPEJwaCSFAMHaqqrFaQIwpEQALXQowi7tdBmmhp1rpbTe7umIonOkdp/RWt+SczI42zsUOf5VhKEDwa+yIlVU+wSqVTuNAAAggIZz7WlLxksSKVGYrQEMBSQgcHEBrYPsp6r9SEqvTAR+UiADBX0IIYSjDZoW+JmUUrg+/6lQ8rYrrPAtn+qDC1FNvcmE4E6DBK07pslNyTE5pQUgI3nZbBIDQrKgF29mRbvh81eh16ICg0yjRkSUMEF5ckliyGAEhlVsO6TNgI0AA5aImPZEBwjKmMuy7Z6Bz+wDBKZHZcMicPnUF1MACOuhZgnCr7OqUe5vkD2pN7zab3m1nsABoUPuS5DwVZljEBCIOCKzxawRGxQAJwQ079XrrZ51Gj/bNl+zzlKMLE4qSmS2xUgWEsoEBoTSF2RCYyrAMfjsYIPi8DPOwcqCs0X/DUpNFLWIGCy0Y4thO4UzW90tMvz9n+l0TUyIADS5PtsRqXom91ejtikRC0AJCKwCCVe8Fr9NoEgKCfGThrKL0xMqhAKFMBYS6pfGlqfILKxgrHlo90LnFRO1voN7lspB4hzSdaSe/sK6LcCYP6BGd8vUm69ullv8os/zHWZ/YPFlYg4/MFRPgW3+3iFSMEBBgQJpNei94nUaNVJUh4cwiBAQWbzCEyoCAwLwMZ1ewMgeOgQEB5vwvMZeh0+RuUnihMCd3MkaACaFggZ3hvOJpswIs/PHsjGutsb1v+EU5TnAGEYDg7bBpchnCBAQ8slVxN9n0XvA6jSZhIIFyJjUJcKAqLbEqdTBA8EkIGYmlqUpNGgtqcg4YhwDkbUADQqMJhFtmHiT3otMXkDB8WCD3ZTMur23Kdaf8h6qpPW/Euv7LNClggXdzu2TyACB0hRupqCpTiKjtICEong69XJJOo0cICPKZtFlnkhOq0gEThrQhwGfSuYxZpclKzXwEhHmDnJ4BwiUGCK4mW/8lHpfYL2Ah7LphPl4IgAVyRmBTM3er7bpz2tVzM3p+OrX3v9Tg505pYob18n6vNSZvq6ZAypDWFfHgLQQIMIx662edRo8IEF5Ove1McmJ1elLV4CpDKnoZUpPqMxLKlsi1YQACBhF56ox9LWg6a1fcFKvMZ7if5TASw4J6vBoR7W7EkmJdirtN/rh52rv1067/NLbvpzzInyVdVk4sWOApHsdNzO3Yyc2JQ0sIzbIPEDoUF+zU6W2bdBo9IkBwpCS9dGdidRpsLFJxAEBIUN2OSQ0ZCRVpyrlvMDRo+8ogp+f86JDcFyy9jYrnVYWp/60YctAk+9Y7WhnDExU0m8odKrO4McrR26H0tSu9rdPer1auV1t6qwxUlIl9dk+UugFcQqg2AYIxp6oKCINjgp+EAIDQZPVU6plNOo0ecQkhZVbRnUk16bBxCSG0ypCqAsKyhPJk5dwd0qW5gwOCRDMf9WXXr83Xm2RXl+w5zwyMzMZIoUfq0h+RYWFA80ITwkInO7+708YSq2usvfUWj9PAbsOpbuPNQdyGcBFVhtawHbJaQOhUXI2yu8KkA4JOo0ZcQki9HYQEAIRqFRBKgy2KfoDAjIphSAhEwr53/Wemt0psrH5al83TqVZPapQDzAJCNh4JLLD9DmZvdHUprma512l1tVtcXQZetO0lnls0XuTrCN9iFdrTkGYEX2BGC6vE2Ntk85wzUWlKncaZqNQYC9Vbz3zxAyf9TWhSbQjxjuSkmqUaQBhCQgARIhyjoiCOCZek668YP74w9Q/OmVebbH0XERa6MBAxABacIp45Qljwj3JkP29j52clF9qUDxusvU6Lq8XADHH28ewTQdf1dJtcTiEeDN2rxQcIVImxAVQwEztV5zg8gk5+RAVCqMI4sNXl1dxONLmIAOF0SuLphUl1SxNVQEgYREIoTUmqB0BYooRhVBTE0OBtrJqIsNBTavrorPzWsaRrTVbXBZu7g8MCRtqosgFxSiSeCA0s+BZcBgtUtK2TfJTW9+uUvhqzu0yt5XiZx1CNJVFHeAYIjYomXmsIrcFnVGzF1s+N1n4dEMadEAri3r51Wt18W3Ga8vx98okVlvP3ISDMC6OS0EQiBATrqZT4k4sAEJKqlw6qMqhGxfplCRWpSu03wwcEIg4Lbbxpy7UGyzvOWIdD+lN9nKtbBljwnkdPRKMaY9CsMTyGLTAIngoRztTCFlbMo7Rec1r6zptdDTE84WJs4xa4hHDe5G2y8o7wYaQzaFUG3gu+xURlq3UaN3r7VmB528Uvfq5iMYvuq0iLL02+pfVuufFu0+t3qF15wqkxNgHoCKurHHfsrpufW5hUm5FYszSheEAJIUGoDAAIZelK7YJIAYHI19YN83/fPhH9X2eM16tir7bG9jKrAqtC7O1A86CTxyD1DwcWfNVXNJoIQg1WZ+rvsPW2Wa+2x7razO5XY8Y4nIn3e/13U18DcLcWEAYznqjWElQZLiieevhTlxDGm978nHRprq39H+JLUma3fCupKj3p3FJWWKwsVTqwwFb9j9affJajAQjVYRcoHh/at55VTPrhvbeevJM9xaCA4AtdBkAoSZdrIpYQtMRl9cu8d0PfcUPvWXNPeez7lcrVVpbbCBMe/XHcARECFsIIXRAA4v9zLDfUirDQqbja5WudFtebJvfvVFioxbu6kaZ7upAbAMFpI40mLEBo1gDCRcXdYPXogDDu1PCvwAVy1YKEUqwdhCWGYCcRtsrUpMr0mYfm2dq/YLn0N7xAMWDCsZUTFBbQBiLvfyD++KKk+owkFRBCqwxq6HLiuYxZ5YuVyoUMDQD0RkY8I1Ldek6brnbEveVM+rhN7muVPZdYSB4lL3DfgQYWtGVVwuAjDbtRgaYmrF183ubpYLnV19rMrl+Y3a8YeBtKCme6MXELQkLodU5jEgI8aVM4NgQNIFxS3OdkT53uZRhvKsOEoNJkpm5Xp6uaNcJC3VJWK6A6HZSI6S8usB3PiH0hnXEN8F35IunU8gkHCwQI+x5IOnanFhBCSwgCEOAxy1MUHAc2GqNEHBMO8Z6w19+I7btgudZmdYESccnGEp9bQ8FCGN66AFVCiyQsnKkJw5mYJ1R2nZd7GhV3ucXjMPBYpjbJ2zH6sMDjELqYDaG/RXSEH8Lf6g8INned4inT4xDGmyghqIhVIGSAQNXGqOwYC/MDaYFhAqjks84uAWlBKULDwqW5wHqxFzJmXp4zgWwLBAhPPnBb4eKkcxlDuR199RASy9KUs+mDF1kdHvFApivcwuDujulrt3zslHtZMVJYylU9wuempPjnCGAhhB4BbIjVmVgUcZfMSi7UWV0NFlcjOiidmBMxqlGO5GXwAiBUogek3WcwjEBCqLN6akx66PI4kwoIiSgh+AqLkc0NYKEYa5jXsFwhUMwTziy8zb44tmIxzIA52AlFevf/MHyYCISAEPfEqoTDCxPrMhKrBgtMStBUTEpggDBE1eWREC+zjD5KYEP3azF9nZZrTda+TtnTbaPQAp7CwEFAE7oQZlpEMCyo4Uwsoum84uq0fVQb19dqdnWqUY5vjlqzOZIQvB1mVke9VdMRPiJAqJc9jXpy03iTkBBKUgkQqFA5igopgncYLFSkAosB+8CSGu9IltYskLsWSd4MhgZvpkpvrRy2RW40nwUA4XjqjKNLQEJIDFNCqE6fVbZErl/OOz/eGOI+SgELlyT3pRhXi6WvydbbZvN0y9RIvb+Zkv5Uy0CkudU+cNDAQjPK8B2sB6Wr3fpRQ5yr3eLuNIhmc6PzdF7J8xuLt3q6hxIew8iADgAEV4PiadPTn8ebCBDOgoSQKiQEXoOUqpdrYQGUiMpU1u6kbmlCzdLEM0tmtC6K+9lSJi8CGrzyBdYtcRyjHFF/sVZ/hakM9aAy8GzHhKBcBqqzymGhKj0eAKEbQy+uDFhkdVSIw8LbvDYjq67QZnDVxYKm34OWQIpCBHZ2+7KltD6FMGFB5ElpYKGFRT5jOJPN1a70NFg9l7EGy3ujAAscEH5tvnpuhqfN5gOEsCUE76s2b51aIEUHhHEkFRASKqjcKO9iEGB588FCCbJSBcICrMJVabMAFpozYkv+gbdTJKvCuBgW8LrmVxM+e2DBbMCrQdKfS3n5ZXjYhIq0xOK75NYHGSBcHgszKWOft3DzqumTPzP0XbZ8XDW1t1NmegQFNXFY8GUO8ijoiCwMTk00FMFCKwZSorTAete+PoWElpE+EQDCr4ze2ljWADq8GikBRsW+aviJUa+YNM6k9TLUaGwIWkxQo3xFvRGSH5gdEmChfllCeWpiMbPPxxb+nencV8YtnElc0T4vAcBtyJqKHPpSZpWkKGcxxMIxdn4THrrQiRsylOuioafJ8ufq6VfbWQ84TxfAgs3XONK32gpYCMOv5wwqwwI4Q+FMryjuBplJ6YVMbR+JbZ8HPPzK4C2bynSfrrDqrPoCk1oU70XFWx/bT0VW20ZvlD9lNIVRNGxB30cDwf+GPgXGIShVCxJL0N6uBYQAUYF3N1DdEFytYH8mVaUngrRQnppQjOFMFf8U9+pfcd68nMFqFY6Ng1IDQayEWsXAZdiFZoTqw2fKM2xnM3gex5iTX1ShXeppMv+70wL3cq1tGsj2LL36vMJtjKLgGPGRMDUMvRAHwUITxQfKPedkz1nDCJ19/OZ/afRWx3nbrQwQwqizKlyTHBDq4rydWO1Bb9s0LIqKYvxuNptjjOZog9lgNBvMZoMB9i0GE6NoQ8zQZwEWvjRXKU5NAr5uWObrgsp9Df4MJdqi8eZHXGygXyXVYDgTRjnesvcOm/NvLb/8EpviYxbOpKZoWU/PZ2HYZQIQBsxswt4NqbPLlistmLgB+s44kbAqUGrSv70e89tXjH1vxr7fpoAS0d+FxUub1TJrzYGhC2EYFvinXwYBsGGDMvJwIA4Ir5u8Fdb+TllTZzU8lYHlMti8VVbv61gs7p3RG9ZPE0VNmQLsH2MyASAYTLDDMIF9mhhEwE6MJSZqSCEB44vidn09sSidAQLjo5QgWFBje/yaH6X6jqE/CRZqmXk/qZLlREw/sOCmohVxFSsonGla4apbb2g4E5cQ7ErVfUkVqQkaSSDY58g7PCIgxDsybL/43xMkXyMgDcHVbehxWv7cGtfXinmU57FHTKsfLPT7DAVDw4K24TKVJeEBwyMofs7vtjXW62BZXSwNMxwbglZlOG/z1imeV4zkotVpeBTN2d8EsGAQn0aTgcAhxgSqwxCnAPacx9yF049+IaF4yeymZUz+r2B90gNgwQ8TtOZ6rXkBYAGDA5MwDGB21dJZRSmfKfz6zBNLb345ZS6GM8m1829UOBNxtCNDqV8+C/u6DigkiCCEClaI9bPV357++t9OEEAg8oom0Rhh2Ndk6Gm2vN+i9LbYPN1Us90HC8JsiOAwpJlR8ZV/bFXcjTYGCKPhgvSeUbwlNp6XHRYg+FQG0DKuNVpcTqOe7TgSMhrNKB6YDCgkcBxAQGDfG8zB5oXQlM14YVbnVz5zOjWhMpUFLVdhI/UKxuB+0kKgG0IVGPiyq+rmxUwax4QIjHJ0LPpMYUa8Y+msM0t5ONM7fyeNOizA2Sr/gZVEOJnM+r0KvWDgVEfWu6E0+baKxX/R9Y8TChCIGHdUYhqCgzkC+s4Ze+stV9tjsfCCIso09QtnRBj1FvxqLLTILvjt+dHpqOgtnuZ1TPOGLyEIAymTVeSPquNcTTogjIhizKQsmDga8I0rEQazYWgJgcgr3fr2rbCCJ1Z/M74sefbZNJClGSyABlGdzrqmamAhMdi2wGEhlfQIn3mhmC3BTIOArS4joTgVWG96953MsMBhYfgJhqHpBDZvenlhQgkZDNVezwGwIGynAAhlICEsmHFiwCZu406MR+qxdzya/lznYq43mf+7wvpxi811UQZY8Hbxoo5D2vH6hetBbbEKmCDEg5ECwsszvGUzvB1yJIDADZ5w/yBdeH5q0lWGYVPUlOgYISGoaICWBBPZE4xG45ToMBwNSIAGt3Z8GdgTVvCZpffMrFg+u2wJW/FB+AdYgLWewUJyor+0kBhCWkj1My+UYDgT67SYhkmUGbB2w1XMv7yDhzMBJrBKLKNkWHAwhFGKvjmrlEVcD6QyqCJNMrV+BkVm+o+/Nzo3cMNI1HwmaeH6ecPVdgtLr262ui8png5rvy8kKTwDI+oO3lbFW/3ZUQIE2fvCLcz+eSG8Xi0+z6nsbVa8dbdM8H40E5wAD2KMlhiuL2hMB6rKEM0AITwJgcg5b2blnTLl/Tntcafvn3l6OeuCVJ7CygtUpTHLALMtJPvceX65DymDwgKch+kgLO2oKn12aTILIjr/VTIDotVRkkaOCljTQK6Zn1icOgggJGoBoTT55hfvmXCZmwMQs/79BA2AWH7heuvUq07r78struY47IYWaVcIBITLoyQhnGDeCta8KUxA0IRTepqt3mr1NnS347AImJ1kAxUKTCQhxKg70SZTVESAQARoULlaOrGe/PJxr35hxsW/jXd8Ob6CBSokVS+lCiqUC5mgcn0CKeYqFISwN6p+TBbFBLBQv4xFOZanSBkZsfWLzTV3MjRwjjicqe0rDBDqvhFPHeFFElNooyJJCKBTJA/3emNEAa6HP3fEvNdg7OuO/dipsHzqizx9IFxfg9MfEEZLQnhW8h6TvOFLCCIwu0VxOxVfHQkdEIZFHBCMZEPQmBFIZQCZwWweDiAQUfBA7XxiT/nnn5lW87+BZ3FVTUtAmwBz4pekiAilxDLh6RNRTEJUUBMKSlVYKEtNqmJRjqBNJFWz1GPbi/OsVZ9Tw5nm8MILkVL130uX5soV/zqrbAlLuygfIDapVJUQakAVSoZ7G+Yo3XgKgILrb5n/6LQ47VJP+7TeVsVzAaGgRVMSIfxuCLg0u52yttn0iO7zJSy16udlGLLfK7dtssaOp1Tbpg4IwyIGCGbB/kFGRbMZAAHUihFdwz8I2bT3priDSTcd/7vbSpNnYWukJAxQ9IkKIlBBa3gMggUezoSHsQYKzEyRDiBzywt33HT+7+Lems1LQDvnRSoqTHPMlQrn3lI0LxE9CAMHK6qAgLaRWwq2T7SqkTywuVat1uiV+n4bc/0Ny7v10z5qU3pbZE83VkGhgmxqTbawko61bscWlkrZ32UUze5HdMNeqooQUQNo0QteLYYwGW0IMTESCwyOnhI13PV3NGhKTEx0MCAYNTKDwTJSQBBE7JLN96f+9MvTm++8+dSSpCqWzpCI6QwJ5WmJpQGhCxr9PXQ4kxrlWMuqM4HMMKsy7TOOjBmVC6e2f4mLCpGEE3+mcO7cwrlJJ+YlnMWasUNJCKxqXHnq9KP3s6fKzh6dsRoZ8dSnX6qpT3ap76Kx5w3L1bLYD1usfSzHQfZ2YXEkWuU1AcmqpS4cfYFxoheb2nvaMQ7hF6MBCBkgIUzznidPaFh2DB4OATv1ppHj0rgQk8PNzGRnkSwxUYbxggWQEIwWCzcgqM5HNV4RvzTERk0ZJUAQBEzjoMYu9tiXvnfTyeXAv2zBrUqbfS5DLMpqDzU1OEHVIPzCAEp9Fj8BC0lYnSm+PCXh5MJpjfN40ZKwMeEzJ/+eAcLL/5pUvARONaSEwEq+lKcozz6IcDfOgMCToz9Uw5gdkqsmpqfU8kGtfK3V5upkhde8uPiKmgl+XafDKJugDWCmcCDWUREkBLRVjvTmvWwUPR2a5KYwJYQ2BDcnAsJrkw8QgGIMJlqLDcB4kjlmyjjAAgMEozFGmBONYgc/DSbJaJSGbUMYhOB9vTVPcvJsoJkn7rnl+ZXxjozZuOAmkZuyMo07HLVpEVpYID2izN+8QDVRa1j8Q1LDsttPL7a8eDfvJxWePWFaOTMq3lLyjYSzzGCIcUehEh5FU4ZzGbPL05Ti9PHKbCIKLJ/ildw/iemtN79XO9XVZuvrUtytQeVTtFWVwvQpaEsqYbSz9xWbu0HubzeSejLSR/BK/S1GT2e46c++XK12AASrp2USpzrGaE36bN/EpIWxhQWW0chjkFQhAWWDGNXSKMEWZqTiMIisjsiqc7BU0fTi74L+PuvskqRaVlWJuSmx/7IPFijKUeOJCG1eoOBnVkc9nZd6hu3U8rDuqnwR8zKULI7ngBBaQvA1ZTjHHKnK8/exS+y7sdVRQhJTxb4jeUt8BdZcP4/pvWS5Vg/agdyHEUdYkUxt5SagIOyqCKF7OjThOt4pe502rvuPrLQpr7N6yeShom0RuB3Z8UxCaJvExRCMRnNMgKcPdHmLBWDBMMUYPSawAICAqY4m/2BFDhHwKUlmKWq0VYYAsttnHlodu2cj7My9tAomltz0beDiBAYLzEfJYAG7MGuVCE2S9cBxC4AJjctmnVkkn7ibOQ5e+lZY93NyuVS4Sn45PaF4cRLVSBlcQqjPSAAJ4SWUQ47cqPppAxEzEdyPmIC6M4OCFssHNXJvu+y5YGPVk0QJVuKgCAuk+IqraOqvsnbS7QwN3N3KtTrZc9nEUyxHFohxGc0d71SbWMWkNrWVWzhehmYm/DDJp3USAwKPDTaafII6Z0lQ6o1WyWqIMt7oe5gSExMjAMGoCVb0AUKsJI2JxGK333rqsbjyLQgLc2FmmC98dUb1v9xeDPL/sgRYqavSqSi6WtMsVIpBqS/SOAGLMrHijWdBYFgCEkhiSXihAiogxJ9ZTFJKyKJJCVpAqESV4YZVWA1JIgKHzIZ/+HF030XLh+dsve1WgAIP9ZdvpnVWVGOOoNMT/cTHcc28/hKTN84r7k6l77xytT62z2niNswRV2AGQLAjIHhbmZHQJ5aECQiNVgYIzskNCDFGnlXEJQRt9rHROE2aFg0LdFTUDboHAASDxaIigJ+jgaQXPOpGXT0EMVhYHvfGIqpZBJ+W179wU/WihKK0xOqlSRj/zFZtNdDR55oMZlVWqQCrQJcs+dyp5LmFqz7/XHiAgCqDUrw4oShZCwiBZRU1jR2TQGUoGSNACAwq6Lb89pQZ+Oijljh3i9VzkZnXAvo1eLRMHYnNsF9TMcndpHZYBijoUj5umQrP+scz2MNllDrDXkaV4Z0LJm8LiyvQ3nCwMKOt2cL2QVxxWie1ysCrEGiseWrWoYkXJcAQYoAFCQsX3AhYiAJAiI0lYYC7GIzBgDDmxBwQSdJbNh5L4JXiXv3bmxq/fnPZktm1rHfk7PoMzqeh8qkTtYBQlT6rNPWvixbMLZw71/H1sK5OoctVdySdWZRUl87CG0JVYvdJCA3LEqpuuIQQUPyEBRW8Zbx6Me73dbdcb7X1AWtcULztLL4odP/HoUqlCaYL0eXNyasNeLqUvnaltysO7ue5LYauk1P4XY1SyDa3IVwwuZttvvYxquWTB0s089JPQvHp9wGC7OlEQHh1dO5njEm145mEbKAJHjZplYhoLFMgMf6dEhU9qrAQHS0ZjVqVwQ8QTOMECERezptS/depRsGMkoWzyhcmViyZXZEOzM4CmHnxpcDcZBUQUrFYQfJfV/0LqCFz68Nq/TATL3pr5R23nV2SyPIvREf4AVSGhmWJ5WmzEBDibwAgcL3gCg/acTuj+/7D2Psz84cN1p52ua/Z6qFWsGr64TBawYaukNas9oHFCmzurmk9F62uN6Y2vGB87uloFvM12h5/0n08lSAhyNoC8oPfOQ+H6MadTqzTMgkBgVvzzGROxE9EBmJDkhBImxDqfDRGCklxUpQhevjhxAEUAhBMPs8jsyGMH7GEiDulE/eQO2/quXm3nFkY7/jy7MpkWLVZeECZWLhDRgiogFCS8j9q5gMgfL75q+Fcdo5z3jznvL+suCP+pWRmH/ABQggJYRYCwqzKpf+rJD3DkfGlUQUEJo0f4151FlFwdkpfueF6Rew1p+XjNsWNZj1KQHBzXtZ0bgofCoJ7v6qd4gFqPN3K9Talt326+2Ks+1WT+8+s/StAgf0GFLmkNIT+QkNfg0yeEXezWh62KdQmule3KZ5Xld6GaZ5zMUxC2DPKNzY2BPo7MGM0ZRrSxm2MPtlArNrcD0gVjQAWLJYog2EUYAHOYDJF+xsV1fRn9udoPGjkRIJB7XxMmZw39WTGTSeWxR+Zn1CRPhsdkcCnvnghTbRSSJUhoTj1czXJcxwZn28Oy4bAAaH8joSTC9mFBgUEsiEkVqf9r5KlowgIvpaOqob+UUM07L9bF3e9U+ZQ0EF9mlSNQM0CjqSro4oAamASQUE/9Um5IF9vUa7AFWtj3eVGbbbCDQr7IUDwHIxhO53Y3r2TVXtj1lF0l1APKd5Jqg3vswX3X1WuN1tFXJN31Q25vbGgKVMAFkwgAMQYYzQWRYPP0iiKm6k+CC0smM1TYgzhVjQKSRgwiVCgjUZQ91kiw9jGSlH2NEABYsLUigU3lS6+/UXqK53BEh9q07Eys9aoGKwv+ACB9VQqTv6rsoy5l1b9n6q7w7kFrjKUfyP+1BItIAxUQg3jEAB2RkdloAKhvNEh8uDv66OddunDWqvrguzuwH6LHWji0zZu1kYbRgAFfl3b2A6ty91KX6vt7erYj1vN1zuwPZMdEyIuj0UEILtWkcFTZb7WYL3WYu1pll1diuei0ndB6T2PWzfb91y0uWG/RelplT9okvt+bfa8F81GLHsi5ZMMi6YgLDDuNpi47qBGJqixxCYhMPAUAw4LFtgAT9jPw6mXHkRReF1NRRQ/3SEm0mIIIyFgw450qW0R1VeZUXnnjKoFs04vSChPo5ZqrDVkGUKBqiCEcjv6lH3udqxbmng2OTK3I8KRXLwg4cUF2EdmAAlBvQcWqViWOnKjIg8rels1GnilPzSaCwulq43WXoz/ISggadkn3kfaqS3YckgnbGc2SWCxvg7lvXNTr7Wae0QDx2LJe2rULIdhDQXaTl0dhr7XjB9dtLzqiPtjjfU/HbG/Pi3D9quX5CtFyp8qrD89NRUO/vmPjH0XDJMxf2EImhINWoAUGxttMBiNfrVKYoy+GEKNR4BbGGB/itGIeBJ2uTOVoqawSKgYEYlk8gcEgynqxoUpCiJbAUkFl1bNrEmNL1+cVLQYGJ8WaBAMMEs62Rd0VBpsPQhqG1ecnFiWltR0V7xj0Ywz86XCuTOPh+dlwOousmNR/MlFQ0sICAgJFcm2EQQm+YUaFrLP939uvuyYc80p93QwmyEJzIFQEJ4bcXAoYCFGWFMRVuHeTuX9RqWn2dLXpkLBaLd4DndAnNhx/hIHxo9+FfNui+H9WuO7tcY/1ZnerTW9X2t6r9z4k93RXI66NGo9ZyccRXODYTRK7CTMq0yqyvMmkxYfaHGHDWAhNjYWYCGCq7EoRIvBoLUhmAQgRN9oQKD0ZNVWEFefPLM2jVVdYwpCOoYNo1QQCAWBreISAqCghDWWBWVhNiuslDaz6avsKl2fA0wI665woZdPpSS+sDjRDxAGSG6qWzq7Kl05PpzQZa72Onyhhh++brhUIb3vtPa1sUoFnjZZQEFAo8bwbQX9wVDQrEJBO0CBrbfL9pEzrqfC4mowcM/mOEGBb2SAx1+XvL9Th4ju6pK6OXnqFgOEo1gu8pPdzDEqirohxMSYozUFzVQ7g1/YQIxPVOCwIFmtYWYkRUUZYqVYg3oSjUCCfg3jCKqjDE5e1auIYQZTW746ozxldgmroQr8xQKVy9MSygKruAfXZfVrDKc2k02qwjyIyvTZdWmfKfy69TWszPxWUrj3Rq0qTybfDipDgFGRF2FIETnaBAhwOeVHD0Vqec/Olhyqpe7qCcNHZ8y/rp7+ETA+izoWrRN8VYxUT1xE7gNuXtAUP5E9FHjcqXg6ZNd5W0+bta/b4u6KEVYLEg8mAnE0IKNKG4s4orgjtl8reU+g6XVyFK4bFYqizkpGo9FXBplzrp9z0F+DMJO7MCqMQKaoaIM0darG7SiiILjhYpRtCP7FUsxFX48rnj+jZlG8g/kHkzAKUe2FNEjldl4SQS28lsIPACjAKqwMEKrSbzu1eEbXXOtvEiKuqIaAYD2ZnHTsTupFK3IoQkoIIMnEl6fIkQOChBO+97+NH/3U8ssK6/VWhVcKalEDb3yWw+F5ElUQUFUMpnFQtGGb7OqwXW9R+qqnultNXEqBzwtjZDmMlALiMz+BFoOwCYUFbnWkVdvXVsmHBmY/wwJ8WgxDd1yS0MsQF6f1YmhTHUfTywBcpimnpvzir6dX/5Nkn5dUifXVa7GDG2f8wJZPfjwY1F+eL9YVqbPr0PZYlfrZ6gW3tvyz/PO/Hma72M4vwd1aWu/8i+fQqFjJBZWBNhYMWbFUPhtu+jNN5uefMFT/yHTxdOyfW6Zfbba62hQvJiDwHs2+pJ4IcpF8UNAcAAVqiNEFJnW4OuRrLZa+V2Ndv4h1Nxu4B+HKxIICr+gyc0UNygrYqBjUEdRuJtKdjxlFRcdEYfGiGBZKZOF1kk08hkFT28QUweJOigmTQMxaM6YqexhH5NOUJC6rg2pw4h5KQ57a/qUZXV9MOLkw8RzLCUJ5Oz1Ry18qp/unOYeAAl7FvSyV2QqwksmMsiU31S6Ydu6OETWP5s3o7TfVf4tlYVejo7OcGTa1Gyk1eN2UhKI0uWYBV4KGHBKczz2vG/7zpNLTgVLBBRuvO8T1gsCui2GZC/wNBb6OzyRvdCu9bXJvh3Lt/PS+16b2/cLU9x8xIvB4okndTFwRIKBqVR2l0f/dZfzP9tj/bjf+ui1aJFzzA66MNPl68hLry2wwGgxmjUfALOIWRFhj+Op/tCiRZDT7ZAw4c3TYbZuCiaAANtVWMPVH37vp5LeYYl6eloSpi0wwKPOVQPHFD/jZCkJBQUkKcSUZHOC/SSUp8uuf96ujOOwlA354hdk54167M75oUWIVq/o+u2EZsyfUZWD9lqWsDnxDxmfqM5i5ozTt5rZ/iv3t7eFclDHgO3ye97XJ/a9SdVBVHtDkFYbvRBgk2pDtoyfxY6f1zXOxVy9Z3L82TnDBmw1RJWfzvl/F9Lxm+lk5s5O/dUxq3z2Dtt/uY+/5d+XGay+bei/EcNyonCimj7GjKIkUAYPBQB2XuItBWwMN2TkiQMB+rzwIQZPZxMBheIBw66q5t56cK5IRLHXfuIkF7Sxh62zNUibY1y3FWojJiZqKqaEs+X6KA9kMORQAY9ayiKB4R8a02m/ya1EFxZHH1IIwg3LC1LpvzDizNKFoYcLpxYmnk28/vfi2U4tuP7VwVtGShJcXzzq7GLSe2M47wscf5k1zSp4ug7vJ5n3V5g7owhyelWAwcwHaDHm0YQfLUP64SfmPOuX9S+arr8WIxKgJiANEPFrbKfV1GXs6LR+ckz9okD9qlK+1WXs6bB+3Kh+3sQ1EnZ525cNztndr5T9VWK93xPZRlVfnpwgTyMAYw6IDfNnKfrVNfBELppiYCBZ3o9kXlSREBQqRitiGULhq2irm7p97aRVs07v+5abqhfFFrH8TkwcqEBCCoaA0NRAN/AMRmeWwGKGgMpVKJgIUzC5bcvvpu2c4lknYAVZ67fNcIBkVEk4Q57wZ5QtmVS6OL02dWZJqPZ1ifTllJmzFi2Wn2joq7Osy8/glydNscjVit7IIfQeBQQVOf8thI2JLO8YVXFCuN8nvVCsfNcZeazHyRirvYOGCCYsGqgrjKre8X830qb5u2dXGDClerLLo7WYFIb3YqZZKx7tbWS52T5fybs20PqdFSBefbCJ/QbTRIhKgeByjNgfBKAwIuGMwhONlIIoxmUJKCMZIIxVhYT2+AjBhbuGqvyxc8lf1y28/m0aGAtbxpDotoZQav6rFTEIEFfgaKfqHGKUmUo0U1hI6NfFsWnxJ+qyz6VR4Da4o3Yge8XDCYyspRgIuNOeyWqwVtzn4fUTNJdmEfwUlhEaT28kiD0W1gUgTEPqdmoAEKlbQjCdsAyayXW+RP3DK1xstvU4Dr6BymasqE5aE6OJusrhaprOwTGpE24qhmE0o+QQlN1HaBYuxvAiDYHXXmz/ZugMxNRPpKarZPwFKKyHw4AT60xxZUpKmQoumbRNWaIkYEBwZN5+8e5ZjOVvNqRULlkvlfO2reKZpxeIvFfhBAYYkMSsBOSWr0gAKZhQtm/HyXXMofOjI/TMPrb6xPdSOrbzNkfEXlal/UbvE1PotqfYe2ExnU01lS0wvfEH60V9JYRdaFlYyj8PohkneruoI4fVN02KCHxQ0YUlSFm0o97Rb/3BOvt5lYdG8lxAKankMzwQnGhxPufF6jc3dImOQNlV+UyWokOPQjI8Po3Ge5Ttcq7N6qjG26pUJjX4RU1RMFFYy5IHK3GZo0oQR+ho081Ai1VFIlRMiqqZiMMb6AYIIaTCG7XZkSnS26ecPTW/ZmFCMQQXYZ423QisRMQNcC/CVSBVSgX+NRCqUivFFaUk1GUllqX9ZfMfM09+KO/4dJg+w0OKMmTe6QpEmemoeJWCyftN2LiTQnxJWlQ9TXxCmPEnC1S3c0iXq5Bd+B+yXhIsmxhcpbtCpO+X368zXy8y99QZuZKvCEL4JDwVE7J4PRWMNdhsoU+5GbTVFmUtEvvQNRYyDQEgvpX01WLjf4e3xfqRRoSnRUdFGSbKqTZnNIlhIxCIaNPqC3wExGI8UeW2laJPFIFId1URL2EwmE8t+GpKEEu31Midg010sAaE8JTHIkxhY4CgYBAgcSpKZD4L599MTqtISTi6c2T3X+urf8PrJhx9iiskYVC+kVlNnvnjrc3fcVpR+W8VCpXGZUrdcqfuWXLoENtvBf7b++PMRWBQvq52JnPNczVZWJYwnLIeWEPwMBWpYQr8IMaLahu2gQct/rrNcP2jqy1ajDTt5rcXJQrwSQo7B2xqLNdV9TRk8KhRobSzaTjGi1RSr8HbB5qqXPS0xFOE8eSkg+kjrTFQFAJPIjNboC4yLmW0B2TYKwCQq4pxHtTUDnMdo4D0a8E+TWZLlqHAyI7AFfOxPvpVQkTzbeRfvphQUaqhRCgK1A020YQpPbKxg3888lHHz83cr1TycicU13WgFgQhlgNjuv1fq/qdkl0BPSUSTJgg/CY7kBJZ4lTyrNDmhePH/KFsyo3ZBbP03wrkrHnvvZQzr67ruDCEhaHqlcSgQ0YZuJ3oQLjAo6OuyfVQd13PZ3FceQx2wvft4IYXJRRSB3F9qcrdZmfrj11RuCD+Lz1HbyrozuBrjPO1GliP25qTUGoCFKYGIxycLU4DRV6UkoK6aQZUTosmbEB0DaBK+CTGAGBBFR/vCGqdO5TcWExNFfRmGpOKvSJfmKiXfSCzGEsQlQVDg1+c9yFDAO7CkMEUDzY+zK5KTjs27qW2Btewhv7iCsXm/cLnKOwEQbilJSypPY4pPVXrSuWWsmOq5DN/WsIz5O2CrTIGbjN2/bsjQZd6YGNOcfZ1MB1WQ1TmvxhW0ygAFvW2Kq8P2ntPW67C4ynnmL6sDMG/ChRiFSczQ4WC2Vlb25JIQD8L0vcpqaDf2gG6R+1osIiVqEhHjYh5UYIn2K2koSh9oDAW++GSNYzHaMBbpyUPSS/8q2ecpZxYkYt8lTYdWf6mA91gJijakuAKWRIxexWMrp7+yiGIFJaf9htTqGoTIs+CcZzu7MOHlJUl1GcwuSu0jsY1UQinbEtl+Kk+kqlsKzzX9ue/xvjMD6zIDAIJPQvBVLtKkJfpBQYf8YZO13jHtvaOxrlNGXiBokrY31RAvr9pt9uBjqibTcKs/cQ0CBgrVqHcd00RI9mQhnsxoRvncz2UgnAU+m6GvMjMmRMdgoaTRhYIpqLNEYfJ1VPSUKEOUFH4W9RFWQEA5lZyAZc8TS9S2CP7lCwIjk0tSyOTIpAJ0Q8xxZNxU/T3kmQzJO398FjxUSSzHl848NI+JAVXprKFbYM1GTdBUCWo6LLw5Le70t3hthwHIDxCcGkDwgwKhI6hQ0KawcsfnGRR0OuSflFp+VopBOBKO0+QvECQJF8NPYnnuVRgdqENoDTBcHYq3e5q3fJrrJLaBPjLeDxY2AftFo6pu0HoKhIQQkH4oqrKz4kijDAXR0TGG6BgLohPcUjSWeYyxxEjTpChDeBYJyhc+y8IMGCCotkEhGPg1VBLRhhXYgbEGjk+Od2TMbMAV9tIq6d2HJO9qNtfHhY7cz1Idn7+LJWBWpmtLLnPxpkykP4uyiqwWa2JZmuL4F8za+MJA59baENxNWpHA31zgRBs7VQvsUFzdyseN1t8Ux/2pwvxBJXMmwjhdXo01VcZyZG48eVrgqdFvItAyXD+sLACh/6LSW2H1lCMglI33I0VCIoNAE22odmTQdF8VKY0IBcOpkzYIgVQAFzLyVClfpQV0Z1hYgHQ4VkoChCKQDRggiE7NmpaLwpMIUMC18oTajFklKXOcGX9R9SgwCYsrgPndtohhwjhSJwME5dzdidT0Qe0Fn1CWGignECzQTmXarPLU6UX/LIFE45w5EKPyyGGsm8rYvwXbIzbLflCAjZY8naxKUt8F5VqD/Mfa2I/qzVcbDVRo8XKh5Dw1plrUmJGn2QobxmtFVgFGKyEwxapqmrsKu8tNHpVBwvhAtewAlwqEeCCqoIgoo2G4D8IhkFOA69U0SV/0sugdYwvnLCogJBAgCDahNu4ECxRtSHEFdRkJmI5080srbj6xkqINYy9snElphuNIlNbktSvFd4uu9KGysAUmpBL6kYo0vXpBbPX/5fkUIU8PaHAOrWcVRrczjrcvdPqggDFCF8YVdMtXW5U/VViu1Zl762N4iJGDyxifVPIBgmgaNTxAKJvmrjNPurwG0exVLW5g1kgIaEMwq3EFN4wAENTAJxMXDGiHCy2WaNAjhsQioTKU+SQEFRYoKkk1FFQtjS9OTTi5cIYjI+7Fu1mIkd0u71t/w6MNwyQKPOj6spSRAeoMNZ4eKOVKZGJyiagi7TPli+TGr7HR6PzSgFdoUEOXm1EjCIg27FRcnfL1NvnjqqnX2829HTG8UNikCjEaNjE0gK1DuFfCVhm0gAAqQ+U0V5V58kkIwmbIw4E0NZFimUXvBrVvCyD/pgwmgVFcYUG35hCnwKqkSilWPlRtCAkcClIw+yA9sWJpQnHqjKNLpv/4O1OPfofnDe3aLD3x2ISAAiIEhKnNf/XZAwtm16Vjy+nkxGBlQSMhCNcqHJxUkW4rShu89jKrYHxJ6q82MmXhFZsbK6SxNRFDjHo7p/2uOu76T82unxq47+CVT0W2Djcqvh7rblF8cQjDkxAu2noqZHeZcdLZEIxCGDCqeQqwxcZKLFhoStSUMWqxKsyV2mAnjUnTMjQgNPwrq1tevYCxRu1S5pUjgxvZDCtYPM8tL9wxrWRB7Ol07kYEkeDYygkEBUQECBcTk47NS6TSjoNLCL5CDfCw6QmOZOXMUICA9cz7Wwxe51TWb+VVNKq3W3s75fdKbNfeiO19W40rmGAljG4o0ZN6us2s8Up3pFVkZZ/bsV3xdsves7G9pdGTy8sAZNA0RIg2mqU4I9VRv6E6Qojb0ICAgWdTmgRKRFvCyIAuTmWBSaWps8pTk+qXJZSRdz6D9V6sTJtbOPf2Y2nWgw9QPVUefjzRoIAIAcH4i1ukwrmsVlJNmk9CCGlDEA6UUszlLFoo16DnsXPAYuyiE1PvK7F/qJA/7LB90CT/1hH/cafc+xvTBC9dcuOIxVo7pP52k6fNCjJ/mI3ghYvBI9rWs+RH21vHVOPt5FEZoqJZc0emKRiM0tSpUUaDFD2mOCDIyMOVTaLskrbQitEURsIjph4rRRkgM7N27dgNOak8Ff4z3bFkRsV9HAEoP2giz3MGCMywqXTPT6rGRvAigiJkEILWqFiWfNupxRbnP7KJeGX+YBehEmpvx1x7xXT9p6aPz0/9+Jexn1ooIGKlEQEQSkyeVhsLTGoSneiHDknyuW7xG3cTiFsG7tCZREZFVQzASonjGW1owMwm4ezwdWwxoucRhIQhbw/5Pbb+jptb/vH2H92Z6Fg0oyI59oUFPBBn7KMNR0LoZZAvLEwo5y4SFRMCFYcErduxgkUj3PQcuh0ZqoRbWVFbwuhTiAOCeC7DWaO3DZO21LrxohXF4JjgEw+6AEzi+puxKfwbn+ohHR6BeqJCgdnXaVottwKbOfzCy6SAN3zFUjePZwe/s3oiVvAcnGrXs9zqsu/cfnYJq+9UqRESNBaDBIqvUGOzMbw5WXmB1ZGWSsKqnsQQ4K2JXsJozIhrUo3R3goWnsSyOBvVIpNqsrMv81GTAulXOw7tD95zACkG6v2kU6REKVHMm2DwpUuIhMpoozk6nPRnIvK/izpCr3whzDpCE4vQATr1xWXxxxfxxo5nk0NbFDUx2JjBkRbb/g32yMcm4VNPACIZ6eKLBnc7qxHd30olEfyMh0GfaugyhnB4LyiuJlt/UywTD96cVPrChCKWxcDCk6J55jVPhcb6aWGjARFF8gMUjGJtwzEmNblp+lP/NLuSmUaTWKhVMqv8VozJTXxLmVWMgZcVrNzrrLJUXOQk6Z2ZkxIGJwCRAtW0n4mjPc44z0WM02iU3Wq1NFZASS2AAF/S9yywEzvV9rN0D5vXEc+Dwz8Z1VHGj6IoCTo62vc5ts6OCURY78V85LOwm1SzjEVXVrHoSpbrVLdU3eDPZSwtujotqWrpbRWLLW//zdglaH9CifTLxsemOO3StQ6bG4M2Yd0HZmcs38qym/tb8LNVIRDov6B4OxR3p+zpsr1bOM1VFCsa0umk06gR+R8b5yhnv8p6ylSmsrTHihRWvqmClY1lhV4r0pOqMpJKkyX7vKldmtYwOg2XeDaoXXq/Ofq9C6Y/V8f1dLD+171tcl8z2zwtstupuJtlV7PcC9+0Ktc65Q9bFXbkaxbXW0ZRt1knnUaTfF2f7HHtaUrZN6TCuTOOfiXpWArgA2zTX1wQv+/LM0q/GVv/FWPD/8N5PLE9qpOERJwG69LyX4arrxr/u1D6sMH685PmK5Vx1xrld6qtH9TL79RM/cVLtg8rrL9/4ZaPz8X2XDDozhqdbiyR9xDDEiS73XggedqRf779+fkJJxbd9uKdtx79ulK/jE1f4WfUl6VRooCQjA87Y/6YZXj3qPE3zxreKjNeKTde7TR++Evjh2eN7z0be+2QhccgXdbRQKcbT2rzqRBxFNSi5fIcyalrCqNPfrBAoOvFWFe7//fZvFuTjsc66fQpIWL8y7A52MaFAccnpFqUTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTjrppJNOOumkk0466aSTTmNAdqTNmzdnZ2fvQoKd48ePO51Or17m8sZQRkbG/fffv2/fPhp82Dl06JDD4Rjv+9Lp004wCcW0XLVqVSES7MCfgAZXrlwZHBPoh+uR5s+fP2+e3udoCILhAjSQcOTtGoI/Dx8+/MQTT9gnSyNdnT6J5ECCSbhhw4bMzMwcpG3bth08eBC+9yKF/CH85LHHHtuyZQvNZ5jkNJNXrFgBkDK2DzGZCDCTRmzNI4/Yc3O3ZWZuz8zMzc3dvXs3jBv9a7zvUadPIxGz19bV2XNygJ0BDUBryMrK2r59O+xs3Ljxx0eOACZcvnw5GBbgT1AoSKiAz3Xr1uXl5cGXsA+z+tKlS7quEUwwyHPmzIEdGDQY57Vr127avn3j1q2PP/44jDmNIehrAMg6LOg09kQmguePH7fn5RUUFOzYuXMnTMfdu+FjJ37m5OYyUfbMGTgMYEH7W4KIg4cObd6yZeXKlSAqrFmzBub5gQMHjh07Nohc8Wmm1atXAybce++9MKowtgU7duxEi81O3PLz8+E1wOeWrVtJ+hrv+9Xp00WkKRw6fBgm505k/9y8PLGBNAuwkJOff+LFF+HIzs5O+hUtXmfOnHnhxAkm6RYU5Iif5OTAJyxwJ06cgAP0ZU5LgJAAlTQmuTjU2gGHQcvLzweIyLTbNz/+OEDrI488Mt63rNOni7gxC40GAAhZdnu2xsYFMu0OQIn8/EM//CHZGfx+hbN67xNPwDSGM4gNvnwCvszL215QoAOClrKzswETGAjv20djle0/4DB2MJgACOsffXQV0njfsk6fLvIBQl4e6AvZuO/b7Hb4MgAQtFZxAJB84noxt/FXDCLs9jUHDmzDHR0TiGgAMxyOHYcO2cVQqzvZCAgwnoDDOiDoNC4kAMGuBQTxZShAAC3YjhELAgd8x6u/pbnNtGD0oK0+dGi8H3RCELlsHAgI2aEAARQHAARdQtBpvCg0IIhZGgoQQO7NyMiAT/hv/o4d2oN9sJCTwySH/Pwtu3bBgrh+377xftAJQWRohWE8OCQgPPaYDgg6jT0NAxBo5+DBg1w10OgXAXM7Nzf3u+vXw3fz779/vB90QpAOCDpNcBoGIFBMwvPPP79161YfDvirDDS9t2zZAuqwhHE44/2gE4J0QNBpgtMwAAGmNOkLD61ebc/N3b1nT47WYJ7D3Ax79u6Fz5dVlXm8n3KikA4IOk1wGgYgSOqKv3LlSjiAohco/EDEIezYsSMvL6+5uVkPT9JSBEZFHRB0Gg8aHiAQUajz2rVrQXeAOZyDgUzwzbZt2+6//374PIPxjTogCBJux8d1QJjk5A1FIY+E1RMkaqZow3LgcFzOziZWykYa9XtgAjxtly9T2CHMt3lOpxQeG44EEOinwPgbNm5cl529eufO9fv2bd6xYwsS/TfMR8vGUQp4rsv4RCMZOtJuiMQb8WJ0kNPpFJmGsDMqWd502stI/EJ4LfgTbgAmBkAo/HnjAIEuQU/E00/oHvBPuo0RTsKA59W+JroiXUK8TQdOzjBn40BX8XuJKtEbHBXOGgZRjJkfG/rfA7wFuEP60o5ZwwQZXkz2oW/gX3PmzInUwqZ99pCAsAL4FHeEeU9CfAAacp6PBBC0PAXzEOZ5hiaZl7hs8EfTDlrIR9MOHRxGuVThjBhc/QgS/TbgjRSeOqUdLvrvlSefhI2m3JCXCDmM9IK018pbsUI8CBy2Z8+egydOwGGP79gxWoAgHoHmlfaJgE499phXHVsxkhlII7H0ap9X+5qA7sNwa+1LhD/ur609hLFYw76KpH2J8Fzl5QHTIx6JEsfGgGDJKyoqampqamxshE/Yh28kzSwV90YGt2eeeQb+Ow855cknnzx0+LBdDVKV1OzXIS/qVVcc8exlZWXsHpqa4PsXT56kS9BVth07BleBSzx08ODqgwfFBCAAH+gSIwEEejWZ+/atfOSRH2zf/kB+/g/27t2Ql7dp06Z9+/apPBGaED8Yz9JNFhYWwoRpbm6uqakR85tuD77Pysr64Q9/6Id4Az/O6tWrCQdordyGlAVr1pkzJ+Gl4HDR+MM7opdy8NChcrgNVccffMQGHEOkZwsLX3Y4zhQVlT35JGM6vNUDeKFV3/8+TW/4fvv27SMHBLs/LV+58r5Vqx5++OGcnJxn4IRwgJplXfPMM3Ddl19+mRZTMYag2UVq8vX6C1elpaWnT5+GdwRz79jzz9Mj05xvRnqmsbGgtlZb9iHMCwFrz58/n34ibvoAspUdXyK9QcKZ+9GvTSUmaO2O6KHCJLuKunfccQdl+MLUglcJn3bM+d26bRstRnTbP/rRjw7/8Ie0nwdvFqiggMxrsJuJkXsPPvQQ3Hw4gyNkMDbNnn2W/P50D6CnZ+XksMw4ODOcv6BgZ0FBLv4J38N/6cy79+yhCjyDgPNIAAFGPufwYXgNGzZsYIrD9u0bcHDgT3g1hw8fHkhCILYl+bmysvKHOGi5ubnMQZGfrx23HEz5saMHE54CRniQcRNPCmfeuWvXvqee2rR585o1a7bhC8uhESsooC0fz89GLCuLXs3RDRvq9+yprKoafMT8CGDn8mVY/uwYxZ2F92kvKICHwYcoyMdrwaPZMYR7586dcC9wS4899pjdPiJA0EIBXHdbTs4q3M8loqxJ9Ulhg8eHqUvHw0A/jOGm8KTHjx8Pv3KFdk5m5+ZmYQENO+a85O3YAZeFt0bvLh//JEZYv349jAY8u12tCjX42Aq+g/e46fHH7XgedhUWX5+XQ3NDfYMiTxwOnp+Ssnrz5sFXopEQXei73/0uPNGuPXvgPkR6GrBJAb7co0ePCiaFHXhw+JedHcKO4Rv+kP+qoAB4YRu+mkHqZYl1Cl7WU089RZfgA56fD/dAQe++S+BVWHAgev0KMHmZBpbga6BrDQ8Q6H3dd999NMnzEI7orogT+Nt/6qmBLA9A+/fvpzJNcOfwAxrbAv+HYoFPNOD44HRX69avJ6E35IhRSQc4ENgc5gycMA/PDD9kM0k7YnR+dIsU4D3AT3ZgMnI4iA00B5QdXBFgtDcCo8Gjw4PgUOzQXAuukosTAx4B7m3Ltm1bRyYhwPcEKQzN7PZNOPGA5RjjIx4EPCkNrx2zKdn7gtmYmblr505Yx2GCAbCHqZvQLAJZq/Do0a3w0lXepJysgLGFK2bDmOMLhVsCqISBpdWTloOBLkRyzbJly+5dufJxu72AxhDvP2DOF4gJT1MoNxd+uf/554fUVYdHm3FiPJ6Ts2X79r379tELZagLo7prFwzFdqTHMVOV3jhNLbhDGGS2ZKifQLnIwvmIbFuBj/bsGWQlIrEH5E8YtxycyXBlOnk+rjjk9KdViV8Fv6FJRcfn4fyE26MXQSHHARcaHiCQkPPoo4/CVfbs3cvWQno0dQe+zEX+pesGv26YyTBDGBTAjMKcX1pQstVn4U8EoiIlBePYws1sz8rasHEjxU6L+xGq5XPPPw/ozTI34WXBQKkjlqMdMbiEeC/4mHRYHi3qO3fCGQjeB9GyvaoRiY0DLgo7xIMAI/i/GiZK4aSlmbNVZDgOCxDsWCcB/vX4li2wQOch7+fipQvEk4rphzt2NUSE7pBzUEGBkHUJXgbhBYGQBbt3F2BG/I7du+luaRkKeHE0G0VCN3wSzMJSuB7xnDJigi9EY84YCtcWwOc8VVykIQqcHmpZCfb64NHgMA0N8kTDoEf2719VWLgRFzu4MbifLHVSCX7Znp29ceNGMZ3smsEP2LLxBdEQ5WGc/y5cxAey+wHLbN26NQ9ZhkY+W53DIc+vDSGm4eLxADjNs7EgUvBbGB4gHMEySiC6+JKm1RvLxkm4E2v+wCepkwGP9v3vfx+AlOs7iBtZATzi/zh2fHA7RkrDw8Bvt+Tnww3sOn6cTkhoUFJWtgVmLCJAHuIh3Uz4I0bnJygjZhxIIRX2w4fXrMnFaxFfCJAJ+fZJSoHNjiIiyS0RAYJ4iczVm5lZgFIBv7S6IgzymGIkc1GNBSZl0wxhYXAOIhjfkpm5avNmWqZJXB/sxeEViV9yNKvh3Llz77nnnpAz365W4cPzsbHKU6e9feCrZGsm/E6Uz28QIGwuLARA2Lp3LwwaqAyUvkePmYOB+rCzAdd68Ub8Bl99BX7PgpSHyz0NV0iV52tf+xqBJCkg2QNMs2Dwyfa/B/gdrY8gVd6DVXpGBRBoH8QbuEOCtYB7ACjIw7cDhwlAsOOaC4oGfJ+DhhW7yiaBUwgZOeTQ7d6zB3ipYN8+eDVPPvecpKLBuYYGtlziEgwjxn8+AFMM9CfZ3OAkOeqdkA0t4O0QysEn6EQ5GglEy9qBN6+ZukzpAylCPHjYgAB/rlixgmnWGzdu27wZRp5UngEfNuDBg8aZjAygm2dr5mowI5AsBJ8gbQoZOPCiSFkDIHC2mgC7AxEMpgEMYMDYCkHFjtU5aFQzgx5NiHl2YWzUvD42G3NySCUH7WwYXD8I7cLiw7l798KSRIBAV6dHg5FhEL1rFwP8gBEI+jN4bhOGwFU2btpElme6KE3voqKiHeiZgqsEsIyYbH7Mqz2//z78vACVHQlxPkAMHiEgkBgQ/PbhSxihw4cPi18J/YiAFAYtW/uuxZ37a/r5lDylEQ5pUYOXAq9mF1rDtOIBvZdgkPEbE3UF8WNJ/xHbgahChtxgR+ScOXPgfa1Zs8ZOOVyoI4RYCAQvBDwpjkK2fwWJIQGBSUS7dsE3a9euZWrg7t0kNAZOg4DnDZp42suRUJSHFm9isWAtCZ4UhHwSh/IQDTgEBZ1QKPhcbxJPrV6dRAVmUgOlcs8eO2qUdoQgO/IvPB2Z4wjVQ9w2Mg4V+qML0TItBkHYf+BUox6cQNXIQR0GuNECgrhPGsyAFyHi+UO8I827gE+m+hUUbH78ca2JjGRU7anE8XwqwcqLoyF0VWIisuNpz0/7WSIn0W5fvHix5J9q5LuxGwwIZMfIQ7mInTOId7IRJWg/F+UHkkhz8HlpnHMwdYLZtPPyGCDs2iUAoam5mdCDL+4aZOY2HzQ6kWyZg4O/A0fM752qn2ThBLH82WefDVjIaPRA6N20aVM+6q2ZAW9fO4Zq1qe4mewcf+YNW0I4fvw4DCBofyAIseqLgAZajlMfJFtVTHaqdRpp9LJDPimOMJle4bSUiablI2F6evKppzLxtfoeULPD7WYUvo7eIv5l0FvOQgEMDtuyZcsmKqmhAoKgPC3GaqYHWc9oepDlNlud/GJRBpyki5Kx9IYAwhNPBAKCRgbI1twwDQJs8NTbYdKSxyHoFYg/yeYA8w04S2j39BQAksxJpBUJxIPDqKoDtXHjxkc3b358O1wti2Y+2TMDLsqWPLQ7Pfzww3b/VcD3Wm8wICxfvpzwPxtvhvOshhdIeSevJbV4gB2QITOxPjmVfISZAG8cHpZWEzhGUtX5g4cOZeJsEX4oO/kvCGTs9ky0ZMIP123cCGPL0AYkjQFGzK4+AgkJWkcJadMPrF6dQ3qfBn79ABzN4wAYZNbj6q3mbfrmg2bcBgIEOBYGk2Hg7t3ZGoQPYEz+okkbhetqFgWyq/hNQu28RYKhpvgN8bDkVoDTbkMzmlZr1s75XPTeAkLSPcOLIxenT5nSXDETbxJUFbjQ0qVLtfFUcM8kHgQsvtmqeYfeIE0PJgTAHzg9+PIKgwwqQy7Ij3tpxMYIEIK4xq7qRyTnwDRet27dNpz9QqoJ/mEWspsd0YxOQteFYYHxhOG1o+vcruIMHQNj8MQTTzy5bx98nnrppRdPnXr6wIEtW7eC3pRFBU6D7jMbL5QbytgyNoAg3MqkJNKM1V6lAJVZZgTAJeZRlQBG7r///oceeghGIwflrny0jYO4DmcDhVpA6GYsY04eN3peWhZhTOC0e2HEnnwSPk+eOgUbSH0gdcMiRTZev/VIffwdQuKy21euXEkPTtJC4fPPryKb7c6dWQFDTXyNt2FHZzFI+HAhclvQ/WtZOBwJAS5ai6EO8MbJNZMj1CJ/vub1WnNz4dVQQiVsMD3sGs71SSma9YIWXxhkbbo6TMvDGFBHwmeeWitPe8Pk1bXj2vQwEixt8OIo8ioLV7FgGCHxD44Rb5Bqz5JNgLRp7bsgiRHGcN++fQDRcJ+b1qx5dO3au5Ytu+vb3/72PfcwUyQ8GnqN4Xh4vzQ/xwgQgiQ9/qIRqR588MG77rrrm9/85ne+853HccqFxgTNrCNtVCzcpDXQygiiGk0hWv6ANWDkRRieNnCU+aEef5yE4eyg2SJUm+eee05rxhwbQKCQs7vvvpvxID5IwEiSp57e43HVd6BFLRgNeDpgzB9s2rRl+3YY5AA9C+YIzC4YaoBK8bDMMbdxI3BE8IjRn8yESHqxeDvqDucd/ELwCBnGD/3oRyS0+InEGqVgB54Qrg6aMqxWMIfh5rciAS8XhJQbBwYEh8iRRCgIEEvEJ81AAL6KigpvUGA2q5afmUmYYNeKZ/5M+sADD4ipCPgD8z8fjt+2jXTzAFU0H9FgE1JAZAjJUfesWMHq9AZNSJpX8NvVKLICp9ANwygRN/mOVPEKZhSwCR0WwOnM8/Lww/uffhqekWFadjaPlxjtvPvBJAT/mUPwtT0zkyJyxX3Cfw8cOJCjzhB70FsQpgbxE0ld8shTn4nXgdGA5xW2R5CXKFCfMlbgexAbYPEFZF6PFYpyApY8vFA2NmMKUIrHBhBglYc7f2TtWlgUKJgk+PZy0T4AA75//36HJtuIDKF0m089/fQBeOnbtgW8KWLzw88+uxllTuA7GHCaw/RGHGpqA40Y7ACuEs6QJJYrzP7qqxHjACBsVzuvUZg6PFc+uTMEDmg+SbvPxllN0ZiinQ2ubGvIeZQdMAgDAwJ5NIA94bkoviLL/zVlq+Y+upwddRyHJnWL9rdu374N2VM7e8V5SCODK9LIAJ06dYo9LEgayJLBiyBx7tNPPw2fMKQBgEA71HQmWAWgy8FfMCVAPKDJT4DgezT1YDIkrtiwgZ4FDlu0aBGdfw4Sadzw7C+99NK2oOkxWjS4DUGgAcyNbXjPZOaC5/rSl74UHx8PyyKwDNwkC3tGOSGAcegkJAB8b8UKeNKH775bXB3m6tHnnnvm4MFs9bXSxBDpG5TaBghA7AbSGoXpciEh4FZxg6n48ssv29FyTicZG0CgO38WeBlGTAsI6vH5GEkFepbQarzYwkB0ObSrbmv6b8CbIkB4yeEA/TQzi5FdjYnSBsWRVxGmLozYaiRAUZhdeRiw4Sf8I8HLhfGkuEeyVxCGEIIVBA1XttptYQPqsHY1tA/uHC5E54HLwWuiCDduhhpKQqBHKHjsMXguwYYBkxBm1+atWx+Fk6uVrrXjY8eYarjudrQ10ZTL9mc6EjzgMFC+4DuCU+FcCFjLslAXBmyHYSEH4qFjxzYXFtKWvX9/+g9+8CD6Jojrd2Lv4ACBxI7a3NGjRx1qUMdjmZlsTPwlBG5AQLfUnn37iCvhoQC4RPwtTQ+BgaMMBCoNbkPwaQrw3vfvh8/y8vKAsHCyAzPdFuO1tJNNnIesZHtycwtXrTpcUBAwyelYigAHAgah1syk1dJ/M1QqxMjGXLS/+c0ZdRWmKerVVDEaG0BwqGlx+9av95ng/FccHpsBWo/dDuIQ9ZyF/68rLSUDOy21gyQ82jVEIwbjD2wICyvsLF++XFKTT2m4aIehEJp//ZyVSHBL8O4yUfATOUHwsthChoXrA8xlgo+yBjHXoJ4COBNsuxjEqMhuW5IKtIZBMYw0D9EeS8f/vwULggfnxRdftGNykJ2mh4g90Ly4HMy5oMlDUc2g7DCf++7duQGGKUIh1R4CUFOIQTvUJ3gVvjj4pNB08hMF3DZ9AtRQ2tqp4mIW85OXR36lAB6xI9LCs7OIoN27t2zdSrzv8O+NGzzmo0uDA0IWBcXBC1q5cjumVAS7OWg1X7p0Kf0khBUCeScL2Arn237NGURaGc1e0TdcWCDFs999zz333X//GiTQW3O10qzmWiSWUzDAGAMCPEtdRwcc9dQzz2wTBg3/FSoH5fadu3eTsA1/wmInYSIknKG2tjbcVG6V30FCI9mJRozS02jE7rn33tU/+AGsvKDFwCIVGhBAeMPodOBQEnJo6MjC5rOL+gMCPRpJsMGB4iDUrV27FrTI3egsCBDhQgICnSTz4YfhPik/IuA+KYaHW6Ht9vT09JCDQ6MH0EoqWyBvqpZnYEbKQIHntSP6kRFAO3X5Iq7CEUsmBX0kP3/LE0/Qlrlr18Zdu7bB6KGXgRJ8QkhTOFaU8frD55+Hz63orQhph6QdcpYBRO/C5LV9KDDYVfwfdaNBAA1uVMxSjf/AhvvQIT7Q/cDMBEmMchmCPVzChRrSc6qNmWevCW2M+cKtbLcztXTLlrVIsNjBzWTjpPW7kEZCCEDRsQEE+MmiFStgCfjWffdlorM4O8iuRTdCo0SARm6RzUePPolIKJTxwd+adsQyMBOTWbxxUd6Iti/4/sENGzYiwXD9AAAhpMqAjLYFVlVsgQ0Esw4+d2IrK66J+z+1MGaShhsc5EM3BiehiIhwAIEszJQ1QwmMgWIqNoeFp4M5Ro64gYYFRq+oqChHBa5gxwoFnBMgkA+Rkh1ytV5OjQGBeTazsrZha2DgkeBtm6q+BS8Bdk2gAil3dtRrgNn94kOCpgdFleRipqodPctkoBOy6ODTYyQUjoQAGywHK/fs8WIlnJDnoag2wsngWUfeHMo4CwAEkbMDhz362GNwD3Y17oLQgF5NXj4n2glh/dZICOMFCHNVKxCwVY5qOQmWISkPiAIOYZ6zvg/43skLbx849UPyL8oBJ2D56dgylUIOBIxrR4wGzS+nIAgQnlZN1iSh0aP5PbVmhsO/Hn74YUkVDoNnAvk7fEbmoQCBZGMQ3YFTaFi0QESSFUuY2rr10UcftaMJdKD57Ouwoy5DAVen+MAjmKtFc4NnTPvfp/Z5qS8w+xx4o+CZAOnLrrrCyey2Z88eii3ZAjoantmXMZSjKpgCFtCmsRNDy3LQiAcSF8hdEwcQ9lRWSlgtKuR5KIQmfwC5lHr5ERQLeKdZfRkn/5njxxnGosMoD1OidiKn0LCE3gLQQAMIAX3GxwwQJKxpA6/+gQce2JqV5bNah5xvxMaoZO1Qg8PtWHFCsHzAIGvRwHHmzN69eyllAC7ERkxNfgx3xEIBgl1Du4Jlflph8/Ie/sEP7KH0BUmVIR2RVEyiy4nI7cAgEzs3b8LOI+vWkWo50HymmENaSnZqu3Rp3hrcP3X6FnPDz00s3pe6GIWz+X4eMLVQ46YQVtBQKEZlbV7eRjWgOlsMd5CokE0RaGqgO6VGAqqAeHPjav6HAwhwMwQI3oEB4a677oIXMZCEwP3dmjo2kjq9K06dss+bl4eTZAdO6UDeUV+NdrMHXWKCAILI1CvEOifEoVkhX7rmuejPnZgGC5erxKEO1h1ItG5sbATsZdFNNGLa2LyIRmxwQID70QKCelpiKLv/CGuJzCkZkVRd5vMfg3xCYBcSPOx6u/0ujM8ZpM4AjAzDoi1b7KEkHIoghUlCtbLp/tfv25eP8QkBKCRuOMwtkNTLwcmfQg2FLAmrDx2Cwdm4axeIQ6QfZfn/yg9VNHIyT/1G8elujatudCl8QKBZOpAou2zZMkCtfLII+fOyHSUE0nDtGgkBdugbQgM6xm9k1KHwg+5gztL8Oe6AIGm8h8dfeIHFJKjB2DmUaRg0ONrRJk0fTkt1k6gmgHacOXeo2fEDjZh2RoUYsfAkhJAqA3tqoW6HAgQuwAwLEHKCR0a9EDzsZrRiDQ4I5PzdiYkkPglHHYFsNeyZamXbKaNwzZoCbfhxUOyE767C3nLUCHOmF6jKC8UaARqsRsstBevmY0aGTy4K+bJUolkHCAODtnz58jCrFEZEoyUhrFixYs2aNXkDqwzZaqrXI4884lCjj+DPPDSviRT7bP9pIBJJgiU0u90fDSYMIEia0kagC2zC97hDzSD2Za4FzFXN48CZWT0ENKCRtEmnnTt3rh0zi0Mkn6pnyMWabGJaDjZigwNCqKe2hyEhjAQQAnlB8wk/2bp164r77htSZeBPESAhaN4aDAyFK9tFEAIlLvmPT7aYgRhiGtFGBax279kDMwSElm/fc4+WecUYr0ZTTBZqlyS6aHPEtNNDO1soGV8UixtdTAjfhnDfE09IAxsVAQ3gmAF9W2heI0A4cOAAMcsja9fateH0/tyRq1YVo7TBTIqVoZmDu34JuRMMECRtKjQmNLESkRibtAPnHlmkA8sFqJ8U+0Fl3h3ojiT8XIrR7D4/TtCIsX73ZKXUFNuhUCUy1gXLJ6GNipix4ntqcRVMmhaTNuRUFCpD+GXY+WtFo71dpG75Dwi8o43bt69DC+pDW7cONJ+pztV6tD3u0NoQ1FES9lK7alSkUmD2IJWBDNcsOjcrC7ZtIOKGt21HlwQbc5zACxcuDL5Pu4buvfdeitfNx9DTHCxO6HNKhoLHgdJ2Rk5huh03bdqUhhWYgwGBVoSDBw+SYusLVtTeP4ZgkYIAl4PjT58+TZWOcjHeOHBuUzA81szZsGHDgjVrnlq3jo7fu2cPAK9dG5g0IQFB+9LhkXdjMS5yo9txegunkt/rph2su8h83xiOsgMVEGBSlsBIcf5B85yqeDExbOtWnnS/fTt8Se/3mWeeobp/IbE6ABAc6HaksjAhvAxo5YBFLS0tLaRpi7xIME/WUMJR2ICQpRoVg2OZKA90S2bm47m5qwoLSXcISeT4IDNOsJfBrqo8O1HuIkmGXZcgTnOr3JyIQ82KOmZnb9m2bcOmTesefXToDRMVN23evD0z8/sPPjjQrdpVqyy8IJgJe/fuZXXFMcyS0tZ8Jscg6U7r3KdXNiiXR0BDSghUHfS7mzZJGve3lkhfBr6gFS0wq87OhU/hZQAWgyuSjuznrBdzG50sWbjPEkUffJCKhwvmYvv4TieyhCAuTYGXdOc70CsNrApzOweDgnwOVu0ObnDyzTt2ZGBDCgfmQ9HS5rPZatAgHxN7gQW2q/VXxXCRVDyI8DaI2zFgHhKbUFmhB3GqhwxM+ue77wa2/d4jj4QpIdDLBdSieNeASEUBCIwxyX2/f3/I0aabESldOWKt0ZyKCat5eT9Gt2NRURHV7KJyoIGwnMPrzHzve9+jwVwVIdGvBvcILFq0CNRtOpKFuT71FIzARszqzUcxQGvtzFbHMFuNzX7yyScdoXLlhk1DSAiU2pyfD5D7OLJzSECg7wu0ISX+L4K0nq3bt1O6Iuxvx4hu7r31f/tUhVibmUus7cWIPtjfvXevX6ToBAMEr9qFR3xDsEBH0jx5aPVqeLmZKAkEuN0F14D4CKydceQIYMJ9J0/uxtjaEOFwmJWThawN6hiFdosR82JlqvABgdrQrMbCC4EZ3Oqv8lFIWLtunQNTurSTwatmMUvYMYEMGtqhCwkI5D0BaRCWDFYcM1QAFSvehWxLCcshEZhaMMDq7BsoQer0gJ3teXmHMf2NCkHAVTMx8TlYVWFSHEbaE9Tcc8894aPBI488sllTHUU7RAHR6XQMJUfTDF+bm7s+Jwd+LuoQBsMyTwfAXLlRrIowRPqzyi9U298epK3Qs3znO99h+/4JR9p6PiyDJj9/C0IKTGyR8xWcpkohNDAxdqBQR0WoKMxeZJTbMcZ+oFyGiQAIXrV5UEBlHhAVYLkRt5SHWbfcX+DPNSxWbc+ezZmZD2P0/hoc/OyAcDhNBg1AAV0ahgg4a/78+dlqr7FDmDDrZ+/VnCEAEKhB3gM4LWmR9R2s7jCbp2r8IYlCPCOxNpxnw8MPU0BmgDtvIECA38Jtw7qzQy2/EyAFMSEBi0XvVkt5B89kMhXCGag+iT3ILEAhzaCEHsbkAppOmSB4YMWSABsLT27asQMump6ebh8g7iKYKHeVJOeBgknsqivKq0nSJ2Fy6+HDGbhwABesW7eOxL+AtCkhMpHWuWtgHSpSCifbkUw6sMQ8+NBDJP+I905mK7h5Cs8O5FAVZllRKZRwampqvCIrXJ1vAhBIzIALbcVS4ZTrJG5VuPiJtSeshNDY2AjP+0Ncg0KOOYwhyckOLKuyQ63pEQgIu3Zt2Lp1zbp1qzCnmB4iWL8WUlYeZjeLi4qVaOOmTStXrgxTQoCfwVReqQJvYLClupNH6c94S4Q8QiiCb44ePUrxtyGLyIVMbiJjYD7alLRPp2UB+hVPtTt0CEQRsk7DdeHnFOcJZ4CplR+QbYo7rFA2Rv1JmiQaO6oqoO2S9yEAbMmgIfq/wPFXrlxxaKrukzRIQ0ddBUVxJIea7Bbw9gF8nnvuORBOfvzjH4t3JPo5Smh+eaakZD82l8kNzndQ5/kujGSgZdo+enbFcAqk0DcFWDceMIFqgIj7/z5278pDV0vIOl1UJDYfDVxaQKDn8gMEtaYcSQjwHUgIlHwqKomRPj5QCaBxBAS6CIVVs/xBHEmQ+r74xS/SCWFwao8cOZKdDRvFstqxTtEOrYSgjgOFa4IuuX7DBmAZGHCQAexqiJf2BeVpogLsmMJMvAn8QkPNKpCr0cvB5p1AQNAMVwgzghoWQoVK4OX9WMU9+ITJ+cCqVauxz5rf5fzF3ZCAQJaxPMxgylOrVQdIJnmoRlFmIg24mITEgE8//TRBSp5/YoLYpywkQjLiRBoi9nco5yyVj4azbdy4kcpriytmaxqhSpp1f8WKFd974IEfYCTnCy+88POf/1wcQwbPe++9F2QhuMk1a9YceOYZgAXxIAAL8NZgKC5cuMAtPxpHpHbuCZVhrAHBHxOoTJwdRYLTp0/v379/ldpsIk9UtAiaA8Tjz+GiU15eDiMAvLAdXYd5GnePmKsUewBswrVaJBgfGIFHH32U4rt4TI52wow3IFCCKtbK3UUGakrQg5tfsmTJd7/7XXrFDixmQnf02GOPbQtQGdShyMERAMFgGw4UCYfZWL0zgFOyNQlHRBnqJZ599lm6fz5iQSw2CCCwF4QvIhhD6ACW1ABSB1qSnzl4kLCdlapAq4jWaxaQAx4SEMhFm7djx8NbtpCNPfgxs1WlHj5grh45evT0yy/D+g7D8tijj/KVgvxcQfOQ/GVwWiqhRmcVWgPMZF4GOXgCa4r7AZyXlJTA8rR27doHH3yQfg5z8v+3d229UR1JeH4PPKJ9QULaN14s5WUDQiaYW1g2sTdcYhvDnDk947ksAzYwHoyNbTARl4C0SZTwAgYpL0j7wAP/aLa6vlPlPufMzcbGklOfrIlj5pzurq6uvlV9RY8jygB3bfAnrHGAHlJwEmANHCc6dCIEH+5KZqHdpob8T4yA2rr5u3dpy1DN7KHUIHC0F1R9yL3MDhoE7Rqsb8HEC5JAXISFiV3CmuMujEZNRxJEksSoRJwh1MMukE9QjXlyuTt3/I3n9DQVhL1qhRU7KU4ULKzqHhoE0gqwxyBwNdlnsbWscJIv6rVWozHn3BzrLWzpbHiNGLSCpFoslUja9M4W39+Ba7fRgztORxAJlirgHQbqdb945n+qBPyEmeb3Mgg3ikXPescukfmTB8frOiQ4q/ERE1QCHIybAs+t23sZBCe4zg4nXbcb2ljk+nTM5ICrqypf4iMQxuUeDBf/d5jWI8OmRcqJjUZoAMOjLWTGwX6EupLWdUrQAZpcUNrWJAETVWNufh45DdfX1zsc7UWg5fQ0Z4FxWHLz+YDneahW6T3t+/dX1tbqnLKQ6ka7xLKeOedEQV3TYt68QreY0503COlxnfzC23xwpCNJDdyrNr8WTAfoBWjLOkeCoxdILKQDJCgy1A0NsA0+I54HYRZKzG+jKZBqgUdZ9op2rw0CGQFcKIPgwoHxGCk/eMdUY7ZAJF2tcE7GarjxCaWNI6MbN2h+oXe+efOG3r+yulrOUCPq9McXDTXOGYQx4n1iJRNrSmLphnc1CAVlXb5wIfGKzK8Q+LMkiT6h2Anpqz8b2pxBNj1y+64QtJs8ZfSlS8huFlZYX1KSZQA8MGfZk9DxJmXzxCO3tKhzggMq69atW500vV5yktBuF5V7LSclf5UDnUR6Jr6Lh0ImWbR4UaQjAs6HVDlqDi0hCuxT/Yop+kmfoQmaXAB2rMbL74ipsyt8/aSU7BlrgJmUhskSD15Yj103CEE1ssFcksnRBakDU0ZMvoblQTk9Qg8dOkSfZGMda76niOmmbDCziWHnz5rk10tqleO8+lyDkD4e3KpB0OBuh9lchFaSpIcJJ4a8AWcyqeleutuP4mp1mlfjpL2fPn2CY5KfDXleTrkiyFOzclCAgEdITK/eYicslOnm9zII9Dk6OuqTSMItpGsvMzS9WirPEf+CxUk5fU7YxyAgdoMGUTJfZ3I/BaXHkjEQM+ymQ3i5HKfr6a0lz8W0cx9nImscBegQcGITSAEQJBJn0q8EjcXI1QWDJtzZPMZ0iQGBefRkVlevFiQzYLPZTAyCTKNYWieWhFPHqg5UtftCa8AzMmiLsO+mveqXMAgqeTEILsxlk/nJ6AlPjlVZ7ahOaqGYgMi+RXJInrIqwe9KIe6C5HclIcNPjevAIOD6SdVb31nuEeMPd9yMQYBJz4bJBAYBpFtKfotLZyTlyXw/lsR8WtU4nT1Tv1xC+oBG43IUzfD5AzahqBXmqSyhsaoK/ss2FqfTpeDvtbzE3KZBaOUofJG56cfJSayEQe2Vf7yXPoB+n2rrD/DZS1NXKb0MQiHIdDbLi0N0fRQWFMgQv8bpiNH8F6p81kGd8iMfzyJPXGYU4HQRPgBVJFzu/U7NO+yCdLcpSyuzoe+FiYkr4+MFuUahhTG8CzICjNPqoUYvo+ElXjz4FMyl0g8cCd4rn+wuGQRYV79057AsOId0NwXpv8xqsuNAabVQJ5ewiw8eOOGoj3I3YqrM4fWTk+TsRdbPcM7FDwxCJ8+pyCYhtUII+i6/Qgjj5vJXnLHkZrqfDgtS8jFs27NldZUYXsjAXOMd9pjP1jsmCUk1tQjundjXd7fPQbRsIjH+DrZ4/gwq5C/lHxw+LOQMAvjZHKcsr0gGmeQ4LhBCvjlJLjMOypuamqK2NCQD10CDUJDreGp7cX4e3la10EWtlwnKCFOyr0Ke3hpMTqrLUH4UdCTYvME3O7Oym4vYkXjIQrXomH0bbjabVHdaCU9yzI5mfCYLGecYnrPq0e3vkcRAeRZNSYW2g8eJAwyCdC5VgDAxMVESygKXCbEXPYwlj97mZrl3/AWOXjc2NpDZ3C+BeH+RxON0fTmL0TvY1Ouga0sUXlASt2cMzyzrshN3jnT0Osm5QQ2vVuckaB1PIbIe/tg+t1rwFFpKf/RkXHxfhlB3GAd/3S99FxJBZCaROF0N7CCQWgj2B+MiFJc3ocvLl9mygQ4llr1bSouCN+MuoMYphJIpXiYjfMe78VQqc9KKsI/0qOrixYu4y6sFKZiT4vQzbAh/k3Rm5vr1iIsoM52abqBAmHP5ypWuI5Ra/dWff9LK/tzqqvfHRqeLWchYvHyTsajGjRjhknPT7NzVyxqokqD7bszPI5lOMqnJNWWvpUjyd4kjgxXC9o0aDj4r6P/IyIhjCjVPP8tBviFBSq8WoYOxOcIk+0++qTya5oTfKQwV/sycirSljbgrlfBtU6t5x4rNFLauJNJILndcjyUNNJx6nH4H+6hnGmQ9RzXw5rJQzGEBSQKhVR/uXOh/aVTWJbsfdu7gwO/k8zLQC7mz6nw1qD81TCKVyr8vXXJBggxw7zhZV2SeShpbqdxkr2w89UrCutEuBNWCPlG5jBL9Qbt4M6jseQRaMOO+FddwGXFhFpvh8/9ZGemQTNgX5ZCUjxcANE9VeRNND3iJaVt410NfQORp3v2PNg4Q3eP1dS9wHptojvYRCkUzcQNVZDN78uTJ02fOXCsW68x/1Qi6iX7obfSvvQbpATLmfAfn7YZjJwHufUheGeHCJif6I3Wr8Ykcveo8+8nkmSXy8AdB7Lx9lQnVE09L9CCTpKV6MND8quRmxakmZiU/lXiP2lkdAqqHS0tLOPXFStIrYUY9pFFhi3Dj//r16+WPH+E/NmBsbwtDhj/T2g8rFu+Kr5k9JeI+sW1M34f2Pnr0qL81KAQaDjNIApyFJx5mPd0O8PDxZ1Ms5KdPn3748KHDmSDK7MPsJCqtKjHF79+/zziFqr31MVNgPJZL9gonPKWv/ePYsbDCWI+BxM+Pbp7r4SgCbbkRTs1p911q/n9/+YVqiMxrFUlE6Jzk/pAppgyd0ag6PibqRa6rZf36228vXrzwOZJYMtpflaA79HB1YWEB/mB+McZxIk741cu12rUoOsWe513ZNvAq7O/i339Xbdf6qxpD+ZFpkazHS0l5TKMet6soFJ9l1u0CnzB3H6es8Ais+PWPP56/fEkaqHe4uirKCDN5ebmMLEtwfhuohyGUvYQ2SseYBAx9XU6v57VcjTGPYhCeeZ9GknOr1aJZ6d27d3l5QpgfP37EOhbGLNWEoBOTPuX0Qxc49QkUmzaQhb7s3NvG8AQp58+fpyb867vvzpw9i4SqNDyv8bW3d+ycmChHES1mzqyvx+yHOQx7cKhvNIjAIaOeujigc+y6sNBuLy0vP+KpH/KkauPUHbX1s0+jgQyYvcqKeZOITZB2brvdjjkXUs+n2LEwfKohCwacc+afQiWRly1mh38sNkhiNIqRdwmk4npShyQUA+XmAh/4UGL09+koIoFc5/Bn7+7Saj18+BCX4B2OOVpdW4uCg0Gq/8PV1Z9fvYo412EfqAaeXl8vC1/BFNtJKvEauz1c4IBrWAO0Ai79Bw8epLFFyjODxbMsiclQDLw9DxtLRp4mmpWVFWogyQoaEgk8VQIv8BxTsNLihCx5OOP0LyhTqJMtPy107927R/YZpLLeT4zdHpB07xorJ30HnC1Ii3P27NnR0VEXeFHmhamgryFZZIFDtpELz6sHqwqpPfQ/ZubnI0eOFIRuouubdwTDGwRkj0K0UYFpXhYXF++1WvTzoN1++dNPjvuowMqzpTrjy9p3x48fHxsbo30rFUGzG3XHxsZGJx0P0knn9QNeDUpqk/maon9tuz7Vv6zEjItvP/1OK72fGTROqZfRrmfPnkHBoIFYGg2Um0pAJXbixImx06fJUE9OTVEHURHqtxxG0HSV2LA9xQbh71Li2uPHi0tLt27fnpqeps/WwsKypNLoGtQDe5jB4ELTwwctooF/9OjRU6dOkYZgpFDpz54/pyUZ3ICdZBj//IGDl+CdNB5p1KPvqNBiFFEFinx5AU8DLRqRTQOps0M3sMOHD5OVIyNAMxpESi16+/YtaciWxPX52AKFGtOw00IIlj+UlXYWCQLhctuoiTY8zJ2tL8/nM8po1zwjv/XOFEFfwDfDQdE/PUr+qWHKAiCornYsb9Y+X2JfB8leh5EY4oOGHzX6rEYBaIlqnfINOXDgAA1hZOTcdnvzLQpfFVpIqtJOee51ghgovDPfZbD8yDm41aLxVOblmU7ctnpsD9smWVVZDRxQ24AKajdevieA6BCdtxvtIolh0K2urn4BiaH3qawvVmIGqiEQZhgtuHvAEk4XhxqVvyPl4lUq0i/Tojx2inXZYDDsA+wU67LBYNgH2JJB6JO5yWAw7AP8hw1CZQiDMMYrhK/NIBgM+xfx3bsXlpejRqM/DTsMQsEMgsGwrzHNbvMzzFrmo/gljDTx62OeyVk2CH9rNv194i6npzcYDHsIXKD4xDRkEJrNCjKtS7Jyx4FyNd4yHPjmG/9AjobdYDDsG8AgnPv22ymm7k8FoXAcis8LVqmMnjy51zU1GAy7DvWSqt+8ubK2FjEvB4II6Bf6vOxc4/btc5xNwGAw/BWgeRa+Hx+fYUSlkqfFaDbzXDoGg2F/g6zB3NxcQZLhqvs0EimaQTAY/oKgvcPIyMg0w3F+qMXFxSdPnpg1MBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMW8L/AUtJlu4NCmVuZHN0cmVhbQplbmRvYmoKNDcgMCBvYmoKPDwKL0Y3IDU4IDAgUgo+PgplbmRvYmoKNDggMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgMAo+PgplbmRvYmoKNDkgMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgMQo+PgplbmRvYmoKNTAgMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgMgo+PgplbmRvYmoKNTEgMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgMwo+PgplbmRvYmoKNTIgMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgNAo+PgplbmRvYmoKNTMgMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgNQo+PgplbmRvYmoKNTQgMCBvYmoKPDwKL1R5cGUgL01DUgovUGcgNyAwIFIKL01DSUQgNgo+PgplbmRvYmoKNTUgMCBvYmoKPDwKL2NhIDEKL0JNIC9Ob3JtYWwKPj4KZW5kb2JqCjU2IDAgb2JqCjw8Ci9DQSAxCi9jYSAxCi9MQyAwCi9MSiAwCi9MVyAxCi9NTCA0Ci9TQSB0cnVlCi9CTSAvTm9ybWFsCj4+CmVuZG9iago1NyAwIG9iago8PAovTGVuZ3RoIDEyMjAwCi9UeXBlIC9YT2JqZWN0Ci9TdWJ0eXBlIC9JbWFnZQovV2lkdGggMzQ3Ci9IZWlnaHQgMjMzCi9Db2xvclNwYWNlIC9EZXZpY2VHcmF5Ci9CaXRzUGVyQ29tcG9uZW50IDgKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtDQp4nO1dB3wUxfef3b27NBJChxBKQBBpCkFAEQvyExUQgZ+CiqiIPyuKgAUbSLUgCIpgQ7GAIKIiKCgiWCgqTRAQCL1JCyWX3G2b/7yZ2bvdvZJLLgH+YR98ILnb3Zn57ps377158x5CDjnkkEMOOeSQQw455JBDDjnkkEMOOXTOkyC63G63x+Mh/7rEs92bMkSSx2X+VXB7pLPVlTJGgGN6wzYdu/To3r1Lh0vrJ/HPHIqfmo5euCFn3+FjJ06cOPbvvu3r5j5dHzlSoSRo4EkNW0k7NBhJwtnu1/93ElBLjFVV1YJEfsO+25D7bHft/ztJaCD2Y93Ms7qu+/AU5Cr8ZoeikYSGYBnQNBHWZfw2cjkSIT6S0IMArYVrAdpJDrTxkoTuDQOtgsc5AiFeElEfrITh2jHOMhYviejWsNAOd6CNl0TULQy0Cn4Wec521/6/k4iux2oYaIc4XBsviagD1ojyZYFWU/FAB9p4SUDtAFpsh/ZhB9p4SUCtsaZjG9dq2v8cWRsvCeiScNAq/Rxo4yURNQFJa4NW993pQBsvCaiBEgKtquf1dmRtvCSgugW6ZocWn+zhQBsvCahmXhhoj3d1oI2XBFT1OA6F9sj1DrTxkoAqHbaZYwDtwQ4OtPGSgNL2hYF2X/vzBVpRKr0d1nI7wkC7q+15Ai3gKpVWaEDKP2Ggzck+X1zhDa7MRMhdOuAmb7B5FQHarc3OC2hFlPm7b/nTdREqlYChpNUh0Cp4c6PzAloPeo7wEV77fC3yc8nL3KTlYaDdUL8MQSuIoiRJohi6j+pCc7Hf78d4w7AMIhZKeqM1cVkYaNfVKivQCuYwILs2IKFfQKmXFYy3j6yBSjocK2GRbUsXoF1dowxF1CVmNLioaeOGtVIQKJsmIuy8Dvx+WFc0jPc+X9X2fbzkmRcG2lWVyga0Aqrx7NKdJ7zefK/31J5fX2lm+VYUE7eCegTgAsL7h1ZDJYmu+/Mw0C4vXyagFVHd37GZ8ruZxyUKydup5gnDp+Due6ImMHMJNe/6xBr0pQO0vySX2PPPJkmoD85XCGiUNNWHfw0HrY5pOBbWVB3vHlynpIwIwTXNFk8H0C71lAloRXQ3lnXMYtrI0DT8i3mpCnAtHTVcocGC9mT9kjEiBOktG9fCXvmPRMLH/+yzThLqjWWNsSX8VfH3NmhzgqYoA1clqtimZxuQNShuFUkQJ4RAK+NFZSN0WUI9KbTGyDT8rVUgsGXMNHTys+LDeOOLF8RvoQnC2DBc+03ZCFR0oa4WaFX8lVlfF0XXRqsDhbG3TDh381gQC3FNXRENDwPtnLICbSesWKD93AwtWU9Wh0ZhUHBljHPGEPM3nskromfCQPtZ2TDGJHStplqg/cQyMAkts4dlcamgKyoxIkaDhVZscEU0OAy0H5UNd62ErvapqhnaaRZoXehzrOm2HW0DXPJO8MFh1UFmFq91AQ0IgVbF75UVaNvnaRZorWc03GgEqFtwQThwNQLugWczimtEiOg+qzVGufatsgLt5bm6BdoJNoHQwgvrHEMyVORSI2L/0NrFMyJEdFcYrp1QNoJnJNTmSNCvB9C+bF1EJDTKjzW/GgZcysoEXIVYaEOJtuAqMrgiug2g1a3QvlJWoG110Arti7bpKKC+v8hY9TFwrdiajIhtz11YdCNCAK3axrUaHlVWoL1kjxXaZ+2qj4jS757nw1o0cMGI2PRCo6IaEQK6Ccxs3Qrti2UF2mY5QcaBYLbBdmgFwsXluk33GuDa0WXgygTcLaMaFs2IgIj7UGifOReghY2X+J4goYs2W6F9JFRhFwm4ie0mnsDhFzSThbZ9bFZRjAiIuFfs0GpDzgVoKcVlakqowV9maDXtvnC2ELxB6aJRhzC5gLpu7aGbzIggatrulzJjNyIg4t4Ora48evahFVDl+fNvRHGBK6F6qy3Qqn3Cm5kCTI8aT+0gV6m6HglcMCIOjM2I1YgQ0KV2aDXd/+DZh9aNniTjXHp9Qhy2pojqrLRCe2tECx7eYIUHNxL0VC0iuGBEHBwR404ERNyrmg3agnvPPrQu9AkVfos7lQvdio2RRFTz56DWDsZQt2jOEdJI4p2/5RGVQNVDpK4BLlnsDr1Qm0mR6CSgpqodWpzX5+xDK6EF5CWrRMB9e2MaQbo44Iqo+hIrtDdE3/ODNar7vGNkRVPCcq5hROx/nhgRUiF6roAuLFBVG7Snep0L0P4IkS26ImP85U3liJZUdHBFVHmhBVr5msK2U8Houv6jAxj75VBwjW0eoi3sfJboue6o4Iqo3mnNDm3uzecKtDA2PwH3i1uSkegpqswVUYVvTNDqWG5X6E61AHi1m5CDsU/WQxXdoBGR82KT6BaagGqbPBgc2mOdz757xoCWcomC5a9uT0BSEXslotQvzFyL/a1iCAIQ3KSZi4dvjMq5AO720Y2jhTMJKPPfEGiPdDx3oOVTUMP5i+4gYBXJjhdQ8mcBaOEt+ZvHpMsJLtJM/QF/EASVSJyrU859pWHkkBABZey1BH0BtIeuPBeg/YFtrnBwCQN5l/bmKmiMJKCET7DPJBD8F8WoJgvgRax++8+Q80jnm+1W3V9ny8CeMYmRwBVQjR0h0B44o0HhgigA2bRXCX3DD2bzSQlO64JfewhFMCIEwfVBkGvJH18RMphBuEDajYvUoBVhA5cbEW9GwkpA1baEQLu3xZndG4MgTfurd6GPuUAIcAko7MqvXWI3IsgLe9cELdEqaxfFuAO7wHXFnDxuAIdyLigweH+DCPJbQFXWh0C7u+kZhNZ9zbB3Pvn04zceudAys9zoRewPDIiDSwOzfro+hfFUoUSwmRzwRsPATlYrYrQctJL94XGIq9HsKxoTuVrB/RHUKWKq/2lx2EIPdjY8Y9F0AupvtHz4MkuQAGpxiqwiAWcU31Kh5tD3MRoRBNqJFq49VrHIgYgwQRpP2kPEghwKLt03eD2iplpxeQi0OVlnDlppKs6TCfl9stXfJqD7thEBYBoQl3jggpp/c/kYnKdkyRsHrB/g2kNpxYjxBKsra+Q62G/QQrfQILYhkgKW/pNlcwx6sLXmmYNWeIk0T9vNt2UKEFDDF9YS5dJvB5caEV/3IuAWZkRIaAz2BaDV8d7kYnUS9OmMQUsJuD4N2wSughdH9OGWX2iDVsVbqpxBaEeCegSUf5dtZpEB1XmU6D9yKLg+BWsL7irUQnNBbJCJa3ckFLObEulZ5b5faxjbxa2Cf3VHEvypX4dw7ab0M5ZlVUTPsYVGx3m97GqMiwyoWp8FVjlnGBEqln+42xXdiHBBbFAAWsIzxR8WcG6FrpP3WiOZ4KHLEyK5GFPm2HbLVbwh5YyF14roSQPa02EyBYCcS79hFvM3YT2oLoARoeGCn/sK0XynLvREYHsKeOaveLrqIS+67Z/YaroStJZ7InFtkslg4dCuTzhj4bUCetSA9uSN4ZRv8IsmtX7fS13UXBzw9QyMCN/K26TIRoQLDbBAuzqejiLUcd5hv10iROPaxGkh0P4hnkFoHzCgzY3guYCOi43fOAZdM4LjDXCJJiavuNkTaU/FTZ6umATCiuL2kjzddcMiL4fTKmt/kSKh5ZkaAu2KOCOXhdh3BUTUz4D2WOTj7PC4WqP3Y7a7YgKXGRG/dY1gRLjRvYEoUIB2abGGA6pt+Vt+05hVFqIhfBspYlZwTQyBdln8QeGxBklBvkwO7ZE2UWxA4JtqT29WIDyTAYuN/1TCustuKh9OLLjRnRZoFxVdraVsktFvDaYBYOH02ukRnQjSqyHQLo4zcjnr1pqxnrSAfJky3RfBh6N7LgTyZflHfs0nmm4wGEMPGBHf96wQqjG6Ue/Azh9A+01RoRVg1+GCx/+G/bLwrlsNj45kjQnCqBBov43LhSAI4/AfD9WOLY5HQDczY5CYSo0L0aZFMoSkvl+dIosXDd3kk5OGtxAj4ru2Ife70H9VNXDGBqLdi7SG0B2Hi4cTo9Cv2N0zhg9BPdk7IrTohRBov4rPO1PuS/KY1QNjOq4tohvZGq7hgxcUaqiI5IHumz44BuDqAecCs9D8+LcQLciFuvs1E7Qzi+T4AmCvmLDb3JgNWKzm4+3pkRQEAT0VAu3s+Ny1qfOxl3DRmqcyC7fzRXStAe3+2jHYgCJ5oNRuwiFDLJikgvrvdfZ+u1EXr26C9oPYrUwqCjp9cIABGy4uQaebH8d6RwltGBQC7SdxQruAoAXHtdcPrUz00qjiTURXMvVIw/tiO3MN4KKLR+4hUkA1GImOVJMH2KemG91wEpugnRoztLB43TTnCIiC0C0cY5dBxXmTW0SeCCLRqn2WAFuNvNy4BAKB1s89nH8PLR/dcS2gtnQNJ63uqRzr7gossvUGb8U0HWQAXBUPC7GUUcdjZmhfjxFa8IHfuuQUvL0Qjg0oJhr2TmkmRemziO7HQRMD7lPJy42La1P4NirVVrY+mRotSEpA2WwN1/DO8jFLQrrbU63/xiA/UQ3z1VBor/7XcPQDtC/HAi10NuXu1X62LxYWWOo1Pj31oui7SSK6h3owglUZVPxGfNC63sT5GhsO/JczKD3yroCAmrPzRyreXqQz13T7seturJmgnRgKbbv9ZmhHFB6GAF2o9MgWHDb2ywRs7jsXokK26UR0OwHCdDfpYnxHGUTUgSzhKtsgoBtaOQOqRjIiRNRIpuqRhje5inCMiLoW2r+TaxIIMN9DoG2z2wztM4VAS99X5lO7KFOEBRZYj6wih99uggpNnSCiS1UiqwkRDZD8S5Yf7Y74uFZAjaZuD24QgBdl68O1whsRIqrv1Ri0f9k3dSMTOMQqdp2Pmf82AO1LdpZwoewcM7SDo0IrEhkuNh1xMLhDHkaPVYig2D+1aWwxzOITp7CZTr4d+xgjPBGhhqOIaajwHQ84abFxQFY4I0JAdVj0job/iHWjFgIwMvsuAUPBWMaYIHs2lGubbzFD+0gUaMGr7mo/4UhArQu1vFjQzK43WsQeeX/Z2HkrNuTs2rUrZ+PKb1+7MbabohE45WsP/DkILnRp/ZAwx7UFVPsIhzZGpxD4x+sPXAGbD4Hhsw1Jb/9Qrm28MQitjO+LCC0A6+46jQiYsGcaTMCOu6QIh3HguioXZrdt26ZVo2piydTIcxH+qdF3obH7gnU4abFuaB17kJSAMtlCo+GlsTQMz200fI0BrMlk8OH9re1cK6EGa41NVeDavpFCBkinPL3nnDSAteJqWF5k7u19pWXRTjm5TQap6CmhwBm643HTbI3vvrDj2n89n2HVxARUcxeFVsU/FK5Ng4xtPukfy0avseeA8fSQB0go6w8ztLeGXdJBT06+d4mXWMuRgYVNjf0jmzJxVBQSJBcUJXW5SjIxJoCbfNX7hF2ZY08H82nTsErm8QmoxlYO7YLCuBZEcevpBwDYIMfSgYM2tGNA+ZAlW0KZKwJFv0gz3cJAC+pW2qNr/Ny6s8pY3Yj3Iuva4RENUWHG5ZkjUJHczSeepE5k6DRoZB+lmgYooGobuUD4MjrXwj1XzTnFogcNtxfzhpOH7ny8chhlSELVlxFoOan4hhBoYQpVfmYLhDwZTnYzsPQ32sCR4Vm2hGxnm6gKXnvU3kBX/fiw2fknoKrskIyGZ0fzhIPp2WmhbLaQuP4Ov297PC2sySehKsuwD14rgYfIjOvCcG2tMXup2aoHNbkgsDoH9ugoojwWe5ubhgsW895CHkyU0KGbfXRji8xduZMF2sosekeNkoQBpFSF7suwOWiQS0BwnvzzRGoE9Z28kQ+oasYyJvnq2S4TUIVxxwNTKoway3JOHBidiYqZW00QJa5Skp9Kg+fB89l3F6R1AAOiq4k9BVRxGfU4QBKG8Ge6ILgr8+7fuSJv7IyxpYWobX8NTo+8X05UhBm7juYTc8h3Yt/v/w15trSYLQQBN48NWPDf7YSjYsVkWLp0CYmpqalJ8FO8xzdDCI5qJrR+eg/lObLidLFAm/49hzZsEgYaoH3BgDXsUIwlyoOqHOueqMg8YREIfGRd+g98YvCDt17qsjOeC3VTQiMQTQ2Qte2fV4iMLe5+Ful7g+sHvPTujBkz3n91cOdGqGQjQKkyfv27p3iHNdnb0aIKpM3n0IZ4APixgubD/mbHCozVm0EM4/59ULXCDCNTdE1IoI0bva6r4YBlDRDVZsOI+nGktiVW/MsbTQ/eNrl5CWILjuvEnl+c4pFoWPfi/dkWaMt9waF9OQRaALatcRjGyrIw7hUP14hl3C4Po1DWc6GvYCaFAxaDr+DvYXGl+xLQ5VvhQT5OZJLt6FZSZ5sA2OR7fvByK4fN4ZEey3KZPINCq4WkgYAX0OH9fdZTRnpg3CvvrxFnmjOB5q8NK2RV0s9NQxrElQFQQHX3YK+sGc/XNbkAH7q8RPgWtrfTHlthKOMsYmB2pySryEuajgt0jYD+fAjXdpl71HrwkK308Jjf76oa8348GEKS5ApZnwVRWIOtJz1ZA+Cr2/ZYVrx5K4WJmMbbGJ5w0FHAMIpbT6DK+HMbVboEY7p7gfGX1yTYtRj3ZMzcxY9ZoRUECPRS7Gos9a6vu7NCrAd3hQg/w6+i629TdFxAjyUd3T6gVvzreY1T4OQ3TTcQe0c7xXsEB0ZR26SMQ3+1r6+UQnbKBNTkq51HTxzd+pY1GN6FuuoBR38wiA7ez5o7yhUh+5bY8uHxH8/5bMozXVLt3whJ2wLQBoAl/+x8tEpxM1CZno66B5Lj8ncHEjF0A69oBLkbmkzIDSjj4JjPn98eRdC7PVWrV7JziBu9hm2BHPR8k7q2b2LsaqaE2i4NjG3Pg9bbzElWMQ/PI2y2nSjKxc6bZm56VJjqz378SZwSIaHNlHxqO1HXBlkTTizoGGlrl9gEcGzMJt1daKZxuIkzFDi3/H/2SywCP7lQu4NENMMGigoi+wXLOwlCa5h25JctTxayBx0rCegzcI7YsJXx97HvroYhqcPHCvUlGm7OY192jHxkRrL9b/y2gC8xfNx+FfuX9/MURQKKqNw8nBcYGGHJlpGyLsObI3Ni7dCKxTcQ7PRTSB1dgHZlLJEsEUhENwc84ESd1fGRWddHPeCe2aFbj67tbOnJJbSYiyoGrIyVJf2TqGUXM0noqtOyGtitJrPoLcv5KUPW6lwtXDGkaryZVc20OkwuTBn/1SiOvQbPO/iUAayKc6f9h20ORKJef5wgFx+Z19oyUfjxZ7a2QFmKhXeXQ0LRzu1DsXu/aftMw6ssvmLRtYEdVqWm3fLHYrJAYqf19gyu1B2/OZ4iOCzEQ6dz2Pt2BwFJ0U62t1KoNCQLvyUuLXhonzLUd33Siz5uEY0wBV0BtHssB8ck9CtWuQXyy30xB67GSuvDcC2BNh5jlwUm6XCMY/IVLrrxFJEENBKfVsGZKvssaVkMrqXBs9/2qFCMmUre6SRz0BX54YhF0EGhFhWD+rLqzurFSZsYncJz7aZ4TulSaEl//W9nuwpdFBK+YNsARKEcbYV2EfQMmOpH0EiLkXxGQAnvmbmWQHvUIujc6BmaOuiP26sUO3VQFFoVdhlbG+m4dCyUOh8XED32gxahBkIoJS3mm1cqnmRWpl1oNjPFlnaJ9bSznQSU+L4N2mOW8GgRVd9NTLvbowROFZ8EtDDsMvZLPEVwkmZg/eTHTVFMjvmkH1nAvT3UzE00bqJo/NLZXWw1U0Dut2wC4Wg9y7gE1GDQjUklo8faSULv2fVayrXfJBbfzhPRnSc+bB5rfxPnM5vFntpVRI12n1jSrSiZJUJIQC9bljEdHwwXaFo6B7kkNNBeE4taY1Pj0pulmJ0nRAGaiL1UHsi+R2y+zIaXxTlRRTI6fyBMFDSEDSEujGIlEIut8TYUWnPoMmxpPxSXD0GI3RsnoE5gX/iJSbDPlipAKDxLWSEkoc7Yr5lMBmvxgNKm5LWBGAijBzLe1iC+LhSFE1zP/0tf6abb7eJditfiFFHN35nLlBIxubufQWhF1Avny9hMxDIZcebS+hD02vZ7+rknbos1mVFRyIX6YFzg88uKTGaGgueWxnoVmYQJWPP5FZXFQSh+H8YfJ53BLgSyS5UKPwl37Q1y7dTKJVsGrxASkWvQQaqyqyr1POPcYXG5vYpMgsslSVLp1LKFvfJ+UxauWv3H0k+fbhOyW17KRFBs/NDnm0/ShSxv+7wnGpeWOnI2CHRId2p6hQppRH094+MCh3pypTpNW7dr27xu5ZSS8LCfSxRQ38KVey11ska8lh2WPUdIEESxtALqHHLIIYcccsghhxxyyCGHHHLIIYcccsghhxxyyCGHHHLIobAkQhocd0mdgykSQQ4eV0lHh587ZMQ4Wk6uiYFsGKVJxuG1kjuFc46Rp9mV13a4vL7pExeMVYh2jKdECNKLXtSyxYXppdzOWSIBdfx12/5DB/dsmp1hxBGR/xIrV0kuZvqXmElCLees37wjZ9OaSTXLUABRgEQ02wh/6xWICu391fqtWzcsuKd0m3ahV42m+5/94pYlTwRa3QehfX58B4NWRP15lKr2eGkykyCh17FXUVXZhx8om9B+Rk+UYxXfxrlW3IplVdNUGe8tblGrWIhAO57WPNRUfF/ZhHYWO7hiQCuiel4jJ4K/USmyLYF2ggHt/84LaCXUKt/IiugPrWpRcnQ+QtvSyw7QYOyPkqo/bjr/oBVQtVP0PKmuqqerlKL+df5BSz5ZRI8/+WU8tzQ12/MQWgE1XsaUr4VZDrRxUCi0hKpd0//xgf2uqFiqLZ+X0IrBL0uRzlloLelvBRq7DxH8ka8l38Eldn9WWK4V4fiTK+Q4LX9OhIYE1gsEjUT0mtFr6KWgi0SDlvYVLhUiDYs3yq+KdHhB4E1GRMd+vfl/Og6BeT1DxyTwIzGC4Re1VoEIB23wlZkfxG4TXcyxazvdYpSXFI0XEjYXNesKO7AqSlGgFW1Pi/Cu+GUSH1mYI+DsCoE/J4YE2QJyV6+TVSfDTX6CmzOufHj05InD7squaD/ECHkWUblal942ZMwbb417cUD3i6sLyJr+IQzXSlVrZWXVqmo2F6BTVVv0evLlyW+MGtC5USWLtKAJq9LqtL3jyZfefOvVYQ93bVIVhSmKQPpS6ZI+z70+ecwDrUlPE4KGrhVacOMmZ17W5+mXJr/16nP3dbwgPWxWQBhbSt1r739xwpTXXvhfh6ykkBOccLIzvVHnx0a98dbLT9xySXUphmIvFV9eu/vg7vWT68C5+6YvGklblaX9ylkeT56V3OqhWTmmE8GrX+ngMl0TTkPIGL98+4EDOStezzSj0uq5FYHDxad+eqappZW0NgPn7g62kr9yRLuQtyyh6o8sVfgVS+8qj9DEsNCS2zJu+dDU5yPfPt4EhYgM0mq122ceCFy1/5NbK1kZl/xct/+C48YFytrxVxV2etaDeigsieZ9BLqBe2jSVvIHKiJ+19ySGVzqOfMoPeTt9/ngL1RC8L1rKj0YCi1Ux+bW2HPBha3SyMOQC5Umh/VDAplDA4LyI+nOuVB8RvFDJ8hfyER68nWrE5ZIkBtXsfSy5BLS03ktiUDwhULrRin3rgw+zQdZivG+l2rZsCUg3bmcpmr2sT6RqxZ3QZbRo7vWQa423mlIM/lOuejQulGPo7KsyF78EKr/OSSc5UlbNX8B3nN5YEQCqjFDIR/6lWBSV1X2KXhLMGtcKLQSGqHkQ/0jrzqKXyag+j9jPdAMeYo/H5/IMri84df05VlbUfGfDU3TjyD7gIwL/IGe+vH+DiPDcK0HNZlHTGyf+WlwRnzttZZZIKLyb+vYR6sVsqsUnx/Lz7lN+o3nTfIgv2p0WoOhR65fyKHtfpIm/sU3V/0dKywDEkvZqufj3aa88p8Su4o3rvN0/QSFPLwl0+hBOGhfwCqdQHiY8QYqrMIFChsA8CQ1g48ahblTFmCfMQA9UMNC8eJVpixfEroL4wLduIQA6sNHNvGklSZoPejyjYRhTYlO6I9yAT5hTSdfYRG/TKdvlT6yAOORgTPXLjTJuEKR/TK9xC+PKQzaHiexBgmMJy+j2Z0objxXYT6eHxhPFa9CAdEIj6uqKvN0ytiL3zCuCQftcPaJgl80TN93ABW4iKW+VYF/T3aneBDjTWOwk+dDnkrZqM5YgEcGWEhCrU9DXieWUFOjHClDyVla3yAIrRtlb8N+nqqdPFCWVd7nfJx7WRAWQfwG++jdqspeOc3LIiu4P2/TjfpAbmTduIImcQybIT0MtDrkgYaWYcC6aiSk9+NbjZl6AU3GotpYAHKzK434y40BWgm1zGfvjbSz4bsFP+8DHLVTBrStaSFONVifTtd4csbj1XgrAkr9DufzRKOM6TWazlnXLdBKqOpvRu5A43maZmC7sqrBkRIayy8jsG1bNH+Vj3OWH+c2ptiKYuJaNgzynD0/zF/8j0YLgMQGLeCk0VsZ4/PqPypeb4wny0fL1eD9nw28qf3lHe+Z5cds1H48hL/cGKB1ozdYAk8FL2ydkpSUUrn9WLJ+53Xm0GZjheK6e/ojna9o1/H+eZi3ohIWcvFWemIf6yHMr9xjGqvBybL/BKF1M1WXAeJbOmHo8A+3YyPVfj4ezKGVUNs8NlwV//yf1OTklKzhXpausQC/SUfhQbeept1QcE6v8klJyeWbDVxJsBgbk0Awcjb7v+nRqN4Vk70Gtrp2Hb8/FdLMnJ7/3/LGndccYR1Q8HdRZK0VWqI0/Umzp8t4dVXjQan35GypyZ2QWadBIfi8c4rxZc98ymnkkTOMgSTT9GI0z6L80RXVqlz66inMK2qYoHWhqw5zVtPxF03onYl991Dugf7s5ZvOLrSIvWw//tDI+tT5NHu+WlAfLvKg12j+RlU7fZXRL6nDohNdojv3TdCS9g7dygeUxxP7BgqFCOhtfGTmpYgaS2ASutG9DFoN70yMFVoRVdlLofXhQYbGQN5LYobRnZSZ+OC0poFWiGo5mKVpU/FqbiqiFhxIDRf0Z3c1X8FqJZugJS/xTc7cMn4VGSZzs+08/asf30nnmhtdeZyOX8Y/p/IuedAwNjQZP0guIubE50ROwT1z0wRuipF/gpp6YdCSB23PRpIkCJIHDeCpPDW8mdnLAqo08HLIGx/UgZIO8BvzanIruVBoJZS1n97kw48EBZV5sa496BJz8kkRZZ7WWUHZfelM8KHnONPqeDRKJP0hbzntW5pl0wSthJpuZdf58RcegTeRiLp6GRvJ+Es3g3EKq5Qi4+uNjghC+UNcAHwtUhwXcGhnpwRSdRUeEBSUtSo+2MoYruD+y8ghdrxpkO1tEVWL2TVYb8KEbSzQZjJo/XhJOgpUsrA6EaytVFjJMm7hI7V4K0uMJWV7CncLeFDaYipXzdDewThZxbmdUGA3OYGgpLK7/61EASrHsgD78a81Te6UWbza154UagR/TaFV8MErkNsdVIhigpY8RjsdLHAjokfZK9d1by+OtxAo3kcmF03mM4unVMQtY+VaAZIlU1ZX8KcXQM0Re//EYCsCrciQ/i3NqKvjozwNZ4WjmEvfUYH+elCdtQwMDi25mSVpJQ3NNxVOdKHevB6PhtuSDrtRh4N8Gr2ZmJgAsYBujzvJ9TyfGWoDcLKgaayCuIzX/AeqX8a2fxqA1ofnJJpeW3PMChNo2rOWnH6i2+Ny8cnwrgFtdqxcS4a2kNdXUfCGZxrD/AjXT4mMj7eS8hWH9thFTFq3MhK8qy2DjJMAKRhNJoOAqv7EKmNDze7gAIhRedxYWO4hz/Ogh1UoSkaMjrvNHehuzIyrSRseNFRTuRg5PBlWsigpvsNC+2maCdoqO+jDSc/eDApF7m1EYmqVatVqVPmUtQ9cGyu0bvSAyjVVouVvnXF7WmiWXKMVKa1q9epVshZxgcCSrEroFmNG7zGxAkTP+C3QNtjL53Rud6v6uc5YoqCetBuNo4u/puCx13S/iVO3G8awRlTck1zkQhcfwBrPBooPLXqsbky5iE3QzipnstPTlrARgdJj9Ay+zew+fPr3qzdv3bZt+7ZTPA16EbiWSIStRop2sO7y1r1Uzya1oJV6vUZ9sngNtLJtu5drhgxaF0vSyWp1Bp3BdmhF1MKoTL37Ekv+djTPUKzfJpLWhWZgVv9I9x7PNejEcb7Yqbg3NOpG07HCFGLI86zkfHRlDMVfTdDONEOb9Bmbh2qwbqOA0u774ZDXYo+xP7FDS/65AVM+Mcpp4MMTq5raJepI1UeXHcnHtlaC0I5kT5Txh8FXErKBI6KrwWyHrvyTaUZBQu8bPfqM7it8y8SoNQ+w0bDK4gJFVH0HXcioyQwehLx5rQpD1gztZ2ZoPe+wVQCqjXLF1nVPDjMWIRcekF50roWLHjCqPIIZC4JuT0+TJEp67AD1k9haCUI73oD29ajQdjUUhL8rWqGdYPRoLmySJC02VCHNQizmRwnEqmTv51Y+XAtmqX9EYQnzIkHresOA9hvOtWkfs+It5DMoj64oSrGgJW30yIEM7Zoe7OcjvA0BVf+GelxYK5Q0G7RTDGhfiwptN6aNqXhDecEC7StGj74ApS9tqQGt0Z6ZVHyNMbQLf9KgZglnCSjo82Eh25uRoE2YZgiEL5h1455FyzjpVNoUXyDQDzOm7APHM3drkcvlHtyHkL4Is7pxiq2VILSTDGjfiQrtTQa0m6tZuXay0aMZsE1GrGbFcCyEoZ+S+H3EKBu8QYVa6xo2luHxMfoQbLK23DwDWlptVEJDqNkIXcLH/lq24PMZn32aw4tOFBFa6FCzcWugLA7XMGS8oRJVe9EYyFnLWjm8bun8z2fMnLUPaxauHRvkumjQXmcIhJwG1mXsU+P+N8gyJroXMq7V8KLXp06x0FtvTXk+GE0liqjSoB9zeSF7eot8VVRsTdB+nmqCtuIGQ/maQPQ6ooz9q3OPwZFJnbOYdfN20fVa3k0y+Iy7Z+3FXK/SFe1J2kqDApn7qva/3Kk2m3BfGnotV76eNNr4PTgKAu0kG7StWd1qDR9sb1a+BLSMaQgyfhpJ5L4vySugdu5NYfExLbDkKUldJ/+F2XQwLUOFQzs9VQiuJg1l5tvUlEFk0EQdZXVVNf3gDYgdJHJLHxh6bVGh5dVf2ow6yGqXkMn1NR3nk+xlaTinDaL7224hfb4FWsgYzPXaoxWCA3cTk8EK7UXHdaZ85d9jMRmS9xsOu/9Sa+xtplb58SCU6HHbyFoDBaqIogYP/wnaLXUC76kbTQULQOvHy8oFZpiI+rIB6ZiYv24yoE+pE4P0oD9yeaAUFvlsWnG5ln4FNm475iAgX/9Ba4V8ZxhB3VGCW6LxFOWs0IqoPVvWyFu/NrgrJ7g+ZWUmAyZDrfXMVlXxRBPXSqi9j00UXb+QXOWBHSadctbrMUQWiGCG1X6PyRoNH+8azRke9HzJxCYPuHOEZcbCeaQOGQ4tUgmSS8utFdyZLRa0pjgdlwtdvoe2Qyv3uJG4GTNO25cQuCz1Gwu0AsrIM9T5dwIaNywFVI0NQltuFpsRCv7NpH15yCrG7ayNKfT325lnzY+XRzm6Y/IfSW6U/h17jbplQkSClknyIchwD3cOOBWhYBJ58lruZfu7hnGnC71XPK4NgitJLlbTVMFbmpOuJO7irfwRlGGJX1mgJe2uYX3T8eHaXOUW0d2YiwnD8yWip8GpAJ/o/VBiYLT1DjB54MfjoB8u1DiHvU6/pbI1HY5oVlyDP7rRQ9RfoesF/WOAljE4HkpHLqDMHYF9kzHkEtJ3Vv9T0f/l75YwSvN9xdEQLmoSRFcSE2dxaP9qQNpJ2MnmBt7Je0wavjJXN2sIpJGJgU2GOSAK4FH3aWzRNTsVO/oVvl5B6RpazU+CRVFlJaXwFYieFUQ/BLxa1Ym8Z85puBgFDHAB1bg0wWgKbnmUVuPQ8KlesUDLsZ1el/TLfekGXi+MvN2LoQEJLWGfyLAPSYh8dtleDn8RoBVR+Z148oUwsUXyEBG13csFwk+p8Iz1xhLVAblE2kqnXGMPJABtRw4j+ftBFSiCVPNNTLfkrVxbaRGv9OLHv13ER1v1I8wsFR9exCpxetBAVuCTYLsww8yfSU2fX9YLfhFgpVkI9Vh5hXhDIOBDraOpCAGuZUY9Pv7+oKdmKUbZRIX7QNzoXfa2Vbwrm95Xrt/pQJW62KF1o3bHiAE+5aoq9G27WyxlHAj6PwRUzDGWsQ0X0FYqDJKx1RojlLbRcMFreNe4Bx995zDthWZxhZMxP4T5hr6CD4+5sn6deq2HbMfMOUimf2feZ6HC9sAM3fHQBZUSJcmTUjnr2qE/kbe1pBwdRPkV5MXN71mT7tiJmZPYg4m4TogWsWgWCGAEsZAJlZdl9FN/JVzVS+WbT/jI6M6XdXz4R/C4aiwUoCjQ/ieXRjv8Oemxvn0GfngcbAM6tbqR7yR0f2Cu733mxsuvG7gcsxgJM7Qi+l9wr5yZawrlCmwJ8RBR+mJcwK4D8/T4btg3ZcgSu2Sqm3OnCz1mOGjAGlo8bfxrU2f+cghQyNdXlqeDqPI7hhLYO6Y/1a/PA+O3ci+YQkztaLauWSDAmCGiy89+18kIpiM+R5J3Gu9WpwEVcLFhlkSDdpgN2o7HCX/5DStWY1Pbj+eD11ZANY8pqjFK2opfZ+CboBVQxVUGtlj1+WnsGeH73HwL15J/rz7J1WYyKkBP8Sks3sOLVwfLW7nQAh4wglU5EJok+2XyxlZxaFeRYcuBAECF+9L314q6iWPi2lO0KjV7Mg+E2JQRCDG4mxr30L5PVhW/XyejyWd1YoLQzjagvT0817pQu38pc8kQjuf3saJePryvGfPmokHYyycxtOKTwUzyylaBIKFrvLoPBypeAzMW4G+GwMaOOXrGA/FLPsxjD1RFYd5srObjbc1M/n2U+SeLnoHveEAdnb2y/msaHVb530CWk1dDY/KYz4EgfU90n63JZJg9gnIJ5j0mPdiVbQqnewf7OPJQDRjCw5YOwCxOrYWxNzYD84OkvQxon7fEfJFZ+i8u0Pjb47PZj49cx0YqoMS52GtpRcVzn2YRHMEqeeQ9y1T94UGQUC9xUeqNeQCtZjr+7EZ35VGT30waufGXJuaZLKIGS1kZVuuFSh6eBVobsXC/xl7V4Dn2Lv0YP1OIN9xk6H6UcG8eVpmzT1NId1dZTtElvQn+KJVGhGngmJpd6TKcB6FUuLXBtfNwvkI+KMB3GdCOpZ8o+fgl7vh8jO4vQG0Z8B6qEE75W3bQ215xBm2FCiQNvnxX6olPy7JfP9Ys4JYU0O0nwQdFr6KPGJGG+nv9PsWfj02VqyR02TIaoMWa0zUaRFYwKt0qIyVU9aUCAqWsUO8wLXpDK9kfuYoOzIWu2A28pLJ62BqdAPv7FLala4J2dhq69IfgW8sdXtV8s4DE2zaZXuqWvinoSj4dGxhcO9oQKO3ZrRK607j+bq4PC+1nerGZNg2oHHz9Ikq4b6fpy9X/TUS92Y+Hq5vscNR6vumqJR3Jh1cfoz/Lt5jmuogq9ltlZcbcqdmCXWUizbd5N9fGtf5fhjQMtFf/5X2WL4+Ob1RoVLjZqUg0veQus/fKuq4c/H6gfc+K/FKpx/RNp8lb9e2Y1asSzJT/DH91/KtPtw1ck9jpyZfHvzb6oUuCu9PtHhv72mtjB14RHI07q9/0dcdAgfUd+HncdRWt8fYIVbtt5lY4NZ2/9eNuRNYJSV1Hjhv/6uAWVtvI1WHKRtIX7N38XqdEGnFx6VPjxo97/hrb8QqUetkL3+2AXuvy4dXT7syUwkQQgOpeu/fUlQd8VM7nbvnulV4NkszNoYpdJ/x6wA87D8fWvn9HLVR44RarKxy4J7lRdnaDNP5AC1ENN6N5qxZ1odXiltigt0kVG7XMviSLqu3WB9Hf3JkXt7qkdkKYPpifImY0a9WitjvKVcbDEzMaZ2e3qJ8uokgXM0MrtU5zct0F/OSF6SUxI61cvUuyWzasGLwhKtl3GQKPCxt4EyhKIxinWURI2mO6QBJt55HYJ5ZzAeZzO+GqFIZvxd4fU4EcfjVrO+Rx5ticKMV0BPOtQsiF5q9jK60YZgMn9LG2JkqkmH305wgxZVmK7Sp2pRjLYS8h+nU0wC/m2Rppb8yhuMmBttTIgbbUyIG21MiBttTI2MCxxyE4FDd5UM9cTSW2c4EDbQkTgZZ5mhQ814G2RElEGXMPHD15Knd/Tl8H2ZIlAmeTG2/pffNVpZsd5rykQIhkbIcfHCoCCS63x+MpnerYDjnkkEMOOeSQQw455JBDDjnkkEMOOXTm6P8Af29k4A0KZW5kc3RyZWFtCmVuZG9iago1OCAwIG9iago8PAovVHlwZSAvRm9udAovU3VidHlwZSAvVHlwZTAKL0Jhc2VGb250IC9BQUFBQUErQ3JpbXNvblByby1SZWd1bGFyCi9FbmNvZGluZyAvSWRlbnRpdHktSAovRGVzY2VuZGFudEZvbnRzIFs1OSAwIFJdCi9Ub1VuaWNvZGUgNjAgMCBSCj4+CmVuZG9iago1OSAwIG9iago8PAovVHlwZSAvRm9udAovRm9udERlc2NyaXB0b3IgNjEgMCBSCi9CYXNlRm9udCAvQUFBQUFBK0NyaW1zb25Qcm8tUmVndWxhcgovU3VidHlwZSAvQ0lERm9udFR5cGUyCi9DSURUb0dJRE1hcCAvSWRlbnRpdHkKL0NJRFN5c3RlbUluZm8gNjIgMCBSCi9XIFswIFs1MDAgNTY4LjM1OTM4XQogMzAgWzU4OS44NDM3NV0KIDY5IFs2MzIuODEyNV0KIDc2IFs2NTYuMjVdCiA4MSBbMzAyLjczNDM4XQoyMTUgWzkxOC45NDUzMV0KIDIzNyBbNDYyLjg5MDYzXQogMjY1IFs1MTMuNjcxODggNDE1LjAzOTA2XQogMjczIFs1MjYuMzY3MTldCiAyODAgWzQzOS40NTMxM10KMzA1IFs0ODMuMzk4NDRdCiAzMTcgWzI2MS43MTg3NV0KIDM0MCBbMjYyLjY5NTMxXQogMzQ5IFs4MDMuNzEwOTQgMCA1MzcuMTA5MzhdCiAzNjIgWzQ5Ni4wOTM3NV0KMzk3IFs1MjQuNDE0MDYgMCAwIDM1NS40Njg3NV0KIDQyMCBbMzMxLjA1NDY5XQogNDI4IFs1MzAuMjczNDRdCiA0NTIgWzczNS4zNTE1Nl0KIDQ1OCBbNDYwLjkzNzVdCjU4MiBbMjU5Ljc2NTYzXQogNjI1IFsxODcuNV0KXQovRFcgMAo+PgplbmRvYmoKNjAgMCBvYmoKPDwKL0xlbmd0aCAzNTMKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtDQp4nF2S3WqEMBCF732KXLYXi0lWzS6IILoLXvSH2j6Aq+NWqDFE98K3b5zJbqEBhY85ZziZSVhUZaWHhYXvdmprWFg/6M7CPN1sC+wC10EHQrJuaBdP+G/HxgShM9frvMBY6X4K0pSx8MNV58Wu7Cnvpgs8B+Gb7cAO+sqevoracX0z5gdG0AvjQZaxDnrX6aUxr80ILETbrupcfVjWnfP8KT5XA0wiC0rTTh3MpmnBNvoKQcrdyVh6dicLQHf/6nJPtkvffjcW5cLJOY9EtpE4Ee2RophIERVEB6TY+45IpUKKSXkqkRLsKQQpk4joQBQj7X1NEXkf9hRxRFQQ+VpJdCY6ISU50RnpQErFkY6cSCLl1FNRlpxupChL4WuUpaCeCrPIKEGSeCOpKLXkOGI/S3Gf7H0Tgh83meA+nfRqqm+72d7QY/HtzVq3c3xouOxtzYOGx1s0k9lc2/cL9Ma5Qw0KZW5kc3RyZWFtCmVuZG9iago2MSAwIG9iago8PAovVHlwZSAvRm9udERlc2NyaXB0b3IKL0ZvbnROYW1lIC9BQUFBQUErQ3JpbXNvblByby1SZWd1bGFyCi9GbGFncyA0Ci9Bc2NlbnQgODk2LjQ4NDM4Ci9EZXNjZW50IC0yMTQuODQzNzUKL1N0ZW1WIDEzNy42OTUzMTMKL0NhcEhlaWdodCA1NzMuMjQyMTkKL0l0YWxpY0FuZ2xlIDAKL0ZvbnRCQm94IFstMTA0LjQ5MjE4OCAtMjc2LjM2NzE5IDExMzEuODM1OTQgOTYwLjkzNzVdCi9Gb250RmlsZTIgNjMgMCBSCj4+CmVuZG9iago2MiAwIG9iago8PAovUmVnaXN0cnkgKEFkb2JlKQovT3JkZXJpbmcgKElkZW50aXR5KQovU3VwcGxlbWVudCAwCj4+CmVuZG9iago2MyAwIG9iago8PAovTGVuZ3RoIDMyMTEKL0xlbmd0aDEgODkxMgovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0NCnic7VkJcFvVFX2LLMmLFmuXJWvX/5atxdbiL9uybFleEid27NhxSBonEcGJHbwRO4RAoeyknQbaAdLSdKBQ2oEWGIaBNNAMk7KUgbKUbmGAaadTSqdrhjIBOk2s3vclr8RAKKFlyLv5+W/799xz3333vy8jjBBSoCsRRT1r+kLhjT1Tv0IIPw+9W/v6U/1v3P+8Edr7oN26bSwzqXlK81eEiB/ah3ZkpibhrobrDbjkO0b3bleMlP4CIcPXECpJDg9lLrC8XHEAnu+B8dph6JA9IimDNnveMzw2fUmMUClCxZvgCo9ObMtUBrkXECooQUjaPZa5ZJIKksdh7t/gcoxnxoaCuv5ewAc8wk1OTE1n70Bh0FfCxid3DU0OS796HdRfh0t2GGeve1CyH4YRzmaRCu6IcpLVSIbGUQFrLSgS8ADNVbPfZjpPU9jzB7IemPzd7K2nfie5YYkORKbEHoyuufaZf3VvUSVOyKlEHHml8Mil4v0W/vfZW2f+KLmBvgJNKSJzujGSiy2d+L8HkT07hqeZupHpzCgugnEJ+FpExBSDh8FeaOHCWduQhLD+ArDjW2Q7tLtyd7wd+GTfz2W+tE+syKCjyIH25vjRf2DegfDN4sR7ySrmXdE7RERlNorYcJegu+BuBcsoKkFOlEJptBKtR0NoBxpBk2gX2o32oL3ZrKiDjXbAaEYcHYXR6dnR7NHsazDnSrieQywGbXB14V7AsYpGlok4SNSDEJf3+EWkHbWh1agX/R0X4iJcik24Hw/iLXgn3o/vxveJ04rRV5jFEuarh9Bf8nWMDICUqxOkRD/N1ylqRtfn6xJA2pqvF4AN7fm6FFbIlauDI0pAU65O5/XAyhTBSK7Oagg8Mw3cR4H7NrQWTaAxaI2L3hoBjwzDaBp8MgL9UzA6jnqgNYECMJf5czc8mYGeAWjtghkj4hwHqkFBVA0SXvK0I/+8Y8nz8/MbgM8EWgG9Dcsgt6FLwKpdMGP1nI2LtZ0eMw3XJNorjuWecgBeNWDHodYPPUNwX87e3H0nzNkmPpkCtGl4ZkLk7UAVosZpQJhC9SgEwuKJzdiNzgd220TfhkR242J/BkamQN849J6OqS+/Feo+tkx8ovLIQsHWOVlxTubk8jOQlz6eEC3pWCRfXyRPn6nQ6mUkQbedgdy4VCQEZPVp5bJPRJ5jUiD7iBJcIlNnKPcskNc/nyKVn5PPsNjFw1IETidLzohnv5BNKPppY37UQvahyLJj34E395KCa+F9fa6cK0sKvR++4s5Cwa/CSfhTLESJCL537vT5/nELnHWXKfgJVHl2rFqAcRy+6c5kPnwJseus2KIQf2v4wEIFZGZ3wiHTR9Z7cnn/f9qFmJFxto5Hc1w+qYL7kOYDse0f7t//ppC3kOR0/fiV7MmziXuu/H8VXATf5Z+VcvR/bcDnqBxH7NAM52XSTgaRlr15pnhBK2iNMjcv8DwVqExmlPExgyESrhX0HOd2SSmpebH+1TB9jjQ2FI8Zh4tjjcSqbakOpTWutN2W4pRE6j51TMlxylvsWK2Y+YPtViX3aAwTgmMYs99do9l3STPpRy6E2lwcF4smSSRsMAKSiCDV63KAglEmleLJ9TcN+Ndd2u3b5JEFbNpk+aotgYahRnvM5A9a3YOF6evOb5pYV61WfVmyRaFIjabWXZxQKjcXXFFqAawIYF0AWKEPwZLFohzPCxGjTKeDPiMAX7zx5oHAusvWVA66pP5ybbOlKxNsHE5Z2ywmQlrJk8RPMD9WmL4W8AcA/xrJBmUJw9+TUOviI86woriCKyngLO7qsrJyRNlpm0yRVciCBNSGUIYXkiQGuHlgJdEza8A257IjdNFa4NtII6EYU7gdo0kiliQ99ROog6sx1H89P6NL2y0IqzSG9nj9Ck4pcSarj4STTspWijqT4SPVSaeENQo8Sf+RQJN36QhWN7BFbAB17Pds8CiWi2xY1Cxjbw3gipY0kgWWLI8B8SjLnqL3gN5ipjlF3VRUqXVrtXM18U7xnx6qejlMnqSRu/V33PtSmPyMNt6lu72DHqaRY/jwTBspA+2KmVX4e6dOzNUfZoin3mSR35B9Dz+NDyE/rAdaL0YHBB2jAb6VyaRitAgQLTIICKMegtHt4vmIVMrDCsRkYvA8VZF0V0W+aQvbzRpCPGFbtWBZuRETSptrlCa5vbBY5WwsMPo0kyZ9QO4IW5z+0kjE7DPp7ZVyvanUZTdIuprv0XgLS+waAOC93ga9YcQmLdOZfWAjARvfJIeQAwUQ2lMbjYKbgyQGfjYqicxYWwvRbNDrmGmcAGbVirbrDYY1zO+dZL+WrRk1dfrDfdH0ZGvVugMNXZisidvq9PqwxRUNW+9zd6+MFRU6fMrK/vFe7Kqs+UKqY6xRZ9/Q19Nlsb6tLIXV9oEdd4KvnHOemkUGYJ43cqI3WGjC1nk3vjnesD3lT9h1mlKDJuKp6KzubeQEs8U6II9k0qnhpMGjU+tLNJGiQmdvc8+A1W6MRtiaVGRPQAwfQh5UAzsWspDIbG7fAvcQYRD63JqIKyGuF6DjL6kwLW92122MeJp6qiwNOhZ63eRmWBlcgJv/bY2UaevLmzrWFCtSuNJVO9gYO6/JpVRp6ptqCpVOnzI53fRmZKVK7eTMjmMu62Bnz3rgXgnc78A/YvlqlrsRqOudsQhLG2IamSf/Xv3mWvjXfd7MC28VR4LWqKO32SOUmYF6NNPSMVyH8dBmjV+hr2typiMlazdZHCJ3CXJmrfi3+BE4HddBflgporGQNM76FsBCZGGf0ZhbfLp4SViA5gyDOV6IlT9vGq1NcE5Pc11zb3XdhSpPNBpUaDVm41VtKxLb47G+YPXaSKQnFOr1+6pjVb6ogPV7+NvfSIRd9Ta5Llxe4Y/7XU5JoYS3WqI6nUJfpNRShSweDXZW4a1ca2V1Z1VFR8DfUVmRCNelm6LR9LPyCjXKZsVvkxPkoJTDSajJqDe7ESHxb0HQjx9m5++5/MHzMZGZSE1mIWnIHBKavlFFKSVp4lVKdH6+pbJVo3R6lfZExRXBhFzpZdrYSfptiJuyeW1z2yQXKzIrSREMu4J0kpu0rEKhw6ssDqwWLvf2rIjIi2ALVPVtX3FnwxYl00rY9wAth6iPoJ5ZvYKY5cDMuc1nFLW7xVE+nzxyBObzOOvj8/NzYw6SBFOAHmm+vrSA2ls87pYqTGmCPkkFZp3Fb7YJekog3+6kEDTEFjC664xa9xp/ZWsFJUniUckMlZ5uvZ8vAX+oazHv4robd3rqilUej0pu4izjVVGTzXEgON8z5o+aXG5vdaBide1F4kzmPfh2IyrgGV7AcjFJ/QKSsUUk7TkiBVTk4W6t8KZ8lCbps6Qeuu1BkzMOLJIUrDVVurqcLWzx1DHMubxd9ROe+qJZ00YDMaPDdiAUZ0YRMeP8EmxSofLZd/eiAJ+PcAPGqUxtw1AiuSka31LjCls76mtT7qQ8PpRqvSAubGtp2pEI+VaGBi7csCo+UM1W1pj14OOg3ct+u1vPC9GFpCOL0iqf46kFSEivs/m1XKRN8rStaV5YV5PYkTJF9BSvJSpfwo2xq55zxAza2OseVYHJF/e+a2sSyQser7C1MT3SWChfxcUUCg5L+c4obKFy6z9V7G/OEHd4A+wNfpn1yKdd2Coyo42wSKNJFjPMGqWE2hqtRrvTrHGqNBqXipmJ10O0FJgDjm5nStw8/bjeZzIYy9RKaYnfPmiOBYoV7O2rAa9vIAVwGoR9OSTyjwnumBCRyXIZjsYierxB2+JJrKHtV2kJDviMvPqZHyed3s7O4/rdU+9Ew1ol9oTDbFdCNpcCDzj5DMELdDadL9zqebWx2W0llepYsOFnmq5m2bzRnd5ISes+lsLrA5a4Hsis3A+cCtrVToeiCfucfX0DlloL86u9nRtPxqyuaUMVr2QsrVVV1g4hDbwk2ZPkLfwARBOcKtryJwlZ/iThnGsbKX7vtgg5TKLT5j1RcpCEfjjz+F0h8iiJfNF2reUbEnjHQLjO/BzjGrFy1XxHfXLmELyvT4pZ/AEkY389X5/XDEdqKstxZ2cMmSAA9GsPhugTJLnvRRr6QY+hxmFymMyDwYniq5NkHmcb/H/w+0HOpFWVya3h32gYMIvg9uw76CnyGCpi0bKHcrmYBZjFW2WXkyhNarVJSZxajbW01KrRlKs9h/BjZkdpqcM8035UbS3VWNRqi6bMzXLBceLFI+QgnL9QSjQ3F284UObxlJW5XMTrMpvcbpMZXofoP5F+JXQNCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDY0CjAwMDAwMDAwMDAgNjU1MzUgZg0KMDAwMDAwMDAxNSAwMDAwMCBuDQowMDAwMDAwNDE5IDAwMDAwIG4NCjAwMDAwMDA0NzYgMDAwMDAgbg0KMDAwMDAwMDU4NCAwMDAwMCBuDQowMDAwMDAwNjM0IDAwMDAwIG4NCjAwMDAwMDAxNTIgMDAwMDAgbg0KMDAwMDAwMDY3NyAwMDAwMCBuDQowMDAwMDAwOTYwIDAwMDAwIG4NCjAwMDAwMDEwNTcgMDAwMDAgbg0KMDAwMDAwMTE2MCAwMDAwMCBuDQowMDAwMDAxOTE2IDAwMDAwIG4NCjAwMDAwMDIwNDEgMDAwMDAgbg0KMDAwMDAwMzA5NCAwMDAwMCBuDQowMDAwMDAzMTg2IDAwMDAwIG4NCjAwMDAwMDMyODEgMDAwMDAgbg0KMDAwMDAwMzM3NiAwMDAwMCBuDQowMDAwMDAzNDcxIDAwMDAwIG4NCjAwMDAwMDM1NjYgMDAwMDAgbg0KMDAwMDAwMzY2MSAwMDAwMCBuDQowMDAwMDAzNzU2IDAwMDAwIG4NCjAwMDAwMDM4NDQgMDAwMDAgbg0KMDAwMDAwMzkzMyAwMDAwMCBuDQowMDAwMDA0MDIyIDAwMDAwIG4NCjAwMDAwMDQxMTEgMDAwMDAgbg0KMDAwMDAwNDIwMCAwMDAwMCBuDQowMDAwMDA0Mjg5IDAwMDAwIG4NCjAwMDAwMDQzNzggMDAwMDAgbg0KMDAwMDAwNDQ5NSAwMDAwMCBuDQowMDAwMDA0NTg0IDAwMDAwIG4NCjAwMDAwMDQ2NzMgMDAwMDAgbg0KMDAwMDAwNDc2MiAwMDAwMCBuDQowMDAwMDA0ODUxIDAwMDAwIG4NCjAwMDAwMDQ5NDAgMDAwMDAgbg0KMDAwMDAwNTAyNyAwMDAwMCBuDQowMDAwMDA1MTE2IDAwMDAwIG4NCjAwMDAwMDUyMDUgMDAwMDAgbg0KMDAwMDAwNTI5MiAwMDAwMCBuDQowMDAwMDA1MzgxIDAwMDAwIG4NCjAwMDAwMDU0NzcgMDAwMDAgbg0KMDAwMDAwNTU3MSAwMDAwMCBuDQowMDAwMDA1NjU4IDAwMDAwIG4NCjAwMDAwMDU3NDcgMDAwMDAgbg0KMDAwMDAwNTgzNiAwMDAwMCBuDQowMDAwMDA1OTI1IDAwMDAwIG4NCjAwMDAwMDYwMTIgMDAwMDAgbg0KMDAwMDAwNjA1NiAwMDAwMCBuDQowMDAwMDM2NDMyIDAwMDAwIG4NCjAwMDAwMzY0NjUgMDAwMDAgbg0KMDAwMDAzNjUxNiAwMDAwMCBuDQowMDAwMDM2NTY3IDAwMDAwIG4NCjAwMDAwMzY2MTggMDAwMDAgbg0KMDAwMDAzNjY2OSAwMDAwMCBuDQowMDAwMDM2NzIwIDAwMDAwIG4NCjAwMDAwMzY3NzEgMDAwMDAgbg0KMDAwMDAzNjgyMiAwMDAwMCBuDQowMDAwMDM2ODYyIDAwMDAwIG4NCjAwMDAwMzY5NDEgMDAwMDAgbg0KMDAwMDA0OTMxNiAwMDAwMCBuDQowMDAwMDQ5NDY5IDAwMDAwIG4NCjAwMDAwNTAwMzcgMDAwMDAgbg0KMDAwMDA1MDQ2NSAwMDAwMCBuDQowMDAwMDUwNzIwIDAwMDAwIG4NCjAwMDAwNTA3OTUgMDAwMDAgbg0KdHJhaWxlcgo8PAovUm9vdCAxIDAgUgovSW5mbyA2IDAgUgovSUQgWzwwQ0M3NzdBRDZENEFBMThFRkFGQ0ExODQ3QjI1QkMxQz4gPDBDQzc3N0FENkQ0QUExOEVGQUZDQTE4NDdCMjVCQzFDPl0KL1NpemUgNjQKPj4Kc3RhcnR4cmVmCjU0MDk2CiUlRU9GCg==',
+};
\ No newline at end of file
diff --git a/src/components/CheckIn/types.ts b/src/components/CheckIn/types.ts
new file mode 100644
index 0000000000..2fcb2d63cf
--- /dev/null
+++ b/src/components/CheckIn/types.ts
@@ -0,0 +1,44 @@
+export interface InterfaceUser {
+  _id: string;
+  firstName: string;
+  lastName: string;
+}
+
+export interface InterfaceAttendeeCheckIn {
+  _id: string;
+  user: InterfaceUser;
+  checkIn: null | {
+    _id: string;
+    time: string;
+  };
+}
+
+export interface InterfaceAttendeeQueryResponse {
+  event: {
+    _id: string;
+    attendeesCheckInStatus: InterfaceAttendeeCheckIn[];
+  };
+}
+
+export interface InterfaceModalProp {
+  show: boolean;
+  eventId: string;
+  handleClose: () => void;
+}
+
+export interface InterfaceTableCheckIn {
+  id: string;
+  name: string;
+  userId: string;
+  checkIn: null | {
+    _id: string;
+    time: string;
+  };
+  eventId: string;
+}
+
+export interface InterfaceTableData {
+  userName: string;
+  id: string;
+  checkInData: InterfaceTableCheckIn;
+}
diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.module.css b/src/components/CollapsibleDropdown/CollapsibleDropdown.module.css
new file mode 100644
index 0000000000..4337742ecc
--- /dev/null
+++ b/src/components/CollapsibleDropdown/CollapsibleDropdown.module.css
@@ -0,0 +1,14 @@
+.iconWrapper {
+  width: 36px;
+}
+
+.collapseBtn {
+  height: 48px;
+}
+
+.iconWrapperSm {
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.test.tsx b/src/components/CollapsibleDropdown/CollapsibleDropdown.test.tsx
new file mode 100644
index 0000000000..efee248ffb
--- /dev/null
+++ b/src/components/CollapsibleDropdown/CollapsibleDropdown.test.tsx
@@ -0,0 +1,110 @@
+import React, { act } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+
+import CollapsibleDropdown from './CollapsibleDropdown';
+import type { InterfaceCollapsibleDropdown } from './CollapsibleDropdown';
+import { store } from 'state/store';
+import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/orgstore',
+    state: {},
+    key: '',
+    search: '',
+    hash: '',
+  }),
+}));
+
+const props: InterfaceCollapsibleDropdown = {
+  showDropdown: true,
+  setShowDropdown: jest.fn(),
+  target: {
+    name: 'DropDown Category',
+    url: undefined,
+    subTargets: [
+      {
+        name: 'SubCategory 1',
+        url: '/sub-category-1',
+        icon: 'fa fa-home',
+      },
+      {
+        name: 'SubCategory 2',
+        url: '/sub-category-2',
+        icon: 'fa fa-home',
+      },
+    ],
+  },
+};
+
+describe('Testing CollapsibleDropdown component', () => {
+  test('Component should be rendered properly', () => {
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <CollapsibleDropdown {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+    expect(screen.getByText('DropDown Category')).toBeInTheDocument();
+    expect(screen.getByText('SubCategory 1')).toBeInTheDocument();
+    expect(screen.getByText('SubCategory 2')).toBeInTheDocument();
+  });
+
+  test('Dropdown should be rendered and functioning correctly', () => {
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <CollapsibleDropdown {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+    const parentDropdownBtn = screen.getByTestId('collapsible-dropdown');
+    const activeDropdownBtn = screen.getByText('SubCategory 1');
+    const nonActiveDropdownBtn = screen.getByText('SubCategory 2');
+
+    // Check if dropdown is rendered with correct classes
+    act(() => {
+      fireEvent.click(activeDropdownBtn);
+    });
+    expect(parentDropdownBtn).toBeInTheDocument();
+    expect(parentDropdownBtn).toHaveClass('text-white');
+    expect(parentDropdownBtn).toHaveClass('btn-success');
+
+    // Check if active dropdown is rendered with correct classes
+    expect(activeDropdownBtn).toBeInTheDocument();
+    expect(activeDropdownBtn).toHaveClass('text-white');
+    expect(activeDropdownBtn).toHaveClass('btn-success');
+
+    // Check if inactive dropdown is rendered with correct classes
+    expect(nonActiveDropdownBtn).toBeInTheDocument();
+    expect(nonActiveDropdownBtn).toHaveClass('text-secondary');
+    expect(nonActiveDropdownBtn).toHaveClass('btn-light');
+
+    // Check if dropdown is collapsed after clicking on it
+    act(() => {
+      fireEvent.click(parentDropdownBtn);
+    });
+    expect(props.setShowDropdown).toHaveBeenCalledWith(false);
+
+    // Check if dropdown is expanded after clicking on it again
+    act(() => {
+      fireEvent.click(parentDropdownBtn);
+    });
+    expect(props.setShowDropdown).toHaveBeenCalledWith(true);
+
+    // Click on non-active dropdown button and check if it navigates to the correct URL
+    act(() => {
+      fireEvent.click(nonActiveDropdownBtn);
+    });
+    expect(window.location.pathname).toBe('/sub-category-2');
+  });
+});
diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx b/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
new file mode 100644
index 0000000000..2991c2ade5
--- /dev/null
+++ b/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+import { Button, Collapse } from 'react-bootstrap';
+import type { TargetsType } from 'state/reducers/routesReducer';
+import styles from './CollapsibleDropdown.module.css';
+import IconComponent from 'components/IconComponent/IconComponent';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+export interface InterfaceCollapsibleDropdown {
+  showDropdown: boolean;
+  target: TargetsType;
+  setShowDropdown: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+/**
+ * A collapsible dropdown component that toggles visibility of sub-targets.
+ *
+ * @param showDropdown - Boolean indicating whether the dropdown is visible or not.
+ * @param target - Object containing the target information, including the name and sub-targets.
+ * @param setShowDropdown - Function to toggle the visibility of the dropdown.
+ *
+ * @returns JSX.Element - The rendered CollapsibleDropdown component.
+ */
+const collapsibleDropdown = ({
+  target,
+  showDropdown,
+  setShowDropdown,
+}: InterfaceCollapsibleDropdown): JSX.Element => {
+  const { t: tCommon } = useTranslation('common');
+  const { name, subTargets } = target;
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    // Show dropdown if the current path includes 'orgstore', otherwise hide it.
+    if (location.pathname.includes('orgstore')) {
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false);
+    }
+  }, [location.pathname]);
+
+  return (
+    <>
+      <Button
+        variant={showDropdown ? 'success' : ''}
+        className={showDropdown ? 'text-white' : 'text-secondary'}
+        onClick={(): void => setShowDropdown(!showDropdown)}
+        aria-expanded={showDropdown}
+        data-testid="collapsible-dropdown"
+      >
+        <div className={styles.iconWrapper}>
+          <IconComponent
+            name={name}
+            fill={showDropdown ? 'var(--bs-white)' : 'var(--bs-secondary)'}
+          />
+        </div>
+        {tCommon(name)}
+        <i
+          className={`ms-auto fa  
+          ${showDropdown ? 'var(--bs-white)' : 'var(--bs-secondary)'} 
+          ${showDropdown ? 'fa-chevron-up' : 'fa-chevron-down'}
+          `}
+        />
+      </Button>
+      <Collapse in={showDropdown}>
+        <div className="ps-4">
+          {subTargets &&
+            subTargets.map(({ name, icon: stringIcon, url }, index) => {
+              return (
+                <NavLink to={url} key={name}>
+                  {({ isActive }) => (
+                    <Button
+                      key={name}
+                      variant={isActive === true ? 'success' : 'light'}
+                      size="sm"
+                      className={`${styles.collapseBtn} ${
+                        isActive === true ? 'text-white' : 'text-secondary'
+                      }`}
+                      onClick={(): void => {
+                        navigate(url);
+                      }}
+                      data-testid={`collapsible-dropdown-btn-${index}`}
+                    >
+                      <div className={styles.iconWrapperSm}>
+                        <i className={`fa ${stringIcon}`} />
+                      </div>
+                      {tCommon(name || '')}
+                      <div className="ms-auto">
+                        <i
+                          className={`fa me-2 fa-chevron-right ${
+                            isActive === true ? 'text-white' : 'text-secondary'
+                          }`}
+                        />
+                      </div>
+                    </Button>
+                  )}
+                </NavLink>
+              );
+            })}
+        </div>
+      </Collapse>
+    </>
+  );
+};
+
+export default collapsibleDropdown;
diff --git a/src/components/ContriStats/ContriStats.module.css b/src/components/ContriStats/ContriStats.module.css
new file mode 100644
index 0000000000..7d6c83ea8e
--- /dev/null
+++ b/src/components/ContriStats/ContriStats.module.css
@@ -0,0 +1,7 @@
+.fonts {
+  color: #707070;
+}
+
+.fonts > span {
+  font-weight: 600;
+}
diff --git a/src/components/ContriStats/ContriStats.test.tsx b/src/components/ContriStats/ContriStats.test.tsx
new file mode 100644
index 0000000000..8edb853684
--- /dev/null
+++ b/src/components/ContriStats/ContriStats.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ContriStats from './ContriStats';
+import { I18nextProvider } from 'react-i18next';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import type { NormalizedCacheObject } from '@apollo/client';
+import i18nForTest from 'utils/i18nForTest';
+import { BACKEND_URL } from 'Constant/constant';
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  uri: BACKEND_URL,
+});
+
+describe('Testing Contribution Stats', () => {
+  const props = {
+    id: '234',
+    recentAmount: '200',
+    highestAmount: '500',
+    totalAmount: '1000',
+  };
+
+  test('should render props and text elements test for the page component', () => {
+    render(
+      <ApolloProvider client={client}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ContriStats {...props} />
+        </I18nextProvider>
+      </ApolloProvider>,
+    );
+    expect(screen.getByText('Recent Contribution: $')).toBeInTheDocument();
+    expect(screen.getByText('Highest Contribution: $')).toBeInTheDocument();
+    expect(screen.getByText('Total Contribution: $')).toBeInTheDocument();
+    expect(screen.getByText('200')).toBeInTheDocument();
+    expect(screen.getByText('500')).toBeInTheDocument();
+    expect(screen.getByText('1000')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/ContriStats/ContriStats.tsx b/src/components/ContriStats/ContriStats.tsx
new file mode 100644
index 0000000000..a2db307d91
--- /dev/null
+++ b/src/components/ContriStats/ContriStats.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './ContriStats.module.css';
+
+interface InterfaceContriStatsProps {
+  id: string;
+  recentAmount: string;
+  highestAmount: string;
+  totalAmount: string;
+}
+
+/**
+ * A component that displays contribution statistics.
+ *
+ * @param props - The properties passed to the component, including `recentAmount`, `highestAmount`, and `totalAmount`.
+ *
+ * @returns JSX.Element - The rendered component displaying the contribution stats.
+ */
+function ContriStats(props: InterfaceContriStatsProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'contriStats',
+  });
+
+  return (
+    <>
+      <p className={styles.fonts}>
+        {t('recentContribution')}: $&nbsp;<span>{props.recentAmount}</span>
+      </p>
+      <p className={styles.fonts}>
+        {t('highestContribution')}: $&nbsp;<span>{props.highestAmount}</span>
+      </p>
+      <p className={styles.fonts}>
+        {t('totalContribution')}: $&nbsp;<span>{props.totalAmount}</span>
+      </p>
+    </>
+  );
+}
+export default ContriStats;
diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css b/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css
new file mode 100644
index 0000000000..d2c250035a
--- /dev/null
+++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css
@@ -0,0 +1,19 @@
+.round {
+  background-color: red;
+  border-radius: 100%;
+  width: 15px;
+  height: 15px;
+}
+.line {
+  width: 100%;
+  height: 1px;
+  background-color: red;
+  margin: auto;
+}
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  top: -8px;
+  left: -9px;
+}
diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx
new file mode 100644
index 0000000000..084817dc0d
--- /dev/null
+++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CurrentHourIndicator from './CurrentHourIndicator';
+
+describe('Testing Current Hour Indicator', () => {
+  test('Component Should be rendered properly', async () => {
+    const { getByTestId } = render(<CurrentHourIndicator />);
+    expect(getByTestId('container')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
new file mode 100644
index 0000000000..98e02bbf5f
--- /dev/null
+++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './CurrentHourIndicator.module.css';
+
+/**
+ * A component that displays an indicator for the current hour.
+ *
+ * @returns JSX.Element - The rendered component showing the current hour indicator.
+ */
+const CurrentHourIndicator = (): JSX.Element => {
+  return (
+    <div className={styles.container} data-testid="container">
+      <div className={styles.round}></div>
+      <div className={styles.line}></div>
+    </div>
+  );
+};
+
+export default CurrentHourIndicator;
diff --git a/src/components/DynamicDropDown/DynamicDropDown.module.css b/src/components/DynamicDropDown/DynamicDropDown.module.css
new file mode 100644
index 0000000000..3cd40fe35d
--- /dev/null
+++ b/src/components/DynamicDropDown/DynamicDropDown.module.css
@@ -0,0 +1,13 @@
+.dropwdownToggle {
+  background-color: #f1f3f6;
+  color: black;
+  width: 100%;
+  border: none;
+  padding: 0.5rem;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 8rem;
+  outline: 1px solid var(--bs-gray-400);
+}
diff --git a/src/components/DynamicDropDown/DynamicDropDown.test.tsx b/src/components/DynamicDropDown/DynamicDropDown.test.tsx
new file mode 100644
index 0000000000..dac98ca9e6
--- /dev/null
+++ b/src/components/DynamicDropDown/DynamicDropDown.test.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  act,
+  waitFor,
+  fireEvent,
+} from '@testing-library/react';
+import DynamicDropDown from './DynamicDropDown';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import userEvent from '@testing-library/user-event';
+
+describe('DynamicDropDown component', () => {
+  test('renders and handles selection correctly', async () => {
+    const formData = { fieldName: 'value2' };
+    const setFormData = jest.fn();
+
+    render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <DynamicDropDown
+            formState={formData}
+            setFormState={setFormData}
+            fieldOptions={[
+              { value: 'TEST', label: 'Label 1' },
+              { value: 'value2', label: 'Label 2' },
+            ]}
+            fieldName="fieldName"
+          />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+
+    // Verify that the dropdown container is rendered
+    const containerElement = screen.getByTestId('fieldname-dropdown-container');
+    expect(containerElement).toBeInTheDocument();
+
+    // Verify that the dropdown button displays the correct initial label
+    const dropdownButton = screen.getByTestId('fieldname-dropdown-btn');
+    expect(dropdownButton).toHaveTextContent('Label 2');
+
+    // Open the dropdown menu
+    await act(async () => {
+      userEvent.click(dropdownButton);
+    });
+
+    // Select the first option in the dropdown
+    const optionElement = screen.getByTestId('change-fieldname-btn-TEST');
+    await act(async () => {
+      userEvent.click(optionElement);
+    });
+
+    // Verify that the setFormData function was called with the correct arguments
+    expect(setFormData).toHaveBeenCalledWith({ fieldName: 'TEST' });
+
+    // Verify that the dropdown button displays the updated label
+    await waitFor(() => {
+      expect(dropdownButton).toHaveTextContent('Label 2');
+    });
+  });
+  test('calls custom handleChange function when provided', async () => {
+    const formData = { fieldName: 'value1' };
+    const setFormData = jest.fn();
+    const customHandleChange = jest.fn();
+
+    render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <DynamicDropDown
+            formState={formData}
+            setFormState={setFormData}
+            fieldOptions={[
+              { value: 'value1', label: 'Label 1' },
+              { value: 'value2', label: 'Label 2' },
+            ]}
+            fieldName="fieldName"
+            handleChange={customHandleChange}
+          />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+
+    const dropdownButton = screen.getByTestId('fieldname-dropdown-btn');
+    await act(async () => {
+      userEvent.click(dropdownButton);
+    });
+
+    const optionElement = screen.getByTestId('change-fieldname-btn-value2');
+    await act(async () => {
+      userEvent.click(optionElement);
+    });
+
+    expect(customHandleChange).toHaveBeenCalledTimes(1);
+    expect(customHandleChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          name: 'fieldName',
+          value: 'value2',
+        }),
+      }),
+    );
+    expect(setFormData).not.toHaveBeenCalled();
+  });
+  test('handles keyboard navigation correctly', async () => {
+    const formData = { fieldName: 'value1' };
+    const setFormData = jest.fn();
+
+    render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <DynamicDropDown
+            formState={formData}
+            setFormState={setFormData}
+            fieldOptions={[
+              { value: 'value1', label: 'Label 1' },
+              { value: 'value2', label: 'Label 2' },
+            ]}
+            fieldName="fieldName"
+          />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+
+    // Open dropdown
+    const dropdownButton = screen.getByTestId('fieldname-dropdown-btn');
+    await act(async () => {
+      userEvent.click(dropdownButton);
+    });
+
+    // Get dropdown menu
+    const dropdownMenu = screen.getByTestId('fieldname-dropdown-menu');
+
+    // Simulate Enter key press
+    await act(async () => {
+      fireEvent.keyDown(dropdownMenu, { key: 'Enter' });
+    });
+
+    // Simulate Space key press
+    await act(async () => {
+      fireEvent.keyDown(dropdownMenu, { key: ' ' });
+    });
+
+    // Verify the dropdown menu behavior
+    const option = screen.getByTestId('change-fieldname-btn-value2');
+    expect(option).toBeInTheDocument();
+  });
+});
diff --git a/src/components/DynamicDropDown/DynamicDropDown.tsx b/src/components/DynamicDropDown/DynamicDropDown.tsx
new file mode 100644
index 0000000000..05cd064ac2
--- /dev/null
+++ b/src/components/DynamicDropDown/DynamicDropDown.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import { Dropdown } from 'react-bootstrap';
+import styles from './DynamicDropDown.module.css';
+
+/**
+ * Props for the DynamicDropDown component.
+ */
+interface InterfaceChangeDropDownProps<T> {
+  parentContainerStyle?: string;
+  btnStyle?: string;
+  btnTextStyle?: string;
+  setFormState: React.Dispatch<React.SetStateAction<T>>;
+  formState: T;
+  fieldOptions: { value: string; label: string }[];
+  fieldName: string;
+  handleChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+
+/**
+ * A dynamic dropdown component that allows users to select an option.
+ *
+ * This component renders a dropdown with a toggle button. Clicking the button
+ * opens a menu with options. When an option is selected, it updates the form state.
+ *
+ * @param parentContainerStyle - Optional CSS class for styling the container.
+ * @param btnStyle - Optional CSS class for styling the dropdown button.
+ * @param setFormState - Function to update the form state with the selected option.
+ * @param formState - Current state of the form, used to determine the selected value.
+ * @param fieldOptions - Options to display in the dropdown. Each option has a value and a label.
+ * @param fieldName - The name of the field, used for labeling and key identification.
+ * @param handleChange - Optional callback function when selection changes
+ * @returns JSX.Element - The rendered dropdown component.
+ */
+const DynamicDropDown = <T extends Record<string, unknown>>({
+  parentContainerStyle = '',
+  btnStyle = '',
+  setFormState,
+  formState,
+  fieldOptions,
+  fieldName,
+  handleChange,
+}: InterfaceChangeDropDownProps<T>): JSX.Element => {
+  const handleFieldChange = (value: string): void => {
+    if (handleChange) {
+      const event = {
+        target: {
+          name: fieldName,
+          value: value,
+        },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      handleChange(event);
+    } else {
+      setFormState({ ...formState, [fieldName]: value });
+    }
+  };
+
+  const getLabel = (value: string): string => {
+    const selectedOption = fieldOptions.find(
+      (option) => option.value === value,
+    );
+    return selectedOption ? selectedOption.label : 'None';
+  };
+
+  return (
+    <Dropdown
+      title={`Select ${fieldName}`}
+      className={`${parentContainerStyle ?? ''} m-2`}
+      data-testid={`${fieldName.toLowerCase()}-dropdown-container`}
+      aria-label={`Select ${fieldName}`}
+    >
+      <Dropdown.Toggle
+        className={`${btnStyle ?? 'w-100'} ${styles.dropwdownToggle}`}
+        data-testid={`${fieldName.toLowerCase()}-dropdown-btn`}
+        aria-expanded="false"
+      >
+        {getLabel(formState[fieldName] as string)}
+      </Dropdown.Toggle>
+      <Dropdown.Menu
+        data-testid={`${fieldName.toLowerCase()}-dropdown-menu`}
+        role="listbox"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const focused = document.activeElement;
+            if (focused instanceof HTMLElement) {
+              focused.click();
+            }
+          }
+        }}
+      >
+        {fieldOptions.map((option, index: number) => (
+          <Dropdown.Item
+            key={`${fieldName.toLowerCase()}-dropdown-item-${index}`}
+            className="dropdown-item"
+            onClick={() => handleFieldChange(option.value)}
+            data-testid={`change-${fieldName.toLowerCase()}-btn-${option.value}`}
+            role="option"
+            aria-selected={option.value === formState[fieldName]}
+          >
+            {option.label}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default DynamicDropDown;
diff --git a/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.test.tsx b/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.test.tsx
new file mode 100644
index 0000000000..19d2249a43
--- /dev/null
+++ b/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.test.tsx
@@ -0,0 +1,64 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import EditOrgCustomFieldDropDown from './EditCustomFieldDropDown';
+import userEvent from '@testing-library/user-event';
+import availableFieldTypes from 'utils/fieldTypes';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceCustomFieldData } from 'utils/interfaces';
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Custom Field Dropdown', () => {
+  test('Component Should be rendered properly', async () => {
+    const customFieldData = {
+      type: 'Number',
+      name: 'Age',
+    };
+
+    const setCustomFieldData: Dispatch<
+      SetStateAction<InterfaceCustomFieldData>
+    > = (val) => {
+      {
+        val;
+      }
+    };
+    const props = {
+      customFieldData: customFieldData as InterfaceCustomFieldData,
+      setCustomFieldData: setCustomFieldData,
+      parentContainerStyle: 'parentContainerStyle',
+      btnStyle: 'btnStyle',
+      btnTextStyle: 'btnTextStyle',
+    };
+
+    const { getByTestId, getByText } = render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <EditOrgCustomFieldDropDown {...props} />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+
+    expect(getByText('Number')).toBeInTheDocument();
+
+    act(() => {
+      userEvent.click(getByTestId('toggleBtn'));
+    });
+
+    await wait();
+
+    availableFieldTypes.forEach(async (_, index) => {
+      act(() => {
+        userEvent.click(getByTestId(`dropdown-btn-${index}`));
+      });
+    });
+  });
+});
diff --git a/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx b/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx
new file mode 100644
index 0000000000..2350d2c9c4
--- /dev/null
+++ b/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import type { SetStateAction, Dispatch } from 'react';
+import { Dropdown } from 'react-bootstrap';
+import availableFieldTypes from 'utils/fieldTypes';
+import { useTranslation } from 'react-i18next';
+import type { InterfaceCustomFieldData } from 'utils/interfaces';
+
+/**
+ * Props for the EditOrgCustomFieldDropDown component.
+ */
+interface InterfaceEditCustomFieldDropDownProps {
+  customFieldData: InterfaceCustomFieldData;
+  setCustomFieldData: Dispatch<SetStateAction<InterfaceCustomFieldData>>;
+  parentContainerStyle?: string;
+  btnStyle?: string;
+  btnTextStyle?: string;
+}
+
+/**
+ * A dropdown component for editing custom field types.
+ *
+ * This component displays a dropdown menu that allows users to select a custom field type.
+ * It shows the current type of the field and provides a list of available types to choose from.
+ * When a new type is selected, it updates the custom field data.
+ *
+ * @param customFieldData - The current data of the custom field being edited.
+ * @param setCustomFieldData - Function to update the custom field data with the new type.
+ * @param parentContainerStyle - Optional CSS class to style the container of the dropdown.
+ * @param btnStyle - Optional CSS class to style the dropdown button.
+ * @param btnTextStyle - Optional CSS class to style the text inside the button.
+ * @returns JSX.Element - The rendered dropdown component.
+ */
+const EditOrgCustomFieldDropDown = ({
+  customFieldData,
+  setCustomFieldData,
+  parentContainerStyle,
+  btnStyle,
+}: InterfaceEditCustomFieldDropDownProps): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgProfileField',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  return (
+    <Dropdown
+      title="Edit Custom Field"
+      className={`${parentContainerStyle ?? ''}`}
+    >
+      <Dropdown.Toggle
+        variant="outline-success"
+        className={`${btnStyle ?? ''}`}
+        data-testid="toggleBtn"
+      >
+        {customFieldData.type ? t(customFieldData.type) : tCommon('none')}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {availableFieldTypes.map((customFieldType, index: number) => (
+          <Dropdown.Item
+            key={`dropdown-item-${index}`}
+            className="dropdown-item"
+            data-testid={`dropdown-btn-${index}`}
+            onClick={(): void => {
+              setCustomFieldData({
+                ...customFieldData,
+                type: customFieldType,
+              });
+            }}
+            disabled={customFieldData.type === customFieldType}
+          >
+            {t(customFieldType)}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default EditOrgCustomFieldDropDown;
diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
new file mode 100644
index 0000000000..67ecd2dec6
--- /dev/null
+++ b/src/components/EventCalendar/EventCalendar.module.css
@@ -0,0 +1,342 @@
+.calendar {
+  font-family: sans-serif;
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  padding: 5px;
+}
+.calendar__header {
+  display: flex;
+  margin-bottom: 2rem;
+  align-items: center;
+  margin: 0px 10px 0px 10px;
+}
+.input {
+  flex: 1;
+  position: relative;
+}
+.calendar__header_month {
+  margin: 0.5rem;
+  color: #707070;
+  font-weight: 800;
+  font-size: 55px;
+  display: flex;
+  gap: 23px;
+  flex-direction: row;
+}
+.calendar__header_month div {
+  font-weight: 400;
+  color: black;
+  font-family: Outfit;
+}
+.space {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.button {
+  border-radius: 100px;
+  color: #707070;
+  background-color: rgba(194, 247, 182, 0);
+  font-weight: bold;
+  border: 0px;
+  font-size: 20px;
+}
+
+.calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background-color: black;
+  font-family: Outfit;
+  height: 60px;
+}
+.calendar__scroll {
+  height: 80vh;
+  padding: 10px;
+}
+.weekday {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  font-weight: 600;
+}
+.calendar__days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-rows: repeat(6, 1fr);
+}
+.calendar_hour_text_container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  border-right: 1px solid #8d8d8d55;
+  width: 40px;
+}
+.calendar_hour_text {
+  top: -10px;
+  left: -5px;
+  position: relative;
+  color: #707070;
+  font-size: 12px;
+}
+.calendar_timezone_text {
+  top: -10px;
+  left: -11px;
+  position: relative;
+  color: #707070;
+  font-size: 9px;
+}
+.calendar_hour_block {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #8d8d8d55;
+  position: relative;
+  height: 50px;
+  border-bottom-right-radius: 5px;
+}
+.event_list_parent {
+  position: relative;
+  width: 100%;
+}
+.event_list_parent_current {
+  background-color: #def6e1;
+  position: relative;
+  width: 100%;
+}
+.dummyWidth {
+  width: 1px;
+}
+.day {
+  background-color: #ffffff;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  border-radius: 10px;
+  margin: 5px;
+  background-color: white;
+  border: 1px solid #8d8d8d55;
+  color: #4b4b4b;
+  font-weight: 600;
+  height: 9rem;
+  position: relative;
+}
+.day_weekends {
+  background-color: rgba(49, 187, 107, 0.2);
+}
+.day__outside {
+  background-color: white;
+  color: #89898996;
+}
+.day__selected {
+  background-color: #007bff;
+  color: #707070;
+}
+.day__today {
+  background-color: #def6e1;
+  font-weight: 700;
+  text-decoration: underline;
+  color: #31bb6b;
+}
+.day__events {
+  background-color: white;
+}
+.btn__today {
+  transition: ease-in all 200ms;
+  font-family: Arial;
+  color: #ffffff;
+  font-size: 18px;
+  padding: 10px 20px 10px 20px;
+  text-decoration: none;
+  margin-left: 20px;
+  border: none;
+}
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropdown {
+  border-color: #31bb6b;
+  background-color: white;
+  color: #31bb6b;
+  box-shadow: 0px 2px 1px rgba(49, 187, 107, 0.5); /* Added blur effect */
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+.searchBtn {
+  margin-bottom: 10px;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.btn__more {
+  border: 0px;
+  font-size: 14px;
+  background-color: initial;
+  color: #262727;
+  font-weight: 600;
+  transition: all 200ms;
+  position: relative;
+  display: block;
+  margin: 2px;
+}
+.btn__more:hover {
+  color: #454645;
+}
+
+.expand_event_list {
+  display: block;
+}
+.list_container {
+  padding: 5px;
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+}
+.event_list_hour {
+  display: flex;
+  flex-direction: row;
+}
+.expand_list_container {
+  width: 200px;
+  max-height: 250px;
+  z-index: 10;
+  position: absolute;
+  left: auto;
+  right: auto;
+  overflow: auto;
+  padding: 10px 4px 0px 4px;
+  background-color: rgb(241, 241, 241);
+  border: 1px solid rgb(201, 201, 201);
+  border-radius: 5px;
+  margin: 5px;
+}
+.flex_grow {
+  flex-grow: 1;
+}
+
+@media only screen and (max-width: 700px) {
+  .event_list {
+    display: none;
+  }
+  .expand_list_container {
+    width: 150px;
+    padding: 4px 4px 0px 4px;
+  }
+  .day {
+    height: 5rem;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .btn__more {
+    font-size: 12px;
+  }
+}
+
+.calendar__infocards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 35px;
+}
+.card__holidays {
+  background-color: rgba(246, 242, 229, 1);
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  font-family: Outfit;
+  border-radius: 20px;
+  padding: 30px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.month__holidays {
+  display: flex;
+  flex-direction: column;
+}
+.holiday__data {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+.holiday__date {
+  font-size: 20px;
+  color: rgba(234, 183, 86, 1);
+  font-weight: 700;
+}
+.holiday__name {
+  font-size: 20px;
+  margin-left: 35px;
+}
+.card__events {
+  background-color: rgba(244, 244, 244, 1);
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  font-family: Outfit;
+  border-radius: 20px;
+  padding: 30px;
+}
+.innercard__events {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+.innercard__events p {
+  margin-bottom: 0;
+}
+.orgEvent__color {
+  height: 15px;
+  width: 40px;
+  background-color: rgba(82, 172, 255, 0.5);
+  border-radius: 10px;
+}
+.holidays__color {
+  height: 15px;
+  width: 40px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+}
+
+.userEvents__color {
+  height: 15px;
+  width: 40px;
+  background: rgba(146, 200, 141, 0.5);
+  border-radius: 10px;
+}
diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx
new file mode 100644
index 0000000000..8e2395968a
--- /dev/null
+++ b/src/components/EventCalendar/EventCalendar.test.tsx
@@ -0,0 +1,440 @@
+import Calendar from './EventCalendar';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import React from 'react';
+import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
+
+import {
+  DELETE_EVENT_MUTATION,
+  UPDATE_EVENT_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { weekdays, months } from './constants';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+const eventData = [
+  {
+    _id: '1',
+    title: 'Event 1',
+    description: 'This is event 1',
+    startDate: '2022-05-01',
+    endDate: '2022-05-01',
+    location: 'New York',
+    startTime: '10:00',
+    endTime: '12:00',
+    allDay: false,
+    recurring: false,
+    recurrenceRule: null,
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: true,
+    viewType: ViewType.DAY,
+  },
+  {
+    _id: '2',
+    title: 'Event 2',
+    description: 'This is event 2',
+    startDate: '2022-05-03',
+    endDate: '2022-05-03',
+    location: 'Los Angeles',
+    startTime: '14:00',
+    endTime: '16:00',
+    allDay: false,
+    recurring: false,
+    recurrenceRule: null,
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: true,
+  },
+];
+
+const MOCKS = [
+  {
+    request: {
+      query: DELETE_EVENT_MUTATION,
+      variable: { id: '123' },
+    },
+    result: {
+      data: {
+        removeEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_EVENT_MUTATION,
+      variable: {
+        id: '123',
+        title: 'Updated title',
+        description: 'This is a new update',
+        isPublic: true,
+        recurring: false,
+        isRegisterable: true,
+        allDay: false,
+        location: 'New Delhi',
+        startTime: '02:00',
+        endTime: '07:00',
+      },
+    },
+    result: {
+      data: {
+        updateEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 200): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Calendar', () => {
+  it('renders weekdays', () => {
+    render(<Calendar eventData={eventData} viewType={ViewType.MONTH} />);
+
+    weekdays.forEach((weekday) => {
+      expect(screen.getByText(weekday)).toBeInTheDocument();
+    });
+  });
+  it('should initialize currentMonth and currentYear with the current date', () => {
+    const today = new Date();
+    const { getByTestId } = render(<Calendar eventData={eventData} />);
+
+    const currentMonth = getByTestId('current-date');
+    const currentYear = getByTestId('current-date');
+
+    expect(currentMonth).toHaveTextContent(
+      today.toLocaleString('default', { month: 'long' }),
+    );
+    expect(currentYear).toHaveTextContent(today.getFullYear().toString());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the current month and year', () => {
+    const { getByTestId } = render(<Calendar eventData={eventData} />);
+
+    // Find the element by its data-testid attribute
+    const currentDateElement = getByTestId('current-date');
+
+    // Assert that the text content of the element matches the current month and year
+    const currentMonth = new Date().toLocaleString('default', {
+      month: 'long',
+    });
+    const currentYear = new Date().getFullYear();
+    const expectedText = ` ${currentYear} ${currentMonth}`;
+    expect(currentDateElement.textContent).toContain(expectedText);
+  });
+
+  it('Should show prev and next month on clicking < & > buttons', () => {
+    //testing previous month button
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <Calendar eventData={eventData} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    const prevButton = screen.getByTestId('prevmonthordate');
+    fireEvent.click(prevButton);
+    //testing next month button
+    const nextButton = screen.getByTestId('nextmonthordate');
+    fireEvent.click(nextButton);
+    //Testing year change
+    for (let index = 0; index < 13; index++) {
+      fireEvent.click(nextButton);
+    }
+    for (let index = 0; index < 13; index++) {
+      fireEvent.click(prevButton);
+    }
+  });
+  it('Should show prev and next year on clicking < & > buttons when in year view', async () => {
+    //testing previous month button
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <Calendar eventData={eventData} viewType={ViewType.YEAR} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+    const prevButtons = screen.getAllByTestId('prevYear');
+    prevButtons.forEach((button) => {
+      fireEvent.click(button);
+    });
+    await wait();
+    //testing next year button
+    const nextButton = screen.getAllByTestId('prevYear');
+    nextButton.forEach((button) => {
+      fireEvent.click(button);
+    });
+  });
+  it('Should show prev and next date on clicking < & > buttons in the day view', async () => {
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={eventData} />
+          </I18nextProvider>
+        </MockedProvider>
+      </Router>,
+    );
+    //testing previous date button
+    const prevButton = screen.getByTestId('prevmonthordate');
+    fireEvent.click(prevButton);
+    //testing next date button
+    const nextButton = screen.getByTestId('nextmonthordate');
+    fireEvent.click(nextButton);
+    //Testing year change and month change
+    for (let index = 0; index < 366; index++) {
+      fireEvent.click(prevButton);
+    }
+    for (let index = 0; index < 732; index++) {
+      fireEvent.click(nextButton);
+    }
+  });
+  it('Should render eventlistcard of current day event', () => {
+    const currentDayEventMock = [
+      {
+        _id: '0',
+        title: 'demo',
+        description: 'agrsg',
+        startDate: new Date().toISOString().split('T')[0],
+        endDate: new Date().toISOString().split('T')[0],
+        location: 'delhi',
+        startTime: '10:00',
+        endTime: '12:00',
+        allDay: false,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+    ];
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={currentDayEventMock} userRole={'SUPERADMIN'} />
+          </I18nextProvider>
+        </MockedProvider>
+        ,
+      </Router>,
+    );
+  });
+  it('Test for superadmin case', () => {
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={eventData} userRole={'SUPERADMIN'} />
+          </I18nextProvider>
+        </MockedProvider>
+        ,
+      </Router>,
+    );
+  });
+  it('Today Cell is having correct styles', () => {
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={eventData} userRole={'SUPERADMIN'} />
+          </I18nextProvider>
+        </MockedProvider>
+        ,
+      </Router>,
+    );
+    // const todayDate = new Date().getDate();
+    // const todayElement = screen.getByText(todayDate.toString());
+    // expect(todayElement).toHaveClass(styles.day__today);
+  });
+  it('Today button should show today cell', () => {
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={eventData} userRole={'SUPERADMIN'} />
+          </I18nextProvider>
+        </MockedProvider>
+        ,
+      </Router>,
+    );
+    //Changing the month
+    const prevButton = screen.getByTestId('prevmonthordate');
+    fireEvent.click(prevButton);
+
+    // Clicking today button
+    const todayButton = screen.getByTestId('today');
+    fireEvent.click(todayButton);
+    // const todayCell = screen.getByText(new Date().getDate().toString());
+    // expect(todayCell).toHaveClass(styles.day__today);
+  });
+  it('Should handle window resize in day view', async () => {
+    const date = new Date().toISOString().split('T')[0];
+    const multipleEventData = [
+      {
+        _id: '1',
+        title: 'Event 1',
+        description: 'This is event 1',
+        startDate: date,
+        endDate: date,
+        location: 'Los Angeles',
+        startTime: null,
+        endTime: null,
+        allDay: true,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+      {
+        _id: '2',
+        title: 'Event 2',
+        description: 'This is event 2',
+        startDate: date,
+        endDate: date,
+        location: 'Los Angeles',
+        startTime: null,
+        endTime: null,
+        allDay: true,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+      {
+        _id: '3',
+        title: 'Event 3',
+        description: 'This is event 3',
+        startDate: date,
+        endDate: date,
+        location: 'Los Angeles',
+        startTime: '14:00',
+        endTime: '16:00',
+        allDay: false,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+      {
+        _id: '4',
+        title: 'Event 4',
+        description: 'This is event 4',
+        startDate: date,
+        endDate: date,
+        location: 'Los Angeles',
+        startTime: '14:00',
+        endTime: '16:00',
+        allDay: false,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+      {
+        _id: '5',
+        title: 'Event 5',
+        description: 'This is event 5',
+        startDate: date,
+        endDate: date,
+        location: 'Los Angeles',
+        startTime: '17:00',
+        endTime: '19:00',
+        allDay: false,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+    ];
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={multipleEventData} viewType={ViewType.MONTH} />
+          </I18nextProvider>
+        </MockedProvider>
+      </Router>,
+    );
+
+    // Simulate window resize and check if components respond correctly
+    await act(async () => {
+      window.innerWidth = 500; // Set the window width to <= 700
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    // Check for "View all" button if there are more than 2 events
+    const viewAllButton = await screen.findAllByTestId('more');
+    console.log('hi', viewAllButton); // This will show the buttons found in the test
+    expect(viewAllButton.length).toBeGreaterThan(0);
+
+    // Simulate clicking the "View all" button to expand the list
+    fireEvent.click(viewAllButton[0]);
+
+    const event5 = screen.queryByText('Event 5');
+    expect(event5).toBeNull();
+
+    const viewLessButtons = screen.getAllByText('View less');
+    expect(viewLessButtons.length).toBeGreaterThan(0);
+
+    // Simulate clicking "View less" to collapse the list
+    fireEvent.click(viewLessButtons[0]);
+    const viewAllButtons = screen.getAllByText('View all');
+    expect(viewAllButtons.length).toBeGreaterThan(0);
+
+    // Reset the window size to avoid side effects for other tests
+    await act(async () => {
+      window.innerWidth = 1024;
+      window.dispatchEvent(new Event('resize'));
+    });
+  });
+  test('Handles window resize', () => {
+    render(
+      <Router>
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Calendar eventData={eventData} />
+          </I18nextProvider>
+        </MockedProvider>
+        ,
+      </Router>,
+    );
+
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+  });
+  it('renders year view', async () => {
+    render(<Calendar eventData={eventData} viewType={ViewType.YEAR} />);
+
+    await wait();
+    months.forEach((month) => {
+      const elements = screen.getAllByText(month);
+      elements.forEach((element) => {
+        expect(element).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
new file mode 100644
index 0000000000..592456f295
--- /dev/null
+++ b/src/components/EventCalendar/EventCalendar.tsx
@@ -0,0 +1,657 @@
+import EventListCard from 'components/EventListCard/EventListCard';
+import dayjs from 'dayjs';
+import Button from 'react-bootstrap/Button';
+import React, { useState, useEffect } from 'react';
+import styles from './EventCalendar.module.css';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator';
+import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
+import HolidayCard from '../HolidayCards/HolidayCard';
+import { holidays, hours, months, weekdays } from './constants';
+import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
+import YearlyEventCalender from './YearlyEventCalender';
+
+interface InterfaceEventListCardProps {
+  userRole?: string;
+  key?: string;
+  _id: string;
+  location: string;
+  title: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  startTime: string | null;
+  endTime: string | null;
+  allDay: boolean;
+  recurring: boolean;
+  recurrenceRule: InterfaceRecurrenceRule | null;
+  isRecurringEventException: boolean;
+  isPublic: boolean;
+  isRegisterable: boolean;
+  attendees?: {
+    _id: string;
+  }[];
+  creator?: {
+    firstName: string;
+    lastName: string;
+    _id: string;
+  };
+}
+
+interface InterfaceCalendarProps {
+  eventData: InterfaceEventListCardProps[];
+  refetchEvents?: () => void;
+  orgData?: InterfaceIOrgList;
+  userRole?: string;
+  userId?: string;
+  viewType?: ViewType;
+}
+
+enum Role {
+  USER = 'USER',
+  SUPERADMIN = 'SUPERADMIN',
+  ADMIN = 'ADMIN',
+}
+
+interface InterfaceIOrgList {
+  admins: { _id: string }[];
+}
+
+const Calendar: React.FC<InterfaceCalendarProps> = ({
+  eventData,
+  refetchEvents,
+  orgData,
+  userRole,
+  userId,
+  viewType,
+}) => {
+  const [selectedDate] = useState<Date | null>(null);
+  const today = new Date();
+  const [currentDate, setCurrentDate] = useState(today.getDate());
+  const [currentMonth, setCurrentMonth] = useState(today.getMonth());
+  const [currentYear, setCurrentYear] = useState(today.getFullYear());
+  const [events, setEvents] = useState<InterfaceEventListCardProps[] | null>(
+    null,
+  );
+  const [expanded, setExpanded] = useState<number>(-1);
+  const [windowWidth, setWindowWidth] = useState<number>(window.screen.width);
+
+  useEffect(() => {
+    function handleResize(): void {
+      setWindowWidth(window.screen.width);
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const filterData = (
+    eventData: InterfaceEventListCardProps[],
+    orgData?: InterfaceIOrgList,
+    userRole?: string,
+    userId?: string,
+  ): InterfaceEventListCardProps[] => {
+    const data: InterfaceEventListCardProps[] = [];
+    if (userRole === Role.SUPERADMIN) return eventData;
+    // Hard to test all the cases
+    /* istanbul ignore next */
+    if (userRole === Role.ADMIN) {
+      eventData?.forEach((event) => {
+        if (event.isPublic) data.push(event);
+        if (!event.isPublic) {
+          const filteredOrg: boolean | undefined = orgData?.admins?.some(
+            (data) => data._id === userId,
+          );
+
+          if (filteredOrg) {
+            data.push(event);
+          }
+        }
+      });
+    } else {
+      eventData?.forEach((event) => {
+        if (event.isPublic) data.push(event);
+        const userAttending = event.attendees?.some(
+          (data) => data._id === userId,
+        );
+        if (userAttending) {
+          data.push(event);
+        }
+      });
+    }
+    return data;
+  };
+
+  useEffect(() => {
+    const data = filterData(eventData, orgData, userRole, userId);
+    setEvents(data);
+  }, [eventData, orgData, userRole, userId]);
+
+  /**
+   * Moves the calendar view to the previous month.
+   */
+  const handlePrevMonth = (): void => {
+    /*istanbul ignore next*/
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+
+  /**
+   * Moves the calendar view to the next month.
+   */
+  const handleNextMonth = (): void => {
+    /*istanbul ignore next*/
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+
+  /**
+   * Moves the calendar view to the previous date.
+   */
+  const handlePrevDate = (): void => {
+    /*istanbul ignore next*/
+    if (currentDate > 1) {
+      setCurrentDate(currentDate - 1);
+    } else {
+      if (currentMonth > 0) {
+        const lastDayOfPrevMonth = new Date(
+          currentYear,
+          currentMonth,
+          0,
+        ).getDate();
+        setCurrentDate(lastDayOfPrevMonth);
+        setCurrentMonth(currentMonth - 1);
+      } else {
+        setCurrentDate(31);
+        setCurrentMonth(11);
+        setCurrentYear(currentYear - 1);
+      }
+    }
+  };
+  /*istanbul ignore next*/
+  const handleNextDate = (): void => {
+    /*istanbul ignore next*/
+    const lastDayOfCurrentMonth = new Date(
+      currentYear,
+      currentMonth - 1,
+      0,
+    ).getDate();
+    /*istanbul ignore next*/
+    if (currentDate < lastDayOfCurrentMonth) {
+      setCurrentDate(currentDate + 1);
+    } else {
+      if (currentMonth < 12) {
+        setCurrentDate(1);
+        setCurrentMonth(currentMonth + 1);
+      } else {
+        setCurrentDate(1);
+        setCurrentMonth(1);
+        setCurrentYear(currentYear + 1);
+      }
+    }
+  };
+
+  /**
+   * Moves the calendar view to today's date.
+   */
+  const handleTodayButton = (): void => {
+    /*istanbul ignore next*/
+    setCurrentYear(today.getFullYear());
+    setCurrentMonth(today.getMonth());
+    setCurrentDate(today.getDate());
+  };
+
+  const timezoneString = `UTC${
+    new Date().getTimezoneOffset() > 0 ? '-' : '+'
+  }${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(
+    2,
+    '0',
+  )}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, '0')}`;
+
+  /*istanbul ignore next*/
+  const renderHours = (): JSX.Element => {
+    const toggleExpand = (index: number): void => {
+      if (expanded === index) {
+        setExpanded(-1);
+      } else {
+        setExpanded(index);
+      }
+    };
+
+    /*istanbul ignore next*/
+    const allDayEventsList: JSX.Element[] =
+      events
+        ?.filter((datas) => {
+          /*istanbul ignore next*/
+          const currDate = new Date(currentYear, currentMonth, currentDate);
+          if (
+            datas.startTime == undefined &&
+            datas.startDate == dayjs(currDate).format('YYYY-MM-DD')
+          ) {
+            return datas;
+          }
+        })
+        .map((datas: InterfaceEventListCardProps) => {
+          const attendees: { _id: string }[] = [];
+          datas.attendees?.forEach((attendee: { _id: string }) => {
+            const r = {
+              _id: attendee._id,
+            };
+
+            attendees.push(r);
+          });
+
+          return (
+            <EventListCard
+              refetchEvents={refetchEvents}
+              userRole={userRole}
+              key={datas._id}
+              id={datas._id}
+              eventLocation={datas.location}
+              eventName={datas.title}
+              eventDescription={datas.description}
+              startDate={datas.startDate}
+              endDate={datas.endDate}
+              startTime={datas.startTime}
+              endTime={datas.endTime}
+              allDay={datas.allDay}
+              recurring={datas.recurring}
+              recurrenceRule={datas.recurrenceRule}
+              isRecurringEventException={datas.isRecurringEventException}
+              isPublic={datas.isPublic}
+              isRegisterable={datas.isRegisterable}
+              registrants={attendees}
+              creator={datas.creator}
+            />
+          );
+        }) || [];
+
+    return (
+      <>
+        <div className={styles.calendar_hour_block}>
+          <div className={styles.calendar_hour_text_container}>
+            <p className={styles.calendar_timezone_text}>{timezoneString}</p>
+          </div>
+          <div className={styles.dummyWidth}></div>
+          <div
+            className={
+              allDayEventsList?.length > 0
+                ? styles.event_list_parent_current
+                : styles.event_list_parent
+            }
+          >
+            <div
+              className={
+                expanded === -100
+                  ? styles.expand_list_container
+                  : styles.list_container
+              }
+              style={{ width: 'fit-content' }}
+            >
+              <div
+                className={
+                  expanded === -100
+                    ? styles.expand_event_list
+                    : styles.event_list_hour
+                }
+              >
+                {expanded === -100
+                  ? allDayEventsList
+                  : allDayEventsList?.slice(0, 1)}
+              </div>
+              {(allDayEventsList?.length > 2 ||
+                (windowWidth <= 700 && allDayEventsList?.length > 0)) && (
+                <button
+                  className={styles.btn__more}
+                  onClick={() => {
+                    toggleExpand(-100);
+                  }}
+                >
+                  {expanded === -100 ? 'View less' : 'View all'}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+        {hours.map((hour, index) => {
+          const timeEventsList: JSX.Element[] =
+            events
+              ?.filter((datas) => {
+                const currDate = new Date(
+                  currentYear,
+                  currentMonth,
+                  currentDate,
+                );
+
+                if (
+                  parseInt(datas.startTime?.slice(0, 2) as string).toString() ==
+                    (index % 24).toString() &&
+                  datas.startDate == dayjs(currDate).format('YYYY-MM-DD')
+                ) {
+                  return datas;
+                }
+              })
+              .map((datas: InterfaceEventListCardProps) => {
+                const attendees: { _id: string }[] = [];
+                datas.attendees?.forEach((attendee: { _id: string }) => {
+                  const r = {
+                    _id: attendee._id,
+                  };
+
+                  attendees.push(r);
+                });
+
+                return (
+                  <EventListCard
+                    refetchEvents={refetchEvents}
+                    userRole={userRole}
+                    key={datas._id}
+                    id={datas._id}
+                    eventLocation={datas.location}
+                    eventName={datas.title}
+                    eventDescription={datas.description}
+                    startDate={datas.startDate}
+                    endDate={datas.endDate}
+                    startTime={datas.startTime}
+                    endTime={datas.endTime}
+                    allDay={datas.allDay}
+                    recurring={datas.recurring}
+                    recurrenceRule={datas.recurrenceRule}
+                    isRecurringEventException={datas.isRecurringEventException}
+                    isPublic={datas.isPublic}
+                    isRegisterable={datas.isRegisterable}
+                    registrants={attendees}
+                    creator={datas.creator}
+                  />
+                );
+              }) || [];
+          /*istanbul ignore next*/
+          return (
+            <div key={hour} className={styles.calendar_hour_block}>
+              <div className={styles.calendar_hour_text_container}>
+                <p className={styles.calendar_hour_text}>{`${hour}`}</p>
+              </div>
+              <div className={styles.dummyWidth}></div>
+              <div
+                className={
+                  timeEventsList?.length > 0
+                    ? styles.event_list_parent_current
+                    : styles.event_list_parent
+                }
+              >
+                {index % 24 == new Date().getHours() &&
+                  new Date().getDate() == currentDate && (
+                    <CurrentHourIndicator />
+                  )}
+                <div
+                  className={
+                    expanded === index
+                      ? styles.expand_list_container
+                      : styles.list_container
+                  }
+                  style={{ width: 'fit-content' }}
+                >
+                  <div
+                    className={
+                      expanded === index
+                        ? styles.expand_event_list
+                        : styles.event_list
+                    }
+                  >
+                    {/*istanbul ignore next*/}
+                    {expanded === index
+                      ? timeEventsList
+                      : timeEventsList?.slice(0, 1)}
+                  </div>
+                  {(timeEventsList?.length > 1 ||
+                    (windowWidth <= 700 && timeEventsList?.length > 0)) && (
+                    <button
+                      className={styles.btn__more}
+                      onClick={() => {
+                        toggleExpand(index);
+                      }}
+                    >
+                      {expanded === index ? 'View less' : 'View all'}
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </>
+    );
+  };
+
+  const renderDays = (): JSX.Element[] => {
+    const monthStart = new Date(currentYear, currentMonth, 1);
+    const monthEnd = new Date(currentYear, currentMonth + 1, 0);
+    const startDate = new Date(
+      monthStart.getFullYear(),
+      monthStart.getMonth(),
+      monthStart.getDate() - monthStart.getDay(),
+    );
+    const endDate = new Date(
+      monthEnd.getFullYear(),
+      monthEnd.getMonth(),
+      monthEnd.getDate() + (6 - monthEnd.getDay()),
+    );
+    const days = [];
+    let currentDate = startDate;
+    while (currentDate <= endDate) {
+      days.push(currentDate);
+      currentDate = new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        currentDate.getDate() + 1,
+      );
+    }
+
+    return days.map((date, index) => {
+      const className = [
+        date.getDay() === 0 || date.getDay() === 6 ? styles.day_weekends : '',
+        date.toLocaleDateString() === today.toLocaleDateString() //Styling for today day cell
+          ? styles.day__today
+          : '',
+        date.getMonth() !== currentMonth ? styles.day__outside : '', //Styling for days outside the current month
+        selectedDate?.getTime() === date.getTime() ? styles.day__selected : '',
+        styles.day,
+      ].join(' ');
+      const toggleExpand = (index: number): void => {
+        /*istanbul ignore next*/
+        if (expanded === index) {
+          setExpanded(-1);
+        } else {
+          setExpanded(index);
+        }
+      };
+      /*istanbul ignore next*/
+      const allEventsList: JSX.Element[] =
+        events
+          ?.filter((datas) => {
+            if (datas.startDate == dayjs(date).format('YYYY-MM-DD'))
+              return datas;
+          })
+          .map((datas: InterfaceEventListCardProps) => {
+            const attendees: { _id: string }[] = [];
+            datas.attendees?.forEach((attendee: { _id: string }) => {
+              const r = {
+                _id: attendee._id,
+              };
+
+              attendees.push(r);
+            });
+
+            return (
+              <EventListCard
+                refetchEvents={refetchEvents}
+                userRole={userRole}
+                key={datas._id}
+                id={datas._id}
+                eventLocation={datas.location}
+                eventName={datas.title}
+                eventDescription={datas.description}
+                startDate={datas.startDate}
+                endDate={datas.endDate}
+                startTime={datas.startTime}
+                endTime={datas.endTime}
+                allDay={datas.allDay}
+                recurring={datas.recurring}
+                recurrenceRule={datas.recurrenceRule}
+                isRecurringEventException={datas.isRecurringEventException}
+                isPublic={datas.isPublic}
+                isRegisterable={datas.isRegisterable}
+                registrants={attendees}
+                creator={datas.creator}
+              />
+            );
+          }) || [];
+
+      const holidayList: JSX.Element[] = holidays
+        .filter((holiday) => {
+          if (holiday.date == dayjs(date).format('MM-DD')) return holiday;
+        })
+        .map((holiday) => {
+          return <HolidayCard key={holiday.name} holidayName={holiday.name} />;
+        });
+      return (
+        <div
+          key={index}
+          className={
+            className + ' ' + (allEventsList?.length > 0 && styles.day__events)
+          }
+          data-testid="day"
+        >
+          {date.getDate()}
+          {date.getMonth() !== currentMonth ? null : (
+            <div
+              className={expanded === index ? styles.expand_list_container : ''}
+            >
+              <div
+                className={
+                  /*istanbul ignore next*/
+                  expanded === index
+                    ? styles.expand_event_list
+                    : styles.event_list
+                }
+              >
+                <div>{holidayList}</div>
+                {
+                  /*istanbul ignore next*/
+                  expanded === index
+                    ? allEventsList
+                    : holidayList?.length > 0
+                      ? /*istanbul ignore next*/
+                        allEventsList?.slice(0, 1)
+                      : allEventsList?.slice(0, 2)
+                }
+              </div>
+              {(allEventsList?.length > 2 ||
+                (windowWidth <= 700 && allEventsList?.length > 0)) && (
+                /*istanbul ignore next*/
+                <button
+                  className={styles.btn__more}
+                  data-testid="more"
+                  /*istanbul ignore next*/
+                  onClick={() => {
+                    toggleExpand(index);
+                  }}
+                >
+                  {
+                    /*istanbul ignore next*/
+                    expanded === index ? 'View less' : 'View all'
+                  }
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className={styles.calendar}>
+      {viewType != ViewType.YEAR && (
+        <div className={styles.calendar__header}>
+          <Button
+            variant="outlined"
+            className={styles.button}
+            onClick={
+              viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth
+            }
+            data-testid="prevmonthordate"
+          >
+            <ChevronLeft />
+          </Button>
+
+          <div
+            className={styles.calendar__header_month}
+            data-testid="current-date"
+          >
+            {viewType == ViewType.DAY ? `${currentDate}` : ``} {currentYear}{' '}
+            <div>{months[currentMonth]}</div>
+          </div>
+          <Button
+            variant="outlined"
+            className={styles.button}
+            onClick={
+              viewType == ViewType.DAY ? handleNextDate : handleNextMonth
+            }
+            data-testid="nextmonthordate"
+          >
+            <ChevronRight />
+          </Button>
+          <div>
+            <Button
+              className={styles.btn__today}
+              onClick={handleTodayButton}
+              data-testid="today"
+            >
+              Today
+            </Button>
+          </div>
+        </div>
+      )}
+      <div className={`${styles.calendar__scroll} customScroll`}>
+        {viewType == ViewType.MONTH ? (
+          <div>
+            <div className={styles.calendar__weekdays}>
+              {weekdays.map((weekday, index) => (
+                <div key={index} className={styles.weekday}>
+                  {weekday}
+                </div>
+              ))}
+            </div>
+            <div className={styles.calendar__days}>{renderDays()}</div>
+          </div>
+        ) : (
+          // <YearlyEventCalender eventData={eventData} />
+          <div>
+            {viewType == ViewType.YEAR ? (
+              <YearlyEventCalender eventData={eventData} />
+            ) : (
+              <div className={styles.calendar__hours}>{renderHours()}</div>
+            )}
+          </div>
+        )}
+      </div>
+      <div>
+        {viewType == ViewType.YEAR ? (
+          <YearlyEventCalender eventData={eventData} />
+        ) : (
+          <div className={styles.calendar__hours}>{renderHours()}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;
diff --git a/src/components/EventCalendar/EventHeader.test.tsx b/src/components/EventCalendar/EventHeader.test.tsx
new file mode 100644
index 0000000000..e18d066306
--- /dev/null
+++ b/src/components/EventCalendar/EventHeader.test.tsx
@@ -0,0 +1,99 @@
+import React, { act } from 'react'; // Import act for async testing
+import { render, fireEvent } from '@testing-library/react';
+import EventHeader from './EventHeader';
+import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+
+describe('EventHeader Component', () => {
+  const viewType = ViewType.MONTH;
+  const handleChangeView = jest.fn();
+  const showInviteModal = jest.fn();
+
+  it('renders correctly', () => {
+    const { getByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <EventHeader
+          viewType={viewType}
+          handleChangeView={handleChangeView}
+          showInviteModal={showInviteModal}
+        />
+      </I18nextProvider>,
+    );
+
+    expect(getByTestId('searchEvent')).toBeInTheDocument();
+    expect(getByTestId('createEventModalBtn')).toBeInTheDocument();
+  });
+
+  it('calls handleChangeView with selected view type', async () => {
+    // Add async keyword
+    const { getByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <EventHeader
+          viewType={viewType}
+          handleChangeView={handleChangeView}
+          showInviteModal={showInviteModal}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(getByTestId('selectViewType'));
+
+    await act(async () => {
+      fireEvent.click(getByTestId('selectDay'));
+    });
+
+    // Expect handleChangeView to be called with the new view type
+    expect(handleChangeView).toHaveBeenCalledTimes(1);
+  });
+  it('calls handleChangeView with selected event type', async () => {
+    const { getByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <EventHeader
+          viewType={viewType}
+          handleChangeView={handleChangeView}
+          showInviteModal={showInviteModal}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(getByTestId('eventType'));
+
+    await act(async () => {
+      fireEvent.click(getByTestId('events'));
+    });
+
+    expect(handleChangeView).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls showInviteModal when create event button is clicked', () => {
+    const { getByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <EventHeader
+          viewType={viewType}
+          handleChangeView={handleChangeView}
+          showInviteModal={showInviteModal}
+        />
+      </I18nextProvider>,
+    );
+
+    fireEvent.click(getByTestId('createEventModalBtn'));
+    expect(showInviteModal).toHaveBeenCalled();
+  });
+  it('updates the input value when changed', () => {
+    const { getByTestId } = render(
+      <I18nextProvider i18n={i18nForTest}>
+        <EventHeader
+          viewType={viewType}
+          handleChangeView={handleChangeView}
+          showInviteModal={showInviteModal}
+        />
+      </I18nextProvider>,
+    );
+
+    const input = getByTestId('searchEvent') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'test event' } });
+
+    expect(input.value).toBe('test event');
+  });
+});
diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx
new file mode 100644
index 0000000000..1e4653ebf4
--- /dev/null
+++ b/src/components/EventCalendar/EventHeader.tsx
@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Search } from '@mui/icons-material';
+import styles from './EventCalendar.module.css';
+import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Props for the EventHeader component.
+ */
+interface InterfaceEventHeaderProps {
+  viewType: ViewType;
+  handleChangeView: (item: string | null) => void;
+  showInviteModal: () => void;
+}
+
+/**
+ * EventHeader component displays the header for the event calendar.
+ * It includes a search field, view type dropdown, event type dropdown, and a button to create an event.
+ *
+ * @param viewType - The current view type of the calendar.
+ * @param handleChangeView - Function to handle changing the view type.
+ * @param showInviteModal - Function to show the invite modal for creating an event.
+ * @returns JSX.Element - The rendered EventHeader component.
+ */
+function eventHeader({
+  viewType,
+  handleChangeView,
+  showInviteModal,
+}: InterfaceEventHeaderProps): JSX.Element {
+  const [eventName, setEventName] = useState('');
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationEvents',
+  });
+
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.calendar__header}>
+        <div className={styles.input}>
+          <Form.Control
+            type="text"
+            id="searchEvent"
+            data-testid="searchEvent"
+            placeholder={t('searchEventName')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={eventName}
+            /**
+             * Updates the event name state when the input value changes.
+             *
+             * @param e - The event object from the input change.
+             */
+            /*istanbul ignore next*/
+            onChange={(e) => setEventName(e.target.value)}
+          />
+          <Button
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center `}
+            style={{ marginBottom: '10px' }}
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className={styles.flex_grow}></div>
+        <div className={styles.space}>
+          <div>
+            <Dropdown onSelect={handleChangeView} className={styles.selectType}>
+              <Dropdown.Toggle
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="selectViewType"
+              >
+                {viewType}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  eventKey={ViewType.MONTH}
+                  data-testid="selectMonth"
+                >
+                  {ViewType.MONTH}
+                </Dropdown.Item>
+                <Dropdown.Item eventKey={ViewType.DAY} data-testid="selectDay">
+                  {ViewType.DAY}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  eventKey={ViewType.YEAR}
+                  data-testid="selectYear"
+                >
+                  {ViewType.YEAR}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Dropdown className={styles.selectType}>
+              <Dropdown.Toggle
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="eventType"
+              >
+                {t('eventType')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item eventKey="Events" data-testid="events">
+                  Events
+                </Dropdown.Item>
+                <Dropdown.Item eventKey="Workshops" data-testid="workshop">
+                  Workshops
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <Button
+            variant="success"
+            className={styles.addbtn}
+            onClick={showInviteModal}
+            data-testid="createEventModalBtn"
+          >
+            Create Event
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default eventHeader;
diff --git a/src/components/EventCalendar/YearlyEventCalender.module.css b/src/components/EventCalendar/YearlyEventCalender.module.css
new file mode 100644
index 0000000000..723cb20e22
--- /dev/null
+++ b/src/components/EventCalendar/YearlyEventCalender.module.css
@@ -0,0 +1,354 @@
+.calendar {
+  font-family: sans-serif;
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+}
+.calendar__header {
+  display: flex;
+  margin-bottom: 2rem;
+  align-items: center;
+  margin: 0px 10px 0px 10px;
+}
+.input {
+  flex: 1;
+  position: relative;
+}
+.calendar__header_month {
+  margin: 0.5rem;
+  color: #707070;
+  font-weight: bold;
+}
+.space {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.button {
+  color: #707070;
+  background-color: rgba(0, 0, 0, 0);
+  font-weight: bold;
+  border: 0px;
+}
+.calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background-color: #707070;
+  height: 60px;
+}
+.calendar__scroll {
+  height: 80vh;
+  padding: 10px;
+}
+.weekday {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  background-color: #31bb6b;
+  font-weight: 600;
+}
+.calendar__days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-rows: repeat(6, 1fr);
+}
+.calendar_hour_text_container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  border-right: 1px solid #8d8d8d55;
+  width: 40px;
+}
+.calendar_hour_text {
+  top: -10px;
+  left: -5px;
+  position: relative;
+  color: #707070;
+  font-size: 12px;
+}
+.calendar_timezone_text {
+  top: -10px;
+  left: -11px;
+  position: relative;
+  color: #707070;
+  font-size: 9px;
+}
+.calendar_hour_block {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #8d8d8d55;
+  position: relative;
+  height: 50px;
+  border-bottom-right-radius: 5px;
+}
+.event_list_parent {
+  position: relative;
+  width: 100%;
+}
+.event_list_parent_current {
+  background-color: #def6e1;
+  position: relative;
+  width: 100%;
+}
+.dummyWidth {
+  width: 1px;
+}
+.day {
+  background-color: #ffffff;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  background-color: white;
+  border: 1px solid #8d8d8d55;
+  color: black;
+  font-weight: 600;
+  height: 8rem;
+  position: relative;
+}
+.day__outside {
+  /* background-color: #ededee !important; */
+  color: #89898996 !important;
+}
+.day__selected {
+  background-color: #007bff;
+  color: #707070;
+}
+.day__today {
+  background-color: #def6e1;
+  font-weight: 700;
+  text-decoration: underline;
+  color: #31bb6b;
+}
+.day__events {
+  background-color: #def6e1;
+}
+/* yearly calender styling */
+.yearlyCalender {
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+.circularButton {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0);
+  border: none;
+  cursor: pointer;
+  margin-left: 0.75rem;
+}
+.circularButton:hover {
+  background-color: rgba(82, 172, 255, 0.5);
+}
+.closebtn {
+  padding: 10px;
+}
+
+.yearlyCalendarHeader {
+  display: flex;
+  flex-direction: row;
+}
+
+.yearlyCalendarHeader > div {
+  font-weight: 600;
+  font-size: 2rem;
+  padding: 0 10px;
+  color: #4b4b4b;
+}
+.noEventAvailable {
+  background-color: rgba(255, 255, 255, 0);
+}
+
+.card {
+  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
+  padding: 16px;
+  text-align: center;
+  /* background-color: #f1f1f1; */
+  height: 21rem;
+}
+.cardHeader {
+  text-align: left;
+}
+
+.row {
+  margin: 1px -5px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.weekday__yearly {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* color: #fff; */
+  background-color: #ffffff;
+  font-weight: 600;
+}
+.day__yearly {
+  background-color: #ffffff;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+  background-color: white;
+  /* border: 1px solid #8d8d8d55; */
+  color: #4b4b4b;
+  font-weight: 600;
+  height: 2rem;
+  position: relative;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* Float four columns side by side */
+.column {
+  float: left;
+  width: 25%;
+  padding: 10px;
+}
+
+/* Remove extra left and right margins, due to padding */
+.row {
+  margin: 0 -5px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+/* yearly calender styling ends */
+.btn__today {
+  transition: ease-in all 200ms;
+  font-family: Arial;
+  color: #ffffff;
+  font-size: 18px;
+  padding: 10px 20px 10px 20px;
+  text-decoration: none;
+  margin-left: 20px;
+  border: none;
+}
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropdown {
+  border-color: #31bb6b;
+  background-color: white;
+  color: #31bb6b;
+  box-shadow: 0px 2px 1px rgba(49, 187, 107, 0.5); /* Added blur effect */
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+.searchBtn {
+  margin-bottom: 10px;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.btn__more {
+  border: 0px;
+  font-size: 14px;
+  background-color: initial;
+  font-weight: 600;
+  transition: all 200ms;
+  position: relative;
+  display: block;
+  margin: -9px;
+  margin-top: -28px;
+}
+.btn__more:hover {
+  color: #3ce080;
+}
+
+.expand_event_list {
+  display: block;
+}
+.list_container {
+  padding: 5px;
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+}
+.event_list_hour {
+  display: flex;
+  flex-direction: row;
+}
+.expand_list_container {
+  width: 200px;
+  max-height: 250px;
+  z-index: 10;
+  position: absolute;
+  left: auto;
+  right: auto;
+  overflow: auto;
+  padding: 10px 4px 0px 4px;
+  background-color: rgb(241, 241, 241);
+  border: 1px solid rgb(201, 201, 201);
+  border-radius: 5px;
+  margin: 5px;
+}
+.flex_grow {
+  flex-grow: 1;
+}
+
+@media only screen and (max-width: 700px) {
+  .event_list {
+    display: none;
+  }
+  .expand_list_container {
+    width: 150px;
+    padding: 4px 4px 0px 4px;
+  }
+  .day {
+    height: 5rem;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .btn__more {
+    font-size: 12px;
+  }
+
+  .column {
+    float: left;
+    width: 100%;
+    padding: 10px;
+  }
+}
diff --git a/src/components/EventCalendar/YearlyEventCalender.tsx b/src/components/EventCalendar/YearlyEventCalender.tsx
new file mode 100644
index 0000000000..63870ded3c
--- /dev/null
+++ b/src/components/EventCalendar/YearlyEventCalender.tsx
@@ -0,0 +1,412 @@
+import EventListCard from 'components/EventListCard/EventListCard';
+import dayjs from 'dayjs';
+import Button from 'react-bootstrap/Button';
+import React, { useState, useEffect } from 'react';
+import styles from './YearlyEventCalender.module.css';
+import type { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
+
+/**
+ * Interface for event data used in the calendar.
+ */
+interface InterfaceEventListCardProps {
+  userRole?: string;
+  key?: string;
+  _id: string;
+  location: string;
+  title: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  startTime: string | null;
+  endTime: string | null;
+  allDay: boolean;
+  recurring: boolean;
+  recurrenceRule: InterfaceRecurrenceRule | null;
+  isRecurringEventException: boolean;
+  isPublic: boolean;
+  isRegisterable: boolean;
+  attendees?: {
+    _id: string;
+  }[];
+  creator?: {
+    firstName: string;
+    lastName: string;
+    _id: string;
+  };
+}
+
+interface InterfaceCalendarProps {
+  eventData: InterfaceEventListCardProps[];
+  refetchEvents?: () => void;
+  orgData?: InterfaceIOrgList;
+  userRole?: string;
+  userId?: string;
+  viewType?: ViewType;
+}
+
+enum Status {
+  ACTIVE = 'ACTIVE',
+  BLOCKED = 'BLOCKED',
+  DELETED = 'DELETED',
+}
+
+/**
+ * Enum for different user roles.
+ */
+enum Role {
+  USER = 'USER',
+  SUPERADMIN = 'SUPERADMIN',
+  ADMIN = 'ADMIN',
+}
+
+/**
+ * Interface for event attendees.
+ */
+interface InterfaceIEventAttendees {
+  userId: string;
+  user?: string;
+  status?: Status;
+  createdAt?: Date;
+}
+
+/**
+ * Interface for organization list.
+ */
+interface InterfaceIOrgList {
+  admins: { _id: string }[];
+}
+
+/**
+ * Calendar component to display events for a selected year.
+ *
+ * This component renders a yearly calendar with navigation to view previous and next years.
+ * It displays events for each day, with functionality to expand and view details of events.
+ *
+ * @param eventData - Array of event data to display on the calendar.
+ * @param refetchEvents - Function to refresh the event data.
+ * @param orgData - Organization data to filter events.
+ * @param userRole - Role of the user for access control.
+ * @param userId - ID of the user for filtering events they are attending.
+ * @param viewType - Type of view for the calendar.
+ * @returns JSX.Element - The rendered calendar component.
+ */
+const Calendar: React.FC<InterfaceCalendarProps> = ({
+  eventData,
+  refetchEvents,
+  orgData,
+  userRole,
+  userId,
+}) => {
+  const [selectedDate] = useState<Date | null>(null);
+  const weekdaysShorthand = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  const today = new Date();
+  const [currentYear, setCurrentYear] = useState(today.getFullYear());
+  const [events, setEvents] = useState<InterfaceEventListCardProps[] | null>(
+    null,
+  );
+  const [expandedY, setExpandedY] = useState<string | null>(null);
+
+  /**
+   * Filters events based on user role, organization data, and user ID.
+   *
+   * @param eventData - Array of event data to filter.
+   * @param orgData - Organization data for filtering events.
+   * @param userRole - Role of the user for access control.
+   * @param userId - ID of the user for filtering events they are attending.
+   * @returns Filtered array of event data.
+   */
+  const filterData = (
+    eventData: InterfaceEventListCardProps[],
+    orgData?: InterfaceIOrgList,
+    userRole?: string,
+    userId?: string,
+  ): InterfaceEventListCardProps[] => {
+    const data: InterfaceEventListCardProps[] = [];
+    if (userRole === Role.SUPERADMIN) return eventData;
+    // Hard to test all the cases
+    /* istanbul ignore next */
+    if (userRole === Role.ADMIN) {
+      eventData?.forEach((event) => {
+        if (event.isPublic) data.push(event);
+        if (!event.isPublic) {
+          const filteredOrg: boolean | undefined = orgData?.admins?.some(
+            (data) => data._id === userId,
+          );
+
+          if (filteredOrg) {
+            data.push(event);
+          }
+        }
+      });
+    } else {
+      eventData?.forEach((event) => {
+        if (event.isPublic) data.push(event);
+        const userAttending = event.attendees?.some(
+          (data) => data._id === userId,
+        );
+        if (userAttending) {
+          data.push(event);
+        }
+      });
+    }
+    return data;
+  };
+
+  useEffect(() => {
+    const data = filterData(eventData, orgData, userRole, userId);
+    setEvents(data);
+  }, [eventData, orgData, userRole, userId]);
+
+  /**
+   * Navigates to the previous year.
+   */
+  const handlePrevYear = (): void => {
+    /*istanbul ignore next*/
+    setCurrentYear(currentYear - 1);
+  };
+
+  /**
+   * Navigates to the next year.
+   */
+  const handleNextYear = (): void => {
+    /*istanbul ignore next*/
+    setCurrentYear(currentYear + 1);
+  };
+
+  /**
+   * Renders the days of the month for the calendar.
+   *
+   * @returns Array of JSX elements representing the days of each month.
+   */
+  const renderMonthDays = (): JSX.Element[] => {
+    const renderedMonths: JSX.Element[] = [];
+
+    for (let monthInx = 0; monthInx < 12; monthInx++) {
+      const monthStart = new Date(currentYear, monthInx, 1);
+      const monthEnd = new Date(currentYear, monthInx + 1, 0);
+
+      const startDate = new Date(monthStart);
+      const dayOfWeek = startDate.getDay();
+      const diff = startDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
+      startDate.setDate(diff);
+
+      const endDate = new Date(monthEnd);
+      const endDayOfWeek = endDate.getDay();
+      const diffEnd =
+        endDate.getDate() + (7 - endDayOfWeek) - (endDayOfWeek === 0 ? 7 : 0);
+      endDate.setDate(diffEnd);
+
+      const days = [];
+      let currentDate = startDate;
+      while (currentDate <= endDate) {
+        days.push(currentDate);
+        currentDate = new Date(
+          currentDate.getFullYear(),
+          currentDate.getMonth(),
+          currentDate.getDate() + 1,
+        );
+      }
+
+      const renderedDays = days.map((date, dayIndex) => {
+        const className = [
+          date.toLocaleDateString() === today.toLocaleDateString()
+            ? styles.day__today
+            : '',
+          date.getMonth() !== monthInx ? styles.day__outside : '',
+          selectedDate?.getTime() === date.getTime()
+            ? styles.day__selected
+            : '',
+          styles.day__yearly,
+        ].join(' ');
+
+        const eventsForCurrentDate = events?.filter((event) => {
+          return dayjs(event.startDate).isSame(date, 'day');
+        });
+
+        /*istanbul ignore next*/
+        const renderedEvents =
+          eventsForCurrentDate?.map((datas: InterfaceEventListCardProps) => {
+            const attendees: { _id: string }[] = [];
+            datas.attendees?.forEach((attendee: { _id: string }) => {
+              const r = {
+                _id: attendee._id,
+              };
+
+              attendees.push(r);
+            });
+
+            return (
+              <EventListCard
+                refetchEvents={refetchEvents}
+                userRole={userRole}
+                key={datas._id}
+                id={datas._id}
+                eventLocation={datas.location}
+                eventName={datas.title}
+                eventDescription={datas.description}
+                startDate={datas.startDate}
+                endDate={datas.endDate}
+                startTime={datas.startTime}
+                endTime={datas.endTime}
+                allDay={datas.allDay}
+                recurring={datas.recurring}
+                recurrenceRule={datas.recurrenceRule}
+                isRecurringEventException={datas.isRecurringEventException}
+                isPublic={datas.isPublic}
+                isRegisterable={datas.isRegisterable}
+                registrants={attendees}
+                creator={datas.creator}
+              />
+            );
+          }) || [];
+
+        /*istanbul ignore next*/
+        const toggleExpand = (index: string): void => {
+          if (expandedY === index) {
+            setExpandedY(null);
+          } else {
+            setExpandedY(index);
+          }
+        };
+
+        /*istanbul ignore next*/
+        return (
+          <div
+            key={`${monthInx}-${dayIndex}`}
+            className={className}
+            data-testid="day"
+          >
+            {date.getDate()}
+            <div
+              className={
+                expandedY === `${monthInx}-${dayIndex}`
+                  ? styles.expand_list_container
+                  : ''
+              }
+            >
+              <div
+                className={
+                  expandedY === `${monthInx}-${dayIndex}`
+                    ? styles.expand_event_list
+                    : styles.event_list
+                }
+              >
+                {expandedY === `${monthInx}-${dayIndex}` && renderedEvents}
+              </div>
+              {renderedEvents && renderedEvents?.length > 0 && (
+                <button
+                  className={styles.btn__more}
+                  onClick={() => toggleExpand(`${monthInx}-${dayIndex}`)}
+                >
+                  {expandedY === `${monthInx}-${dayIndex}` ? (
+                    <div className={styles.closebtn}>
+                      <br />
+                      <p>Close</p>
+                    </div>
+                  ) : (
+                    <div className={styles.circularButton}></div>
+                  )}
+                </button>
+              )}
+              {renderedEvents && renderedEvents?.length == 0 && (
+                <button
+                  className={styles.btn__more}
+                  onClick={() => toggleExpand(`${monthInx}-${dayIndex}`)}
+                >
+                  {expandedY === `${monthInx}-${dayIndex}` ? (
+                    <div className={styles.closebtn}>
+                      <br />
+                      <br />
+                      No Event Available!
+                      <br />
+                      <p>Close</p>
+                    </div>
+                  ) : (
+                    <div className={styles.circularButton}></div>
+                  )}
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      });
+
+      renderedMonths.push(
+        <div className={styles.column} key={monthInx}>
+          <div className={styles.card}>
+            <h6 className={styles.cardHeader}>{months[monthInx]}</h6>
+            <div className={styles.calendar__weekdays}>
+              {weekdaysShorthand.map((weekday, index) => (
+                <div key={index} className={styles.weekday__yearly}>
+                  {weekday}
+                </div>
+              ))}
+            </div>
+            <div className={styles.calendar__days}>{renderedDays}</div>
+          </div>
+        </div>,
+      );
+    }
+
+    return renderedMonths;
+  };
+
+  /**
+   * Renders the yearly calendar with navigation buttons.
+   *
+   * @returns JSX.Element - The rendered yearly calendar component.
+   */
+  const renderYearlyCalendar = (): JSX.Element => {
+    return (
+      <div className={styles.yearlyCalendar}>
+        <div className={styles.yearlyCalendarHeader}>
+          <Button
+            className={styles.button}
+            onClick={handlePrevYear}
+            data-testid="prevYear"
+          >
+            <ChevronLeft />
+          </Button>
+          <div className={styles.year}>{currentYear}</div>
+          <Button
+            className={styles.button}
+            onClick={handleNextYear}
+            data-testid="nextYear"
+          >
+            <ChevronRight />
+          </Button>
+        </div>
+
+        <div className={styles.row}>
+          <div>{renderMonthDays()}</div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.yearlyCalender}>
+        <div>{renderYearlyCalendar()}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;
diff --git a/src/components/EventCalendar/constants.js b/src/components/EventCalendar/constants.js
new file mode 100644
index 0000000000..f2b770426c
--- /dev/null
+++ b/src/components/EventCalendar/constants.js
@@ -0,0 +1,56 @@
+export const holidays = [
+  { name: 'May Day / Labour Day', date: '05-01', month: 'May' }, // May 1st
+  { name: "Mother's Day", date: '05-08', month: 'May' }, // Second Sunday in May
+  { name: "Father's Day", date: '06-19', month: 'June' }, // Third Sunday in June
+  { name: 'Independence Day (US)', date: '07-04', month: 'July' }, // July 4th
+  { name: 'Oktoberfest', date: '09-21', month: 'September' }, // September 21st (starts in September, ends in October)
+  { name: 'Halloween', date: '10-31', month: 'October' }, // October 31st
+  { name: 'Diwali', date: '11-04', month: 'November' },
+  {
+    name: 'Remembrance Day / Veterans Day',
+    date: '11-11',
+    month: 'November',
+  },
+  { name: 'Christmas Day', date: '12-25', month: 'December' }, // December 25th
+];
+export const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+export const hours = [
+  '12 AM',
+  '01 AM',
+  '02 AM',
+  '03 AM',
+  '04 AM',
+  '05 AM',
+  '06 AM',
+  '07 AM',
+  '08 AM',
+  '09 AM',
+  '10 AM',
+  '11 AM',
+  '12 PM',
+  '01 PM',
+  '02 PM',
+  '03 PM',
+  '04 PM',
+  '05 PM',
+  '06 PM',
+  '07 PM',
+  '08 PM',
+  '09 PM',
+  '10 PM',
+  '11 PM',
+];
diff --git a/src/components/EventDashboardScreen/EventDashboardScreen.module.css b/src/components/EventDashboardScreen/EventDashboardScreen.module.css
new file mode 100644
index 0000000000..33c642dd95
--- /dev/null
+++ b/src/components/EventDashboardScreen/EventDashboardScreen.module.css
@@ -0,0 +1,198 @@
+.gap {
+  gap: 20px;
+}
+
+.mainContainer {
+  width: 50%;
+  flex-grow: 3;
+  padding: 20px;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.containerHeight {
+  height: calc(100vh - 66px);
+}
+
+.colorLight {
+  background-color: #f1f3f6;
+}
+
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.5s ease-in-out;
+}
+.avatarStyle {
+  border-radius: 100%;
+}
+.profileContainer {
+  border: none;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  align-items: center;
+  background-color: white !important;
+  box-shadow:
+    0 4px 4px 0 rgba(177, 177, 177, 0.2),
+    0 6px 20px 0 rgba(151, 151, 151, 0.19);
+}
+.profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+.imageContainer {
+  width: 56px;
+}
+.profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.angleDown {
+  margin-left: 4px;
+}
+.profileContainer .profileText .primaryText {
+  font-size: 1rem;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+.profileDropdown {
+  background-color: transparent !important;
+}
+.profileDropdown .dropdown-toggle .btn .btn-normal {
+  display: none !important;
+  background-color: transparent !important;
+}
+.dropdownToggle {
+  background-image: url(/public/images/svg/angleDown.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: azure;
+}
+
+.dropdownToggle::after {
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+.opendrawer:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+.collapseSidebarButton:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+@media (max-height: 900px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(300px + 2rem);
+  }
+  .collapseSidebarButton {
+    height: 30px;
+    width: calc(300px + 1rem);
+  }
+}
+@media (max-height: 650px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(270px);
+  }
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .pageContainer {
+    padding-left: 2.5rem;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/src/components/EventDashboardScreen/EventDashboardScreen.test.tsx b/src/components/EventDashboardScreen/EventDashboardScreen.test.tsx
new file mode 100644
index 0000000000..6b48b034a9
--- /dev/null
+++ b/src/components/EventDashboardScreen/EventDashboardScreen.test.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import 'jest-location-mock';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import EventDashboardScreen from './EventDashboardScreen';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import useLocalStorage from 'utils/useLocalstorage';
+const { setItem } = useLocalStorage();
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+let mockID: string | undefined = '123';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockID }),
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'JohnDoe@example.com',
+            },
+            name: 'Test Organization',
+            description: 'Testing this organization',
+            address: {
+              city: 'Mountain View',
+              countryCode: 'US',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Main Street',
+              line2: 'Apt 456',
+              postalCode: '94040',
+              sortingCode: 'XYZ-789',
+              state: 'CA',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: true,
+            members: [],
+            admins: [],
+            membershipRequests: [],
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+];
+const link = new StaticMockLink(MOCKS, true);
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+const clickToggleMenuBtn = (toggleButton: HTMLElement): void => {
+  fireEvent.click(toggleButton);
+};
+
+describe('Testing LeftDrawer in OrganizationScreen', () => {
+  test('should be redirected to / if IsLoggedIn is false', async () => {
+    setItem('IsLoggedIn', false);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <EventDashboardScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(window.location.pathname).toEqual('/');
+  });
+  test('should be redirected to / if ss is false', async () => {
+    setItem('IsLoggedIn', true);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <EventDashboardScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  });
+  test('Testing LeftDrawer in page functionality', async () => {
+    setItem('IsLoggedIn', true);
+    setItem('AdminFor', [
+      { _id: '6637904485008f171cf29924', __typename: 'Organization' },
+    ]);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <EventDashboardScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    const toggleButton = screen.getByTestId('toggleMenuBtn') as HTMLElement;
+    const icon = toggleButton.querySelector('i');
+
+    // Resize window to a smaller width
+    resizeWindow(800);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
+    // Resize window back to a larger width
+
+    resizeWindow(1000);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
+
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
+  });
+
+  test('should be redirected to / if orgId is undefined', async () => {
+    mockID = undefined;
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <EventDashboardScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(window.location.pathname).toEqual('/');
+  });
+});
diff --git a/src/components/EventDashboardScreen/EventDashboardScreen.tsx b/src/components/EventDashboardScreen/EventDashboardScreen.tsx
new file mode 100644
index 0000000000..11b9ec936f
--- /dev/null
+++ b/src/components/EventDashboardScreen/EventDashboardScreen.tsx
@@ -0,0 +1,159 @@
+import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
+import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
+import type { RootState } from 'state/reducers';
+import type { TargetsType } from 'state/reducers/routesReducer';
+import styles from './EventDashboardScreen.module.css';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+import useLocalStorage from 'utils/useLocalstorage';
+import type { InterfaceMapType } from 'utils/interfaces';
+
+/**
+ * The EventDashboardScreen component is the main dashboard view for event management.
+ * It includes navigation, a sidebar, and a profile dropdown.
+ *
+ * @returns JSX.Element - The rendered EventDashboardScreen component.
+ */
+const EventDashboardScreen = (): JSX.Element => {
+  const { getItem } = useLocalStorage();
+  const isLoggedIn = getItem('IsLoggedIn');
+  const adminFor = getItem('AdminFor');
+  const location = useLocation();
+  const titleKey: string | undefined = map[location.pathname.split('/')[2]];
+  const { t } = useTranslation('translation', { keyPrefix: titleKey });
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+  const { orgId } = useParams();
+
+  // Redirect to home if orgId is not present or if user is not logged in
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  if (isLoggedIn === false) return <Navigate to="/" replace />;
+  if (adminFor === null) {
+    return (
+      <>
+        <div className={`d-flex flex-row ${styles.containerHeight}`}>
+          <div className={`${styles.colorLight} ${styles.mainContainer}`}>
+            <div
+              className={`d-flex flex-row justify-content-between flex-wrap ${styles.gap}`}
+            >
+              <div style={{ flex: 1 }}>
+                <h1>{t('title')}</h1>
+              </div>
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  // Access targets from Redux store
+  const appRoutes: {
+    targets: TargetsType[];
+  } = useSelector((state: RootState) => state.appRoutes);
+  const { targets } = appRoutes;
+
+  const dispatch = useAppDispatch();
+
+  // Update targets when orgId changes
+  useEffect(() => {
+    dispatch(updateTargets(orgId));
+  }, [orgId]);
+
+  /**
+   * Handles window resize events to toggle the visibility of the sidebar drawer.
+   */
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820 && !hideDrawer) {
+      setHideDrawer(true);
+    }
+  };
+
+  /**
+   * Toggles the visibility of the sidebar drawer.
+   */
+  const toggleDrawer = (): void => {
+    setHideDrawer(!hideDrawer);
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [hideDrawer]);
+
+  return (
+    <>
+      <button
+        className={
+          hideDrawer ? styles.opendrawer : styles.collapseSidebarButton
+        }
+        onClick={toggleDrawer}
+        data-testid="toggleMenuBtn"
+      >
+        <i
+          className={
+            hideDrawer ? 'fa fa-angle-double-right' : 'fa fa-angle-double-left'
+          }
+          aria-hidden="true"
+        ></i>
+      </button>
+      <div className={styles.drawer}>
+        <LeftDrawerOrg
+          orgId={orgId}
+          targets={targets}
+          hideDrawer={hideDrawer}
+          setHideDrawer={setHideDrawer}
+        />
+      </div>
+      <div
+        className={`${styles.pageContainer} ${
+          hideDrawer === null
+            ? ''
+            : hideDrawer
+              ? styles.expand
+              : styles.contract
+        } `}
+        data-testid="mainpageright"
+      >
+        <div className="d-flex justify-content-between align-items-center">
+          <div style={{ flex: 1 }}>
+            <h1>{t('title')}</h1>
+          </div>
+          <ProfileDropdown />
+        </div>
+        <Outlet />
+      </div>
+    </>
+  );
+};
+
+export default EventDashboardScreen;
+
+const map: InterfaceMapType = {
+  orgdash: 'dashboard',
+  orgpeople: 'organizationPeople',
+  requests: 'requests',
+  orgads: 'advertisement',
+  member: 'memberDetail',
+  orgevents: 'organizationEvents',
+  orgactionitems: 'organizationActionItems',
+  orgcontribution: 'orgContribution',
+  orgpost: 'orgPost',
+  orgfunds: 'funds',
+  orgfundcampaign: 'fundCampaign',
+  fundCampaignPledge: 'pledges',
+  orgsetting: 'orgSettings',
+  orgstore: 'addOnStore',
+  blockuser: 'blockUnblockUser',
+  orgvenues: 'organizationVenues',
+  event: 'eventManagement',
+};
diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css
new file mode 100644
index 0000000000..1e47972a42
--- /dev/null
+++ b/src/components/EventListCard/EventListCard.module.css
@@ -0,0 +1,223 @@
+.cards h2 {
+  font-size: 15px;
+  color: #4e4c4c;
+  font-weight: 500;
+}
+.cards > h3 {
+  font-size: 17px;
+}
+.cards > p {
+  font-size: 14px;
+  margin-top: 0px;
+  margin-bottom: 7px;
+}
+.cards a {
+  color: #fff;
+  font-weight: 600;
+}
+.cards a:hover {
+  color: black;
+}
+.cards {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+  margin-bottom: 5px;
+}
+.dispflex {
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  margin: 10px 5px 5px 0px;
+}
+.eventtitle {
+  margin-bottom: 0px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 2px;
+}
+
+.cards {
+  width: 100%;
+  background: #5cacf7 !important;
+  padding: 2px 3px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 3px 2px #e8e8e8;
+  color: #737373;
+  box-sizing: border-box;
+}
+.cards:last-child:nth-last-child(odd) {
+  grid-column: auto / span 2;
+}
+
+.cards:first-child:nth-last-child(even),
+.cards:first-child:nth-last-child(even) ~ .box {
+  grid-column: auto / span 1;
+}
+
+.sidebarsticky > input {
+  text-decoration: none;
+  margin-bottom: 50px;
+  border-color: #e8e5e5;
+  width: 80%;
+  border-radius: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  box-shadow: none;
+}
+.datediv {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  border-color: #e8e5e5;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+.datediv > div > p {
+  margin-bottom: 0.5rem;
+}
+
+.startDate {
+  margin-right: 0.25rem;
+}
+.endDate {
+  margin-left: 1.5rem;
+}
+
+.checkboxdiv > div label {
+  margin-right: 50px;
+}
+.checkboxdiv > label > input {
+  margin-left: 10px;
+}
+
+.dispflex > input {
+  width: 20%;
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+
+.checkboxContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.checkboxdiv {
+  display: flex;
+  flex-direction: column;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 700;
+  font-size: 16px;
+  color: #000000;
+  margin: 0;
+}
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: #707070;
+}
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+  width: 40%;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+.titlemodal {
+  color: #000000;
+  font-weight: 600;
+  font-size: 24px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 4px solid #31bb6b;
+  width: 50%;
+}
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+.modalbody {
+  width: 50px;
+}
+.list_box {
+  height: 70vh;
+  overflow-y: auto;
+  width: auto;
+}
+@media only screen and (max-width: 600px) {
+  .form_wrapper {
+    width: 90%;
+    top: 45%;
+  }
+  .checkboxContainer {
+    flex-direction: column;
+  }
+
+  .datediv {
+    flex-direction: column;
+  }
+
+  .datediv > div {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 10px;
+  }
+
+  .datediv > div p {
+    margin-bottom: 5px;
+  }
+}
+
+.customButton {
+  width: 90%;
+  margin: 0 auto;
+}
diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx
new file mode 100644
index 0000000000..afe81f436e
--- /dev/null
+++ b/src/components/EventListCard/EventListCard.test.tsx
@@ -0,0 +1,945 @@
+import React, { act } from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import type { InterfaceEventListCardProps } from './EventListCard';
+import EventListCard from './EventListCard';
+import i18n from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { BrowserRouter, MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { toast } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import useLocalStorage from 'utils/useLocalstorage';
+import { props } from './EventListCardProps';
+import { ERROR_MOCKS, MOCKS } from './EventListCardMocks';
+
+const { setItem } = useLocalStorage();
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(ERROR_MOCKS, true);
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventListCard ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const renderEventListCard = (
+  props: InterfaceEventListCardProps,
+): RenderResult => {
+  const { key, ...restProps } = props; // Destructure the key and separate other props
+
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgevents/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/orgevents/:orgId"
+                  element={<EventListCard key={key} {...restProps} />}
+                />
+                <Route
+                  path="/event/:orgId/"
+                  element={<EventListCard key={key} {...restProps} />}
+                />
+                <Route
+                  path="/event/:orgId/:eventId"
+                  element={<div>Event Dashboard (Admin)</div>}
+                />
+                <Route
+                  path="/user/event/:orgId/:eventId"
+                  element={<div>Event Dashboard (User)</div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Event List Card', () => {
+  const updateData = {
+    title: 'Updated title',
+    description: 'This is a new update',
+    isPublic: true,
+    recurring: false,
+    isRegisterable: true,
+    allDay: false,
+    location: 'New Delhi',
+    startDate: '03/18/2022',
+    endDate: '03/20/2022',
+    startTime: '09:00 AM',
+    endTime: '05:00 PM',
+  };
+
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  test('Testing for event modal', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('eventModalCloseBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should navigate to "/" if orgId is not defined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18n}>
+          <BrowserRouter>
+            <EventListCard
+              key="123"
+              id="1"
+              eventName=""
+              eventLocation=""
+              eventDescription=""
+              startDate="19/03/2022"
+              endDate="26/03/2022"
+              startTime="02:00"
+              endTime="06:00"
+              allDay={true}
+              recurring={false}
+              recurrenceRule={null}
+              isRecurringEventException={false}
+              isPublic={true}
+              isRegisterable={false}
+            />
+          </BrowserRouter>
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(window.location.pathname).toEqual('/');
+    });
+  });
+
+  test('Should render default text if event details are null', async () => {
+    renderEventListCard(props[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Dogs Care')).toBeInTheDocument();
+    });
+  });
+
+  test('should render props and text elements test for the screen', async () => {
+    renderEventListCard(props[1]);
+
+    expect(screen.getByText(props[1].eventName)).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateDescription')).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('updateDescription')).toHaveValue(
+      props[1].eventDescription,
+    );
+    expect(screen.getByTestId('updateLocation')).toHaveValue(
+      props[1].eventLocation,
+    );
+
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should render truncated event name when length is more than 100', async () => {
+    const longEventName = 'a'.repeat(101);
+    renderEventListCard({ ...props[1], eventName: longEventName });
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateTitle')).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('updateTitle')).toHaveValue(
+      `${longEventName.substring(0, 100)}...`,
+    );
+
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should render full event name when length is less than or equal to 100', async () => {
+    const shortEventName = 'a'.repeat(100);
+    renderEventListCard({ ...props[1], eventName: shortEventName });
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateTitle')).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('updateTitle')).toHaveValue(shortEventName);
+
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should render truncated event description when length is more than 256', async () => {
+    const longEventDescription = 'a'.repeat(257);
+
+    renderEventListCard({
+      ...props[1],
+      eventDescription: longEventDescription,
+    });
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateDescription')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('updateDescription')).toHaveValue(
+      `${longEventDescription.substring(0, 256)}...`,
+    );
+
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should render full event description when length is less than or equal to 256', async () => {
+    const shortEventDescription = 'a'.repeat(256);
+
+    renderEventListCard({
+      ...props[1],
+      eventDescription: shortEventDescription,
+    });
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateDescription')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('updateDescription')).toHaveValue(
+      shortEventDescription,
+    );
+
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should navigate to event dashboard when clicked (For Admin)', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('showEventDashboardBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('showEventDashboardBtn'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+      expect(screen.queryByText('Event Dashboard (Admin)')).toBeInTheDocument();
+    });
+  });
+
+  test('Should navigate to event dashboard when clicked (For User)', async () => {
+    setItem('userId', '123');
+    renderEventListCard(props[2]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('showEventDashboardBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('showEventDashboardBtn'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+      expect(screen.queryByText('Event Dashboard (User)')).toBeInTheDocument();
+    });
+  });
+
+  test('Should update a non-recurring event', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    const eventTitle = screen.getByTestId('updateTitle');
+    fireEvent.change(eventTitle, { target: { value: '' } });
+    userEvent.type(eventTitle, updateData.title);
+
+    const eventDescription = screen.getByTestId('updateDescription');
+    fireEvent.change(eventDescription, { target: { value: '' } });
+    userEvent.type(eventDescription, updateData.description);
+
+    const eventLocation = screen.getByTestId('updateLocation');
+    fireEvent.change(eventLocation, { target: { value: '' } });
+    userEvent.type(eventLocation, updateData.location);
+
+    const startDatePicker = screen.getByLabelText(translations.startDate);
+    fireEvent.change(startDatePicker, {
+      target: { value: updateData.startDate },
+    });
+
+    const endDatePicker = screen.getByLabelText(translations.endDate);
+    fireEvent.change(endDatePicker, {
+      target: { value: updateData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('updateAllDay'));
+    userEvent.click(screen.getByTestId('updateIsPublic'));
+    userEvent.click(screen.getByTestId('updateRegistrable'));
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Should update a non all day non-recurring event', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    const eventTitle = screen.getByTestId('updateTitle');
+    fireEvent.change(eventTitle, { target: { value: '' } });
+    userEvent.type(eventTitle, updateData.title);
+
+    const eventDescription = screen.getByTestId('updateDescription');
+    fireEvent.change(eventDescription, { target: { value: '' } });
+    userEvent.type(eventDescription, updateData.description);
+
+    const eventLocation = screen.getByTestId('updateLocation');
+    fireEvent.change(eventLocation, { target: { value: '' } });
+    userEvent.type(eventLocation, updateData.location);
+
+    const startDatePicker = screen.getByLabelText(translations.startDate);
+    fireEvent.change(startDatePicker, {
+      target: { value: updateData.startDate },
+    });
+
+    const endDatePicker = screen.getByLabelText(translations.endDate);
+    fireEvent.change(endDatePicker, {
+      target: { value: updateData.endDate },
+    });
+
+    const startTimePicker = screen.getByLabelText(translations.startTime);
+    fireEvent.change(startTimePicker, {
+      target: { value: updateData.startTime },
+    });
+
+    const endTimePicker = screen.getByLabelText(translations.endTime);
+    fireEvent.change(endTimePicker, {
+      target: { value: updateData.endTime },
+    });
+
+    userEvent.click(screen.getByTestId('updateIsPublic'));
+    userEvent.click(screen.getByTestId('updateRegistrable'));
+
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should update a single event to be recurring', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    const eventTitle = screen.getByTestId('updateTitle');
+    fireEvent.change(eventTitle, { target: { value: '' } });
+    userEvent.type(eventTitle, updateData.title);
+
+    const eventDescription = screen.getByTestId('updateDescription');
+    fireEvent.change(eventDescription, { target: { value: '' } });
+    userEvent.type(eventDescription, updateData.description);
+
+    const eventLocation = screen.getByTestId('updateLocation');
+    fireEvent.change(eventLocation, { target: { value: '' } });
+    userEvent.type(eventLocation, updateData.location);
+
+    const startDatePicker = screen.getByLabelText(translations.startDate);
+    fireEvent.change(startDatePicker, {
+      target: { value: updateData.startDate },
+    });
+
+    const endDatePicker = screen.getByLabelText(translations.endDate);
+    fireEvent.change(endDatePicker, {
+      target: { value: updateData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('updateAllDay'));
+    userEvent.click(screen.getByTestId('updateRecurring'));
+    userEvent.click(screen.getByTestId('updateIsPublic'));
+    userEvent.click(screen.getByTestId('updateRegistrable'));
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should show different update options for a recurring event based on different conditions', async () => {
+    renderEventListCard(props[5]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('updateEventBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    // shows options to update thisInstance and thisAndFollowingInstances, and allInstances
+    await waitFor(() => {
+      expect(screen.getByTestId('update-thisInstance')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('update-thisAndFollowingInstances'),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('update-allInstances')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('eventUpdateOptionsModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(translations.startDate)).toBeInTheDocument();
+    });
+
+    // change the event dates
+    let startDatePicker = screen.getByLabelText(translations.startDate);
+    fireEvent.change(startDatePicker, {
+      target: { value: updateData.startDate },
+    });
+
+    let endDatePicker = screen.getByLabelText(translations.endDate);
+    fireEvent.change(endDatePicker, {
+      target: { value: updateData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    // shows options to update thisInstance and thisAndFollowingInstances only
+    await waitFor(() => {
+      expect(screen.getByTestId('update-thisInstance')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('update-thisAndFollowingInstances'),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByTestId('update-allInstances'),
+      ).not.toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('eventUpdateOptionsModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(translations.startDate)).toBeInTheDocument();
+    });
+
+    // reset the event dates to their original values
+    startDatePicker = screen.getByLabelText(translations.startDate);
+    fireEvent.change(startDatePicker, {
+      target: { value: '03/17/2022' },
+    });
+
+    endDatePicker = screen.getByLabelText(translations.endDate);
+    fireEvent.change(endDatePicker, {
+      target: { value: '03/17/2022' },
+    });
+
+    // now change the recurrence rule of the event
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customDailyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customDailyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceSubmitBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateEventBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    // shows options to update thisAndFollowingInstances and allInstances only
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('update-thisInstance'),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByTestId('update-thisAndFollowingInstances'),
+      ).toBeInTheDocument();
+      expect(screen.queryByTestId('update-allInstances')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('eventUpdateOptionsModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('eventModalCloseBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should show recurrenceRule as changed if the recurrence weekdays have changed', async () => {
+    renderEventListCard(props[4]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    // since the current recurrence weekDay for the current recurring event is "SATURDAY",
+    // let's first deselect it, and then we'll select a different day
+    // the recurrence rule should be marked as changed and we should see the option to update
+    // thisAndFollowingInstances and allInstances only
+    await waitFor(() => {
+      expect(screen.getAllByTestId('recurrenceWeekDay')[6]).toBeInTheDocument();
+    });
+
+    // deselect saturday, which is the 7th day in recurrenceWeekDay options
+    userEvent.click(screen.getAllByTestId('recurrenceWeekDay')[6]);
+
+    // select a different day, say wednesday, the 4th day in recurrenceWeekDay options
+    userEvent.click(screen.getAllByTestId('recurrenceWeekDay')[3]);
+
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateEventBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    // shows options to update thisInstance and thisAndFollowingInstances, and allInstances
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('update-thisInstance'),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByTestId('update-thisAndFollowingInstances'),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('update-allInstances')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('eventUpdateOptionsModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('eventModalCloseBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should update all instances of a recurring event', async () => {
+    renderEventListCard(props[6]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateTitle')).toBeInTheDocument();
+    });
+
+    const eventTitle = screen.getByTestId('updateTitle');
+    fireEvent.change(eventTitle, { target: { value: '' } });
+    userEvent.type(eventTitle, updateData.title);
+
+    const eventDescription = screen.getByTestId('updateDescription');
+    fireEvent.change(eventDescription, { target: { value: '' } });
+    userEvent.type(eventDescription, updateData.description);
+
+    const eventLocation = screen.getByTestId('updateLocation');
+    fireEvent.change(eventLocation, { target: { value: '' } });
+    userEvent.type(eventLocation, updateData.location);
+
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    // shows options to update thisInstance and thisAndFollowingInstances, and allInstances
+    await waitFor(() => {
+      expect(screen.getByTestId('update-thisInstance')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('update-thisAndFollowingInstances'),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('update-allInstances')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('update-allInstances'));
+    userEvent.click(screen.getByTestId('recurringEventUpdateOptionSubmitBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateEventBtn')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should update thisAndFollowingInstances of a recurring event', async () => {
+    renderEventListCard(props[5]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(translations.startDate)).toBeInTheDocument();
+    });
+
+    // change the event dates
+    const startDatePicker = screen.getByLabelText(translations.startDate);
+    fireEvent.change(startDatePicker, {
+      target: { value: updateData.startDate },
+    });
+
+    const endDatePicker = screen.getByLabelText(translations.endDate);
+    fireEvent.change(endDatePicker, {
+      target: { value: updateData.endDate },
+    });
+
+    // now change the recurrence rule of the event
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customDailyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customDailyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceSubmitBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('updateEventBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('updateEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should render the delete modal', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('deleteEventModalBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteEventModalBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('eventDeleteModalCloseBtn'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('eventDeleteModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventDeleteModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('eventModalCloseBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('eventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should call the delete event mutation when the "Yes" button is clicked', async () => {
+    renderEventListCard(props[1]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('deleteEventModalBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('deleteEventBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventDeleted);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('select different delete options on recurring events & then delete the recurring event', async () => {
+    renderEventListCard(props[4]);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('card')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('deleteEventModalBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('deleteEventModalBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('delete-thisAndFollowingInstances'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('delete-thisAndFollowingInstances'));
+
+    userEvent.click(screen.getByTestId('delete-allInstances'));
+    userEvent.click(screen.getByTestId('delete-thisInstance'));
+
+    userEvent.click(screen.getByTestId('deleteEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventDeleted);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should show an error toast when the delete event mutation fails', async () => {
+    // Destructure key from props[1] and pass it separately to avoid spreading it
+    const { key, ...otherProps } = props[1];
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <MemoryRouter initialEntries={['/orgevents/orgId']}>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                <Routes>
+                  <Route
+                    path="/orgevents/:orgId"
+                    element={<EventListCard key={key} {...otherProps} />}
+                  />
+                  <Route
+                    path="/event/:orgId/"
+                    element={<EventListCard key={key} {...otherProps} />}
+                  />
+                </Routes>
+              </I18nextProvider>
+            </LocalizationProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('deleteEventModalBtn'));
+    userEvent.click(screen.getByTestId('deleteEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  test('handle register should work properly', async () => {
+    setItem('userId', '456');
+
+    renderEventListCard(props[2]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('registerEventBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('registerEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        `Successfully registered for ${props[2].eventName}`,
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('eventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('should show already registered text when the user is registered for an event', async () => {
+    renderEventListCard(props[3]);
+
+    userEvent.click(screen.getByTestId('card'));
+
+    expect(
+      screen.getByText(translations.alreadyRegistered),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
new file mode 100644
index 0000000000..ffa508ff7c
--- /dev/null
+++ b/src/components/EventListCard/EventListCard.tsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './EventListCard.module.css';
+import { Navigate, useParams } from 'react-router-dom';
+import EventListCardModals from './EventListCardModals';
+import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
+
+/**
+ * Props for the EventListCard component.
+ */
+export interface InterfaceEventListCardProps {
+  refetchEvents?: () => void;
+  userRole?: string;
+  key: string;
+  id: string;
+  eventLocation: string;
+  eventName: string;
+  eventDescription: string;
+  startDate: string;
+  endDate: string;
+  startTime: string | null;
+  endTime: string | null;
+  allDay: boolean;
+  recurring: boolean;
+  recurrenceRule: InterfaceRecurrenceRule | null;
+  isRecurringEventException: boolean;
+  isPublic: boolean;
+  isRegisterable: boolean;
+  registrants?: {
+    _id: string;
+  }[];
+  creator?: {
+    firstName: string;
+    lastName: string;
+    _id: string;
+  };
+}
+
+/**
+ * Component that displays an event card with a modal for event details.
+ *
+ * @param props - The props for the EventListCard component.
+ * @returns  The rendered EventListCard component.
+ */
+function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventListCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [eventModalIsOpen, setEventModalIsOpen] = useState(false);
+
+  const { orgId } = useParams();
+
+  // Redirect to home if orgId is not present
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  /**
+   * Opens the event modal.
+   */
+  const showViewModal = (): void => {
+    setEventModalIsOpen(true);
+  };
+
+  /**
+   * Closes the event modal.
+   */
+  const hideViewModal = (): void => {
+    setEventModalIsOpen(false);
+  };
+
+  return (
+    <>
+      <div
+        className={styles.cards}
+        style={{
+          backgroundColor: '#d9d9d9',
+        }}
+        onClick={showViewModal}
+        data-testid="card"
+      >
+        <div className={styles.dispflex}>
+          <h2 className={styles.eventtitle}>
+            {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}
+          </h2>
+        </div>
+      </div>
+
+      <EventListCardModals
+        eventListCardProps={props}
+        eventModalIsOpen={eventModalIsOpen}
+        hideViewModal={hideViewModal}
+        t={t}
+        tCommon={tCommon}
+      />
+    </>
+  );
+}
+export {};
+export default eventListCard;
diff --git a/src/components/EventListCard/EventListCardMocks.ts b/src/components/EventListCard/EventListCardMocks.ts
new file mode 100644
index 0000000000..6312b5af51
--- /dev/null
+++ b/src/components/EventListCard/EventListCardMocks.ts
@@ -0,0 +1,201 @@
+import {
+  DELETE_EVENT_MUTATION,
+  REGISTER_EVENT,
+  UPDATE_EVENT_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+
+export const MOCKS = [
+  {
+    request: {
+      query: DELETE_EVENT_MUTATION,
+      variables: { id: '1' },
+    },
+    result: {
+      data: {
+        removeEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_EVENT_MUTATION,
+      variables: { id: '1', recurringEventDeleteType: 'thisInstance' },
+    },
+    result: {
+      data: {
+        removeEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_EVENT_MUTATION,
+      variables: {
+        id: '1',
+        title: 'Updated title',
+        description: 'This is a new update',
+        isPublic: false,
+        recurring: false,
+        isRegisterable: true,
+        allDay: true,
+        startDate: '2022-03-18',
+        endDate: '2022-03-20',
+        location: 'New Delhi',
+      },
+    },
+    result: {
+      data: {
+        updateEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_EVENT_MUTATION,
+      variables: {
+        id: '1',
+        title: 'Updated title',
+        description: 'This is a new update',
+        isPublic: false,
+        recurring: false,
+        isRegisterable: true,
+        allDay: false,
+        startDate: '2022-03-18',
+        endDate: '2022-03-20',
+        location: 'New Delhi',
+        startTime: '09:00:00',
+        endTime: '17:00:00',
+      },
+    },
+    result: {
+      data: {
+        updateEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_EVENT_MUTATION,
+      variables: {
+        id: '1',
+        title: 'Updated title',
+        description: 'This is a new update',
+        isPublic: false,
+        recurring: true,
+        recurringEventUpdateType: 'thisInstance',
+        isRegisterable: true,
+        allDay: true,
+        startDate: '2022-03-18',
+        endDate: '2022-03-20',
+        location: 'New Delhi',
+        recurrenceStartDate: '2022-03-18',
+        recurrenceEndDate: null,
+        frequency: 'WEEKLY',
+        weekDays: ['FRIDAY'],
+        interval: 1,
+      },
+    },
+    result: {
+      data: {
+        updateEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_EVENT_MUTATION,
+      variables: {
+        id: '1',
+        title: 'Updated title',
+        description: 'This is a new update',
+        isPublic: true,
+        recurring: true,
+        recurringEventUpdateType: 'allInstances',
+        isRegisterable: false,
+        allDay: true,
+        startDate: '2022-03-17',
+        endDate: '2022-03-17',
+        location: 'New Delhi',
+        recurrenceStartDate: '2022-03-17',
+        recurrenceEndDate: '2023-03-17',
+        frequency: 'MONTHLY',
+        weekDays: ['THURSDAY'],
+        interval: 1,
+        weekDayOccurenceInMonth: 3,
+      },
+    },
+    result: {
+      data: {
+        updateEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_EVENT_MUTATION,
+      variables: {
+        id: '1',
+        title: 'Shelter for Cats',
+        description: 'This is shelter for cat event',
+        isPublic: true,
+        recurring: true,
+        recurringEventUpdateType: 'thisAndFollowingInstances',
+        isRegisterable: false,
+        allDay: true,
+        startDate: '2022-03-18',
+        endDate: '2022-03-20',
+        location: 'India',
+        recurrenceStartDate: '2022-03-18',
+        recurrenceEndDate: null,
+        frequency: 'DAILY',
+        interval: 1,
+      },
+    },
+    result: {
+      data: {
+        updateEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: REGISTER_EVENT,
+      variables: { eventId: '1' },
+    },
+    result: {
+      data: {
+        registerForEvent: [
+          {
+            _id: '123',
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: DELETE_EVENT_MUTATION,
+      variables: {
+        id: '1',
+      },
+    },
+    error: new Error('Something went wrong'),
+  },
+];
diff --git a/src/components/EventListCard/EventListCardModals.tsx b/src/components/EventListCard/EventListCardModals.tsx
new file mode 100644
index 0000000000..193890941c
--- /dev/null
+++ b/src/components/EventListCard/EventListCardModals.tsx
@@ -0,0 +1,834 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Modal, Popover } from 'react-bootstrap';
+import styles from './EventListCard.module.css';
+import { DatePicker, TimePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+import type { InterfaceEventListCardProps } from './EventListCard';
+import {
+  type InterfaceRecurrenceRuleState,
+  type RecurringEventMutationType,
+  Days,
+  Frequency,
+  allInstances,
+  getRecurrenceRuleText,
+  getWeekDayOccurenceInMonth,
+  recurringEventMutationOptions,
+  thisAndFollowingInstances,
+  thisInstance,
+  haveInstanceDatesChanged,
+  hasRecurrenceRuleChanged,
+} from 'utils/recurrenceUtils';
+import useLocalStorage from 'utils/useLocalstorage';
+import RecurrenceOptions from 'components/RecurrenceOptions/RecurrenceOptions';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  DELETE_EVENT_MUTATION,
+  REGISTER_EVENT,
+  UPDATE_EVENT_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+
+enum Role {
+  USER = 'USER',
+  SUPERADMIN = 'SUPERADMIN',
+  ADMIN = 'ADMIN',
+}
+
+/**
+ * Converts a time string to a Dayjs object representing the current date with the specified time.
+ * @param time - A string representing the time in 'HH:mm:ss' format.
+ * @returns A Dayjs object with the current date and specified time.
+ */
+const timeToDayJs = (time: string): Dayjs => {
+  const dateTimeString = dayjs().format('YYYY-MM-DD') + ' ' + time;
+  return dayjs(dateTimeString, { format: 'YYYY-MM-DD HH:mm:ss' });
+};
+
+/**
+ * Properties for the `EventListCardModals` component.
+ * eventListCardProps - The properties of the event list card.
+ * eventModalIsOpen - Boolean indicating if the event modal is open.
+ * hideViewModal - Function to hide the event modal.
+ * t - Function for translation of text.
+ * tCommon - Function for translation of common text.
+ */
+interface InterfaceEventListCardModalProps {
+  eventListCardProps: InterfaceEventListCardProps;
+  eventModalIsOpen: boolean;
+  hideViewModal: () => void;
+  t: (key: string) => string;
+  tCommon: (key: string) => string;
+}
+
+/**
+ * The `EventListCardModals` component displays the modals related to events, such as viewing,
+ * updating, and deleting events.
+ * @param props - The properties for the component.
+ * @returns A JSX element containing the event modals.
+ */
+function EventListCardModals({
+  eventListCardProps,
+  eventModalIsOpen,
+  hideViewModal,
+  t,
+  tCommon,
+}: InterfaceEventListCardModalProps): JSX.Element {
+  const { refetchEvents } = eventListCardProps;
+
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  const { orgId } = useParams();
+  const navigate = useNavigate();
+
+  const [alldaychecked, setAllDayChecked] = useState(eventListCardProps.allDay);
+  const [recurringchecked, setRecurringChecked] = useState(
+    eventListCardProps.recurring,
+  );
+  const [publicchecked, setPublicChecked] = useState(
+    eventListCardProps.isPublic,
+  );
+  const [registrablechecked, setRegistrableChecked] = useState(
+    eventListCardProps.isRegisterable,
+  );
+  const [eventDeleteModalIsOpen, setEventDeleteModalIsOpen] = useState(false);
+  const [recurringEventUpdateModalIsOpen, setRecurringEventUpdateModalIsOpen] =
+    useState(false);
+  const [eventStartDate, setEventStartDate] = useState(
+    new Date(eventListCardProps.startDate),
+  );
+  const [eventEndDate, setEventEndDate] = useState(
+    new Date(eventListCardProps.endDate),
+  );
+
+  const [recurrenceRuleState, setRecurrenceRuleState] =
+    useState<InterfaceRecurrenceRuleState>({
+      recurrenceStartDate: eventStartDate,
+      recurrenceEndDate: null,
+      frequency: Frequency.WEEKLY,
+      weekDays: [Days[eventStartDate.getDay()]],
+      interval: 1,
+      count: undefined,
+      weekDayOccurenceInMonth: undefined,
+    });
+
+  const {
+    recurrenceStartDate,
+    recurrenceEndDate,
+    frequency,
+    weekDays,
+    interval,
+    count,
+    weekDayOccurenceInMonth,
+  } = recurrenceRuleState;
+
+  const recurrenceRuleText = getRecurrenceRuleText(recurrenceRuleState);
+
+  const [formState, setFormState] = useState({
+    title: eventListCardProps.eventName,
+    eventdescrip: eventListCardProps.eventDescription,
+    location: eventListCardProps.eventLocation,
+    startTime: eventListCardProps.startTime?.split('.')[0] || '08:00:00',
+    endTime: eventListCardProps.endTime?.split('.')[0] || '08:00:00',
+  });
+
+  const [recurringEventDeleteType, setRecurringEventDeleteType] =
+    useState<RecurringEventMutationType>(thisInstance);
+
+  const [recurringEventUpdateType, setRecurringEventUpdateType] =
+    useState<RecurringEventMutationType>(thisInstance);
+
+  const [recurringEventUpdateOptions, setRecurringEventUpdateOptions] =
+    useState<RecurringEventMutationType[]>([
+      thisInstance,
+      thisAndFollowingInstances,
+      allInstances,
+    ]);
+
+  const [
+    shouldShowRecurringEventUpdateOptions,
+    setShouldShowRecurringEventUpdateOptions,
+  ] = useState(true);
+
+  useEffect(() => {
+    if (eventModalIsOpen) {
+      if (eventListCardProps.recurrenceRule) {
+        // get the recurrence rule
+        const { recurrenceRule } = eventListCardProps;
+
+        // set the recurrence rule state
+        setRecurrenceRuleState({
+          recurrenceStartDate: new Date(recurrenceRule.recurrenceStartDate),
+          recurrenceEndDate: recurrenceRule.recurrenceEndDate
+            ? new Date(recurrenceRule.recurrenceEndDate)
+            : null,
+          frequency: recurrenceRule.frequency,
+          weekDays: recurrenceRule.weekDays,
+          interval: recurrenceRule.interval,
+          count: recurrenceRule.count ?? undefined,
+          weekDayOccurenceInMonth:
+            recurrenceRule.weekDayOccurenceInMonth ?? undefined,
+        });
+      }
+    }
+  }, [eventModalIsOpen]);
+
+  // a state to specify whether the recurrence rule has changed
+  const [recurrenceRuleChanged, setRecurrenceRuleChanged] = useState(false);
+
+  // a state to specify whether the instance's startDate or endDate has changed
+  const [instanceDatesChanged, setInstanceDatesChanged] = useState(false);
+
+  // the `recurrenceRuleChanged` & `instanceDatesChanged` are required,
+  // because we will provide recurring event update options based on them, i.e.:
+  //   - if the `instanceDatesChanged` is true, we'll not provide the option to update "allInstances"
+  //   - if the `recurrenceRuleChanged` is true, we'll not provide the option to update "thisInstance"
+  //   - if both are true, we'll only provide the option to update "thisAndFollowingInstances"
+  // updating recurring events is not very straightforward,
+  // find more info on the approach in this doc https://docs.talawa.io/docs/functionalities/recurring-events
+
+  useEffect(() => {
+    setInstanceDatesChanged(
+      haveInstanceDatesChanged(
+        eventListCardProps.startDate,
+        eventListCardProps.endDate,
+        dayjs(eventStartDate).format('YYYY-MM-DD'), // convert to date string
+        dayjs(eventEndDate).format('YYYY-MM-DD'), // convert to date string
+      ),
+    );
+    setRecurrenceRuleChanged(
+      hasRecurrenceRuleChanged(
+        eventListCardProps.recurrenceRule,
+        recurrenceRuleState,
+      ),
+    );
+  }, [eventStartDate, eventEndDate, recurrenceRuleState]);
+
+  useEffect(() => {
+    if (instanceDatesChanged) {
+      setRecurringEventUpdateType(thisInstance);
+      setRecurringEventUpdateOptions([thisInstance, thisAndFollowingInstances]);
+      setShouldShowRecurringEventUpdateOptions(true);
+    }
+
+    if (recurrenceRuleChanged) {
+      setRecurringEventUpdateType(thisAndFollowingInstances);
+      setRecurringEventUpdateOptions([thisAndFollowingInstances, allInstances]);
+      setShouldShowRecurringEventUpdateOptions(true);
+    }
+
+    if (recurrenceRuleChanged && instanceDatesChanged) {
+      setRecurringEventUpdateType(thisAndFollowingInstances);
+      setShouldShowRecurringEventUpdateOptions(false);
+    }
+
+    if (!recurrenceRuleChanged && !instanceDatesChanged) {
+      setRecurringEventUpdateType(thisInstance);
+      setRecurringEventUpdateOptions([
+        thisInstance,
+        thisAndFollowingInstances,
+        allInstances,
+      ]);
+      setShouldShowRecurringEventUpdateOptions(true);
+    }
+  }, [recurrenceRuleChanged, instanceDatesChanged]);
+
+  const [updateEvent] = useMutation(UPDATE_EVENT_MUTATION);
+
+  const updateEventHandler = async (): Promise<void> => {
+    try {
+      const { data } = await updateEvent({
+        variables: {
+          id: eventListCardProps.id,
+          title: formState.title,
+          description: formState.eventdescrip,
+          isPublic: publicchecked,
+          recurring: recurringchecked,
+          recurringEventUpdateType: recurringchecked
+            ? recurringEventUpdateType
+            : undefined,
+          isRegisterable: registrablechecked,
+          allDay: alldaychecked,
+          startDate: dayjs(eventStartDate).format('YYYY-MM-DD'),
+          endDate: dayjs(eventEndDate).format('YYYY-MM-DD'),
+          location: formState.location,
+          startTime: !alldaychecked ? formState.startTime : undefined,
+          endTime: !alldaychecked ? formState.endTime : undefined,
+          recurrenceStartDate: recurringchecked
+            ? recurringEventUpdateType === thisAndFollowingInstances &&
+              (instanceDatesChanged || recurrenceRuleChanged)
+              ? dayjs(eventStartDate).format('YYYY-MM-DD')
+              : dayjs(recurrenceStartDate).format('YYYY-MM-DD')
+            : undefined,
+          recurrenceEndDate: recurringchecked
+            ? recurrenceEndDate
+              ? dayjs(recurrenceEndDate).format('YYYY-MM-DD')
+              : null
+            : undefined,
+          frequency: recurringchecked ? frequency : undefined,
+          weekDays:
+            recurringchecked &&
+            (frequency === Frequency.WEEKLY ||
+              (frequency === Frequency.MONTHLY && weekDayOccurenceInMonth))
+              ? weekDays
+              : undefined,
+          interval: recurringchecked ? interval : undefined,
+          count: recurringchecked ? count : undefined,
+          weekDayOccurenceInMonth: recurringchecked
+            ? weekDayOccurenceInMonth
+            : undefined,
+        },
+      });
+
+      if (data) {
+        toast.success(t('eventUpdated') as string);
+        setRecurringEventUpdateModalIsOpen(false);
+        hideViewModal();
+        if (refetchEvents) {
+          refetchEvents();
+        }
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  const handleEventUpdate = async (): Promise<void> => {
+    if (!eventListCardProps.recurring) {
+      await updateEventHandler();
+    } else {
+      if (shouldShowRecurringEventUpdateOptions) {
+        setRecurringEventUpdateModalIsOpen(true);
+      } else {
+        await updateEventHandler();
+      }
+    }
+  };
+
+  const [deleteEvent] = useMutation(DELETE_EVENT_MUTATION);
+
+  const deleteEventHandler = async (): Promise<void> => {
+    try {
+      const { data } = await deleteEvent({
+        variables: {
+          id: eventListCardProps.id,
+          recurringEventDeleteType: eventListCardProps.recurring
+            ? recurringEventDeleteType
+            : undefined,
+        },
+      });
+
+      if (data) {
+        toast.success(t('eventDeleted') as string);
+        setEventDeleteModalIsOpen(false);
+        hideViewModal();
+        if (refetchEvents) {
+          refetchEvents();
+        }
+      }
+    } catch (error: unknown) {
+      errorHandler(t, error);
+    }
+  };
+
+  const toggleDeleteModal = (): void => {
+    setEventDeleteModalIsOpen(!eventDeleteModalIsOpen);
+  };
+
+  const isInitiallyRegistered = eventListCardProps?.registrants?.some(
+    (registrant) => registrant._id === userId,
+  );
+  const [registerEventMutation] = useMutation(REGISTER_EVENT);
+  const [isRegistered, setIsRegistered] = useState(isInitiallyRegistered);
+
+  const registerEventHandler = async (): Promise<void> => {
+    if (!isRegistered) {
+      try {
+        const { data } = await registerEventMutation({
+          variables: {
+            eventId: eventListCardProps.id,
+          },
+        });
+
+        if (data) {
+          toast.success(
+            `Successfully registered for ${eventListCardProps.eventName}`,
+          );
+          setIsRegistered(true);
+          hideViewModal();
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    }
+  };
+
+  const toggleRecurringEventUpdateModal = (): void => {
+    setRecurringEventUpdateModalIsOpen(!recurringEventUpdateModalIsOpen);
+  };
+
+  const openEventDashboard = (): void => {
+    const userPath = eventListCardProps.userRole === Role.USER ? 'user/' : '';
+    console.log(`/${userPath}event/${orgId}/${eventListCardProps.id}`);
+    navigate(`/${userPath}event/${orgId}/${eventListCardProps.id}`);
+  };
+
+  const popover = (
+    <Popover
+      id={`popover-recurrenceRuleText`}
+      data-testid={`popover-recurrenceRuleText`}
+    >
+      <Popover.Body>{recurrenceRuleText}</Popover.Body>
+    </Popover>
+  );
+
+  return (
+    <>
+      {/* preview modal */}
+      <Modal show={eventModalIsOpen} centered dialogClassName="" scrollable>
+        <Modal.Header>
+          <p className={styles.titlemodal}>{t('eventDetails')}</p>
+          <Button
+            variant="danger"
+            onClick={hideViewModal}
+            data-testid="eventModalCloseBtn"
+          >
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <p className={styles.preview}>{t('eventTitle')}</p>
+            <Form.Control
+              type="title"
+              id="eventitle"
+              className="mb-3"
+              autoComplete="off"
+              data-testid="updateTitle"
+              required
+              value={
+                formState.title.length > 100
+                  ? formState.title.substring(0, 100) + '...'
+                  : formState.title
+              }
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  title: e.target.value,
+                });
+              }}
+              disabled={
+                !(eventListCardProps.creator?._id === userId) &&
+                eventListCardProps.userRole === Role.USER
+              }
+            />
+            <p className={styles.preview}>{tCommon('description')}</p>
+            <Form.Control
+              type="eventdescrip"
+              id="eventdescrip"
+              className="mb-3"
+              autoComplete="off"
+              data-testid="updateDescription"
+              required
+              value={
+                formState.eventdescrip.length > 256
+                  ? formState.eventdescrip.substring(0, 256) + '...'
+                  : formState.eventdescrip
+              }
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  eventdescrip: e.target.value,
+                });
+              }}
+              disabled={
+                !(eventListCardProps.creator?._id === userId) &&
+                eventListCardProps.userRole === Role.USER
+              }
+            />
+            <p className={styles.preview}>{tCommon('location')}</p>
+            <Form.Control
+              type="text"
+              id="eventLocation"
+              className="mb-3"
+              autoComplete="off"
+              data-testid="updateLocation"
+              required
+              value={formState.location}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  location: e.target.value,
+                });
+              }}
+              disabled={
+                !(eventListCardProps.creator?._id === userId) &&
+                eventListCardProps.userRole === Role.USER
+              }
+            />
+            <div className={styles.datediv}>
+              <div>
+                <DatePicker
+                  label={tCommon('startDate')}
+                  className={styles.datebox}
+                  value={dayjs(eventStartDate)}
+                  onChange={(date: Dayjs | null): void => {
+                    if (date) {
+                      setEventStartDate(date?.toDate());
+                      setEventEndDate(
+                        eventEndDate < date?.toDate()
+                          ? date?.toDate()
+                          : eventEndDate,
+                      );
+                      if (!eventListCardProps.recurring) {
+                        setRecurrenceRuleState({
+                          ...recurrenceRuleState,
+                          recurrenceStartDate: date?.toDate(),
+                          weekDays: [Days[date?.toDate().getDay()]],
+                          weekDayOccurenceInMonth: weekDayOccurenceInMonth
+                            ? /* istanbul ignore next */ getWeekDayOccurenceInMonth(
+                                date?.toDate(),
+                              )
+                            : undefined,
+                        });
+                      }
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                <DatePicker
+                  label={tCommon('endDate')}
+                  className={styles.datebox}
+                  value={dayjs(eventEndDate)}
+                  onChange={(date: Dayjs | null): void => {
+                    if (date) {
+                      setEventEndDate(date?.toDate());
+                    }
+                  }}
+                  minDate={dayjs(eventStartDate)}
+                />
+              </div>
+            </div>
+            {!alldaychecked && (
+              <div className={styles.datediv}>
+                <div>
+                  <TimePicker
+                    label={tCommon('startTime')}
+                    className={styles.datebox}
+                    timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+                    value={timeToDayJs(formState.startTime)}
+                    onChange={(time): void => {
+                      if (time) {
+                        setFormState({
+                          ...formState,
+                          startTime: time?.format('HH:mm:ss'),
+                          endTime:
+                            timeToDayJs(formState.endTime) < time
+                              ? time?.format('HH:mm:ss')
+                              : /* istanbul ignore next */
+                                formState.endTime,
+                        });
+                      }
+                    }}
+                    disabled={alldaychecked}
+                  />
+                </div>
+                <div>
+                  <TimePicker
+                    label={tCommon('endTime')}
+                    className={styles.datebox}
+                    timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+                    value={timeToDayJs(formState.endTime)}
+                    onChange={(time): void => {
+                      if (time) {
+                        setFormState({
+                          ...formState,
+                          endTime: time?.format('HH:mm:ss'),
+                        });
+                      }
+                    }}
+                    minTime={timeToDayJs(formState.startTime)}
+                    disabled={alldaychecked}
+                  />
+                </div>
+              </div>
+            )}
+            <div className={styles.checkboxContainer}>
+              <div className={styles.checkboxdiv}>
+                <div className={styles.dispflex}>
+                  <label htmlFor="allday">{t('allDay')}?</label>
+                  <Form.Switch
+                    id="allday"
+                    type="checkbox"
+                    data-testid="updateAllDay"
+                    checked={alldaychecked}
+                    onChange={(): void => {
+                      setAllDayChecked(!alldaychecked);
+                    }}
+                    disabled={
+                      !(eventListCardProps.creator?._id === userId) &&
+                      eventListCardProps.userRole === Role.USER
+                    }
+                  />
+                </div>
+                <div className={styles.dispflex}>
+                  <label htmlFor="recurring">{t('recurringEvent')}:</label>
+                  <Form.Switch
+                    id="recurring"
+                    type="checkbox"
+                    data-testid="updateRecurring"
+                    checked={recurringchecked}
+                    onChange={(): void => {
+                      setRecurringChecked(!recurringchecked);
+                    }}
+                    disabled={
+                      !(eventListCardProps.creator?._id === userId) &&
+                      eventListCardProps.userRole === Role.USER
+                    }
+                  />
+                </div>
+              </div>
+              <div className={styles.checkboxdiv}>
+                <div className={styles.dispflex}>
+                  <label htmlFor="ispublic">{t('isPublic')}?</label>
+                  <Form.Switch
+                    id="ispublic"
+                    type="checkbox"
+                    data-testid="updateIsPublic"
+                    checked={publicchecked}
+                    onChange={(): void => {
+                      setPublicChecked(!publicchecked);
+                    }}
+                    disabled={
+                      !(eventListCardProps.creator?._id === userId) &&
+                      eventListCardProps.userRole === Role.USER
+                    }
+                  />
+                </div>
+                <div className={styles.dispflex}>
+                  <label htmlFor="registrable">{t('isRegistrable')}?</label>
+                  <Form.Switch
+                    id="registrable"
+                    type="checkbox"
+                    data-testid="updateRegistrable"
+                    checked={registrablechecked}
+                    onChange={(): void => {
+                      setRegistrableChecked(!registrablechecked);
+                    }}
+                    disabled={
+                      !(eventListCardProps.creator?._id === userId) &&
+                      eventListCardProps.userRole === Role.USER
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Recurrence Options */}
+            {recurringchecked && (
+              <RecurrenceOptions
+                recurrenceRuleState={recurrenceRuleState}
+                recurrenceRuleText={recurrenceRuleText}
+                setRecurrenceRuleState={setRecurrenceRuleState}
+                popover={popover}
+                t={t}
+                tCommon={tCommon}
+              />
+            )}
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          {(eventListCardProps.userRole !== Role.USER ||
+            eventListCardProps.creator?._id === userId) && (
+            <Button
+              variant="success"
+              onClick={openEventDashboard}
+              data-testid="showEventDashboardBtn"
+              className={styles.icon}
+            >
+              {' '}
+              Show Event Dashboard{' '}
+            </Button>
+          )}
+          {(eventListCardProps.userRole !== Role.USER ||
+            eventListCardProps.creator?._id === userId) && (
+            <Button
+              variant="success"
+              className={styles.icon}
+              data-testid="updateEventBtn"
+              onClick={handleEventUpdate}
+            >
+              {t('editEvent')}
+            </Button>
+          )}
+          {(eventListCardProps.userRole !== Role.USER ||
+            eventListCardProps.creator?._id === userId) && (
+            <Button
+              variant="danger"
+              data-testid="deleteEventModalBtn"
+              className={styles.icon}
+              onClick={toggleDeleteModal}
+            >
+              {t('deleteEvent')}
+            </Button>
+          )}
+          {eventListCardProps.userRole === Role.USER &&
+            !(eventListCardProps.creator?._id === userId) &&
+            (isRegistered ? (
+              <Button
+                className={styles.customButton}
+                variant="success"
+                disabled
+              >
+                {t('alreadyRegistered')}
+              </Button>
+            ) : (
+              <Button
+                className={styles.customButton}
+                variant="success"
+                onClick={registerEventHandler}
+                data-testid="registerEventBtn"
+              >
+                {tCommon('register')}
+              </Button>
+            ))}
+        </Modal.Footer>
+      </Modal>
+
+      {/* recurring event update options modal */}
+      <Modal
+        size="sm"
+        id={`recurringEventUpdateOptions${eventListCardProps.id}`}
+        show={recurringEventUpdateModalIsOpen}
+        onHide={toggleRecurringEventUpdateModal}
+        backdrop="static"
+        keyboard={false}
+        centered
+      >
+        <Modal.Header closeButton className="bg-primary">
+          <Modal.Title
+            className="text-white"
+            id={`recurringEventUpdateOptionsLabel${eventListCardProps.id}`}
+          >
+            {t('editEvent')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form className="mt-3">
+            {recurringEventUpdateOptions.map((option, index) => (
+              <div key={index} className="my-0 d-flex align-items-center">
+                <Form.Check
+                  type="radio"
+                  id={`radio-${index}`}
+                  label={t(option)}
+                  name="recurringEventUpdateType"
+                  value={option}
+                  onChange={(e) =>
+                    setRecurringEventUpdateType(
+                      e.target.value as RecurringEventMutationType,
+                    )
+                  }
+                  defaultChecked={option === recurringEventUpdateType}
+                  data-testid={`update-${option}`}
+                />
+              </div>
+            ))}
+          </Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            type="button"
+            className="btn btn-danger"
+            data-dismiss="modal"
+            onClick={toggleRecurringEventUpdateModal}
+            data-testid="eventUpdateOptionsModalCloseBtn"
+          >
+            {tCommon('no')}
+          </Button>
+          <Button
+            type="button"
+            className="btn btn-success"
+            onClick={updateEventHandler}
+            data-testid="recurringEventUpdateOptionSubmitBtn"
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+
+      {/* delete modal */}
+      <Modal
+        size="sm"
+        id={`deleteEventModal${eventListCardProps.id}`}
+        show={eventDeleteModalIsOpen}
+        onHide={toggleDeleteModal}
+        backdrop="static"
+        keyboard={false}
+        centered
+      >
+        <Modal.Header closeButton className="bg-primary">
+          <Modal.Title
+            className="text-white"
+            id={`deleteEventModalLabel${eventListCardProps.id}`}
+          >
+            {t('deleteEvent')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {!eventListCardProps.recurring && t('deleteEventMsg')}
+          {eventListCardProps.recurring && (
+            <>
+              <Form className="mt-3">
+                {recurringEventMutationOptions.map((option, index) => (
+                  <div key={index} className="my-0 d-flex align-items-center">
+                    <Form.Check
+                      type="radio"
+                      id={`radio-${index}`}
+                      label={t(option)}
+                      name="recurringEventDeleteType"
+                      value={option}
+                      onChange={(e) =>
+                        setRecurringEventDeleteType(
+                          e.target.value as RecurringEventMutationType,
+                        )
+                      }
+                      defaultChecked={option === recurringEventDeleteType}
+                      data-testid={`delete-${option}`}
+                    />
+                  </div>
+                ))}
+              </Form>
+            </>
+          )}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            type="button"
+            className="btn btn-danger"
+            data-dismiss="modal"
+            onClick={toggleDeleteModal}
+            data-testid="eventDeleteModalCloseBtn"
+          >
+            {tCommon('no')}
+          </Button>
+          <Button
+            type="button"
+            className="btn btn-success"
+            onClick={deleteEventHandler}
+            data-testid="deleteEventBtn"
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default EventListCardModals;
diff --git a/src/components/EventListCard/EventListCardProps.ts b/src/components/EventListCard/EventListCardProps.ts
new file mode 100644
index 0000000000..9aef474254
--- /dev/null
+++ b/src/components/EventListCard/EventListCardProps.ts
@@ -0,0 +1,194 @@
+import { Frequency, WeekDays } from 'utils/recurrenceUtils';
+import type { InterfaceEventListCardProps } from './EventListCard';
+
+export const props: InterfaceEventListCardProps[] = [
+  {
+    key: '',
+    id: '',
+    eventLocation: '',
+    eventName: '',
+    eventDescription: '',
+    startDate: '',
+    endDate: '',
+    startTime: '',
+    endTime: '',
+    allDay: false,
+    recurring: false,
+    recurrenceRule: null,
+    isRecurringEventException: false,
+    isPublic: false,
+    isRegisterable: false,
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+  {
+    key: '123',
+    id: '1',
+    eventLocation: 'India',
+    eventName: 'Shelter for Dogs',
+    eventDescription: 'This is shelter for dogs event',
+    startDate: '2022-03-19',
+    endDate: '2022-03-26',
+    startTime: '02:00',
+    endTime: '06:00',
+    allDay: false,
+    recurring: false,
+    recurrenceRule: null,
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: false,
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+  {
+    userRole: 'USER',
+    key: '123',
+    id: '1',
+    eventLocation: 'India',
+    eventName: 'Shelter for Dogs',
+    eventDescription: 'This is shelter for dogs event',
+    startDate: '2022-03-19',
+    endDate: '2022-03-26',
+    startTime: '02:00',
+    endTime: '06:00',
+    allDay: true,
+    recurring: false,
+    recurrenceRule: null,
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: false,
+    creator: {
+      firstName: 'Joe',
+      lastName: 'David',
+      _id: '123',
+    },
+    registrants: [
+      {
+        _id: '234',
+      },
+    ],
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+  {
+    userRole: 'USER',
+    key: '123',
+    id: '1',
+    eventLocation: 'India',
+    eventName: 'Shelter for Dogs',
+    eventDescription: 'This is shelter for dogs event',
+    startDate: '2022-03-19',
+    endDate: '2022-03-26',
+    startTime: '02:00',
+    endTime: '06:00',
+    allDay: true,
+    recurring: false,
+    recurrenceRule: null,
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: false,
+    creator: {
+      firstName: 'Joe',
+      lastName: 'David',
+      _id: '123',
+    },
+    registrants: [
+      {
+        _id: '456',
+      },
+    ],
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+  {
+    userRole: 'ADMIN',
+    key: '123',
+    id: '1',
+    eventLocation: 'India',
+    eventName: 'Shelter for Cats',
+    eventDescription: 'This is shelter for cat event',
+    startDate: '2022-03-19',
+    endDate: '2022-03-19',
+    startTime: '2:00',
+    endTime: '6:00',
+    allDay: false,
+    recurring: true,
+    recurrenceRule: {
+      recurrenceStartDate: '2022-03-19',
+      recurrenceEndDate: '2022-03-26',
+      frequency: Frequency.WEEKLY,
+      weekDays: [WeekDays.SATURDAY],
+      interval: 1,
+      count: null,
+      weekDayOccurenceInMonth: null,
+    },
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: false,
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+  {
+    userRole: 'ADMIN',
+    key: '123',
+    id: '1',
+    eventLocation: 'India',
+    eventName: 'Shelter for Cats',
+    eventDescription: 'This is shelter for cat event',
+    startDate: '2022-03-17',
+    endDate: '2022-03-17',
+    startTime: null,
+    endTime: null,
+    allDay: true,
+    recurring: true,
+    recurrenceRule: {
+      recurrenceStartDate: '2022-03-17',
+      recurrenceEndDate: null,
+      frequency: Frequency.MONTHLY,
+      weekDays: [WeekDays.THURSDAY],
+      interval: 1,
+      count: null,
+      weekDayOccurenceInMonth: 3,
+    },
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: false,
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+  {
+    userRole: 'ADMIN',
+    key: '123',
+    id: '1',
+    eventLocation: 'India',
+    eventName: 'Shelter for Cats',
+    eventDescription: 'This is shelter for cat event',
+    startDate: '2022-03-17',
+    endDate: '2022-03-17',
+    startTime: null,
+    endTime: null,
+    allDay: true,
+    recurring: true,
+    recurrenceRule: {
+      recurrenceStartDate: '2022-03-17',
+      recurrenceEndDate: '2023-03-17',
+      frequency: Frequency.MONTHLY,
+      weekDays: [WeekDays.THURSDAY],
+      interval: 1,
+      count: null,
+      weekDayOccurenceInMonth: 3,
+    },
+    isRecurringEventException: false,
+    isPublic: true,
+    isRegisterable: false,
+    refetchEvents: (): void => {
+      /* refetch function */
+    },
+  },
+];
diff --git a/src/components/EventManagement/Dashboard/EventDashboard.mocks.ts b/src/components/EventManagement/Dashboard/EventDashboard.mocks.ts
new file mode 100644
index 0000000000..f4f1a3025b
--- /dev/null
+++ b/src/components/EventManagement/Dashboard/EventDashboard.mocks.ts
@@ -0,0 +1,63 @@
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+
+export const MOCKS_WITH_TIME = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          _id: 'event123',
+          title: 'Test Event',
+          description: 'Test Description',
+          startDate: '2024-01-01',
+          endDate: '2024-01-02',
+          startTime: '09:00:00',
+          endTime: '17:00:00',
+          allDay: false,
+          location: 'India',
+          recurring: false,
+          attendees: [{ _id: 'user1' }, { _id: 'user2' }],
+          creator: {
+            _id: 'creator1',
+            firstName: 'John',
+            lastName: 'Doe',
+          },
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_WITHOUT_TIME = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          _id: 'event123',
+          title: 'Test Event',
+          description: 'Test Description',
+          startDate: '2024-01-01',
+          endDate: '2024-01-02',
+          startTime: null,
+          endTime: null,
+          allDay: true,
+          location: 'India',
+          recurring: false,
+          attendees: [{ _id: 'user1' }, { _id: 'user2' }],
+          creator: {
+            _id: 'creator1',
+            firstName: 'John',
+            lastName: 'Doe',
+          },
+        },
+      },
+    },
+  },
+];
diff --git a/src/components/EventManagement/Dashboard/EventDashboard.module.css b/src/components/EventManagement/Dashboard/EventDashboard.module.css
new file mode 100644
index 0000000000..37336002bb
--- /dev/null
+++ b/src/components/EventManagement/Dashboard/EventDashboard.module.css
@@ -0,0 +1,101 @@
+.eventContainer {
+  display: flex;
+  align-items: start;
+}
+
+.eventDetailsBox {
+  position: relative;
+  box-sizing: border-box;
+  background: #ffffff;
+  width: 66%;
+  padding: 0.3rem;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  margin-bottom: 0;
+  margin-top: 20px;
+}
+.ctacards {
+  padding: 20px;
+  width: 100%;
+  display: flex;
+  background-color: #ffffff;
+  margin: 0 4px;
+  justify-content: space-between;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  border-radius: 20px;
+}
+.ctacards span {
+  color: rgb(181, 181, 181);
+  font-size: small;
+}
+/* .eventDetailsBox::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 6px;
+  background-color: #31bb6b;
+  border-radius: 20px;
+} */
+
+.time {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  padding-bottom: 0px;
+  width: 33%;
+
+  box-sizing: border-box;
+  background: #ffffff;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  margin-bottom: 0;
+  margin-top: 20px;
+  margin-left: 10px;
+}
+
+.startTime,
+.endTime {
+  display: flex;
+  font-size: 20px;
+}
+
+.to {
+  padding-right: 10px;
+}
+
+.startDate,
+.endDate {
+  color: #808080;
+  font-size: 14px;
+}
+
+.titlename {
+  font-weight: 600;
+  font-size: 25px;
+  padding: 15px;
+  padding-bottom: 0px;
+  width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: #737373;
+  font-weight: 300;
+  font-size: 14px;
+  word-wrap: break-word;
+  padding: 15px;
+  padding-bottom: 0px;
+}
+
+.toporgloc {
+  font-size: 16px;
+  padding: 0.5rem;
+}
+
+.toporgloc span {
+  color: #737373;
+}
diff --git a/src/components/EventManagement/Dashboard/EventDashboard.test.tsx b/src/components/EventManagement/Dashboard/EventDashboard.test.tsx
new file mode 100644
index 0000000000..dc605a1604
--- /dev/null
+++ b/src/components/EventManagement/Dashboard/EventDashboard.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
+import EventDashboard from './EventDashboard';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { ApolloLink, DefaultOptions } from '@apollo/client';
+
+import { MOCKS_WITHOUT_TIME, MOCKS_WITH_TIME } from './EventDashboard.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const mockWithTime = new StaticMockLink(MOCKS_WITH_TIME, true);
+const mockWithoutTime = new StaticMockLink(MOCKS_WITHOUT_TIME, true);
+
+// We want to disable all forms of caching so that we do not need to define a custom merge function in testing for the network requests
+const defaultOptions: DefaultOptions = {
+  watchQuery: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'ignore',
+  },
+  query: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'all',
+  },
+};
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const mockID = 'event123';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ eventId: mockID }),
+}));
+
+const renderEventDashboard = (mockLink: ApolloLink): RenderResult => {
+  return render(
+    <BrowserRouter>
+      <MockedProvider
+        addTypename={false}
+        link={mockLink}
+        defaultOptions={defaultOptions}
+      >
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <I18nextProvider i18n={i18nForTest}>
+            <ToastContainer />
+            <EventDashboard eventId={mockID} />
+          </I18nextProvider>
+        </LocalizationProvider>
+      </MockedProvider>
+    </BrowserRouter>,
+  );
+};
+
+describe('Testing Event Dashboard Screen', () => {
+  test('The page should display event details correctly and also show the time if provided', async () => {
+    const { getByTestId } = renderEventDashboard(mockWithTime);
+
+    await wait();
+
+    expect(getByTestId('event-title')).toBeInTheDocument();
+    expect(getByTestId('event-description')).toBeInTheDocument();
+    expect(getByTestId('event-location')).toHaveTextContent('India');
+
+    expect(getByTestId('registrations-card')).toBeInTheDocument();
+    expect(getByTestId('attendees-card')).toBeInTheDocument();
+    expect(getByTestId('feedback-card')).toBeInTheDocument();
+    expect(getByTestId('feedback-rating')).toHaveTextContent('4/5');
+
+    const editButton = getByTestId('edit-event-button');
+    fireEvent.click(editButton);
+    expect(getByTestId('event-title')).toBeInTheDocument();
+    const closeButton = getByTestId('eventModalCloseBtn');
+    fireEvent.click(closeButton);
+  });
+
+  test('The page should display event details correctly and should not show the time if it is null', async () => {
+    const { getByTestId } = renderEventDashboard(mockWithoutTime);
+    await wait();
+
+    expect(getByTestId('event-title')).toBeInTheDocument();
+    expect(getByTestId('event-time')).toBeInTheDocument();
+  });
+
+  test('Should show loader while data is being fetched', async () => {
+    const { getByTestId, queryByTestId } = renderEventDashboard(mockWithTime);
+    expect(getByTestId('spinner')).toBeInTheDocument();
+    // Wait for loading to complete
+    await wait();
+
+    // Verify spinner is gone
+    expect(queryByTestId('spinner')).not.toBeInTheDocument();
+
+    // Verify content is visible
+    expect(getByTestId('event-title')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/EventManagement/Dashboard/EventDashboard.tsx b/src/components/EventManagement/Dashboard/EventDashboard.tsx
new file mode 100644
index 0000000000..d3552702c6
--- /dev/null
+++ b/src/components/EventManagement/Dashboard/EventDashboard.tsx
@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import styles from './EventDashboard.module.css';
+import { useTranslation } from 'react-i18next';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import { useQuery } from '@apollo/client';
+import Loader from 'components/Loader/Loader';
+import { Edit } from '@mui/icons-material';
+import EventListCardModals from 'components/EventListCard/EventListCardModals';
+import type { InterfaceEventListCardProps } from 'components/EventListCard/EventListCard';
+import { formatDate } from 'utils/dateFormatter';
+
+/**
+ * Component that displays event details.
+ *
+ * @param  props - The props for the EventDashboard component.
+ * @param eventId - The ID of the event to fetch and display.
+ * @returns The rendered EventDashboard component.
+ */
+const EventDashboard = (props: { eventId: string }): JSX.Element => {
+  const { eventId } = props;
+  const { t } = useTranslation(['translation', 'common']);
+  // const tEventManagement = (key: string): string => t(`eventManagement.${key}`);
+  const tEventList = (key: string): string => t(`eventListCard.${key}`);
+  const [eventModalIsOpen, setEventModalIsOpen] = useState(false);
+
+  const { data: eventData, loading: eventInfoLoading } = useQuery(
+    EVENT_DETAILS,
+    {
+      variables: { id: eventId },
+    },
+  );
+
+  /**
+   * Formats a time string (HH:MM) to a more readable format.
+   *
+   * @param  timeString - The time string to format.
+   * @returns - The formatted time string.
+   */
+  function formatTime(timeString: string): string {
+    const [hours, minutes] = timeString.split(':').slice(0, 2);
+    return `${hours}:${minutes}`;
+  }
+
+  const showViewModal = (): void => {
+    setEventModalIsOpen(true);
+  };
+
+  const hideViewModal = (): void => {
+    setEventModalIsOpen(false);
+  };
+
+  if (eventInfoLoading) {
+    return <Loader data-testid="loader" />;
+  }
+
+  const eventListCardProps: InterfaceEventListCardProps = {
+    userRole: '',
+    key: eventData.event._id,
+    id: eventData.event._id,
+    eventLocation: eventData.event.location,
+    eventName: eventData.event.title,
+    eventDescription: eventData.event.description,
+    startDate: eventData.event.startDate,
+    endDate: eventData.event.endDate,
+    startTime: eventData.event.startTime,
+    endTime: eventData.event.endTime,
+    allDay: eventData.event.allDay,
+    recurring: eventData.event.recurring,
+    recurrenceRule: eventData.event.recurrenceRule,
+    isRecurringEventException: eventData.event.isRecurringEventException,
+    isPublic: eventData.event.isPublic,
+    isRegisterable: eventData.event.isRegisterable,
+    registrants: eventData.event.attendees,
+    creator: eventData.event.creator,
+  };
+
+  // Render event details
+  return (
+    <div data-testid="event-dashboard">
+      <Row className="">
+        <EventListCardModals
+          eventListCardProps={eventListCardProps}
+          eventModalIsOpen={eventModalIsOpen}
+          hideViewModal={hideViewModal}
+          t={tEventList}
+          tCommon={t}
+        />
+        <div className="d-flex px-6" data-testid="event-stats">
+          <div
+            className={`${styles.ctacards}`}
+            data-testid="registrations-card"
+          >
+            <img src="/images/svg/attendees.svg" alt="userImage" className="" />
+            <div>
+              <h1>
+                <b data-testid="registrations-count">
+                  {eventData.event.attendees.length}
+                </b>
+              </h1>
+              <span>No of Registrations</span>
+            </div>
+          </div>
+          <div className={`${styles.ctacards}`} data-testid="attendees-card">
+            <img src="/images/svg/attendees.svg" alt="userImage" className="" />
+            <div>
+              <h1>
+                <b data-testid="attendees-count">
+                  {eventData.event.attendees.length}
+                </b>
+              </h1>
+              <span>No of Attendees</span>
+            </div>
+          </div>
+          <div className={`${styles.ctacards}`} data-testid="feedback-card">
+            <img src="/images/svg/feedback.svg" alt="userImage" className="" />
+            <div>
+              <h1>
+                <b data-testid="feedback-rating">4/5</b>
+              </h1>
+              <span>Average Feedback</span>
+            </div>
+          </div>
+        </div>
+        <Col>
+          <div className={styles.eventContainer} data-testid="event-details">
+            <div className={styles.eventDetailsBox}>
+              <button
+                className="btn btn-light rounded-circle position-absolute end-0 me-3 p-1 mt-2"
+                onClick={showViewModal}
+                data-testid="edit-event-button"
+              >
+                <Edit fontSize="medium" />
+              </button>
+              <h3 className={styles.titlename} data-testid="event-title">
+                {eventData.event.title}
+              </h3>
+              <p className={styles.description} data-testid="event-description">
+                {eventData.event.description}
+              </p>
+              <p className={styles.toporgloc} data-testid="event-location">
+                <b>Location:</b> <span>{eventData.event.location}</span>
+              </p>
+              <p className={styles.toporgloc} data-testid="event-registrants">
+                <b>Registrants:</b>{' '}
+                <span>{eventData?.event?.attendees?.length}</span>
+              </p>
+              <div
+                className={`${styles.toporgloc} d-flex`}
+                data-testid="recurring-status"
+              >
+                <b>Recurring Event:</b>{' '}
+                <span className="text-success ml-2">
+                  {eventData.event.recurring ? 'Active' : 'Inactive'}
+                </span>
+              </div>
+            </div>
+            <div className={styles.time} data-testid="event-time">
+              <p>
+                <b className={styles.startTime} data-testid="start-time">
+                  {eventData.event.startTime !== null
+                    ? `${formatTime(eventData.event.startTime)}`
+                    : ``}
+                </b>{' '}
+                <span className={styles.startDate} data-testid="start-date">
+                  {formatDate(eventData.event.startDate)}{' '}
+                </span>
+              </p>
+              <p className={styles.to}>{t('to')}</p>
+              <p>
+                <b className={styles.endTime} data-testid="end-time">
+                  {eventData.event.endTime !== null
+                    ? `${formatTime(eventData.event.endTime)}`
+                    : ``}
+                </b>{' '}
+                <span className={styles.endDate} data-testid="end-date">
+                  {formatDate(eventData.event.endDate)}{' '}
+                </span>
+              </p>
+            </div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default EventDashboard;
diff --git a/src/components/EventManagement/EventAgendaItems/EventAgendaItems.module.css b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.module.css
new file mode 100644
index 0000000000..9d1c32b766
--- /dev/null
+++ b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.module.css
@@ -0,0 +1,22 @@
+.eventAgendaItemContainer h2 {
+  margin: 0.6rem 0;
+}
+
+.btnsContainer {
+  display: flex;
+  gap: 10px;
+}
+
+@media (max-width: 768px) {
+  .btnsContainer {
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .createAgendaItemButton {
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
+  }
+}
diff --git a/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx
new file mode 100644
index 0000000000..3bce7ad11e
--- /dev/null
+++ b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.test.tsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { MockedProvider } from '@apollo/client/testing';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import i18n from 'utils/i18nForTest';
+// import { toast } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import EventAgendaItems from './EventAgendaItems';
+
+import {
+  MOCKS,
+  MOCKS_ERROR_QUERY,
+  // MOCKS_ERROR_MUTATION,
+} from './EventAgendaItemsMocks';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ eventId: '123' }),
+}));
+
+//temporarily fixes react-beautiful-dnd droppable method's depreciation error
+//needs to be fixed in React 19
+jest.spyOn(console, 'error').mockImplementation((message) => {
+  if (message.includes('Support for defaultProps will be removed')) {
+    return;
+  }
+  console.error(message);
+});
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_QUERY, true);
+// const link3 = new StaticMockLink(MOCKS_ERROR_MUTATION, true);
+
+const translations = JSON.parse(
+  JSON.stringify(i18n.getDataByLanguage('en')?.translation.agendaItems),
+);
+
+describe('Testing Agenda Items Components', () => {
+  const formData = {
+    title: 'AgendaItem 1',
+    description: 'AgendaItem 1 Description',
+    duration: '30',
+    relatedEventId: '123',
+    organizationId: '111',
+    sequence: 1,
+    categories: ['Category 1'],
+    attachments: [],
+    urls: [],
+  };
+  test('Component loads correctly', async () => {
+    window.location.assign('/event/111/123');
+    const { getByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              {<EventAgendaItems eventId="123" />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.createAgendaItem)).toBeInTheDocument();
+    });
+  });
+
+  test('render error component on unsuccessful agenda item query', async () => {
+    window.location.assign('/event/111/123');
+    const { queryByText } = render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              {<EventAgendaItems eventId="123" />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        queryByText(translations.createAgendaItem),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the create agenda item modal', async () => {
+    window.location.assign('/event/111/123');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<EventAgendaItems eventId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createAgendaItemBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaItemBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('createAgendaItemModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaItemModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('createAgendaItemModalCloseBtn'),
+    );
+  });
+  test('creates new agenda item', async () => {
+    window.location.assign('/event/111/123');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<EventAgendaItems eventId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createAgendaItemBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaItemBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('createAgendaItemModalCloseBtn'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.enterTitle),
+      formData.title,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.enterDescription),
+      formData.description,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(translations.enterDuration),
+      formData.duration,
+    );
+    const categorySelect = screen.getByTestId('categorySelect');
+    userEvent.click(categorySelect);
+    await waitFor(() => {
+      const categoryOption = screen.getByText('Category 1');
+      userEvent.click(categoryOption);
+    });
+
+    userEvent.click(screen.getByTestId('createAgendaItemFormBtn'));
+
+    await waitFor(() => {
+      // expect(toast.success).toBeCalledWith(translations.agendaItemCreated);
+    });
+  });
+});
diff --git a/src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx
new file mode 100644
index 0000000000..b49ade4626
--- /dev/null
+++ b/src/components/EventManagement/EventAgendaItems/EventAgendaItems.tsx
@@ -0,0 +1,230 @@
+import React, { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'react-bootstrap';
+
+import { WarningAmberRounded } from '@mui/icons-material';
+import { toast } from 'react-toastify';
+
+import { useMutation, useQuery } from '@apollo/client';
+import {
+  AGENDA_ITEM_CATEGORY_LIST,
+  AgendaItemByEvent,
+} from 'GraphQl/Queries/Queries';
+import { CREATE_AGENDA_ITEM_MUTATION } from 'GraphQl/Mutations/mutations';
+
+import type {
+  InterfaceAgendaItemCategoryList,
+  InterfaceAgendaItemList,
+} from 'utils/interfaces';
+import AgendaItemsContainer from 'components/AgendaItems/AgendaItemsContainer';
+import AgendaItemsCreateModal from 'components/AgendaItems/AgendaItemsCreateModal';
+
+import styles from './EventAgendaItems.module.css';
+import Loader from 'components/Loader/Loader';
+
+/**
+ * Component to manage and display agenda items for a specific event.
+ *
+ * @param  props - The component props.
+ * @param eventId - The ID of the event to manage agenda items for.
+ * @returns  The rendered component.
+ */
+function EventAgendaItems(props: { eventId: string }): JSX.Element {
+  const { eventId } = props;
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'agendaItems',
+  });
+
+  // Extract organization ID from URL
+  const url: string = window.location.href;
+  const startIdx: number = url.indexOf('/event/') + '/event/'.length;
+  const orgId: string = url.slice(startIdx, url.indexOf('/', startIdx));
+
+  // State to manage the create agenda item modal visibility
+  const [agendaItemCreateModalIsOpen, setAgendaItemCreateModalIsOpen] =
+    useState<boolean>(false);
+
+  // State to manage form values
+  const [formState, setFormState] = useState({
+    agendaItemCategoryIds: [''],
+    title: '',
+    description: '',
+    duration: '',
+    attachments: [''],
+    urls: [''],
+  });
+
+  // Query for agenda item categories
+  const {
+    data: agendaCategoryData,
+    loading: agendaCategoryLoading,
+    error: agendaCategoryError,
+  }: {
+    data: InterfaceAgendaItemCategoryList | undefined;
+    loading: boolean;
+    error?: Error | undefined;
+  } = useQuery(AGENDA_ITEM_CATEGORY_LIST, {
+    variables: { organizationId: orgId },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  // Query for agenda items by event
+  const {
+    data: agendaItemData,
+    loading: agendaItemLoading,
+    error: agendaItemError,
+    refetch: refetchAgendaItem,
+  }: {
+    data: InterfaceAgendaItemList | undefined;
+    loading: boolean;
+    error?: unknown | undefined;
+    refetch: () => void;
+  } = useQuery(AgendaItemByEvent, {
+    variables: { relatedEventId: eventId }, //eventId
+    notifyOnNetworkStatusChange: true,
+  });
+
+  // Mutation for creating an agenda item
+  const [createAgendaItem] = useMutation(CREATE_AGENDA_ITEM_MUTATION);
+
+  /**
+   * Handler for creating a new agenda item.
+   *
+   * @param  e - The form submit event.
+   */
+  const createAgendaItemHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await createAgendaItem({
+        variables: {
+          input: {
+            title: formState.title,
+            description: formState.description,
+            relatedEventId: eventId,
+            organizationId: orgId,
+            sequence: (agendaItemData?.agendaItemByEvent.length || 0) + 1 || 1, // Assign sequence based on current length
+            duration: formState.duration,
+            categories: formState.agendaItemCategoryIds,
+            attachments: formState.attachments,
+            urls: formState.urls,
+          },
+        },
+      });
+
+      // Reset form state and hide modal
+      setFormState({
+        title: '',
+        description: '',
+        duration: '',
+        agendaItemCategoryIds: [''],
+        attachments: [''],
+        urls: [''],
+      });
+      hideCreateModal();
+      refetchAgendaItem();
+      toast.success(t('agendaItemCreated') as string);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  /**
+   * Toggles the visibility of the create agenda item modal.
+   */
+  const showCreateModal = (): void => {
+    setAgendaItemCreateModalIsOpen(!agendaItemCreateModalIsOpen);
+  };
+
+  /**
+   * Hides the create agenda item modal.
+   */
+  const hideCreateModal = (): void => {
+    setAgendaItemCreateModalIsOpen(!agendaItemCreateModalIsOpen);
+  };
+
+  // Show loader while data is loading
+  if (agendaItemLoading || agendaCategoryLoading) return <Loader size="xl" />;
+
+  // Show error message if there is an error loading data
+  if (agendaItemError || agendaCategoryError) {
+    const errorMessage =
+      agendaCategoryError?.message ||
+      (agendaItemError as Error)?.message ||
+      'Unknown error';
+
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occurred while loading{' '}
+            {agendaCategoryError ? 'Agenda Categories' : 'Agenda Items'} Data
+            <br />
+            {errorMessage}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.eventAgendaItemContainer}>
+      <div className={`bg-white rounded-4 my-3`}>
+        <div className={`pt-4 mx-4`}>
+          <div className={styles.btnsContainer}>
+            <div className=" d-none d-lg-inline flex-grow-1 d-flex align-items-center border bg-light-subtle rounded-3">
+              {/* <input
+                type="search"
+                className="form-control border-0 bg-light-subtle"
+                placeholder={t('search')}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                data-testid="search"
+              /> */}
+            </div>
+
+            <Button
+              variant="success"
+              onClick={showCreateModal}
+              data-testid="createAgendaItemBtn"
+              className={styles.createAgendaItemButton}
+            >
+              {t('createAgendaItem')}
+            </Button>
+          </div>
+        </div>
+
+        <hr />
+
+        <AgendaItemsContainer
+          agendaItemConnection={`Event`}
+          agendaItemData={agendaItemData?.agendaItemByEvent}
+          agendaItemRefetch={refetchAgendaItem}
+          agendaItemCategories={
+            agendaCategoryData?.agendaItemCategoriesByOrganization
+          }
+        />
+      </div>
+
+      <AgendaItemsCreateModal
+        agendaItemCreateModalIsOpen={agendaItemCreateModalIsOpen}
+        hideCreateModal={hideCreateModal}
+        formState={formState}
+        setFormState={setFormState}
+        createAgendaItemHandler={createAgendaItemHandler}
+        t={t}
+        agendaItemCategories={
+          agendaCategoryData?.agendaItemCategoriesByOrganization
+        }
+      />
+    </div>
+  );
+}
+
+export default EventAgendaItems;
diff --git a/src/components/EventManagement/EventAgendaItems/EventAgendaItemsMocks.ts b/src/components/EventManagement/EventAgendaItems/EventAgendaItemsMocks.ts
new file mode 100644
index 0000000000..619a1e70f8
--- /dev/null
+++ b/src/components/EventManagement/EventAgendaItems/EventAgendaItemsMocks.ts
@@ -0,0 +1,133 @@
+import { CREATE_AGENDA_ITEM_MUTATION } from 'GraphQl/Mutations/AgendaItemMutations';
+
+import { AgendaItemByEvent } from 'GraphQl/Queries/AgendaItemQueries';
+import { AGENDA_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/AgendaCategoryQueries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: '111' },
+    },
+    result: {
+      data: {
+        agendaItemCategoriesByOrganization: [
+          {
+            _id: 'agendaItemCategory1',
+            name: 'Category 1',
+            description: 'Test Description',
+            createdBy: {
+              _id: 'user0',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: AgendaItemByEvent,
+      variables: { relatedEventId: '123' },
+    },
+    result: {
+      data: {
+        agendaItemByEvent: [
+          {
+            _id: 'agendaItem1',
+            title: 'AgendaItem 1',
+            description: 'AgendaItem 1 Description',
+            duration: '30',
+            attachments: [],
+            createdBy: {
+              _id: 'user0',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+            urls: [],
+            users: [],
+            sequence: 1,
+            categories: [
+              {
+                _id: 'agendaItemCategory1',
+                name: 'Category 1',
+              },
+            ],
+            organization: {
+              _id: '111',
+              name: 'Unity Foundation',
+            },
+            relatedEvent: {
+              _id: '123',
+              title: 'Aerobics for Everyone',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_AGENDA_ITEM_MUTATION,
+      variables: {
+        input: {
+          title: 'AgendaItem 1',
+          description: 'AgendaItem 1 Description',
+          duration: '30',
+          relatedEventId: '123',
+          organizationId: '111',
+          sequence: 1,
+          categories: ['Category 1'],
+          attachments: [],
+          urls: [],
+        },
+      },
+    },
+    result: {
+      data: {
+        createAgendaItem: {
+          _id: 'agendaItem1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR_MUTATION = [
+  {
+    request: {
+      query: CREATE_AGENDA_ITEM_MUTATION,
+      variables: {
+        input: {
+          title: 'AgendaItem 1',
+          description: 'AgendaItem 1 Description',
+          duration: '30',
+          relatedEventId: '123',
+          organizationId: '111',
+          sequence: 1,
+          categories: ['agendaItemCategory1'],
+          attachments: [],
+          urls: [],
+        },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: AgendaItemByEvent,
+      variables: { relatedEventId: '123' },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: '111' },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
+
+export const MOCKS_ERROR_QUERY = [];
diff --git a/src/components/EventManagement/EventAttendance/Attendance.mocks.ts b/src/components/EventManagement/EventAttendance/Attendance.mocks.ts
new file mode 100644
index 0000000000..2dc8c89571
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/Attendance.mocks.ts
@@ -0,0 +1,62 @@
+import { EVENT_ATTENDEES } from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: EVENT_ATTENDEES,
+      variables: {}, // Removed id since it's not required based on error
+    },
+    result: {
+      data: {
+        event: {
+          attendees: [
+            {
+              _id: '6589386a2caa9d8d69087484',
+              firstName: 'Bruce',
+              lastName: 'Garza',
+              gender: null,
+              birthDate: null,
+              createdAt: '2023-04-13T10:23:17.742',
+              eventsAttended: [
+                {
+                  __typename: 'Event',
+                  _id: '660fdf7d2c1ef6c7db1649ad',
+                },
+                {
+                  __typename: 'Event',
+                  _id: '660fdd562c1ef6c7db1644f7',
+                },
+              ],
+              __typename: 'User',
+            },
+            {
+              _id: '6589386a2caa9d8d69087485',
+              firstName: 'Jane',
+              lastName: 'Smith',
+              gender: null,
+              birthDate: null,
+              createdAt: '2023-04-13T10:23:17.742',
+              eventsAttended: [
+                {
+                  __typename: 'Event',
+                  _id: '660fdf7d2c1ef6c7db1649ad',
+                },
+              ],
+              __typename: 'User',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: EVENT_ATTENDEES,
+      variables: {},
+    },
+    error: new Error('An error occurred'),
+  },
+];
diff --git a/src/components/EventManagement/EventAttendance/AttendedEventList.test.tsx b/src/components/EventManagement/EventAttendance/AttendedEventList.test.tsx
new file mode 100644
index 0000000000..2d60081acf
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/AttendedEventList.test.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import AttendedEventList from './AttendedEventList';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { formatDate } from 'utils/dateFormatter';
+
+const mockEvent = {
+  _id: 'event123',
+  title: 'Test Event',
+  description: 'This is a test event description',
+  startDate: '2023-05-01',
+  endDate: '2023-05-02',
+  startTime: '09:00:00',
+  endTime: '17:00:00',
+  allDay: false,
+  location: 'Test Location',
+  recurring: true,
+  baseRecurringEvent: {
+    _id: 'recurringEvent123',
+  },
+  organization: {
+    _id: 'org456',
+    members: [
+      { _id: 'member1', firstName: 'John', lastName: 'Doe' },
+      { _id: 'member2', firstName: 'Jane', lastName: 'Smith' },
+    ],
+  },
+  attendees: [{ _id: 'user1' }, { _id: 'user2' }],
+};
+
+const mocks = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: mockEvent,
+      },
+    },
+  },
+];
+
+describe('Testing AttendedEventList', () => {
+  const props = {
+    eventId: 'event123',
+  };
+
+  test('Component renders and displays event details correctly', async () => {
+    const { queryByText, queryByTitle } = render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <AttendedEventList {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(queryByText('Loading...')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(queryByText('Test Event')).toBeInTheDocument();
+      expect(queryByText(formatDate(mockEvent.startDate))).toBeInTheDocument();
+      expect(queryByTitle('Event Date')).toBeInTheDocument();
+    });
+  });
+
+  test('Component handles error state gracefully', async () => {
+    const errorMock = [
+      {
+        request: {
+          query: EVENT_DETAILS,
+          variables: { id: 'event123' },
+        },
+        error: new Error('An error occurred'),
+      },
+    ];
+
+    const { queryByText } = render(
+      <MockedProvider mocks={errorMock} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <AttendedEventList {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(queryByText('Loading...')).not.toBeInTheDocument();
+      // The component doesn't explicitly render an error message, so we just check that the event details are not rendered
+      expect(queryByText('Test Event')).not.toBeInTheDocument();
+    });
+  });
+
+  test('Component renders link with correct URL', async () => {
+    const { container } = render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <AttendedEventList {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const link = container.querySelector('a');
+      expect(link).not.toBeNull();
+      expect(link).toHaveAttribute('href', expect.stringContaining('/event/'));
+    });
+  });
+});
diff --git a/src/components/EventManagement/EventAttendance/AttendedEventList.tsx b/src/components/EventManagement/EventAttendance/AttendedEventList.tsx
new file mode 100644
index 0000000000..2d0286feb0
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/AttendedEventList.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { TableBody, TableCell, TableRow, Table } from '@mui/material';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import { useQuery } from '@apollo/client';
+import { Link, useParams } from 'react-router-dom';
+import { formatDate } from 'utils/dateFormatter';
+import DateIcon from 'assets/svgs/cardItemDate.svg?react';
+interface InterfaceEventsAttended {
+  eventId: string;
+}
+/**
+ * Component to display a list of events attended by a member
+ * @param eventId - The ID of the event to display details for
+ * @returns A table row containing event details with a link to the event
+ */
+const AttendedEventList: React.FC<InterfaceEventsAttended> = ({ eventId }) => {
+  const { orgId: currentOrg } = useParams();
+  const { data, loading, error } = useQuery(EVENT_DETAILS, {
+    variables: { id: eventId },
+    fetchPolicy: 'cache-first',
+    errorPolicy: 'all',
+  });
+
+  if (error || data?.error) {
+    return <p>Error loading event details. Please try again later.</p>;
+  }
+
+  const event = data?.event ?? null;
+
+  if (loading) return <p>Loading...</p>;
+  return (
+    <React.Fragment>
+      <Table className="bg-primary" aria-label="Attended events list">
+        <TableBody className="bg-primary">
+          {event && (
+            <TableRow
+              key={event._id}
+              className="bg-white rounded"
+              role="row"
+              aria-label={`Event: ${event.title}`}
+            >
+              <TableCell>
+                <Link
+                  to={`/event/${currentOrg}/${event._id}`}
+                  className="d-flex justify-items-center align-items-center"
+                  style={{ color: 'blue', textDecoration: 'none' }}
+                >
+                  <DateIcon
+                    title="Event Date"
+                    fill="var(--bs-gray-600)"
+                    width={25}
+                    height={25}
+                    className="mx-2 rounded-full"
+                  />
+                  <div>
+                    <div>{event.title}</div>
+                    <div>{formatDate(event.startDate)}</div>
+                  </div>
+                </Link>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </React.Fragment>
+  );
+};
+export default AttendedEventList;
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.test.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.test.tsx
new file mode 100644
index 0000000000..db44357d07
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.test.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  cleanup,
+  waitFor,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import EventAttendance from './EventAttendance';
+import { store } from 'state/store';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import { MOCKS } from './Attendance.mocks';
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(): Promise<void> {
+  await waitFor(() => {
+    return Promise.resolve();
+  });
+}
+jest.mock('react-chartjs-2', () => ({
+  Line: () => null,
+  Bar: () => null,
+  Pie: () => null,
+}));
+
+const renderEventAttendance = (): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <EventAttendance />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Event Attendance Component', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ eventId: 'event123', orgId: 'org123' }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('Component loads correctly with table headers', async () => {
+    renderEventAttendance();
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('table-header-row')).toBeInTheDocument();
+      expect(screen.getByTestId('header-member-name')).toBeInTheDocument();
+      expect(screen.getByTestId('header-status')).toBeInTheDocument();
+    });
+  });
+
+  test('Renders attendee data correctly', async () => {
+    renderEventAttendance();
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('attendee-name-0')).toBeInTheDocument();
+      expect(screen.getByTestId('attendee-name-1')).toHaveTextContent(
+        'Jane Smith',
+      );
+    });
+  });
+
+  test('Search filters attendees by name correctly', async () => {
+    renderEventAttendance();
+
+    await wait();
+
+    const searchInput = screen.getByTestId('searchByName');
+    fireEvent.change(searchInput, { target: { value: 'Bruce' } });
+
+    await waitFor(() => {
+      const filteredAttendee = screen.getByTestId('attendee-name-0');
+      expect(filteredAttendee).toHaveTextContent('Bruce Garza');
+    });
+  });
+
+  test('Sort functionality changes attendee order', async () => {
+    renderEventAttendance();
+
+    await wait();
+
+    const sortDropdown = screen.getByTestId('sort-dropdown');
+    userEvent.click(sortDropdown);
+    userEvent.click(screen.getByText('Sort'));
+
+    await waitFor(() => {
+      const attendees = screen.getAllByTestId('attendee-name-0');
+      expect(attendees[0]).toHaveTextContent('Bruce Garza');
+    });
+  });
+
+  test('Date filter shows correct number of attendees', async () => {
+    renderEventAttendance();
+
+    await wait();
+
+    userEvent.click(screen.getByText('Filter: All'));
+    userEvent.click(screen.getByText('This Month'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Attendees not Found')).toBeInTheDocument();
+    });
+  });
+  test('Statistics modal opens and closes correctly', async () => {
+    renderEventAttendance();
+    await wait();
+
+    expect(screen.queryByTestId('attendance-modal')).not.toBeInTheDocument();
+
+    const statsButton = screen.getByTestId('stats-modal');
+    userEvent.click(statsButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('attendance-modal')).toBeInTheDocument();
+    });
+
+    const closeButton = screen.getByTestId('close-button');
+    userEvent.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('attendance-modal')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
new file mode 100644
index 0000000000..17f063f6b5
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -0,0 +1,376 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { BiSearch as Search } from 'react-icons/bi';
+import {
+  Paper,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from '@mui/material';
+import {
+  Button,
+  Dropdown,
+  DropdownButton,
+  Table,
+  FormControl,
+} from 'react-bootstrap';
+import styles from './EventsAttendance.module.css';
+import { useLazyQuery } from '@apollo/client';
+import { EVENT_ATTENDEES } from 'GraphQl/Queries/Queries';
+import { useParams, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { AttendanceStatisticsModal } from './EventStatistics';
+import AttendedEventList from './AttendedEventList';
+import type { InterfaceMember } from './InterfaceEvents';
+enum FilterPeriod {
+  ThisMonth = 'This Month',
+  ThisYear = 'This Year',
+  All = 'All',
+}
+/**
+ * Component to manage and display event attendance information
+ * Includes filtering and sorting functionality for attendees
+ * @returns JSX element containing the event attendance interface
+ */
+function EventAttendance(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventAttendance',
+  });
+  const { eventId } = useParams<{ eventId: string }>();
+  const { orgId: currentUrl } = useParams();
+  const [filteredAttendees, setFilteredAttendees] = useState<InterfaceMember[]>(
+    [],
+  );
+  const [sortOrder, setSortOrder] = useState<'ascending' | 'descending'>(
+    'ascending',
+  );
+  const [filteringBy, setFilteringBy] = useState<FilterPeriod>(
+    FilterPeriod.All,
+  );
+  const [show, setShow] = useState(false);
+
+  const sortAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
+    return [...attendees].sort((a, b) => {
+      const nameA = `${a.firstName} ${a.lastName}`.toLowerCase();
+      const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
+      return sortOrder === 'ascending'
+        ? nameA.localeCompare(nameB)
+        : /*istanbul ignore next*/
+          nameB.localeCompare(nameA);
+    });
+  };
+
+  const filterAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
+    const now = new Date();
+    return filteringBy === 'All'
+      ? attendees
+      : attendees.filter((attendee) => {
+          const attendeeDate = new Date(attendee.createdAt);
+          const isSameYear = attendeeDate.getFullYear() === now.getFullYear();
+          return filteringBy === 'This Month'
+            ? isSameYear && attendeeDate.getMonth() === now.getMonth()
+            : /*istanbul ignore next*/
+              isSameYear;
+        });
+  };
+
+  const filterAndSortAttendees = (
+    attendees: InterfaceMember[],
+  ): InterfaceMember[] => {
+    return sortAttendees(filterAttendees(attendees));
+  };
+  const searchEventAttendees = (value: string): void => {
+    const searchValueLower = value.toLowerCase().trim();
+
+    const filtered = (memberData?.event?.attendees ?? []).filter(
+      (attendee: InterfaceMember) => {
+        const fullName =
+          `${attendee.firstName} ${attendee.lastName}`.toLowerCase();
+        return (
+          attendee.firstName?.toLowerCase().includes(searchValueLower) ||
+          attendee.lastName?.toLowerCase().includes(searchValueLower) ||
+          attendee.email?.toLowerCase().includes(searchValueLower) ||
+          fullName.includes(searchValueLower)
+        );
+      },
+    );
+
+    const finalFiltered = filterAndSortAttendees(filtered);
+    setFilteredAttendees(finalFiltered);
+  };
+  const showModal = (): void => setShow(true);
+  const handleClose = (): void => setShow(false);
+
+  const statistics = useMemo(() => {
+    const totalMembers = filteredAttendees.length;
+    const membersAttended = filteredAttendees.filter(
+      (member) => member?.eventsAttended && member.eventsAttended.length > 0,
+    ).length;
+    const attendanceRate =
+      totalMembers > 0
+        ? Number(((membersAttended / totalMembers) * 100).toFixed(2))
+        : 0;
+
+    return { totalMembers, membersAttended, attendanceRate };
+  }, [filteredAttendees]);
+
+  const [getEventAttendees, { data: memberData, loading, error }] =
+    useLazyQuery(EVENT_ATTENDEES, {
+      variables: {
+        id: eventId,
+      },
+      fetchPolicy: 'cache-and-network',
+      nextFetchPolicy: 'cache-first',
+      errorPolicy: 'all',
+      notifyOnNetworkStatusChange: true,
+    });
+
+  useEffect(() => {
+    if (memberData?.event?.attendees) {
+      const updatedAttendees = filterAndSortAttendees(
+        memberData.event.attendees,
+      );
+      setFilteredAttendees(updatedAttendees);
+    }
+  }, [sortOrder, filteringBy, memberData]);
+
+  useEffect(() => {
+    getEventAttendees();
+  }, [eventId, getEventAttendees]);
+
+  if (loading) return <p>{t('loading')}</p>;
+  /*istanbul ignore next*/
+  if (error) return <p>{error.message}</p>;
+
+  return (
+    <div className="">
+      <AttendanceStatisticsModal
+        show={show}
+        statistics={statistics}
+        handleClose={handleClose}
+        memberData={filteredAttendees}
+        t={t}
+      />
+      <div className="d-flex justify-content-between">
+        <div className="d-flex w-100">
+          <Button
+            className={`border-1 bg-white text-success ${styles.actionBtn}`}
+            onClick={showModal}
+            data-testid="stats-modal"
+          >
+            {t('historical_statistics')}
+          </Button>
+        </div>
+        <div className="d-flex justify-content-between align-items-end w-100 ">
+          <div className={styles.input}>
+            <FormControl
+              type="text"
+              id="posttitle"
+              className="bg-white border"
+              placeholder={t('Search member')}
+              data-testid="searchByName"
+              autoComplete="off"
+              required
+              onChange={(e): void => searchEventAttendees(e.target.value)}
+            />
+            <Button
+              tabIndex={-1}
+              className={`position-absolute z-10 bottom-0 end-0 h-100`}
+            >
+              <Search size={20} />
+            </Button>
+          </div>
+
+          <DropdownButton
+            data-testid="filter-dropdown"
+            className={`border-1 mx-4`}
+            title={
+              <>
+                <img
+                  src="/images/svg/up-down.svg"
+                  width={20}
+                  height={20}
+                  alt="Sort"
+                  className={styles.sortImg}
+                />
+                <span className="ms-2">Filter: {filteringBy}</span>
+              </>
+            }
+            onSelect={(eventKey) => setFilteringBy(eventKey as FilterPeriod)}
+          >
+            <Dropdown.Item eventKey="This Month">This Month</Dropdown.Item>
+            <Dropdown.Item eventKey="This Year">This Year</Dropdown.Item>
+            <Dropdown.Item eventKey="All">All</Dropdown.Item>
+          </DropdownButton>
+          <DropdownButton
+            data-testid="sort-dropdown"
+            className={`border-1 `}
+            title={
+              <>
+                <img
+                  src="/images/svg/up-down.svg"
+                  width={20}
+                  height={20}
+                  alt="Sort"
+                  className={styles.sortImg}
+                />
+                <span className="ms-2">Sort</span>
+              </>
+            }
+            onSelect={
+              /*istanbul ignore next*/
+              (eventKey) => setSortOrder(eventKey as 'ascending' | 'descending')
+            }
+          >
+            <Dropdown.Item eventKey="ascending">Ascending</Dropdown.Item>
+            <Dropdown.Item eventKey="descending">Descending</Dropdown.Item>
+          </DropdownButton>
+        </div>
+      </div>
+      {/* <h3>{totalMembers}</h3> */}
+      <TableContainer component={Paper} className="mt-3">
+        <Table aria-label={t('event_attendance_table')} role="grid">
+          <TableHead>
+            <TableRow className="" data-testid="table-header-row" role="row">
+              <TableCell
+                className={styles.customcell}
+                data-testid="header-index"
+                role="columnheader"
+                aria-sort="none"
+              >
+                #
+              </TableCell>
+              <TableCell
+                className={styles.customcell}
+                data-testid="header-member-name"
+              >
+                {t('Member Name')}
+              </TableCell>
+              <TableCell
+                className={styles.customcell}
+                data-testid="header-status"
+              >
+                {t('Status')}
+              </TableCell>
+              <TableCell
+                className={styles.customcell}
+                data-testid="header-events-attended"
+              >
+                {t('Events Attended')}
+              </TableCell>
+              <TableCell
+                className={styles.customcell}
+                data-testid="header-task-assigned"
+              >
+                {t('Task Assigned')}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {filteredAttendees.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} align="center">
+                  {t('noAttendees')}
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredAttendees.map(
+                (member: InterfaceMember, index: number) => (
+                  <TableRow
+                    key={index}
+                    data-testid={`attendee-row-${index}`}
+                    className="my-6"
+                  >
+                    <TableCell
+                      component="th"
+                      scope="row"
+                      data-testid={`attendee-index-${index}`}
+                    >
+                      {index + 1}
+                    </TableCell>
+                    <TableCell
+                      align="left"
+                      data-testid={`attendee-name-${index}`}
+                    >
+                      <Link
+                        to={`/member/${currentUrl}`}
+                        state={{ id: member._id }}
+                        className={styles.membername}
+                      >
+                        {member.firstName} {member.lastName}
+                      </Link>
+                    </TableCell>
+                    <TableCell
+                      align="left"
+                      data-testid={`attendee-status-${index}`}
+                    >
+                      {member.__typename === 'User' ? t('Member') : t('Admin')}
+                    </TableCell>
+                    <Tooltip
+                      componentsProps={{
+                        tooltip: {
+                          sx: {
+                            backgroundColor: 'white',
+                            fontSize: '2em',
+                            maxHeight: '170px',
+                            overflowY: 'scroll',
+                            scrollbarColor: 'white',
+                            border: '1px solid green',
+                            borderRadius: '6px',
+                            boxShadow: '0 0 5px rgba(0,0,0,0.1)',
+                          },
+                        },
+                      }}
+                      title={member.eventsAttended?.map(
+                        (event: { _id: string }, index: number) => (
+                          <AttendedEventList
+                            key={event._id}
+                            eventId={event._id}
+                            data-testid={`attendee-events-attended-${index}`}
+                          />
+                        ),
+                      )}
+                    >
+                      <TableCell
+                        align="left"
+                        data-testid={`attendee-events-attended-${index}`}
+                      >
+                        <span className={styles.eventsAttended}>
+                          {member.eventsAttended
+                            ? member.eventsAttended.length
+                            : /*istanbul ignore next*/
+                              '0'}
+                        </span>
+                      </TableCell>
+                    </Tooltip>
+                    <TableCell
+                      align="left"
+                      data-testid={`attendee-task-assigned-${index}`}
+                    >
+                      {member.tagsAssignedWith ? (
+                        /*istanbul ignore next*/
+                        member.tagsAssignedWith.edges.map(
+                          /*istanbul ignore next*/
+                          (
+                            edge: { node: { name: string } },
+                            tagIndex: number,
+                          ) => <div key={tagIndex}>{edge.node.name}</div>,
+                        )
+                      ) : (
+                        <div>None</div>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ),
+              )
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}
+
+export default EventAttendance;
diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.test.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.test.tsx
new file mode 100644
index 0000000000..03f4671a5e
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventStatistics.test.tsx
@@ -0,0 +1,358 @@
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { AttendanceStatisticsModal } from './EventStatistics';
+import { MockedProvider } from '@apollo/client/testing';
+import { EVENT_DETAILS, RECURRING_EVENTS } from 'GraphQl/Queries/Queries';
+import userEvent from '@testing-library/user-event';
+import { exportToCSV } from 'utils/chartToPdf';
+
+// Mock chart.js to avoid canvas errors
+jest.mock('react-chartjs-2', () => ({
+  Line: () => null,
+  Bar: () => null,
+}));
+// Mock react-router-dom
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({
+    orgId: 'org123',
+    eventId: 'event123',
+  }),
+}));
+jest.mock('utils/chartToPdf', () => ({
+  exportToCSV: jest.fn(),
+}));
+const mocks = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          _id: 'event123',
+          title: 'Test Event',
+          description: 'Test Description',
+          startDate: '2023-01-01',
+          endDate: '2023-01-02',
+          startTime: '09:00',
+          endTime: '17:00',
+          allDay: false,
+          location: 'Test Location',
+          recurring: true,
+          baseRecurringEvent: { _id: 'base123' },
+          organization: {
+            _id: 'org123',
+            members: [
+              { _id: 'user1', firstName: 'John', lastName: 'Doe' },
+              { _id: 'user2', firstName: 'Jane', lastName: 'Smith' },
+            ],
+          },
+          attendees: [
+            {
+              _id: 'user1',
+              gender: 'MALE',
+            },
+            {
+              _id: 'user2',
+              gender: 'FEMALE',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: RECURRING_EVENTS,
+      variables: { baseRecurringEventId: 'base123' },
+    },
+    result: {
+      data: {
+        getRecurringEvents: [
+          {
+            _id: 'event123',
+            startDate: '2023-01-01',
+            title: 'Test Event 1',
+            attendees: [
+              { _id: 'user1', gender: 'MALE' },
+              { _id: 'user2', gender: 'FEMALE' },
+            ],
+          },
+          {
+            _id: 'event456',
+            startDate: '2023-01-08',
+            title: 'Test Event 2',
+            attendees: [
+              { _id: 'user1', gender: 'MALE' },
+              { _id: 'user3', gender: 'OTHER' },
+            ],
+          },
+          {
+            _id: 'event789',
+            startDate: '2023-01-15',
+            title: 'Test Event 3',
+            attendees: [
+              { _id: 'user2', gender: 'FEMALE' },
+              { _id: 'user3', gender: 'OTHER' },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const mockMemberData = [
+  {
+    _id: 'user1',
+    firstName: 'John',
+    lastName: 'Doe',
+    gender: 'MALE',
+    birthDate: new Date('1990-01-01'),
+    email: 'john@example.com' as `${string}@${string}.${string}`,
+    createdAt: '2023-01-01',
+    __typename: 'User',
+    tagsAssignedWith: {
+      edges: [],
+    },
+  },
+  {
+    _id: 'user2',
+    firstName: 'Jane',
+    lastName: 'Smith',
+    gender: 'FEMALE',
+    birthDate: new Date('1985-05-05'),
+    email: 'jane@example.com' as `${string}@${string}.${string}`,
+    createdAt: '2023-01-01',
+    __typename: 'User',
+    tagsAssignedWith: {
+      edges: [],
+    },
+  },
+];
+
+const mockStatistics = {
+  totalMembers: 2,
+  membersAttended: 1,
+  attendanceRate: 50,
+};
+
+describe('AttendanceStatisticsModal', () => {
+  test('renders modal with correct initial state', async () => {
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('attendance-modal')).toBeInTheDocument();
+      expect(screen.getByTestId('gender-button')).toBeInTheDocument();
+      expect(screen.getByTestId('age-button')).toBeInTheDocument();
+    });
+  });
+
+  test('switches between gender and age demographics', async () => {
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const genderButton = screen.getByTestId('gender-button');
+      const ageButton = screen.getByTestId('age-button');
+
+      userEvent.click(ageButton);
+      expect(ageButton).toHaveClass('btn-success');
+      expect(genderButton).toHaveClass('btn-light');
+
+      userEvent.click(genderButton);
+      expect(genderButton).toHaveClass('btn-success');
+      expect(ageButton).toHaveClass('btn-light');
+    });
+  });
+
+  test('handles data demographics export functionality', async () => {
+    const mockExportToCSV = jest.fn();
+    (exportToCSV as jest.Mock).mockImplementation(mockExportToCSV);
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Export Data' }),
+      ).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      const exportButton = screen.getByRole('button', { name: 'Export Data' });
+      await userEvent.click(exportButton);
+    });
+
+    await act(async () => {
+      const demographicsExport = screen.getByTestId('demographics-export');
+      await userEvent.click(demographicsExport);
+    });
+
+    expect(mockExportToCSV).toHaveBeenCalled();
+  });
+  test('handles data trends export functionality', async () => {
+    const mockExportToCSV = jest.fn();
+    (exportToCSV as jest.Mock).mockImplementation(mockExportToCSV);
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Export Data' }),
+      ).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      const exportButton = screen.getByRole('button', { name: 'Export Data' });
+      await userEvent.click(exportButton);
+    });
+
+    await act(async () => {
+      const demographicsExport = screen.getByTestId('trends-export');
+      await userEvent.click(demographicsExport);
+    });
+
+    expect(mockExportToCSV).toHaveBeenCalled();
+  });
+
+  test('displays recurring event data correctly', async () => {
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('today-button')).toBeInTheDocument();
+    });
+  });
+  test('handles pagination and today button correctly', async () => {
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    // Wait for initial render
+    await waitFor(() => {
+      expect(screen.getByTestId('today-button')).toBeInTheDocument();
+    });
+
+    // Test pagination
+    await act(async () => {
+      const nextButton = screen.getByAltText('right-arrow');
+      await userEvent.click(nextButton);
+    });
+
+    await act(async () => {
+      const prevButton = screen.getByAltText('left-arrow');
+      await userEvent.click(prevButton);
+    });
+
+    // Test today button
+    await act(async () => {
+      const todayButton = screen.getByTestId('today-button');
+      await userEvent.click(todayButton);
+    });
+
+    // Verify buttons are present and interactive
+    expect(screen.getByAltText('right-arrow')).toBeInTheDocument();
+    expect(screen.getByAltText('left-arrow')).toBeInTheDocument();
+    expect(screen.getByTestId('today-button')).toBeInTheDocument();
+  });
+
+  test('handles pagination in recurring events view', async () => {
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={() => {}}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const nextButton = screen.getByAltText('right-arrow');
+      const prevButton = screen.getByAltText('left-arrow');
+
+      userEvent.click(nextButton);
+      userEvent.click(prevButton);
+    });
+  });
+
+  test('closes modal correctly', async () => {
+    const handleClose = jest.fn();
+    render(
+      <MockedProvider mocks={mocks}>
+        <AttendanceStatisticsModal
+          show={true}
+          handleClose={handleClose}
+          statistics={mockStatistics}
+          memberData={mockMemberData}
+          t={(key) => key}
+        />
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const closeButton = screen.getByTestId('close-button');
+      userEvent.click(closeButton);
+      expect(handleClose).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
new file mode 100644
index 0000000000..5dda9e88a8
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
@@ -0,0 +1,583 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import {
+  Modal,
+  Button,
+  ButtonGroup,
+  Tooltip,
+  OverlayTrigger,
+  Dropdown,
+} from 'react-bootstrap';
+import 'react-datepicker/dist/react-datepicker.css';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip as ChartToolTip,
+  Legend,
+} from 'chart.js';
+import { Bar, Line } from 'react-chartjs-2';
+import { useParams } from 'react-router-dom';
+import { EVENT_DETAILS, RECURRING_EVENTS } from 'GraphQl/Queries/Queries';
+import { useLazyQuery } from '@apollo/client';
+import { exportToCSV } from 'utils/chartToPdf';
+import type { ChartOptions, TooltipItem } from 'chart.js';
+import type {
+  InterfaceAttendanceStatisticsModalProps,
+  InterfaceEvent,
+  InterfaceRecurringEvent,
+} from './InterfaceEvents';
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  ChartToolTip,
+  Legend,
+);
+/**
+ * Component to display statistical information about event attendance
+ * Shows metrics like total attendees, filtering options, and attendance trends
+ * @returns JSX element with event statistics dashboard
+ */
+
+export const AttendanceStatisticsModal: React.FC<
+  InterfaceAttendanceStatisticsModalProps
+> = ({ show, handleClose, statistics, memberData, t }): JSX.Element => {
+  const [selectedCategory, setSelectedCategory] = useState('Gender');
+  const { orgId, eventId } = useParams();
+  const [currentPage, setCurrentPage] = useState(0);
+  const eventsPerPage = 10;
+  const [loadEventDetails, { data: eventData }] = useLazyQuery(EVENT_DETAILS);
+  const [loadRecurringEvents, { data: recurringData }] =
+    useLazyQuery(RECURRING_EVENTS);
+  const isEventRecurring = eventData?.event?.recurring;
+  const currentEventIndex = useMemo(() => {
+    if (!recurringData?.getRecurringEvents || !eventId) return -1;
+    return recurringData.getRecurringEvents.findIndex(
+      (event: InterfaceEvent) => event._id === eventId,
+    );
+  }, [recurringData, eventId]);
+  useEffect(() => {
+    if (currentEventIndex >= 0) {
+      const newPage = Math.floor(currentEventIndex / eventsPerPage);
+      setCurrentPage(newPage);
+    }
+  }, [currentEventIndex, eventsPerPage]);
+  const filteredRecurringEvents = useMemo(
+    () => recurringData?.getRecurringEvents || [],
+    [recurringData],
+  );
+  const totalEvents = filteredRecurringEvents.length;
+  const totalPages = Math.ceil(totalEvents / eventsPerPage);
+
+  const paginatedRecurringEvents = useMemo(() => {
+    const startIndex = currentPage * eventsPerPage;
+    const endIndex = Math.min(startIndex + eventsPerPage, totalEvents);
+    return filteredRecurringEvents.slice(startIndex, endIndex);
+  }, [filteredRecurringEvents, currentPage, eventsPerPage, totalEvents]);
+
+  const attendeeCounts = useMemo(
+    () =>
+      paginatedRecurringEvents.map(
+        (event: InterfaceEvent) => event.attendees.length,
+      ),
+    [paginatedRecurringEvents],
+  );
+  const chartOptions: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: false,
+    scales: { y: { beginAtZero: true } },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          label:
+            /*istanbul ignore next*/
+            (context: TooltipItem<'line'>) => {
+              const label = context.dataset.label || '';
+              const value = context.parsed.y;
+              const isCurrentEvent =
+                paginatedRecurringEvents[context.dataIndex]._id === eventId;
+              return isCurrentEvent
+                ? `${label}: ${value} (Current Event)`
+                : `${label}: ${value}`;
+            },
+        },
+      },
+    },
+  };
+  const eventLabels = useMemo(
+    () =>
+      paginatedRecurringEvents.map((event: InterfaceEvent) => {
+        const date = (() => {
+          try {
+            const eventDate = new Date(event.startDate);
+            if (Number.isNaN(eventDate.getTime())) {
+              /*istanbul ignore next*/
+              console.error(`Invalid date for event: ${event._id}`);
+              /*istanbul ignore next*/
+              return 'Invalid date';
+            }
+            return eventDate.toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+            });
+          } catch (error) {
+            /*istanbul ignore next*/
+            console.error(
+              `Error formatting date for event: ${event._id}`,
+              error,
+            );
+            /*istanbul ignore next*/
+            return 'Invalid date';
+          }
+        })();
+        // Highlight the current event in the label
+        return event._id === eventId ? `→ ${date}` : date;
+      }),
+    [paginatedRecurringEvents, eventId],
+  );
+
+  const maleCounts = useMemo(
+    () =>
+      paginatedRecurringEvents.map(
+        (event: InterfaceEvent) =>
+          event.attendees.filter((attendee) => attendee.gender === 'MALE')
+            .length,
+      ),
+    [paginatedRecurringEvents],
+  );
+
+  const femaleCounts = useMemo(
+    () =>
+      paginatedRecurringEvents.map(
+        (event: InterfaceEvent) =>
+          event.attendees.filter((attendee) => attendee.gender === 'FEMALE')
+            .length,
+      ),
+    [paginatedRecurringEvents],
+  );
+
+  const otherCounts = useMemo(
+    () =>
+      paginatedRecurringEvents.map(
+        (event: InterfaceEvent) =>
+          event.attendees.filter(
+            (attendee) =>
+              attendee.gender === 'OTHER' || attendee.gender === null,
+          ).length,
+      ),
+    [paginatedRecurringEvents],
+  );
+
+  const chartData = useMemo(
+    () => ({
+      labels: eventLabels,
+      datasets: [
+        {
+          label: 'Attendee Count',
+          data: attendeeCounts,
+          fill: true,
+          borderColor: '#008000',
+          pointRadius: paginatedRecurringEvents.map(
+            (event: InterfaceRecurringEvent) => (event._id === eventId ? 8 : 3),
+          ),
+          pointBackgroundColor: paginatedRecurringEvents.map(
+            (event: InterfaceRecurringEvent) =>
+              event._id === eventId ? '#008000' : 'transparent',
+          ),
+        },
+        {
+          label: 'Male Attendees',
+          data: maleCounts,
+          fill: false,
+          borderColor: '#0000FF',
+        },
+        {
+          label: 'Female Attendees',
+          data: femaleCounts,
+          fill: false,
+          borderColor: '#FF1493',
+        },
+        {
+          label: 'Other Attendees',
+          data: otherCounts,
+          fill: false,
+          borderColor: '#FFD700',
+        },
+      ],
+    }),
+    [eventLabels, attendeeCounts, maleCounts, femaleCounts, otherCounts],
+  );
+
+  const handlePreviousPage = useCallback(
+    /*istanbul ignore next*/
+    () => {
+      setCurrentPage((prevPage) => Math.max(prevPage - 1, 0));
+    },
+    [],
+  );
+
+  const handleNextPage = useCallback(
+    /*istanbul ignore next*/
+    () => {
+      if (currentPage < totalPages - 1) {
+        setCurrentPage((prevPage) => prevPage + 1);
+      }
+    },
+    [currentPage, totalPages],
+  );
+
+  const handleDateChange = useCallback((date: Date | null) => {
+    if (date) {
+      setCurrentPage(0);
+    }
+  }, []);
+  const categoryLabels = useMemo(
+    () =>
+      selectedCategory === 'Gender'
+        ? ['Male', 'Female', 'Other']
+        : ['Under 18', '18-40', 'Over 40'],
+    [selectedCategory],
+  );
+
+  const categoryData = useMemo(
+    () =>
+      selectedCategory === 'Gender'
+        ? [
+            memberData.filter((member) => member.gender === 'MALE').length,
+            memberData.filter((member) => member.gender === 'FEMALE').length,
+            memberData.filter(
+              (member) =>
+                member.gender === 'OTHER' ||
+                member.gender === null ||
+                member.gender === '',
+            ).length,
+          ]
+        : [
+            memberData.filter((member) => {
+              const today = new Date();
+              const birthDate = new Date(member.birthDate);
+              let age = today.getFullYear() - birthDate.getFullYear();
+              const monthDiff = today.getMonth() - birthDate.getMonth();
+              if (
+                monthDiff < 0 ||
+                (monthDiff === 0 && today.getDate() < birthDate.getDate())
+              ) {
+                /*istanbul ignore next*/
+                age--;
+              }
+              return age < 18;
+            }).length,
+            memberData.filter((member) => {
+              const age =
+                new Date().getFullYear() -
+                new Date(member.birthDate).getFullYear();
+              return age >= 18 && age <= 40;
+            }).length,
+            memberData.filter(
+              (member) =>
+                new Date().getFullYear() -
+                  new Date(member.birthDate).getFullYear() >
+                40,
+            ).length,
+          ],
+    [selectedCategory, memberData],
+  );
+
+  const handleCategoryChange = useCallback((category: string): void => {
+    setSelectedCategory(category);
+  }, []);
+
+  const exportTrendsToCSV = useCallback(() => {
+    const headers = [
+      'Date',
+      'Attendee Count',
+      'Male Attendees',
+      'Female Attendees',
+      'Other Attendees',
+    ];
+    const data = [
+      headers,
+      ...eventLabels.map((label: string, index: number) => [
+        label,
+        attendeeCounts[index],
+        maleCounts[index],
+        femaleCounts[index],
+        otherCounts[index],
+      ]),
+    ];
+    exportToCSV(data, 'attendance_trends.csv');
+  }, [eventLabels, attendeeCounts, maleCounts, femaleCounts, otherCounts]);
+
+  const exportDemographicsToCSV = useCallback(() => {
+    const headers = [selectedCategory, 'Count'];
+    const data = [
+      headers,
+      ...categoryLabels.map((label, index) => [label, categoryData[index]]),
+    ];
+    exportToCSV(data, `${selectedCategory.toLowerCase()}_demographics.csv`);
+  }, [selectedCategory, categoryLabels, categoryData]);
+
+  /*istanbul ignore next*/
+  const handleExport = (eventKey: string | null): void => {
+    switch (eventKey) {
+      case 'trends':
+        try {
+          exportTrendsToCSV();
+        } catch (error) {
+          console.error('Failed to export trends:', error);
+        }
+        break;
+      case 'demographics':
+        try {
+          exportDemographicsToCSV();
+        } catch (error) {
+          console.error('Failed to export demographics:', error);
+        }
+        break;
+      default:
+        return;
+    }
+  };
+  useEffect(() => {
+    if (eventId) {
+      loadEventDetails({ variables: { id: eventId } });
+    }
+  }, [eventId, loadEventDetails]);
+  useEffect(() => {
+    if (eventId && orgId && eventData?.event?.baseRecurringEvent?._id) {
+      loadRecurringEvents({
+        variables: {
+          baseRecurringEventId: eventData?.event?.baseRecurringEvent?._id,
+        },
+      });
+    }
+  }, [eventId, orgId, eventData, loadRecurringEvents]);
+  return (
+    <Modal
+      show={show}
+      onHide={handleClose}
+      className="attendance-modal"
+      centered
+      size={isEventRecurring ? 'xl' : 'lg'}
+      data-testid="attendance-modal"
+    >
+      <Modal.Header closeButton className="bg-success">
+        <Modal.Title className="text-white" data-testid="modal-title">
+          {t('historical_statistics')}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body
+        className="w-100 d-flex flex-column align-items-center position-relative"
+        id="pdf-content"
+      >
+        <div
+          className="w-100 d-flex justify-content-end align-baseline position-absolute"
+          style={{ top: '10px', right: '15px', zIndex: 1 }}
+        ></div>
+        <div className="w-100 border border-success d-flex flex-row rounded">
+          {isEventRecurring ? (
+            <div
+              className="text-success position-relative pt-4 align-items-center justify-content-center w-50 border-right-1 border-success"
+              style={{ borderRight: '1px solid green' }}
+            >
+              <Line
+                data={chartData}
+                options={chartOptions}
+                style={{ paddingBottom: '30px' }}
+              />
+              <div
+                className="px-1 border border-success w-30"
+                style={{
+                  position: 'absolute',
+                  right: 0,
+                  top: 0,
+                  borderBottomLeftRadius: 8,
+                }}
+              >
+                <p className="text-black">Trends</p>
+              </div>
+              <div
+                className="d-flex position-absolute bottom-1 end-50 translate-middle-y"
+                style={{ paddingBottom: '2.0rem' }}
+                role="navigation"
+                aria-label="Chart page navigation"
+              >
+                <OverlayTrigger
+                  placement="bottom"
+                  overlay={<Tooltip id="tooltip-prev">Previous Page</Tooltip>}
+                >
+                  <Button
+                    className="p-0"
+                    onClick={handlePreviousPage}
+                    disabled={currentPage === 0}
+                    aria-label="Previous page"
+                  >
+                    <img
+                      src="/images/svg/arrow-left.svg"
+                      alt="left-arrow"
+                      width={20}
+                      height={20}
+                    />
+                  </Button>
+                </OverlayTrigger>
+                <Button
+                  data-testid="today-button"
+                  className="p-1 ms-2"
+                  onClick={() => handleDateChange(new Date())}
+                  aria-label="Go to today"
+                >
+                  Today
+                </Button>
+                <OverlayTrigger
+                  placement="bottom"
+                  overlay={<Tooltip id="tooltip-next">Next Page</Tooltip>}
+                >
+                  <Button
+                    className="p-0 ms-2"
+                    onClick={handleNextPage}
+                    disabled={currentPage >= totalPages - 1}
+                    aria-label="Next page"
+                  >
+                    <img
+                      src="/images/svg/arrow-right.svg"
+                      alt="right-arrow"
+                      width={20}
+                      height={20}
+                    />
+                  </Button>
+                </OverlayTrigger>
+              </div>
+            </div>
+          ) : (
+            <div
+              className="text-success position-relative d-flex align-items-center justify-content-center w-50 border-right-1 border-success"
+              style={{ borderRight: '1px solid green' }}
+            >
+              <h1
+                className="font-weight-bold"
+                style={{ fontSize: 80, fontWeight: 40 }}
+              >
+                {statistics.totalMembers}
+              </h1>
+              <div
+                className="px-1 border border-success"
+                style={{
+                  position: 'absolute',
+                  right: 0,
+                  bottom: 0,
+                  borderTopLeftRadius: 12,
+                }}
+              >
+                <p className="text-black">Attendance Count</p>
+              </div>
+            </div>
+          )}
+          <div className="text-success position-relative d-flex flex-column align-items-center justify-content-start w-50">
+            <ButtonGroup className="mt-2 pb-2 p-2">
+              <Button
+                data-testid="gender-button"
+                variant={selectedCategory === 'Gender' ? 'success' : 'light'}
+                className="border border-success p-2 pl-2"
+                onClick={() => handleCategoryChange('Gender')}
+              >
+                Gender
+              </Button>
+              <Button
+                data-testid="age-button"
+                variant={selectedCategory === 'Age' ? 'success' : 'light'}
+                className="border border-success border-left-0 p-2"
+                onClick={() => handleCategoryChange('Age')}
+              >
+                Age
+              </Button>
+            </ButtonGroup>
+            <Bar
+              className="mb-3"
+              options={{ responsive: true, animation: false }}
+              data={{
+                labels: categoryLabels,
+                datasets: [
+                  {
+                    label:
+                      selectedCategory === 'Gender'
+                        ? 'Gender Distribution'
+                        : 'Age Distribution',
+                    data: categoryData,
+                    backgroundColor: [
+                      'rgba(31, 119, 180, 0.2)', // Blue
+                      'rgba(255, 127, 14, 0.2)', // Orange
+                      'rgba(44, 160, 44, 0.2)', // Green
+                      'rgba(214, 39, 40, 0.2)', // Red
+                      'rgba(148, 103, 189, 0.2)', // Purple
+                      'rgba(140, 86, 75, 0.2)', // Brown
+                    ],
+                    borderColor: [
+                      'rgba(31, 119, 180, 1)',
+                      'rgba(255, 127, 14, 1)',
+                      'rgba(44, 160, 44, 1)',
+                      'rgba(214, 39, 40, 1)',
+                      'rgba(148, 103, 189, 1)',
+                      'rgba(140, 86, 75, 1)',
+                    ],
+                    borderWidth: 2,
+                  },
+                ],
+              }}
+            />
+            <div
+              className="px-1 border border-success"
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                borderBottomRightRadius: 8,
+              }}
+            >
+              <p className="text-black">Demography</p>
+            </div>
+          </div>
+        </div>
+      </Modal.Body>
+      <Modal.Footer className="p-0 m-2">
+        <Dropdown data-testid="export-dropdown" onSelect={handleExport}>
+          <Dropdown.Toggle
+            className="p-2 m-2"
+            variant="info"
+            id="export-dropdown"
+          >
+            Export Data
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            {isEventRecurring && (
+              <Dropdown.Item data-testid="trends-export" eventKey="trends">
+                Trends
+              </Dropdown.Item>
+            )}
+            <Dropdown.Item
+              data-testid="demographics-export"
+              eventKey="demographics"
+            >
+              Demographics
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+        <Button
+          className="p-2 m-2"
+          variant="secondary"
+          onClick={handleClose}
+          data-testid="close-button"
+        >
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
diff --git a/src/components/EventManagement/EventAttendance/EventsAttendance.module.css b/src/components/EventManagement/EventAttendance/EventsAttendance.module.css
new file mode 100644
index 0000000000..2ee236a4da
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventsAttendance.module.css
@@ -0,0 +1,35 @@
+.input {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+.customcell {
+  background-color: #31bb6b !important;
+  color: white !important;
+  font-size: medium !important;
+  font-weight: 500 !important;
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+
+.eventsAttended,
+.membername {
+  color: blue;
+}
+.actionBtn {
+  /* color:#39a440 !important; */
+  background-color: #ffffff !important;
+}
+.actionBtn:hover,
+.actionBtn:focus,
+.actionBtn:active {
+  color: #39a440 !important;
+}
+
+.table-body > .table-row {
+  background-color: #fff !important;
+}
+
+.table-body > .table-row:nth-child(2n) {
+  background: #afffe8 !important;
+}
diff --git a/src/components/EventManagement/EventAttendance/InterfaceEvents.ts b/src/components/EventManagement/EventAttendance/InterfaceEvents.ts
new file mode 100644
index 0000000000..7fc75ae4af
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/InterfaceEvents.ts
@@ -0,0 +1,82 @@
+export interface InterfaceAttendanceStatisticsModalProps {
+  show: boolean;
+  handleClose: () => void;
+  statistics: {
+    totalMembers: number;
+    membersAttended: number;
+    attendanceRate: number;
+  };
+  memberData: InterfaceMember[];
+  t: (key: string) => string;
+}
+
+export interface InterfaceMember {
+  createdAt: string;
+  firstName: string;
+  lastName: string;
+  email: `${string}@${string}.${string}`;
+  gender: string;
+  eventsAttended?: {
+    _id: string;
+  }[];
+  birthDate: Date;
+  __typename: string;
+  _id: string;
+  tagsAssignedWith: {
+    edges: {
+      cursor: string;
+      node: {
+        name: string;
+      };
+    }[];
+  };
+}
+
+export interface InterfaceEvent {
+  _id: string;
+  title: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  location: string;
+  startTime: string;
+  endTime: string;
+  allDay: boolean;
+  recurring: boolean;
+  recurrenceRule: {
+    recurrenceStartDate: string;
+    recurrenceEndDate?: string | null;
+    frequency: string;
+    weekDays: string[];
+    interval: number;
+    count?: number;
+    weekDayOccurenceInMonth?: number;
+  };
+  isRecurringEventException: boolean;
+  isPublic: boolean;
+  isRegisterable: boolean;
+  attendees: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    gender: string;
+    birthDate: string;
+  }[];
+  __typename: string;
+}
+
+export interface InterfaceRecurringEvent {
+  _id: string;
+  title: string;
+  startDate: string;
+  endDate: string;
+  frequency: InterfaceEvent['recurrenceRule']['frequency'];
+  interval: InterfaceEvent['recurrenceRule']['interval'];
+  attendees: {
+    _id: string;
+    gender: 'MALE' | 'FEMALE' | 'OTHER' | 'PREFER_NOT_TO_SAY';
+  }[];
+  isPublic: boolean;
+  isRegisterable: boolean;
+}
diff --git a/src/components/EventRegistrantsModal/AddOnSpotAttendee.test.tsx b/src/components/EventRegistrantsModal/AddOnSpotAttendee.test.tsx
new file mode 100644
index 0000000000..c0dc20d200
--- /dev/null
+++ b/src/components/EventRegistrantsModal/AddOnSpotAttendee.test.tsx
@@ -0,0 +1,177 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter } from 'react-router-dom';
+import { SIGNUP_MUTATION } from 'GraphQl/Mutations/mutations';
+import AddOnSpotAttendee from './AddOnSpotAttendee';
+import userEvent from '@testing-library/user-event';
+import type { RenderResult } from '@testing-library/react';
+import { toast } from 'react-toastify';
+import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
+import { store } from 'state/store';
+import i18nForTest from '../../utils/i18nForTest';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const mockProps = {
+  show: true,
+  handleClose: jest.fn(),
+  reloadMembers: jest.fn(),
+};
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ eventId: '123', orgId: '123' }),
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: SIGNUP_MUTATION,
+      variables: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'john@example.com',
+        phoneNo: '1234567890',
+        gender: 'Male',
+        password: '123456',
+        orgId: '123',
+      },
+    },
+    result: {
+      data: {
+        signUp: {
+          user: {
+            _id: '1',
+          },
+          accessToken: 'mock-access-token',
+          refreshToken: 'mock-refresh-token',
+        },
+      },
+    },
+  },
+];
+
+const ERROR_MOCKS = [
+  {
+    ...MOCKS[0],
+    error: new Error('Failed to add attendee'),
+  },
+];
+
+const renderAddOnSpotAttendee = (): RenderResult => {
+  return render(
+    <MockedProvider mocks={MOCKS} addTypename={false}>
+      <Provider store={store}>
+        <I18nextProvider i18n={i18nForTest}>
+          <BrowserRouter>
+            <AddOnSpotAttendee {...mockProps} />
+          </BrowserRouter>
+        </I18nextProvider>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('AddOnSpotAttendee Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the component with all form fields', async () => {
+    renderAddOnSpotAttendee();
+
+    expect(screen.getByText('On-spot Attendee')).toBeInTheDocument();
+    expect(screen.getByLabelText('First Name')).toBeInTheDocument();
+    expect(screen.getByLabelText('Last Name')).toBeInTheDocument();
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    expect(screen.getByLabelText('Phone No.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Gender')).toBeInTheDocument();
+  });
+
+  it('handles form input changes correctly', async () => {
+    renderAddOnSpotAttendee();
+
+    const firstNameInput = screen.getByLabelText('First Name');
+    const lastNameInput = screen.getByLabelText('Last Name');
+    const emailInput = screen.getByLabelText('Email');
+
+    userEvent.type(firstNameInput, 'John');
+    userEvent.type(lastNameInput, 'Doe');
+    userEvent.type(emailInput, 'john@example.com');
+
+    expect(firstNameInput).toHaveValue('John');
+    expect(lastNameInput).toHaveValue('Doe');
+    expect(emailInput).toHaveValue('john@example.com');
+  });
+
+  it('submits form successfully and calls necessary callbacks', async () => {
+    renderAddOnSpotAttendee();
+
+    userEvent.type(screen.getByLabelText('First Name'), 'John');
+    userEvent.type(screen.getByLabelText('Last Name'), 'Doe');
+    userEvent.type(screen.getByLabelText('Email'), 'john@example.com');
+    userEvent.type(screen.getByLabelText('Phone No.'), '1234567890');
+    const genderSelect = screen.getByLabelText('Gender');
+    fireEvent.change(genderSelect, { target: { value: 'Male' } });
+
+    fireEvent.submit(screen.getByTestId('onspot-attendee-form'));
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalled();
+      expect(mockProps.reloadMembers).toHaveBeenCalled();
+      expect(mockProps.handleClose).toHaveBeenCalled();
+    });
+  });
+
+  it('displays error when organization ID is missing', async () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <BrowserRouter>
+          <AddOnSpotAttendee {...mockProps} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    fireEvent.submit(screen.getByTestId('onspot-attendee-form'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+  it('displays error when required fields are missing', async () => {
+    renderAddOnSpotAttendee();
+
+    fireEvent.submit(screen.getByTestId('onspot-attendee-form'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  it('handles mutation error appropriately', async () => {
+    render(
+      <MockedProvider mocks={ERROR_MOCKS} addTypename={false}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <BrowserRouter>
+              <AddOnSpotAttendee {...mockProps} />
+            </BrowserRouter>
+          </I18nextProvider>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    userEvent.type(screen.getByLabelText('First Name'), 'John');
+    userEvent.type(screen.getByLabelText('Last Name'), 'Doe');
+    fireEvent.submit(screen.getByTestId('onspot-attendee-form'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/EventRegistrantsModal/AddOnSpotAttendee.tsx b/src/components/EventRegistrantsModal/AddOnSpotAttendee.tsx
new file mode 100644
index 0000000000..6de839ce04
--- /dev/null
+++ b/src/components/EventRegistrantsModal/AddOnSpotAttendee.tsx
@@ -0,0 +1,209 @@
+import { SIGNUP_MUTATION } from 'GraphQl/Mutations/mutations';
+import React, { useState } from 'react';
+import { Modal, Form, Button, Spinner } from 'react-bootstrap';
+import { useParams } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import type {
+  InterfaceAddOnSpotAttendeeProps,
+  InterfaceFormData,
+} from 'utils/interfaces';
+import { useTranslation } from 'react-i18next';
+import { errorHandler } from 'utils/errorHandler';
+/**
+ * Modal component for adding on-spot attendees to an event
+ * @param show - Boolean to control modal visibility
+ * @param handleClose - Function to handle modal close
+ * @param reloadMembers - Function to refresh member list after adding attendee
+ * @returns Modal component with form for adding new attendee
+ */
+const AddOnSpotAttendee: React.FC<InterfaceAddOnSpotAttendeeProps> = ({
+  show,
+  handleClose,
+  reloadMembers,
+}) => {
+  const [formData, setFormData] = useState<InterfaceFormData>({
+    firstName: '',
+    lastName: '',
+    email: '',
+    phoneNo: '',
+    gender: '',
+  });
+  const { t } = useTranslation('translation', { keyPrefix: 'onSpotAttendee' });
+  const { t: tCommon } = useTranslation('common');
+  const { orgId } = useParams<{ orgId: string }>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [addSignUp] = useMutation(SIGNUP_MUTATION);
+  const validateForm = (): boolean => {
+    if (!formData.firstName || !formData.lastName || !formData.email) {
+      toast.error(t('invalidDetailsMessage'));
+      return false;
+    }
+    return true;
+  };
+
+  const resetForm = (): void => {
+    setFormData({
+      firstName: '',
+      lastName: '',
+      email: '',
+      phoneNo: '',
+      gender: '',
+    });
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >,
+  ): void => {
+    const target = e.target as
+      | HTMLInputElement
+      | HTMLSelectElement
+      | HTMLTextAreaElement;
+    setFormData((prev) => ({
+      ...prev,
+      [target.name]: target.value,
+    }));
+  };
+
+  const handleSubmit = async (
+    e: React.FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await addSignUp({
+        variables: {
+          ...formData,
+          password: '123456',
+          orgId,
+        },
+      });
+
+      if (response.data?.signUp) {
+        toast.success(t('attendeeAddedSuccess'));
+        resetForm();
+        reloadMembers();
+        handleClose();
+      }
+    } catch (error) {
+      /* istanbul ignore next */
+      errorHandler(t, error as Error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return (
+    <>
+      <Modal show={show} onHide={handleClose} backdrop="static" centered>
+        <Modal.Header closeButton className="bg-success text-white">
+          <Modal.Title>{t('title')}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form onSubmit={handleSubmit} data-testid="onspot-attendee-form">
+            <div className="d-flex justify-content-between">
+              <Form.Group className="mb-1">
+                <Form.Label htmlFor="firstName">
+                  {tCommon('firstName')}
+                </Form.Label>
+                <Form.Control
+                  id="firstName"
+                  type="text"
+                  name="firstName"
+                  value={formData.firstName}
+                  onChange={handleChange}
+                  placeholder="John"
+                />
+              </Form.Group>
+              <Form.Group className="mb-1">
+                <Form.Label htmlFor="lastName">
+                  {tCommon('lastName')}
+                </Form.Label>
+                <Form.Control
+                  id="lastName"
+                  type="text"
+                  name="lastName"
+                  value={formData.lastName}
+                  onChange={handleChange}
+                  placeholder="Doe"
+                />
+              </Form.Group>
+            </div>
+            <Form.Group className="mb-3">
+              <Form.Label htmlFor="phoneNo">{t('phoneNumber')}</Form.Label>
+              <Form.Control
+                id="phoneNo"
+                type="tel"
+                name="phoneNo"
+                value={formData.phoneNo}
+                onChange={handleChange}
+                placeholder="1234567890"
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3">
+              <Form.Label htmlFor="email">{tCommon('email')}</Form.Label>
+              <Form.Control
+                id="email"
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="abc@gmail.com"
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3">
+              <Form.Label htmlFor="gender">{tCommon('gender')}</Form.Label>
+              <Form.Control
+                id="gender"
+                as="select"
+                name="gender"
+                value={formData.gender}
+                onChange={handleChange}
+              >
+                <option value="">{t('selectGender')}</option>
+                <option value="Male">{t('male')}</option>
+                <option value="Female">{t('female')}</option>
+                <option value="Other">{t('other')}</option>
+              </Form.Control>
+            </Form.Group>
+            <br />
+            <Button
+              variant="success"
+              type="submit"
+              className="w-100"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? (
+                <>
+                  <Spinner
+                    as="span"
+                    animation="border"
+                    size="sm"
+                    role="status"
+                    aria-hidden="true"
+                    className="me-2"
+                  />
+                  {t('addingAttendee')}
+                </>
+              ) : (
+                'Add'
+              )}
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default AddOnSpotAttendee;
diff --git a/src/components/EventRegistrantsModal/EventRegistrantsModal.module.css b/src/components/EventRegistrantsModal/EventRegistrantsModal.module.css
new file mode 100644
index 0000000000..0f78d81c01
--- /dev/null
+++ b/src/components/EventRegistrantsModal/EventRegistrantsModal.module.css
@@ -0,0 +1,43 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/EventRegistrantsModal/EventRegistrantsModal.test.tsx b/src/components/EventRegistrantsModal/EventRegistrantsModal.test.tsx
new file mode 100644
index 0000000000..8ca76393cd
--- /dev/null
+++ b/src/components/EventRegistrantsModal/EventRegistrantsModal.test.tsx
@@ -0,0 +1,403 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { EventRegistrantsModal } from './EventRegistrantsModal';
+import { EVENT_ATTENDEES, MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import {
+  ADD_EVENT_ATTENDEE,
+  REMOVE_EVENT_ATTENDEE,
+} from 'GraphQl/Mutations/mutations';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+const queryMockWithoutRegistrant = [
+  {
+    request: {
+      query: EVENT_ATTENDEES,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          attendees: [],
+        },
+      },
+    },
+  },
+];
+
+const queryMockWithRegistrant = [
+  {
+    request: {
+      query: EVENT_ATTENDEES,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          attendees: [
+            {
+              _id: 'user1',
+              firstName: 'John',
+              lastName: 'Doe',
+              createdAt: '2023-01-01',
+              gender: 'Male',
+              birthDate: '1990-01-01',
+              eventsAttended: {
+                _id: 'event123',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const queryMockOrgMembers = [
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: { id: 'org123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'org123',
+            members: [
+              {
+                _id: 'user1',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'johndoe@example.com',
+                createdAt: '2023-01-01',
+                organizationsBlockedBy: [],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+const queryMockWithoutOrgMembers = [
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: { id: 'org123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'org123',
+            members: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const successfulAddRegistrantMock = [
+  {
+    request: {
+      query: ADD_EVENT_ATTENDEE,
+      variables: { userId: 'user1', eventId: 'event123' },
+    },
+    result: {
+      data: {
+        addEventAttendee: { _id: 'user1' },
+      },
+    },
+  },
+];
+
+const unsuccessfulAddRegistrantMock = [
+  {
+    request: {
+      query: ADD_EVENT_ATTENDEE,
+      variables: { userId: 'user1', eventId: 'event123' },
+    },
+    error: new Error('Oops'),
+  },
+];
+
+const successfulRemoveRegistrantMock = [
+  {
+    request: {
+      query: REMOVE_EVENT_ATTENDEE,
+      variables: { userId: 'user1', eventId: 'event123' },
+    },
+    result: {
+      data: {
+        removeEventAttendee: { _id: 'user1' },
+      },
+    },
+  },
+];
+
+const unsuccessfulRemoveRegistrantMock = [
+  {
+    request: {
+      query: REMOVE_EVENT_ATTENDEE,
+      variables: { userId: 'user1', eventId: 'event123' },
+    },
+    error: new Error('Oops'),
+  },
+];
+
+describe('Testing Event Registrants Modal', () => {
+  const props = {
+    show: true,
+    eventId: 'event123',
+    orgId: 'org123',
+    handleClose: jest.fn(),
+  };
+
+  test('The modal should be rendered, correct text must be displayed when there are no attendees and add attendee mutation must function properly', async () => {
+    const { queryByText, queryByLabelText } = render(
+      <MockedProvider
+        addTypename={false}
+        mocks={[
+          ...queryMockWithoutRegistrant,
+          ...queryMockOrgMembers,
+          ...successfulAddRegistrantMock,
+        ]}
+      >
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <EventRegistrantsModal {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Event Registrants')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Registered Registrants')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(
+        queryByText('There are no registered attendees for this event.'),
+      ).toBeInTheDocument(),
+    );
+
+    // Get warning modal on blank button click
+    fireEvent.click(queryByText('Add Registrant') as Element);
+
+    await waitFor(() =>
+      expect(
+        queryByText('Please choose an user to add first!'),
+      ).toBeInTheDocument(),
+    );
+
+    // Choose a user to add as an attendee
+    const attendeeInput = queryByLabelText('Add an Registrant');
+    fireEvent.change(attendeeInput as Element, {
+      target: { value: 'John Doe' },
+    });
+    fireEvent.keyDown(attendeeInput as HTMLElement, { key: 'ArrowDown' });
+    fireEvent.keyDown(attendeeInput as HTMLElement, { key: 'Enter' });
+
+    fireEvent.click(queryByText('Add Registrant') as Element);
+
+    await waitFor(() =>
+      expect(queryByText('Adding the attendee...')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Attendee added Successfully')).toBeInTheDocument(),
+    );
+  });
+
+  test('Add attendee mutation must fail properly', async () => {
+    const { queryByText, queryByLabelText } = render(
+      <MockedProvider
+        addTypename={false}
+        mocks={[
+          ...queryMockWithoutRegistrant,
+          ...queryMockOrgMembers,
+          ...unsuccessfulAddRegistrantMock,
+        ]}
+      >
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <EventRegistrantsModal {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(
+        queryByText('There are no registered attendees for this event.'),
+      ).toBeInTheDocument(),
+    );
+
+    // Choose a user to add as an attendee
+    const attendeeInput = queryByLabelText('Add an Registrant');
+    fireEvent.change(attendeeInput as Element, {
+      target: { value: 'John Doe' },
+    });
+    fireEvent.keyDown(attendeeInput as HTMLElement, { key: 'ArrowDown' });
+    fireEvent.keyDown(attendeeInput as HTMLElement, { key: 'Enter' });
+
+    fireEvent.click(queryByText('Add Registrant') as Element);
+
+    await waitFor(() =>
+      expect(queryByText('Adding the attendee...')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Error adding attendee')).toBeInTheDocument(),
+    );
+  });
+
+  test('Assigned attendees must be shown with badges and delete attendee mutation must function properly', async () => {
+    const { queryByText, queryByTestId } = render(
+      <MockedProvider
+        addTypename={false}
+        mocks={[
+          ...queryMockWithRegistrant,
+          ...queryMockOrgMembers,
+          ...successfulRemoveRegistrantMock,
+        ]}
+      >
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <EventRegistrantsModal {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Registered Registrants')).toBeInTheDocument(),
+    );
+
+    await waitFor(() => expect(queryByText('John Doe')).toBeInTheDocument());
+
+    fireEvent.click(queryByTestId('CancelIcon') as Element);
+
+    await waitFor(() =>
+      expect(queryByText('Removing the attendee...')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Attendee removed Successfully')).toBeInTheDocument(),
+    );
+  });
+
+  test('Delete attendee mutation must fail properly', async () => {
+    const { queryByText, getByTestId } = render(
+      <MockedProvider
+        addTypename={false}
+        mocks={[
+          ...queryMockWithRegistrant,
+          ...queryMockOrgMembers,
+          ...unsuccessfulRemoveRegistrantMock,
+        ]}
+      >
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <EventRegistrantsModal {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Registered Registrants')).toBeInTheDocument(),
+    );
+
+    await waitFor(() => expect(queryByText('John Doe')).toBeInTheDocument());
+
+    const deleteButton = getByTestId('CancelIcon');
+    fireEvent.click(deleteButton);
+
+    await waitFor(() =>
+      expect(queryByText('Removing the attendee...')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Error removing attendee')).toBeInTheDocument(),
+    );
+  });
+  test('Autocomplete functionality works correctly', async () => {
+    const { getByTitle, getByText, getByPlaceholderText } = render(
+      <MockedProvider
+        addTypename={false}
+        mocks={[...queryMockWithoutRegistrant, ...queryMockWithoutOrgMembers]}
+      >
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <EventRegistrantsModal {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for loading state to finish
+    await waitFor(() => {
+      const autocomplete = getByPlaceholderText(
+        'Choose the user that you want to add',
+      );
+      expect(autocomplete).toBeInTheDocument();
+    });
+
+    // Test empty state with no options
+    const autocomplete = getByPlaceholderText(
+      'Choose the user that you want to add',
+    );
+    fireEvent.change(autocomplete, { target: { value: 'NonexistentUser' } });
+
+    await waitFor(() => {
+      expect(getByText('No Registrations found')).toBeInTheDocument();
+      expect(getByText('Add Onspot Registration')).toBeInTheDocument();
+    });
+
+    // Test clicking "Add Onspot Registration"
+    fireEvent.click(getByText('Add Onspot Registration'));
+    expect(getByText('Add Onspot Registration')).toBeInTheDocument();
+    const closeButton = getByTitle('Close');
+    fireEvent.click(closeButton);
+  });
+});
diff --git a/src/components/EventRegistrantsModal/EventRegistrantsModal.tsx b/src/components/EventRegistrantsModal/EventRegistrantsModal.tsx
new file mode 100644
index 0000000000..d48d3b7439
--- /dev/null
+++ b/src/components/EventRegistrantsModal/EventRegistrantsModal.tsx
@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import { useMutation, useQuery } from '@apollo/client';
+import { EVENT_ATTENDEES, MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import {
+  ADD_EVENT_ATTENDEE,
+  REMOVE_EVENT_ATTENDEE,
+} from 'GraphQl/Mutations/mutations';
+import styles from 'components/EventRegistrantsModal/EventRegistrantsModal.module.css';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+import { useTranslation } from 'react-i18next';
+import AddOnSpotAttendee from './AddOnSpotAttendee';
+
+// Props for the EventRegistrantsModal component
+type ModalPropType = {
+  show: boolean;
+  eventId: string;
+  orgId: string;
+  handleClose: () => void;
+};
+
+// User information interface
+interface InterfaceUser {
+  _id: string;
+  firstName: string;
+  lastName: string;
+}
+
+/**
+ * Modal component for managing event registrants.
+ * Allows adding and removing attendees from an event.
+ *
+ * @param show - Whether the modal is visible or not.
+ * @param eventId - The ID of the event.
+ * @param orgId - The ID of the organization.
+ * @param handleClose - Function to close the modal.
+ * @returns JSX element representing the modal.
+ */
+export const EventRegistrantsModal = (props: ModalPropType): JSX.Element => {
+  const { eventId, orgId, handleClose, show } = props;
+  const [member, setMember] = useState<InterfaceUser | null>(null);
+  const [open, setOpen] = useState(false);
+
+  // Hooks for mutation operations
+  const [addRegistrantMutation] = useMutation(ADD_EVENT_ATTENDEE);
+  const [removeRegistrantMutation] = useMutation(REMOVE_EVENT_ATTENDEE);
+
+  // Translation hooks
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventRegistrantsModal',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Query hooks to fetch event attendees and organization members
+  const {
+    data: attendeesData,
+    loading: attendeesLoading,
+    refetch: attendeesRefetch,
+  } = useQuery(EVENT_ATTENDEES, {
+    variables: { id: eventId },
+  });
+
+  const { data: memberData, loading: memberLoading } = useQuery(MEMBERS_LIST, {
+    variables: { id: orgId },
+  });
+
+  // Function to add a new registrant to the event
+  const addRegistrant = (): void => {
+    if (member == null) {
+      toast.warning('Please choose an user to add first!');
+      return;
+    }
+    toast.warn('Adding the attendee...');
+    addRegistrantMutation({
+      variables: {
+        userId: member._id,
+        eventId: eventId,
+      },
+    })
+      .then(() => {
+        toast.success(
+          tCommon('addedSuccessfully', { item: 'Attendee' }) as string,
+        );
+        attendeesRefetch(); // Refresh the list of attendees
+      })
+      .catch((err) => {
+        toast.error(t('errorAddingAttendee') as string);
+        toast.error(err.message);
+      });
+  };
+
+  // Function to remove a registrant from the event
+  const deleteRegistrant = (userId: string): void => {
+    toast.warn('Removing the attendee...');
+    removeRegistrantMutation({
+      variables: {
+        userId,
+        eventId: eventId,
+      },
+    })
+      .then(() => {
+        toast.success(
+          tCommon('removedSuccessfully', { item: 'Attendee' }) as string,
+        );
+        attendeesRefetch(); // Refresh the list of attendees
+      })
+      .catch((err) => {
+        toast.error(t('errorRemovingAttendee') as string);
+        toast.error(err.message);
+      });
+  };
+
+  // Show a loading screen if data is still being fetched
+  if (attendeesLoading || memberLoading) {
+    return (
+      <>
+        <div className={styles.loader}></div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Modal show={show} onHide={handleClose} backdrop="static" centered>
+        <AddOnSpotAttendee
+          show={open}
+          handleClose={
+            /*istanbul ignore next */
+            () => setOpen(false)
+          }
+          reloadMembers={
+            /*istanbul ignore next */
+            () => {
+              attendeesRefetch();
+            }
+          }
+        />
+        <Modal.Header closeButton className="bg-primary">
+          <Modal.Title className="text-white">Event Registrants</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <h5 className="mb-2"> Registered Registrants </h5>
+          {attendeesData.event.attendees.length == 0
+            ? `There are no registered attendees for this event.`
+            : null}
+          <Stack direction="row" className="flex-wrap gap-2">
+            {attendeesData.event.attendees.map((attendee: InterfaceUser) => (
+              <Chip
+                avatar={
+                  <Avatar>{`${attendee.firstName[0]}${attendee.lastName[0]}`}</Avatar>
+                }
+                label={`${attendee.firstName} ${attendee.lastName}`}
+                variant="outlined"
+                key={attendee._id}
+                onDelete={(): void => deleteRegistrant(attendee._id)}
+              />
+            ))}
+          </Stack>
+          <br />
+
+          <Autocomplete
+            id="addRegistrant"
+            onChange={(_, newMember): void => {
+              setMember(newMember);
+            }}
+            noOptionsText={
+              <div className="d-flex ">
+                <p className="me-2">No Registrations found</p>
+                <span
+                  className="underline"
+                  onClick={() => {
+                    setOpen(true);
+                  }}
+                >
+                  Add Onspot Registration
+                </span>
+              </div>
+            }
+            options={memberData.organizations[0].members}
+            getOptionLabel={(member: InterfaceUser): string =>
+              `${member.firstName} ${member.lastName}`
+            }
+            renderInput={(params): React.ReactNode => (
+              <TextField
+                {...params}
+                data-testid="autocomplete"
+                label="Add an Registrant"
+                placeholder="Choose the user that you want to add"
+              />
+            )}
+          />
+          <br />
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="success" onClick={addRegistrant}>
+            Add Registrant
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/EventRegistrantsModal/EventRegistrantsWrapper.module.css b/src/components/EventRegistrantsModal/EventRegistrantsWrapper.module.css
new file mode 100644
index 0000000000..59b31333af
--- /dev/null
+++ b/src/components/EventRegistrantsModal/EventRegistrantsWrapper.module.css
@@ -0,0 +1,13 @@
+button .iconWrapper {
+  width: 36px;
+  padding-right: 4px;
+  margin-right: 4px;
+  transform: translateY(4px);
+}
+
+button .iconWrapperSm {
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/EventRegistrantsModal/EventRegistrantsWrapper.test.tsx b/src/components/EventRegistrantsModal/EventRegistrantsWrapper.test.tsx
new file mode 100644
index 0000000000..d1707e8520
--- /dev/null
+++ b/src/components/EventRegistrantsModal/EventRegistrantsWrapper.test.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { EventRegistrantsWrapper } from './EventRegistrantsWrapper';
+import { EVENT_ATTENDEES, MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+const queryMock = [
+  {
+    request: {
+      query: EVENT_ATTENDEES,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          attendees: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: { id: 'org123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'org123',
+            members: [
+              {
+                _id: 'user1',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@palisadoes.com',
+                image: '',
+                createdAt: '12/12/22',
+                organizationsBlockedBy: [],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+describe('Testing Event Registrants Wrapper', () => {
+  const props = {
+    eventId: 'event123',
+    orgId: 'org123',
+  };
+
+  test('The button should work properly', async () => {
+    const { queryByText, queryByRole } = render(
+      <MockedProvider addTypename={false} mocks={queryMock}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <EventRegistrantsWrapper {...props} />
+              </I18nextProvider>
+            </Provider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Open the modal
+    fireEvent.click(queryByText('Show Registrants') as Element);
+
+    await waitFor(() =>
+      expect(queryByText('Event Registrants')).toBeInTheDocument(),
+    );
+
+    // Close the modal
+    fireEvent.click(queryByRole('button', { name: /close/i }) as HTMLElement);
+    await waitFor(() =>
+      expect(queryByText('Event Registrants')).not.toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx b/src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx
new file mode 100644
index 0000000000..b198fcdd6d
--- /dev/null
+++ b/src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { EventRegistrantsModal } from './EventRegistrantsModal';
+import { Button } from 'react-bootstrap';
+import IconComponent from 'components/IconComponent/IconComponent';
+import styles from './EventRegistrantsWrapper.module.css';
+
+// Props for the EventRegistrantsWrapper component
+type PropType = {
+  eventId: string;
+  orgId: string;
+};
+
+/**
+ * Wrapper component that displays a button to show the event registrants modal.
+ *
+ * @param eventId - The ID of the event.
+ * @param orgId - The ID of the organization.
+ * @returns JSX element representing the wrapper with a button to show the modal.
+ */
+export const EventRegistrantsWrapper = ({
+  eventId,
+  orgId,
+}: PropType): JSX.Element => {
+  // State to control the visibility of the modal
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      {/* Button to open the event registrants modal */}
+      <Button
+        variant="light"
+        className="text-secondary"
+        aria-label="showAttendees"
+        onClick={(): void => {
+          setShowModal(true); // Show the modal when button is clicked
+        }}
+      >
+        <div className={styles.iconWrapper}>
+          <IconComponent
+            name="List Event Registrants"
+            fill="var(--bs-secondary)"
+          />
+        </div>
+        Show Registrants
+      </Button>
+
+      {/* Render the EventRegistrantsModal if showModal is true */}
+      {showModal && (
+        <EventRegistrantsModal
+          show={showModal}
+          handleClose={(): void => {
+            setShowModal(false); // Hide the modal when closed
+          }}
+          eventId={eventId}
+          orgId={orgId}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/components/EventStats/EventStats.module.css b/src/components/EventStats/EventStats.module.css
new file mode 100644
index 0000000000..44ba75a0a8
--- /dev/null
+++ b/src/components/EventStats/EventStats.module.css
@@ -0,0 +1,35 @@
+.stackEvents {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 20px;
+  padding: 10px 20px;
+  overflow: hidden;
+  gap: 2px;
+  column-gap: 2px;
+}
+
+@media screen and (min-width: 801px) {
+  .stackEvents {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 2rem;
+    margin: 0 40px;
+    gap: 5px;
+    column-gap: 4px;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 800px) {
+  .stackEvents {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 2rem;
+    margin: 0 20px;
+    gap: 5px;
+    column-gap: 4px;
+  }
+}
diff --git a/src/components/EventStats/EventStats.test.tsx b/src/components/EventStats/EventStats.test.tsx
new file mode 100644
index 0000000000..e2496fa5af
--- /dev/null
+++ b/src/components/EventStats/EventStats.test.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { EventStats } from './EventStats';
+import { BrowserRouter } from 'react-router-dom';
+import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
+
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+// These modules are used by the Feedback component
+jest.mock('@mui/x-charts/PieChart', () => ({
+  pieArcLabelClasses: jest.fn(),
+  PieChart: jest.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: jest.fn(),
+}));
+
+const mockData = [
+  {
+    request: {
+      query: EVENT_FEEDBACKS,
+      variables: {
+        id: 'eventStats123',
+      },
+    },
+    result: {
+      data: {
+        event: {
+          _id: 'eventStats123',
+          feedback: [
+            {
+              _id: 'feedback1',
+              review: 'review1',
+              rating: 5,
+            },
+          ],
+          averageFeedbackScore: 5,
+        },
+      },
+    },
+  },
+];
+
+describe('Testing Event Stats', () => {
+  const props = {
+    eventId: 'eventStats123',
+    show: true,
+    handleClose: jest.fn(),
+  };
+
+  test('The stats should be rendered properly', async () => {
+    const { queryByText } = render(
+      <MockedProvider mocks={mockData} addTypename={false}>
+        <BrowserRouter>
+          <EventStats {...props} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Event Statistics')).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/EventStats/EventStats.tsx b/src/components/EventStats/EventStats.tsx
new file mode 100644
index 0000000000..ce1e55e4bc
--- /dev/null
+++ b/src/components/EventStats/EventStats.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import { FeedbackStats } from './Statistics/Feedback';
+import { ReviewStats } from './Statistics/Review';
+import { AverageRating } from './Statistics/AverageRating';
+import styles from './Loader.module.css';
+import eventStatsStyles from './EventStats.module.css';
+import { useQuery } from '@apollo/client';
+import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
+
+// Props for the EventStats component
+type ModalPropType = {
+  show: boolean;
+  eventId: string;
+  handleClose: () => void;
+};
+
+/**
+ * Component that displays event statistics in a modal.
+ * Shows feedback, reviews, and average rating for the event.
+ *
+ * @param show - Whether the modal is visible or not.
+ * @param handleClose - Function to close the modal.
+ * @param eventId - The ID of the event.
+ * @returns JSX element representing the event statistics modal.
+ */
+export const EventStats = ({
+  show,
+  handleClose,
+  eventId,
+}: ModalPropType): JSX.Element => {
+  // Query to fetch event feedback data
+  const { data, loading } = useQuery(EVENT_FEEDBACKS, {
+    variables: { id: eventId },
+  });
+
+  // Show a loading screen while data is being fetched
+  if (loading) {
+    return (
+      <>
+        <div className={styles.loader}></div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Modal
+        show={show}
+        onHide={handleClose} // Close the modal when clicking outside or the close button
+        backdrop="static"
+        centered
+        size="lg"
+      >
+        <Modal.Header closeButton className="bg-primary">
+          <Modal.Title className="text-white">Event Statistics</Modal.Title>
+        </Modal.Header>
+        <Modal.Body className={eventStatsStyles.stackEvents}>
+          {/* Render feedback statistics */}
+          <FeedbackStats data={data} />
+          <div>
+            {/* Render review statistics and average rating */}
+            <ReviewStats data={data} />
+            <AverageRating data={data} />
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/EventStats/EventStatsWrapper.module.css b/src/components/EventStats/EventStatsWrapper.module.css
new file mode 100644
index 0000000000..f5f42546c3
--- /dev/null
+++ b/src/components/EventStats/EventStatsWrapper.module.css
@@ -0,0 +1,13 @@
+button .iconWrapper {
+  width: 32px;
+  padding-right: 4px;
+  margin-right: 4px;
+  transform: translateY(4px);
+}
+
+button .iconWrapperSm {
+  width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/EventStats/EventStatsWrapper.test.tsx b/src/components/EventStats/EventStatsWrapper.test.tsx
new file mode 100644
index 0000000000..0e64ac13cc
--- /dev/null
+++ b/src/components/EventStats/EventStatsWrapper.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { EventStatsWrapper } from './EventStatsWrapper';
+import { BrowserRouter } from 'react-router-dom';
+import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
+
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+jest.mock('@mui/x-charts/PieChart', () => ({
+  pieArcLabelClasses: jest.fn(),
+  PieChart: jest.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: jest.fn(),
+}));
+
+const mockData = [
+  {
+    request: {
+      query: EVENT_FEEDBACKS,
+      variables: {
+        id: 'eventStats123',
+      },
+    },
+    result: {
+      data: {
+        event: {
+          _id: 'eventStats123',
+          feedback: [
+            {
+              _id: 'feedback1',
+              review: 'review1',
+              rating: 5,
+            },
+          ],
+          averageFeedbackScore: 5,
+        },
+      },
+    },
+  },
+];
+
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+// These modules are used by the Feedback component
+jest.mock('@mui/x-charts/PieChart', () => ({
+  pieArcLabelClasses: jest.fn(),
+  PieChart: jest.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: jest.fn(),
+}));
+
+describe('Testing Event Stats Wrapper', () => {
+  const props = {
+    eventId: 'eventStats123',
+  };
+
+  test('The button to open and close the modal should work properly', async () => {
+    const { queryByText, queryByRole } = render(
+      <MockedProvider mocks={mockData} addTypename={false}>
+        <BrowserRouter>
+          <EventStatsWrapper {...props} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Open the modal
+    fireEvent.click(queryByText('View Event Statistics') as Element);
+
+    await waitFor(() =>
+      expect(queryByText('Event Statistics')).toBeInTheDocument(),
+    );
+
+    // Close the modal
+    fireEvent.click(queryByRole('button', { name: /close/i }) as HTMLElement);
+    await waitFor(() =>
+      expect(queryByText('Event Statistics')).not.toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/EventStats/EventStatsWrapper.tsx b/src/components/EventStats/EventStatsWrapper.tsx
new file mode 100644
index 0000000000..fb701a00da
--- /dev/null
+++ b/src/components/EventStats/EventStatsWrapper.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { EventStats } from './EventStats';
+import { Button } from 'react-bootstrap';
+import IconComponent from 'components/IconComponent/IconComponent';
+import styles from './EventStatsWrapper.module.css';
+
+// Props for the EventStatsWrapper component
+type PropType = {
+  eventId: string;
+};
+
+/**
+ * Wrapper component that displays a button to show event statistics.
+ *
+ * @param eventId - The ID of the event.
+ * @returns JSX element representing the wrapper with a button to view event statistics.
+ */
+export const EventStatsWrapper = ({ eventId }: PropType): JSX.Element => {
+  // State to control the visibility of the EventStats component
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      {/* Button to open the event statistics view */}
+      <Button
+        variant="light"
+        className="text-secondary"
+        aria-label="checkInRegistrants"
+        onClick={(): void => {
+          setShowModal(true); // Show the EventStats component when button is clicked
+        }}
+      >
+        <div className={styles.iconWrapper}>
+          <IconComponent name="Event Stats" fill="var(--bs-secondary)" />
+        </div>
+        View Event Statistics
+      </Button>
+
+      {/* Render the EventStats component if showModal is true */}
+      <EventStats
+        show={showModal}
+        handleClose={(): void => setShowModal(false)} // Hide the EventStats component when closed
+        key={eventId || 'eventStatsDetails'} // Use eventId as key for the component
+        eventId={eventId}
+      />
+    </>
+  );
+};
diff --git a/src/components/EventStats/Loader.module.css b/src/components/EventStats/Loader.module.css
new file mode 100644
index 0000000000..0f78d81c01
--- /dev/null
+++ b/src/components/EventStats/Loader.module.css
@@ -0,0 +1,43 @@
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/EventStats/Statistics/AverageRating.test.tsx b/src/components/EventStats/Statistics/AverageRating.test.tsx
new file mode 100644
index 0000000000..01cf6461e3
--- /dev/null
+++ b/src/components/EventStats/Statistics/AverageRating.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { AverageRating } from './AverageRating';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+
+const props = {
+  data: {
+    event: {
+      _id: '123',
+      feedback: [
+        {
+          _id: 'feedback1',
+          review: 'review1',
+          rating: 5,
+        },
+        {
+          _id: 'feedback2',
+          review: 'review2',
+          rating: 5,
+        },
+        {
+          _id: 'feedback3',
+          review: null,
+          rating: 5,
+        },
+      ],
+      averageFeedbackScore: 5,
+    },
+  },
+};
+
+describe('Testing Average Rating Card', () => {
+  test('The component should be rendered and the Score should be shown', async () => {
+    const { queryByText } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <ToastContainer />
+            <AverageRating {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Average Review Score')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Rated 5.00 / 5')).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/EventStats/Statistics/AverageRating.tsx b/src/components/EventStats/Statistics/AverageRating.tsx
new file mode 100644
index 0000000000..9f1a157e01
--- /dev/null
+++ b/src/components/EventStats/Statistics/AverageRating.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+import Rating from '@mui/material/Rating';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import Typography from '@mui/material/Typography';
+
+// Props for the AverageRating component
+type ModalPropType = {
+  data: {
+    event: {
+      _id: string;
+      averageFeedbackScore: number;
+      feedback: FeedbackType[];
+    };
+  };
+};
+
+// Type representing individual feedback
+type FeedbackType = {
+  _id: string;
+  rating: number;
+  review: string | null;
+};
+
+/**
+ * Component that displays the average rating for an event.
+ * Shows a rating value and a star rating icon.
+ *
+ * @param data - Data containing the average feedback score to be displayed.
+ * @returns JSX element representing the average rating card with a star rating.
+ */
+export const AverageRating = ({ data }: ModalPropType): JSX.Element => {
+  return (
+    <>
+      <Card style={{ width: '300px' }}>
+        <Card.Body>
+          <Card.Title>
+            <h4>Average Review Score</h4>
+          </Card.Title>
+          <Typography component="legend">
+            Rated {data.event.averageFeedbackScore.toFixed(2)} / 5
+          </Typography>
+          <Rating
+            name="customized-color"
+            precision={0.5}
+            max={5}
+            readOnly
+            value={data.event.averageFeedbackScore}
+            icon={<FavoriteIcon fontSize="inherit" />}
+            size="medium"
+            emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
+            sx={{
+              '& .MuiRating-iconFilled': {
+                color: '#ff6d75', // Color for filled stars
+              },
+              '& .MuiRating-iconHover': {
+                color: '#ff3d47', // Color for star on hover
+              },
+            }}
+          />
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
diff --git a/src/components/EventStats/Statistics/Feedback.test.tsx b/src/components/EventStats/Statistics/Feedback.test.tsx
new file mode 100644
index 0000000000..9abdee4c57
--- /dev/null
+++ b/src/components/EventStats/Statistics/Feedback.test.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { FeedbackStats } from './Feedback';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+
+// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Jest)
+jest.mock('@mui/x-charts/PieChart', () => ({
+  pieArcLabelClasses: jest.fn(),
+  PieChart: jest.fn().mockImplementation(() => <>Test</>),
+  pieArcClasses: jest.fn(),
+}));
+
+const nonEmptyProps = {
+  data: {
+    event: {
+      _id: '123',
+      feedback: [
+        {
+          _id: 'feedback1',
+          review: 'review1',
+          rating: 5,
+        },
+        {
+          _id: 'feedback2',
+          review: 'review2',
+          rating: 5,
+        },
+        {
+          _id: 'feedback3',
+          review: null,
+          rating: 5,
+        },
+      ],
+      averageFeedbackScore: 5,
+    },
+  },
+};
+
+const emptyProps = {
+  data: {
+    event: {
+      _id: '123',
+      feedback: [],
+      averageFeedbackScore: 5,
+    },
+  },
+};
+
+describe('Testing Feedback Statistics Card', () => {
+  test('The component should be rendered and the feedback should be shown if present', async () => {
+    const { queryByText } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <ToastContainer />
+            <FeedbackStats {...nonEmptyProps} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Feedback Analysis')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(
+        queryByText('3 people have filled feedback for this event.'),
+      ).toBeInTheDocument(),
+    );
+
+    await waitFor(() => {
+      expect(queryByText('Test')).toBeInTheDocument();
+    });
+  });
+
+  test('The component should be rendered and message should be shown if no feedback is present', async () => {
+    const { queryByText } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <ToastContainer />
+            <FeedbackStats {...emptyProps} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    await waitFor(() =>
+      expect(queryByText('Feedback Analysis')).toBeInTheDocument(),
+    );
+
+    await waitFor(() =>
+      expect(
+        queryByText('Please ask attendees to submit feedback for insights!'),
+      ).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/EventStats/Statistics/Feedback.tsx b/src/components/EventStats/Statistics/Feedback.tsx
new file mode 100644
index 0000000000..a6a255828f
--- /dev/null
+++ b/src/components/EventStats/Statistics/Feedback.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  PieChart,
+  pieArcClasses,
+  pieArcLabelClasses,
+} from '@mui/x-charts/PieChart';
+import Card from 'react-bootstrap/Card';
+
+// Props for the FeedbackStats component
+type ModalPropType = {
+  data: {
+    event: {
+      _id: string;
+      averageFeedbackScore: number | null;
+      feedback: FeedbackType[];
+    };
+  };
+};
+
+// Type representing individual feedback
+type FeedbackType = {
+  _id: string;
+  rating: number;
+  review: string | null;
+};
+
+/**
+ * Component that displays a pie chart of feedback ratings for an event.
+ * Shows how many people gave each rating.
+ *
+ * @param data - Data containing event feedback to be displayed in the chart.
+ * @returns JSX element representing the feedback analysis card with a pie chart.
+ */
+export const FeedbackStats = ({ data }: ModalPropType): JSX.Element => {
+  // Colors for the pie chart slices, from green (high ratings) to red (low ratings)
+  const ratingColors = [
+    '#57bb8a', // Green
+    '#94bd77',
+    '#d4c86a',
+    '#e9b861',
+    '#e79a69',
+    '#dd776e', // Red
+  ];
+
+  // Count the number of feedbacks for each rating
+  const count: Record<number, number> = {};
+
+  data.event.feedback.forEach((feedback: FeedbackType) => {
+    if (feedback.rating in count) count[feedback.rating]++;
+    else count[feedback.rating] = 1;
+  });
+
+  // Prepare data for the pie chart
+  const chartData = [];
+  for (let rating = 0; rating <= 5; rating++) {
+    if (rating in count)
+      chartData.push({
+        id: rating,
+        value: count[rating],
+        label: `${rating} (${count[rating]})`,
+        color: ratingColors[5 - rating],
+      });
+  }
+
+  return (
+    <>
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            <h3>Feedback Analysis</h3>
+          </Card.Title>
+          <h5>
+            {data.event.feedback.length} people have filled feedback for this
+            event.
+          </h5>
+          {data.event.feedback.length ? (
+            <PieChart
+              colors={ratingColors}
+              series={[
+                {
+                  data: chartData,
+                  arcLabel: /* istanbul ignore next */ (item) =>
+                    `${item.id} (${item.value})`,
+                  innerRadius: 30,
+                  outerRadius: 120,
+                  paddingAngle: 2,
+                  cornerRadius: 5,
+                  startAngle: 0,
+                  highlightScope: { faded: 'global', highlighted: 'item' },
+                  faded: { innerRadius: 30, additionalRadius: -30 },
+                },
+              ]}
+              sx={{
+                [`& .${pieArcClasses.faded}`]: {
+                  fill: 'gray',
+                },
+                [`& .${pieArcLabelClasses.root}`]: {
+                  fill: 'black',
+                  fontSize: '15px',
+                },
+                [`& .${pieArcLabelClasses.faded}`]: {
+                  display: 'none',
+                },
+              }}
+              width={380}
+              height={380}
+            />
+          ) : (
+            <>Please ask attendees to submit feedback for insights!</>
+          )}
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
diff --git a/src/components/EventStats/Statistics/Review.test.tsx b/src/components/EventStats/Statistics/Review.test.tsx
new file mode 100644
index 0000000000..9093444ab2
--- /dev/null
+++ b/src/components/EventStats/Statistics/Review.test.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { ReviewStats } from './Review';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { ToastContainer } from 'react-toastify';
+
+const nonEmptyReviewProps = {
+  data: {
+    event: {
+      _id: '123',
+      feedback: [
+        {
+          _id: 'feedback1',
+          review: 'review1',
+          rating: 5,
+        },
+        {
+          _id: 'feedback2',
+          review: 'review2',
+          rating: 5,
+        },
+        {
+          _id: 'feedback3',
+          review: null,
+          rating: 5,
+        },
+      ],
+      averageFeedbackScore: 5,
+    },
+  },
+};
+
+const emptyReviewProps = {
+  data: {
+    event: {
+      _id: '123',
+      feedback: [
+        {
+          _id: 'feedback3',
+          review: null,
+          rating: 5,
+        },
+      ],
+      averageFeedbackScore: 5,
+    },
+  },
+};
+
+describe('Testing Review Statistics Card', () => {
+  test('The component should be rendered and the reviews should be shown if present', async () => {
+    const { queryByText } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <ToastContainer />
+            <ReviewStats {...nonEmptyReviewProps} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    await waitFor(() => expect(queryByText('Reviews')).toBeInTheDocument());
+
+    await waitFor(() =>
+      expect(queryByText('Filled by 2 people.')).toBeInTheDocument(),
+    );
+
+    await waitFor(() => expect(queryByText('review2')).toBeInTheDocument());
+  });
+
+  test('The component should be rendered and message should be shown if no review is present', async () => {
+    const { queryByText } = render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <ToastContainer />
+            <ReviewStats {...emptyReviewProps} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    await waitFor(() => expect(queryByText('Reviews')).toBeInTheDocument());
+
+    await waitFor(() =>
+      expect(
+        queryByText('Waiting for people to talk about the event...'),
+      ).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/EventStats/Statistics/Review.tsx b/src/components/EventStats/Statistics/Review.tsx
new file mode 100644
index 0000000000..343a8107c3
--- /dev/null
+++ b/src/components/EventStats/Statistics/Review.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+import Rating from '@mui/material/Rating';
+
+// Props for the ReviewStats component
+type ModalPropType = {
+  data: {
+    event: {
+      _id: string;
+      averageFeedbackScore: number | null;
+      feedback: FeedbackType[];
+    };
+  };
+};
+
+// Type representing individual feedback
+type FeedbackType = {
+  _id: string;
+  rating: number;
+  review: string | null;
+};
+
+/**
+ * Component that displays reviews for an event.
+ * Shows a list of reviews with ratings and text.
+ *
+ * @param data - Data containing event feedback to be displayed.
+ * @returns JSX element representing the reviews card.
+ */
+export const ReviewStats = ({ data }: ModalPropType): JSX.Element => {
+  // Filter out feedback that has a review
+  const reviews = data.event.feedback.filter(
+    (feedback: FeedbackType) => feedback.review != null,
+  );
+
+  return (
+    <>
+      <Card
+        style={{
+          width: '300px',
+          maxHeight: '350px',
+          overflow: 'auto',
+          marginBottom: '5px',
+        }}
+      >
+        <Card.Body>
+          <Card.Title>
+            <h3>Reviews</h3>
+          </Card.Title>
+          <h5>Filled by {reviews.length} people.</h5>
+          {reviews.length ? (
+            reviews.map((review) => (
+              <div className="card user-review m-1" key={review._id}>
+                <div className="card-body">
+                  <Rating name="read-only" value={review.rating} readOnly />
+                  <p className="card-text">{review.review}</p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <>Waiting for people to talk about the event...</>
+          )}
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
diff --git a/src/components/HolidayCards/HolidayCard.module.css b/src/components/HolidayCards/HolidayCard.module.css
new file mode 100644
index 0000000000..c7686ab870
--- /dev/null
+++ b/src/components/HolidayCards/HolidayCard.module.css
@@ -0,0 +1,12 @@
+.card {
+  background-color: #b4dcb7;
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  padding: 8px 4px;
+  border-radius: 5px;
+  margin-bottom: 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/src/components/HolidayCards/HolidayCard.tsx b/src/components/HolidayCards/HolidayCard.tsx
new file mode 100644
index 0000000000..56ac86405d
--- /dev/null
+++ b/src/components/HolidayCards/HolidayCard.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './HolidayCard.module.css';
+
+// Props for the HolidayCard component
+interface InterfaceHolidayList {
+  holidayName: string;
+}
+
+/**
+ * Component that displays a card with the name of a holiday.
+ *
+ * @param props - Contains the holidayName to be displayed on the card.
+ * @returns JSX element representing a card with the holiday name.
+ */
+const HolidayCard = (props: InterfaceHolidayList): JSX.Element => {
+  /*istanbul ignore next*/
+  return <div className={styles.card}>{props?.holidayName}</div>;
+};
+
+export default HolidayCard;
diff --git a/src/components/IconComponent/IconComponent.test.tsx b/src/components/IconComponent/IconComponent.test.tsx
new file mode 100644
index 0000000000..3ba6ccd84d
--- /dev/null
+++ b/src/components/IconComponent/IconComponent.test.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import IconComponent from './IconComponent';
+
+const screenTestIdMap: Record<string, Record<string, string>> = {
+  MyOrganizations: {
+    name: 'My Organizations',
+    testId: 'Icon-Component-MyOrganizationsIcon',
+  },
+  Dashboard: {
+    name: 'Dashboard',
+    testId: 'Icon-Component-DashboardIcon',
+  },
+  People: {
+    name: 'People',
+    testId: 'Icon-Component-PeopleIcon',
+  },
+  Tags: {
+    name: 'Tags',
+    testId: 'Icon-Component-TagsIcon',
+  },
+  Tag: {
+    name: 'Tag',
+    testId: 'Icon-Component-TagIcon',
+  },
+  Requests: {
+    name: 'Requests',
+    testId: 'Icon-Component-RequestsIcon',
+  },
+  Events: {
+    name: 'Events',
+    testId: 'Icon-Component-EventsIcon',
+  },
+  ActionItems: {
+    name: 'Action Items',
+    testId: 'Icon-Component-ActionItemIcon',
+  },
+  Posts: {
+    name: 'Posts',
+    testId: 'Icon-Component-PostsIcon',
+  },
+  BlockUnblock: {
+    name: 'Block/Unblock',
+    testId: 'Block/Icon-Component-UnblockIcon',
+  },
+  Plugins: {
+    name: 'Plugins',
+    testId: 'Icon-Component-PluginsIcon',
+  },
+  Settings: {
+    name: 'Settings',
+    testId: 'Icon-Component-SettingsIcon',
+  },
+  ListEventRegistrants: {
+    name: 'List Event Registrants',
+    testId: 'Icon-Component-List-Event-Registrants',
+  },
+  CheckInRegistrants: {
+    name: 'Check In Registrants',
+    testId: 'Icon-Component-Check-In-Registrants',
+  },
+  Advertisement: {
+    name: 'Advertisement',
+    testId: 'Icon-Component-Advertisement',
+  },
+  Funds: {
+    name: 'Funds',
+    testId: 'Icon-Component-Funds',
+  },
+  Venues: {
+    name: 'Venues',
+    testId: 'Icon-Component-Venues',
+  },
+  Donate: {
+    name: 'Donate',
+    testId: 'Icon-Component-Donate',
+  },
+  Campaigns: {
+    name: 'Campaigns',
+    testId: 'Icon-Component-Campaigns',
+  },
+  MyPledges: {
+    name: 'My Pledges',
+    testId: 'Icon-Component-My-Pledges',
+  },
+  Volunteer: {
+    name: 'Volunteer',
+    testId: 'Icon-Component-Volunteer',
+  },
+  default: {
+    name: 'default',
+    testId: 'Icon-Component-DefaultIcon',
+  },
+};
+
+describe('Testing Collapsible Dropdown component', () => {
+  it('Renders the correct icon according to the component', () => {
+    for (const component in screenTestIdMap) {
+      render(<IconComponent name={screenTestIdMap[component].name} />);
+      expect(
+        screen.getByTestId(screenTestIdMap[component].testId),
+      ).toBeInTheDocument();
+    }
+  });
+});
diff --git a/src/components/IconComponent/IconComponent.tsx b/src/components/IconComponent/IconComponent.tsx
new file mode 100644
index 0000000000..8430aca131
--- /dev/null
+++ b/src/components/IconComponent/IconComponent.tsx
@@ -0,0 +1,157 @@
+import {
+  QuestionMarkOutlined,
+  ContactPageOutlined,
+  NewspaperOutlined,
+} from '@mui/icons-material';
+import ActionItemIcon from 'assets/svgs/actionItem.svg?react';
+import BlockUserIcon from 'assets/svgs/blockUser.svg?react';
+import CheckInRegistrantsIcon from 'assets/svgs/checkInRegistrants.svg?react';
+import DashboardIcon from 'assets/svgs/dashboard.svg?react';
+import EventsIcon from 'assets/svgs/events.svg?react';
+import FundsIcon from 'assets/svgs/funds.svg?react';
+import ListEventRegistrantsIcon from 'assets/svgs/listEventRegistrants.svg?react';
+import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
+import PeopleIcon from 'assets/svgs/people.svg?react';
+import TagsIcon from 'assets/svgs/tags.svg?react';
+import TagIcon from 'assets/svgs/tag.svg?react';
+import PluginsIcon from 'assets/svgs/plugins.svg?react';
+import PostsIcon from 'assets/svgs/posts.svg?react';
+import SettingsIcon from 'assets/svgs/settings.svg?react';
+import VenueIcon from 'assets/svgs/venues.svg?react';
+import RequestsIcon from 'assets/svgs/requests.svg?react';
+import { MdOutlineVolunteerActivism } from 'react-icons/md';
+
+import React from 'react';
+
+export interface InterfaceIconComponent {
+  name: string;
+  fill?: string;
+  height?: string;
+  width?: string;
+}
+/**
+ * Renders an icon based on the provided name.
+ *
+ * @param props - Contains the name of the icon and optional styles (fill, height, width).
+ * @returns JSX element representing the icon.
+ */
+const iconComponent = (props: InterfaceIconComponent): JSX.Element => {
+  switch (props.name) {
+    case 'My Organizations':
+      return (
+        <OrganizationsIcon
+          stroke={props.fill}
+          data-testid="Icon-Component-MyOrganizationsIcon"
+        />
+      );
+    case 'Dashboard':
+      return (
+        <DashboardIcon {...props} data-testid="Icon-Component-DashboardIcon" />
+      );
+    case 'People':
+      return <PeopleIcon {...props} data-testid="Icon-Component-PeopleIcon" />;
+    case 'Tags':
+      return <TagsIcon {...props} data-testid="Icon-Component-TagsIcon" />;
+    case 'Tag':
+      return <TagIcon {...props} data-testid="Icon-Component-TagIcon" />;
+    case 'Requests':
+      return (
+        <RequestsIcon {...props} data-testid="Icon-Component-RequestsIcon" />
+      );
+    case 'Events':
+      return <EventsIcon {...props} data-testid="Icon-Component-EventsIcon" />;
+    case 'Action Items':
+      return (
+        <ActionItemIcon
+          {...props}
+          data-testid="Icon-Component-ActionItemIcon"
+        />
+      );
+    case 'Posts':
+      return <PostsIcon {...props} data-testid="Icon-Component-PostsIcon" />;
+    case 'Block/Unblock':
+      return (
+        <BlockUserIcon
+          {...props}
+          data-testid="Block/Icon-Component-UnblockIcon"
+        />
+      );
+    case 'Plugins':
+      return (
+        <PluginsIcon
+          stroke={props.fill}
+          data-testid="Icon-Component-PluginsIcon"
+        />
+      );
+    case 'Settings':
+      return (
+        <SettingsIcon
+          stroke={props.fill}
+          data-testid="Icon-Component-SettingsIcon"
+        />
+      );
+    case 'List Event Registrants':
+      return (
+        <ListEventRegistrantsIcon
+          data-testid="Icon-Component-List-Event-Registrants"
+          stroke={props.fill}
+        />
+      );
+    case 'Check In Registrants':
+      return (
+        <CheckInRegistrantsIcon
+          data-testid="Icon-Component-Check-In-Registrants"
+          stroke={props.fill}
+        />
+      );
+    case 'Advertisement':
+      return (
+        <PostsIcon
+          data-testid="Icon-Component-Advertisement"
+          stroke={props.fill}
+        />
+      );
+    case 'Funds':
+      return (
+        <FundsIcon data-testid="Icon-Component-Funds" stroke={props.fill} />
+      );
+    case 'Venues':
+      return (
+        <VenueIcon data-testid="Icon-Component-Venues" stroke={props.fill} />
+      );
+    case 'Donate':
+      return (
+        <FundsIcon data-testid="Icon-Component-Donate" stroke={props.fill} />
+      );
+    case 'Campaigns':
+      return (
+        <NewspaperOutlined {...props} data-testid="Icon-Component-Campaigns" />
+      );
+    case 'My Pledges':
+      return (
+        <ContactPageOutlined
+          data-testid="Icon-Component-My-Pledges"
+          stroke={props.fill}
+        />
+      );
+    case 'Volunteer':
+      return (
+        <MdOutlineVolunteerActivism
+          fill={props.fill}
+          height={props.height}
+          width={props.width}
+          data-testid="Icon-Component-Volunteer"
+        />
+      );
+    default:
+      return (
+        <QuestionMarkOutlined
+          {...props}
+          fontSize="large"
+          data-testid="Icon-Component-DefaultIcon"
+        />
+      );
+  }
+};
+
+export default iconComponent;
diff --git a/src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css
new file mode 100644
index 0000000000..a5b609ae75
--- /dev/null
+++ b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css
@@ -0,0 +1,23 @@
+.simpleLoader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+  margin: 1rem 0;
+  border: 4px solid transparent;
+  border-top-color: var(--bs-gray-400);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/InfiniteScrollLoader/InfiniteScrollLoader.test.tsx b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.test.tsx
new file mode 100644
index 0000000000..1e179e0de0
--- /dev/null
+++ b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import InfiniteScrollLoader from './InfiniteScrollLoader';
+
+describe('Testing InfiniteScrollLoader component', () => {
+  test('Component should be rendered properly', () => {
+    render(<InfiniteScrollLoader />);
+
+    expect(screen.getByTestId('infiniteScrollLoader')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('infiniteScrollLoaderSpinner'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx
new file mode 100644
index 0000000000..7846889cdb
--- /dev/null
+++ b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './InfiniteScrollLoader.module.css';
+
+/**
+ * A Loader for infinite scroll.
+ */
+
+const InfiniteScrollLoader = (): JSX.Element => {
+  return (
+    <div data-testid="infiniteScrollLoader" className={styles.simpleLoader}>
+      <div
+        data-testid="infiniteScrollLoaderSpinner"
+        className={styles.spinner}
+      />
+    </div>
+  );
+};
+
+export default InfiniteScrollLoader;
diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
new file mode 100644
index 0000000000..86948b9930
--- /dev/null
+++ b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -0,0 +1,239 @@
+.leftDrawer {
+  width: calc(300px + 2rem);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 0 1rem;
+  background-color: #f6f8fc;
+  transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
+}
+
+.activeDrawer {
+  width: calc(300px + 2rem);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: comeToRightBigScreen 0.5s ease-in-out;
+}
+
+.inactiveDrawer {
+  position: fixed;
+  top: 0;
+  left: calc(-300px - 2rem);
+  bottom: 0;
+  animation: goToLeftBigScreen 0.5s ease-in-out;
+}
+
+.leftDrawer .talawaLogo {
+  width: 100%;
+  height: 65px;
+}
+
+.leftDrawer .talawaText {
+  font-size: 20px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.leftDrawer .titleHeader {
+  margin: 2rem 0 1rem 0;
+  font-weight: 600;
+}
+
+.leftDrawer .optionList button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: start;
+  margin-bottom: 0.8rem;
+  border-radius: 16px;
+  outline: none;
+  border: none;
+}
+
+.leftDrawer .optionList button .iconWrapper {
+  width: 36px;
+}
+
+.leftDrawer .profileContainer {
+  border: none;
+  width: 100%;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  background-color: var(--bs-white);
+}
+
+.leftDrawer .profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+
+.leftDrawer .imageContainer {
+  width: 68px;
+}
+
+.leftDrawer .profileContainer img {
+  height: 52px;
+  width: 52px;
+  border-radius: 50%;
+}
+
+.leftDrawer .profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+}
+
+.leftDrawer .profileContainer .profileText .primaryText {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.leftDrawer .profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+@media (max-width: 1120px) {
+  .leftDrawer {
+    width: calc(250px + 2rem);
+    padding: 1rem 1rem 0 1rem;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .hideElemByDefault {
+    display: none;
+  }
+
+  .leftDrawer {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .inactiveDrawer {
+    opacity: 0;
+    left: 0;
+    z-index: -1;
+    animation: closeDrawer 0.4s ease-in-out;
+  }
+
+  .activeDrawer {
+    display: flex;
+    z-index: 100;
+    animation: openDrawer 0.6s ease-in-out;
+  }
+
+  .logout {
+    margin-bottom: 2.5rem !important;
+  }
+}
+
+@keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+@keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+@keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx
new file mode 100644
index 0000000000..6701d2d4bb
--- /dev/null
+++ b/src/components/LeftDrawer/LeftDrawer.test.tsx
@@ -0,0 +1,226 @@
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceLeftDrawerProps } from './LeftDrawer';
+import LeftDrawer from './LeftDrawer';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { MockedProvider } from '@apollo/react-testing';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const props = {
+  hideDrawer: true,
+  setHideDrawer: jest.fn(),
+};
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+const propsOrg: InterfaceLeftDrawerProps = {
+  ...props,
+};
+
+const MOCKS = [
+  {
+    request: {
+      query: REVOKE_REFRESH_TOKEN,
+    },
+    result: {},
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+beforeEach(() => {
+  setItem('FirstName', 'John');
+  setItem('LastName', 'Doe');
+  setItem(
+    'UserImage',
+    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+  );
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  localStorage.clear();
+});
+
+describe('Testing Left Drawer component for SUPERADMIN', () => {
+  test('Component should be rendered properly', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawer {...propsOrg} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    expect(screen.getByText('My Organizations')).toBeInTheDocument();
+    expect(screen.getByText('Users')).toBeInTheDocument();
+    expect(screen.getByText('Community Profile')).toBeInTheDocument();
+    expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument();
+
+    const orgsBtn = screen.getByTestId(/orgsBtn/i);
+    const rolesBtn = screen.getByTestId(/rolesBtn/i);
+    const communityProfileBtn = screen.getByTestId(/communityProfileBtn/i);
+
+    await act(async () => {
+      orgsBtn.click();
+    });
+
+    expect(
+      orgsBtn.className.includes('text-white btn btn-success'),
+    ).toBeTruthy();
+    expect(rolesBtn.className.includes('text-secondary btn')).toBeTruthy();
+    expect(
+      communityProfileBtn.className.includes('text-secondary btn'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      userEvent.click(rolesBtn);
+    });
+
+    expect(global.window.location.pathname).toContain('/users');
+
+    await act(async () => {
+      userEvent.click(communityProfileBtn);
+    });
+  });
+
+  test('Testing Drawer when hideDrawer is null', async () => {
+    const tempProps: InterfaceLeftDrawerProps = {
+      ...props,
+      hideDrawer: false,
+    };
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawer {...tempProps} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+  });
+
+  test('Testing Drawer when hideDrawer is false', async () => {
+    const tempProps: InterfaceLeftDrawerProps = {
+      ...props,
+      hideDrawer: false,
+    };
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawer {...tempProps} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+  });
+
+  test('Testing Drawer when the screen size is less than or equal to 820px', async () => {
+    const tempProps: InterfaceLeftDrawerProps = {
+      ...props,
+      hideDrawer: false,
+    };
+    resizeWindow(800);
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawer {...tempProps} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    expect(screen.getByText('My Organizations')).toBeInTheDocument();
+    expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument();
+
+    const orgsBtn = screen.getByTestId(/orgsBtn/i);
+
+    await act(async () => {
+      orgsBtn.click();
+    });
+
+    expect(
+      orgsBtn.className.includes('text-white btn btn-success'),
+    ).toBeTruthy();
+  });
+});
+
+describe('Testing Left Drawer component for ADMIN', () => {
+  test('Components should be rendered properly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawer {...propsOrg} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    expect(screen.getByText('My Organizations')).toBeInTheDocument();
+    expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument();
+
+    expect(screen.getAllByText(/admin/i)).toHaveLength(1);
+
+    const orgsBtn = screen.getByTestId(/orgsBtn/i);
+
+    await act(async () => {
+      orgsBtn.click();
+    });
+
+    expect(
+      orgsBtn.className.includes('text-white btn btn-success'),
+    ).toBeTruthy();
+
+    // These screens aren't meant for admins, so they should not be present
+    expect(screen.queryByTestId(/rolesBtn/i)).toBeNull();
+
+    await act(async () => {
+      userEvent.click(orgsBtn);
+    });
+
+    expect(global.window.location.pathname).toContain('/orglist');
+  });
+});
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
new file mode 100644
index 0000000000..4628603ba1
--- /dev/null
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { NavLink } from 'react-router-dom';
+import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
+import RolesIcon from 'assets/svgs/roles.svg?react';
+import SettingsIcon from 'assets/svgs/settings.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
+import styles from './LeftDrawer.module.css';
+import useLocalStorage from 'utils/useLocalstorage';
+
+export interface InterfaceLeftDrawerProps {
+  hideDrawer: boolean | null; // Controls the visibility of the drawer
+  setHideDrawer: React.Dispatch<React.SetStateAction<boolean | null>>; // Function to set the visibility state
+}
+
+/**
+ * LeftDrawer component for displaying navigation options.
+ *
+ * @param hideDrawer - Determines if the drawer should be hidden or shown.
+ * @param setHideDrawer - Function to update the visibility state of the drawer.
+ * @returns JSX element for the left navigation drawer.
+ */
+const leftDrawer = ({
+  hideDrawer,
+  setHideDrawer,
+}: InterfaceLeftDrawerProps): JSX.Element => {
+  const { t } = useTranslation('translation', { keyPrefix: 'leftDrawer' });
+  const { t: tCommon } = useTranslation('common');
+
+  const { getItem } = useLocalStorage();
+  const superAdmin = getItem('SuperAdmin');
+
+  /**
+   * Handles link click to hide the drawer on smaller screens.
+   */
+  const handleLinkClick = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(true);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`${styles.leftDrawer} ${
+          hideDrawer === null
+            ? styles.hideElemByDefault
+            : hideDrawer
+              ? styles.inactiveDrawer
+              : styles.activeDrawer
+        }`}
+        data-testid="leftDrawerContainer"
+      >
+        <TalawaLogo className={styles.talawaLogo} />
+        <p className={styles.talawaText}>{tCommon('talawaAdminPortal')}</p>
+        <h5 className={`${styles.titleHeader} text-secondary`}>
+          {tCommon('menu')}
+        </h5>
+        <div className={styles.optionList}>
+          <NavLink to={'/orglist'} onClick={handleLinkClick}>
+            {({ isActive }) => (
+              <Button
+                variant={isActive === true ? 'success' : ''}
+                className={`${
+                  isActive === true ? 'text-white' : 'text-secondary'
+                }`}
+                data-testid="orgsBtn"
+              >
+                <div className={styles.iconWrapper}>
+                  <OrganizationsIcon
+                    stroke={`${
+                      isActive === true
+                        ? 'var(--bs-white)'
+                        : 'var(--bs-secondary)'
+                    }`}
+                  />
+                </div>
+                {t('my organizations')}
+              </Button>
+            )}
+          </NavLink>
+          {superAdmin && (
+            <>
+              <NavLink to={'/users'} onClick={handleLinkClick}>
+                {({ isActive }) => (
+                  <Button
+                    variant={isActive === true ? 'success' : ''}
+                    className={`${
+                      isActive === true ? 'text-white' : 'text-secondary'
+                    }`}
+                    data-testid="rolesBtn"
+                  >
+                    <div className={styles.iconWrapper}>
+                      <RolesIcon
+                        fill={`${
+                          isActive === true
+                            ? 'var(--bs-white)'
+                            : 'var(--bs-secondary)'
+                        }`}
+                      />
+                    </div>
+                    {tCommon('users')}
+                  </Button>
+                )}
+              </NavLink>
+              <NavLink to={'/communityProfile'} onClick={handleLinkClick}>
+                {({ isActive }) => (
+                  <Button
+                    variant={isActive === true ? 'success' : ''}
+                    className={`${
+                      isActive === true ? 'text-white' : 'text-secondary'
+                    }`}
+                    data-testid="communityProfileBtn"
+                  >
+                    <div className={styles.iconWrapper}>
+                      <SettingsIcon
+                        stroke={`${
+                          isActive === true
+                            ? 'var(--bs-white)'
+                            : 'var(--bs-secondary)'
+                        }`}
+                      />
+                    </div>
+                    {t('communityProfile')}
+                  </Button>
+                )}
+              </NavLink>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default leftDrawer;
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
new file mode 100644
index 0000000000..6296b1aa73
--- /dev/null
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -0,0 +1,362 @@
+.leftDrawer {
+  width: calc(300px + 2rem);
+  min-height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 0.8rem 0rem 0 1rem;
+  background-color: #f6f8fc;
+  transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
+}
+
+.avatarContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem 0;
+  width: 75%;
+  height: 75%;
+}
+
+.activeDrawer {
+  width: calc(300px + 2rem);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: comeToRightBigScreen 0.5s ease-in-out;
+}
+
+.inactiveDrawer {
+  position: fixed;
+  top: 0;
+  left: calc(-300px - 2rem);
+  bottom: 0;
+  animation: goToLeftBigScreen 0.5s ease-in-out;
+}
+
+.leftDrawer .brandingContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.leftDrawer .organizationContainer button {
+  position: relative;
+  margin: 0.7rem 0;
+  padding: 2.5rem 0.1rem;
+  border-radius: 16px;
+}
+
+.leftDrawer .talawaLogo {
+  width: 50px;
+  height: 50px;
+  margin-right: 0.3rem;
+}
+
+.leftDrawer .talawaText {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.leftDrawer .titleHeader {
+  font-weight: 600;
+  margin: 0.6rem 0rem;
+}
+
+.leftDrawer .optionList {
+  height: 100%;
+  overflow-y: scroll;
+  padding-bottom: 1.5rem;
+}
+
+.leftDrawer .optionList button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: start;
+  margin-bottom: 0.8rem;
+  border-radius: 16px;
+  font-size: 16px;
+  padding: 0.6rem;
+  padding-left: 0.8rem;
+  outline: none;
+  border: none;
+}
+
+.leftDrawer button .iconWrapper {
+  width: 36px;
+}
+
+.leftDrawer .optionList .collapseBtn {
+  height: 48px;
+  border: none;
+}
+
+.leftDrawer button .iconWrapperSm {
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.leftDrawer .organizationContainer .profileContainer {
+  background-color: #e0e9ff;
+  padding-right: 10px;
+}
+
+.leftDrawer .profileContainer {
+  border: none;
+  width: 100%;
+  height: 52px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  background-color: var(--bs-white);
+}
+
+.leftDrawer .profileContainer:focus {
+  outline: none;
+}
+
+.leftDrawer .imageContainer {
+  width: 68px;
+  margin-left: 0.75rem;
+  margin-right: 8px;
+}
+
+.leftDrawer .profileContainer img {
+  height: 52px;
+  width: 52px;
+  border-radius: 50%;
+}
+
+.leftDrawer .profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+}
+
+.leftDrawer .profileContainer .profileText .primaryText {
+  font-size: 1.1rem;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+.leftDrawer .profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  /* color: var(--bs-secondary); */
+  display: block;
+  text-transform: capitalize;
+}
+
+@media (max-width: 1120px) {
+  .leftDrawer {
+    width: calc(250px + 2rem);
+    padding: 1rem 0rem 0 1rem;
+  }
+}
+
+/* For tablets */
+@media (max-height: 900px) {
+  .leftDrawer {
+    width: calc(300px + 1rem);
+  }
+  .leftDrawer .talawaLogo {
+    width: 38px;
+    height: 38px;
+    margin-right: 0.4rem;
+  }
+  .leftDrawer .talawaText {
+    font-size: 1rem;
+  }
+  .leftDrawer .organizationContainer button {
+    margin: 0.6rem 0;
+    padding: 2.2rem 0.1rem;
+  }
+  .leftDrawer .optionList button {
+    margin-bottom: 0.05rem;
+    font-size: 16px;
+    padding-left: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .primaryText {
+    font-size: 1rem;
+  }
+  .leftDrawer .profileContainer .profileText .secondaryText {
+    font-size: 0.8rem;
+  }
+}
+@media (max-height: 650px) {
+  .leftDrawer {
+    padding: 0.5rem 0rem 0 0.8rem;
+    width: calc(250px);
+  }
+  .leftDrawer .talawaText {
+    font-size: 0.8rem;
+  }
+  .leftDrawer .organizationContainer button {
+    margin: 0.2rem 0;
+    padding: 1.6rem 0rem;
+  }
+  .leftDrawer .titleHeader {
+    font-size: 16px;
+  }
+  .leftDrawer .optionList button {
+    margin-bottom: 0.05rem;
+    font-size: 14px;
+    padding: 0.4rem;
+    padding-left: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .primaryText {
+    font-size: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .secondaryText {
+    font-size: 0.6rem;
+  }
+  .leftDrawer .imageContainer {
+    width: 40px;
+    margin-left: 0.75rem;
+    margin-right: 12px;
+  }
+  .leftDrawer .imageContainer img {
+    width: 40px;
+    height: 100%;
+  }
+}
+
+@media (max-width: 820px) {
+  .hideElemByDefault {
+    display: none;
+  }
+
+  .leftDrawer {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .inactiveDrawer {
+    opacity: 0;
+    left: 0;
+    z-index: -1;
+    animation: closeDrawer 0.2s ease-in-out;
+  }
+
+  .activeDrawer {
+    display: flex;
+    z-index: 100;
+    animation: openDrawer 0.4s ease-in-out;
+  }
+
+  .logout {
+    margin-bottom: 2.5rem;
+  }
+}
+
+@keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+@keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+@keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
new file mode 100644
index 0000000000..71f3593499
--- /dev/null
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
@@ -0,0 +1,474 @@
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceLeftDrawerProps } from './LeftDrawerOrg';
+import LeftDrawerOrg from './LeftDrawerOrg';
+import { Provider } from 'react-redux';
+import { MockedProvider } from '@apollo/react-testing';
+import { store } from 'state/store';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const props: InterfaceLeftDrawerProps = {
+  orgId: '123',
+  targets: [
+    {
+      name: 'Admin Profile',
+      url: '/member/123',
+    },
+    {
+      name: 'Dashboard',
+      url: '/orgdash/123',
+    },
+    {
+      name: 'People',
+      url: '/orgpeople/123',
+    },
+    {
+      name: 'Events',
+      url: '/orgevents/123',
+    },
+    {
+      name: 'Posts',
+      url: '/orgpost/123',
+    },
+    {
+      name: 'Block/Unblock',
+      url: '/blockuser/123',
+    },
+    {
+      name: 'Plugins',
+      subTargets: [
+        {
+          name: 'Plugin Store',
+          url: '/orgstore/123',
+          icon: 'fa-store',
+        },
+      ],
+    },
+    {
+      name: 'Settings',
+      url: '/orgsetting/123',
+    },
+    {
+      name: 'All Organizations',
+      url: '/orglist/123',
+    },
+  ],
+  hideDrawer: false,
+  setHideDrawer: jest.fn(),
+};
+
+const MOCKS = [
+  {
+    request: {
+      query: REVOKE_REFRESH_TOKEN,
+    },
+    result: {
+      data: {
+        revokeRefreshTokenForUser: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'JohnDoe@example.com',
+            },
+            name: 'Test Organization',
+            description: 'Testing this organization',
+            address: {
+              city: 'Delhi',
+              countryCode: 'IN',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '110001',
+              sortingCode: 'ABC-123',
+              state: 'Delhi',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: true,
+            members: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+              },
+              {
+                _id: 'jane123',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                email: 'JaneDoe@example.com',
+              },
+            ],
+            admins: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: [],
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const MOCKS_WITH_IMAGE = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image:
+              'https://api.dicebear.com/5.x/initials/svg?seed=Test%20Organization',
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'JohnDoe@example.com',
+            },
+            name: 'Test Organization',
+            description: 'Testing this organization',
+            address: {
+              city: 'Delhi',
+              countryCode: 'IN',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '110001',
+              sortingCode: 'ABC-123',
+              state: 'Delhi',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: true,
+            members: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+              },
+              {
+                _id: 'jane123',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                email: 'JaneDoe@example.com',
+              },
+            ],
+            admins: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: [],
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const MOCKS_EMPTY = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [],
+      },
+    },
+  },
+];
+
+const MOCKS_EMPTY_ORGID = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '' },
+    },
+    result: {
+      data: {
+        organizations: [],
+      },
+    },
+  },
+];
+
+const defaultScreens = [
+  'Dashboard',
+  'People',
+  'Events',
+  'Posts',
+  'Block/Unblock',
+  'Plugins',
+  'Settings',
+  'All Organizations',
+];
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+beforeEach(() => {
+  setItem('FirstName', 'John');
+  setItem('LastName', 'Doe');
+  setItem(
+    'UserImage',
+    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+  );
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  localStorage.clear();
+});
+
+const link = new StaticMockLink(MOCKS, true);
+const linkImage = new StaticMockLink(MOCKS_WITH_IMAGE, true);
+const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true);
+const linkEmptyOrgId = new StaticMockLink(MOCKS_EMPTY_ORGID, true);
+
+describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
+  test('Component should be rendered properly', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    defaultScreens.map((screenName) => {
+      expect(screen.getByText(screenName)).toBeInTheDocument();
+    });
+  });
+
+  test('Testing Profile Page & Organization Detail Modal', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(screen.getByTestId(/orgBtn/i)).toBeInTheDocument();
+  });
+
+  test('Should not show org not found error when viewing admin profile', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    setItem('id', '123');
+    render(
+      <MockedProvider addTypename={false} link={linkEmptyOrgId}>
+        <MemoryRouter initialEntries={['/member/123']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(
+      screen.queryByText(/Error occured while loading Organization data/i),
+    ).not.toBeInTheDocument();
+  });
+
+  test('Testing Menu Buttons', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByText('Dashboard'));
+    expect(global.window.location.pathname).toContain('/orgdash/123');
+  });
+
+  test('Testing when screen size is less than 820px', async () => {
+    setItem('SuperAdmin', true);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    resizeWindow(800);
+    expect(screen.getAllByText(/Dashboard/i)[0]).toBeInTheDocument();
+    expect(screen.getAllByText(/People/i)[0]).toBeInTheDocument();
+
+    const peopelBtn = screen.getByTestId(/People/i);
+    userEvent.click(peopelBtn);
+    await wait();
+    expect(window.location.pathname).toContain('/orgpeople/123');
+  });
+
+  test('Testing when image is present for Organization', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={linkImage}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('Testing when Organization does not exists', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={linkEmpty}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(
+      screen.getByText(/Error occured while loading Organization data/i),
+    ).toBeInTheDocument();
+  });
+
+  test('Testing Drawer when hideDrawer is null', () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  });
+
+  test('Testing Drawer when hideDrawer is true', () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={true} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  });
+});
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
new file mode 100644
index 0000000000..a687351c98
--- /dev/null
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -0,0 +1,214 @@
+import { useQuery } from '@apollo/client';
+import { WarningAmberOutlined } from '@mui/icons-material';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
+import IconComponent from 'components/IconComponent/IconComponent';
+import React, { useEffect, useMemo, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { NavLink, useLocation } from 'react-router-dom';
+import type { TargetsType } from 'state/reducers/routesReducer';
+import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
+import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
+import styles from './LeftDrawerOrg.module.css';
+import Avatar from 'components/Avatar/Avatar';
+import useLocalStorage from 'utils/useLocalstorage';
+
+export interface InterfaceLeftDrawerProps {
+  orgId: string;
+  targets: TargetsType[];
+  hideDrawer: boolean | null;
+  setHideDrawer: React.Dispatch<React.SetStateAction<boolean | null>>;
+}
+
+/**
+ * LeftDrawerOrg component for displaying organization details and navigation options.
+ *
+ * @param orgId - ID of the current organization.
+ * @param targets - List of navigation targets.
+ * @param hideDrawer - Determines if the drawer should be hidden or shown.
+ * @param setHideDrawer - Function to update the visibility state of the drawer.
+ * @returns JSX element for the left navigation drawer with organization details.
+ */
+const leftDrawerOrg = ({
+  targets,
+  orgId,
+  hideDrawer,
+  setHideDrawer,
+}: InterfaceLeftDrawerProps): JSX.Element => {
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+  const location = useLocation();
+  const { getItem } = useLocalStorage();
+  const userId = getItem('id');
+  const getIdFromPath = (pathname: string): string => {
+    if (!pathname) return '';
+    const segments = pathname.split('/');
+    // Index 2 (third segment) represents the ID in paths like /member/{userId}
+    return segments.length > 2 ? segments[2] : '';
+  };
+  const [isProfilePage, setIsProfilePage] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [organization, setOrganization] = useState<
+    InterfaceQueryOrganizationsListObject | undefined
+  >(undefined);
+  const {
+    data,
+    loading,
+  }: {
+    data:
+      | { organizations: InterfaceQueryOrganizationsListObject[] }
+      | undefined;
+    loading: boolean;
+  } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: orgId },
+  });
+
+  // Get the ID from the current path
+  const pathId = useMemo(
+    () => getIdFromPath(location.pathname),
+    [location.pathname],
+  );
+  // Check if the current page is admin profile page
+  useEffect(() => {
+    // if param id is equal to userId, then it is a profile page
+    setIsProfilePage(pathId === userId);
+  }, [location, userId]);
+
+  // Set organization data when query data is available
+  useEffect(() => {
+    let isMounted = true;
+    if (data && isMounted) {
+      setOrganization(data?.organizations[0]);
+    } else {
+      setOrganization(undefined);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [data]);
+
+  /**
+   * Handles link click to hide the drawer on smaller screens.
+   */
+  const handleLinkClick = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(true);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`${styles.leftDrawer} ${
+          hideDrawer === null
+            ? styles.hideElemByDefault
+            : hideDrawer
+              ? styles.inactiveDrawer
+              : styles.activeDrawer
+        }`}
+        data-testid="leftDrawerContainer"
+      >
+        {/* Branding Section */}
+        <div className={styles.brandingContainer}>
+          <TalawaLogo className={styles.talawaLogo} />
+          <span className={styles.talawaText}>
+            {tCommon('talawaAdminPortal')}
+          </span>
+        </div>
+
+        {/* Organization Section */}
+        <div className={`${styles.organizationContainer} pe-3`}>
+          {loading ? (
+            <>
+              <button
+                className={`${styles.profileContainer} shimmer`}
+                data-testid="orgBtn"
+              />
+            </>
+          ) : organization == undefined ? (
+            !isProfilePage && (
+              <button
+                className={`${styles.profileContainer} bg-danger text-start text-white`}
+                disabled
+              >
+                <div className="px-3">
+                  <WarningAmberOutlined />
+                </div>
+                {tErrors('errorLoading', { entity: 'Organization' })}
+              </button>
+            )
+          ) : (
+            <button className={styles.profileContainer} data-testid="OrgBtn">
+              <div className={styles.imageContainer}>
+                {organization.image ? (
+                  <img src={organization.image} alt={`profile picture`} />
+                ) : (
+                  <Avatar
+                    name={organization.name}
+                    containerStyle={styles.avatarContainer}
+                    alt={'Dummy Organization Picture'}
+                  />
+                )}
+              </div>
+              <div className={styles.profileText}>
+                <span className={styles.primaryText}>{organization.name}</span>
+                <span className={styles.secondaryText}>
+                  {organization.address.city}
+                </span>
+              </div>
+              <AngleRightIcon fill={'var(--bs-secondary)'} />
+            </button>
+          )}
+        </div>
+
+        {/* Options List */}
+        <h5 className={`${styles.titleHeader} text-secondary`}>
+          {tCommon('menu')}
+        </h5>
+        <div className={styles.optionList}>
+          {targets.map(({ name, url }, index) => {
+            return url ? (
+              <NavLink to={url} key={name} onClick={handleLinkClick}>
+                {({ isActive }) => (
+                  <Button
+                    key={name}
+                    variant={isActive === true ? 'success' : ''}
+                    style={{
+                      backgroundColor: isActive === true ? '#EAEBEF' : '',
+                    }}
+                    className={`${
+                      isActive === true ? 'text-black' : 'text-secondary'
+                    }`}
+                  >
+                    <div className={styles.iconWrapper}>
+                      <IconComponent
+                        name={name == 'Membership Requests' ? 'Requests' : name}
+                        fill={
+                          isActive === true
+                            ? 'var(--bs-black)'
+                            : 'var(--bs-secondary)'
+                        }
+                      />
+                    </div>
+                    {tCommon(name)}
+                  </Button>
+                )}
+              </NavLink>
+            ) : (
+              <CollapsibleDropdown
+                key={name}
+                target={targets[index]}
+                showDropdown={showDropdown}
+                setShowDropdown={setShowDropdown}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default leftDrawerOrg;
diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css
new file mode 100644
index 0000000000..aad512e826
--- /dev/null
+++ b/src/components/Loader/Loader.module.css
@@ -0,0 +1,25 @@
+.spinner_wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spinnerXl {
+  width: 6rem;
+  height: 6rem;
+  border-width: 0.5rem;
+}
+
+.spinnerLg {
+  height: 4rem;
+  width: 4rem;
+  border-width: 0.3rem;
+}
+
+.spinnerSm {
+  height: 2rem;
+  width: 2rem;
+  border-width: 0.2rem;
+}
diff --git a/src/components/Loader/Loader.test.tsx b/src/components/Loader/Loader.test.tsx
new file mode 100644
index 0000000000..c512b480e3
--- /dev/null
+++ b/src/components/Loader/Loader.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Loader from './Loader';
+
+describe('Testing Loader component', () => {
+  test('Component should be rendered properly', () => {
+    render(<Loader />);
+
+    expect(screen.getByTestId('spinner-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+
+  test('Component should render on custom sizes', () => {
+    render(<Loader size="sm" />);
+
+    expect(screen.getByTestId('spinner-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+
+  test('Component should render with large size', () => {
+    render(<Loader size="lg" />);
+
+    expect(screen.getByTestId('spinner-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('spinner')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..b59c735175
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './Loader.module.css';
+import { Spinner } from 'react-bootstrap';
+
+interface InterfaceLoaderProps {
+  styles?: StyleSheet | string; // Custom styles for the spinner wrapper
+  size?: 'sm' | 'lg' | 'xl'; // Size of the spinner
+}
+
+/**
+ * Loader component for displaying a loading spinner.
+ *
+ * @param styles - Optional custom styles for the spinner wrapper.
+ * @param size - Size of the spinner. Can be 'sm', 'lg', or 'xl'.
+ * @returns JSX element for a loading spinner.
+ */
+const Loader = (props: InterfaceLoaderProps): JSX.Element => {
+  return (
+    <>
+      <div
+        className={`${props?.styles ?? styles.spinner_wrapper}`}
+        data-testid="spinner-wrapper"
+      >
+        <Spinner
+          className={`
+           ${
+             props?.size == 'sm'
+               ? styles.spinnerSm
+               : props?.size == 'lg'
+                 ? styles.spinnerLg
+                 : styles.spinnerXl
+           }
+          `}
+          animation="border"
+          variant="primary"
+          data-testid="spinner"
+        />
+      </div>
+    </>
+  );
+};
+
+export default Loader;
diff --git a/src/components/LoginPortalToggle/LoginPortalToggle.module.css b/src/components/LoginPortalToggle/LoginPortalToggle.module.css
new file mode 100644
index 0000000000..5983e20905
--- /dev/null
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.module.css
@@ -0,0 +1,34 @@
+.navLinkClass {
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.4;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  color: var(--bs-gray-900);
+  border-radius: 0.3rem;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--bs-gray-700);
+  font-weight: 500;
+  transition: all 0.25s ease;
+}
+
+.navLinkClass:hover {
+  color: var(--bs-white);
+  background-color: var(--bs-gray);
+  border-color: var(--bs-gray);
+}
+
+.activeLink {
+  color: var(--bs-white);
+  border: 1px solid var(--bs-primary);
+  background-color: var(--bs-primary);
+}
+
+.activeLink:hover {
+  color: var(--bs-white);
+  background-color: var(--bs-primary);
+  border: 1px solid var(--bs-primary);
+}
diff --git a/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx b/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
new file mode 100644
index 0000000000..327e6cccea
--- /dev/null
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.test.tsx
@@ -0,0 +1,33 @@
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import LoginPortalToggle from './LoginPortalToggle';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing LoginPortalToggle component', () => {
+  test('Component Should be rendered properly', async () => {
+    const mockOnToggle = jest.fn();
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <LoginPortalToggle onToggle={mockOnToggle} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    await wait();
+  });
+});
diff --git a/src/components/LoginPortalToggle/LoginPortalToggle.tsx b/src/components/LoginPortalToggle/LoginPortalToggle.tsx
new file mode 100644
index 0000000000..76305b02d3
--- /dev/null
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './LoginPortalToggle.module.css';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import { NavLink } from 'react-router-dom';
+
+interface InterfaceLoginPortalToggleProps {
+  onToggle: (role: 'admin' | 'user') => void; // Callback function for role change
+}
+
+/**
+ * Component for toggling between admin and user login portals.
+ *
+ * @param onToggle - Callback function to handle role changes ('admin' or 'user').
+ * @returns JSX element for login portal toggle.
+ */
+function loginPortalToggle({
+  onToggle,
+}: InterfaceLoginPortalToggleProps): JSX.Element {
+  const { t: tCommon } = useTranslation('common');
+  const [activeRole, setActiveRole] = useState<'admin' | 'user'>('admin'); // Default role is 'admin'
+
+  /**
+   * Handles navigation link click and updates the active role.
+   *
+   * @param role - The role to be activated ('admin' or 'user').
+   */
+  const handleNavLinkClick = (role: 'admin' | 'user'): void => {
+    onToggle(role); // Invoke the callback with the new role
+    setActiveRole(role); // Update the active role
+  };
+
+  return (
+    <Row className="mb-4">
+      <Col>
+        <NavLink
+          className={`${styles.navLinkClass} ${activeRole === 'admin' && styles.activeLink}`} // Apply active link styles if 'admin' is active
+          to="/"
+          onClick={() => handleNavLinkClick('admin')}
+        >
+          {tCommon('admin')}
+        </NavLink>
+      </Col>
+      <Col>
+        <NavLink
+          className={`${styles.navLinkClass} ${activeRole === 'user' && styles.activeLink}`} // Apply active link styles if 'user' is active
+          to="/"
+          onClick={() => handleNavLinkClick('user')}
+        >
+          {tCommon('user')}
+        </NavLink>
+      </Col>
+    </Row>
+  );
+}
+
+export default loginPortalToggle;
diff --git a/src/components/MemberDetail/EventsAttendedByMember.test.tsx b/src/components/MemberDetail/EventsAttendedByMember.test.tsx
new file mode 100644
index 0000000000..23ae0efa3b
--- /dev/null
+++ b/src/components/MemberDetail/EventsAttendedByMember.test.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import EventsAttendedByMember from './EventsAttendedByMember';
+import { BrowserRouter } from 'react-router-dom';
+
+const mockEventData = {
+  event: {
+    _id: 'event123',
+    title: 'Test Event',
+    description: 'Test Description',
+    startDate: '2023-01-01',
+    endDate: '2023-01-02',
+    startTime: '09:00',
+    endTime: '17:00',
+    allDay: false,
+    location: 'Test Location',
+    recurring: true,
+    baseRecurringEvent: { _id: 'base123' },
+    organization: {
+      _id: 'org123',
+      members: [
+        { _id: 'user1', firstName: 'John', lastName: 'Doe' },
+        { _id: 'user2', firstName: 'Jane', lastName: 'Smith' },
+      ],
+    },
+    attendees: [
+      { _id: 'user1', gender: 'MALE' },
+      { _id: 'user2', gender: 'FEMALE' },
+    ],
+  },
+};
+
+const mocks = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: mockEventData,
+    },
+  },
+];
+
+const errorMocks = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    error: new Error('An error occurred'),
+  },
+];
+
+describe('EventsAttendedByMember', () => {
+  test('renders loading state initially', () => {
+    render(
+      <BrowserRouter>
+        <MockedProvider mocks={mocks}>
+          <EventsAttendedByMember eventsId="event123" />
+        </MockedProvider>
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByTestId('loading')).toBeInTheDocument();
+    expect(screen.getByText('Loading event details...')).toBeInTheDocument();
+  });
+
+  test('renders error state when query fails', async () => {
+    render(
+      <BrowserRouter>
+        <MockedProvider mocks={errorMocks}>
+          <EventsAttendedByMember eventsId="event123" />
+        </MockedProvider>
+      </BrowserRouter>,
+    );
+
+    const errorMessage = await screen.findByTestId('error');
+    expect(errorMessage).toBeInTheDocument();
+    expect(
+      screen.getByText('Unable to load event details. Please try again later.'),
+    ).toBeInTheDocument();
+  });
+
+  test('renders event card with correct data when query succeeds', async () => {
+    render(
+      <BrowserRouter>
+        <MockedProvider mocks={mocks}>
+          <EventsAttendedByMember eventsId="event123" />
+        </MockedProvider>
+      </BrowserRouter>,
+    );
+
+    await screen.findByTestId('EventsAttendedCard');
+
+    expect(screen.getByText('Test Event')).toBeInTheDocument();
+    expect(screen.getByText('Test Location')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/MemberDetail/EventsAttendedByMember.tsx b/src/components/MemberDetail/EventsAttendedByMember.tsx
new file mode 100644
index 0000000000..ce926d84eb
--- /dev/null
+++ b/src/components/MemberDetail/EventsAttendedByMember.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import EventAttendedCard from './EventsAttendedCardItem';
+import { Spinner } from 'react-bootstrap';
+/**
+ * Component to display events attended by a specific member
+ * @param eventsId - ID of the event to fetch and display details for
+ * @returns Event card component with event details
+ */
+interface InterfaceEventsAttendedByMember {
+  eventsId: string;
+}
+
+function EventsAttendedByMember({
+  eventsId,
+}: InterfaceEventsAttendedByMember): JSX.Element {
+  const {
+    data: events,
+    loading,
+    error,
+  } = useQuery(EVENT_DETAILS, {
+    variables: { id: eventsId },
+  });
+
+  if (loading)
+    return (
+      <div data-testid="loading" className="loading-state">
+        <Spinner />
+        <p>Loading event details...</p>
+      </div>
+    );
+  if (error)
+    return (
+      <div data-testid="error" className="error-state">
+        <p>Unable to load event details. Please try again later.</p>
+      </div>
+    );
+
+  const { organization, _id, startDate, title, location } = events.event;
+
+  return (
+    <EventAttendedCard
+      orgId={organization._id}
+      eventId={_id}
+      key={_id}
+      startdate={startDate}
+      title={title}
+      location={location}
+    />
+  );
+}
+
+export default EventsAttendedByMember;
diff --git a/src/components/MemberDetail/EventsAttendedCardItem.test.tsx b/src/components/MemberDetail/EventsAttendedCardItem.test.tsx
new file mode 100644
index 0000000000..afbb19eeea
--- /dev/null
+++ b/src/components/MemberDetail/EventsAttendedCardItem.test.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import EventAttendedCard from './EventsAttendedCardItem';
+
+interface InterfaceEventAttendedCardProps {
+  type: 'Event';
+  title: string;
+  startdate: string;
+  time: string;
+  location: string;
+  orgId: string;
+  eventId: string;
+}
+
+describe('EventAttendedCard', () => {
+  const mockProps: InterfaceEventAttendedCardProps = {
+    type: 'Event' as const,
+    title: 'Test Event',
+    startdate: '2023-05-15',
+    time: '14:00',
+    location: 'Test Location',
+    orgId: 'org123',
+    eventId: 'event456',
+  };
+
+  const renderComponent = (props = mockProps): void => {
+    render(
+      <BrowserRouter>
+        <EventAttendedCard {...props} />
+      </BrowserRouter>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders event details correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText('Test Event')).toBeInTheDocument();
+    expect(screen.getByText('MAY')).toBeInTheDocument();
+    expect(screen.getByText('15')).toBeInTheDocument();
+    expect(screen.getByText('Test Location')).toBeInTheDocument();
+  });
+
+  it('renders link with correct path', () => {
+    renderComponent();
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/event/org123/event456');
+  });
+
+  it('renders location icon', () => {
+    renderComponent();
+    expect(screen.getByTestId('LocationOnIcon')).toBeInTheDocument();
+  });
+
+  it('renders chevron right icon', () => {
+    renderComponent();
+    expect(screen.getByTestId('ChevronRightIcon')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/MemberDetail/EventsAttendedCardItem.tsx b/src/components/MemberDetail/EventsAttendedCardItem.tsx
new file mode 100644
index 0000000000..cfed19e4dd
--- /dev/null
+++ b/src/components/MemberDetail/EventsAttendedCardItem.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { Card, Row, Col } from 'react-bootstrap';
+import { MdChevronRight, MdLocationOn } from 'react-icons/md';
+import { Link } from 'react-router-dom';
+/**
+ * Card component to display individual event attendance information
+ * Shows event details including title, date, location and organization
+ * @param orgId - Organization ID
+ * @param eventId - Event ID
+ * @param startdate - Event start date
+ * @param title - Event title
+ * @param location - Event location
+ * @returns Card component with formatted event information
+ */
+export interface InterfaceCardItem {
+  title: string;
+  time?: string;
+  startdate?: string;
+  creator?: string;
+  location?: string;
+  eventId?: string;
+  orgId?: string;
+}
+
+const EventAttendedCard = (props: InterfaceCardItem): JSX.Element => {
+  const { title, startdate, location, orgId, eventId } = props;
+
+  return (
+    <Card className="border-0 py-1 rounded-0" data-testid="EventsAttendedCard">
+      <Card.Body className="p-1">
+        <Row className="align-items-center">
+          <Col xs={3} md={2} className="text-center">
+            <div className="text-secondary">
+              {startdate && dayjs(startdate).isValid() ? (
+                <>
+                  <div className="fs-6 fw-normal">
+                    {dayjs(startdate).format('MMM').toUpperCase()}
+                  </div>
+                  <div className="fs-1 fw-semibold">
+                    {dayjs(startdate).format('D')}
+                  </div>
+                </>
+              ) : (
+                /*istanbul ignore next*/
+                <div className="fs-6 fw-normal">Date N/A</div>
+              )}
+            </div>
+          </Col>
+          <Col xs={7} md={9} className="mb-3">
+            <h5 className="mb-1">{title}</h5>
+            <p className="text-muted mb-0 small">
+              <MdLocationOn
+                className="text-action"
+                size={20}
+                data-testid="LocationOnIcon"
+              />
+              {location}
+            </p>
+          </Col>
+          <Col xs={2} md={1} className="text-end">
+            <Link to={`/event/${orgId}/${eventId}`} state={{ id: eventId }}>
+              <MdChevronRight
+                className="text-action"
+                size={20}
+                data-testid="ChevronRightIcon"
+              />
+            </Link>
+          </Col>
+        </Row>
+      </Card.Body>
+      <div className="border-top border-1"></div>
+    </Card>
+  );
+};
+
+export default EventAttendedCard;
diff --git a/src/components/MemberDetail/EventsAttendedMemberModal.test.tsx b/src/components/MemberDetail/EventsAttendedMemberModal.test.tsx
new file mode 100644
index 0000000000..ebdc3fff4c
--- /dev/null
+++ b/src/components/MemberDetail/EventsAttendedMemberModal.test.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter } from 'react-router-dom';
+import EventsAttendedMemberModal from './EventsAttendedMemberModal';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { changeLanguage: () => Promise.resolve() },
+  }),
+}));
+
+jest.mock('./customTableCell', () => ({
+  CustomTableCell: ({ eventId }: { eventId: string }) => (
+    <tr data-testid="event-row">
+      <td>{`Event ${eventId}`}</td>
+      <td>2024-03-14</td>
+      <td>Yes</td>
+      <td>5</td>
+    </tr>
+  ),
+}));
+
+const mockEvents = Array.from({ length: 6 }, (_, index) => ({
+  _id: `${index + 1}`,
+  name: `Event ${index + 1}`,
+  date: '2024-03-14',
+  isRecurring: true,
+  attendees: 5,
+}));
+
+describe('EventsAttendedMemberModal', () => {
+  const defaultProps = {
+    eventsAttended: mockEvents,
+    setShow: jest.fn(),
+    show: true,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders modal with correct title when show is true', () => {
+    render(
+      <MockedProvider>
+        <BrowserRouter>
+          <EventsAttendedMemberModal {...defaultProps} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('Events Attended List')).toBeInTheDocument();
+    expect(screen.getByText('Showing 1 - 5 of 6 Events')).toBeInTheDocument();
+  });
+
+  test('displays empty state message when no events', () => {
+    render(
+      <MockedProvider>
+        <BrowserRouter>
+          <EventsAttendedMemberModal {...defaultProps} eventsAttended={[]} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('noeventsAttended')).toBeInTheDocument();
+  });
+
+  test('renders correct number of events per page', () => {
+    render(
+      <MockedProvider>
+        <BrowserRouter>
+          <EventsAttendedMemberModal {...defaultProps} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const eventRows = screen.getAllByTestId('event-row');
+    expect(eventRows).toHaveLength(5);
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+    expect(screen.getByText('Event 5')).toBeInTheDocument();
+  });
+
+  test('handles pagination correctly', () => {
+    render(
+      <MockedProvider>
+        <BrowserRouter>
+          <EventsAttendedMemberModal {...defaultProps} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByText('Event 6')).toBeInTheDocument();
+  });
+
+  test('closes modal when close button is clicked', () => {
+    const mockSetShow = jest.fn();
+    render(
+      <MockedProvider>
+        <BrowserRouter>
+          <EventsAttendedMemberModal {...defaultProps} setShow={mockSetShow} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(mockSetShow).toHaveBeenCalledWith(false);
+    expect(mockSetShow).toHaveBeenCalledTimes(1);
+  });
+
+  test('displays correct pagination info', () => {
+    render(
+      <MockedProvider>
+        <BrowserRouter>
+          <EventsAttendedMemberModal {...defaultProps} />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('Showing 1 - 5 of 6 Events')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByText('Showing 6 - 6 of 6 Events')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/MemberDetail/EventsAttendedMemberModal.tsx b/src/components/MemberDetail/EventsAttendedMemberModal.tsx
new file mode 100644
index 0000000000..69913998b1
--- /dev/null
+++ b/src/components/MemberDetail/EventsAttendedMemberModal.tsx
@@ -0,0 +1,131 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Pagination,
+} from '@mui/material';
+import { Modal } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import styles from '../../screens/MemberDetail/MemberDetail.module.css';
+import { CustomTableCell } from './customTableCell';
+/**
+ * Modal component to display paginated list of events attended by a member
+ * @param eventsAttended - Array of events attended by the member
+ * @param setShow - Function to control modal visibility
+ * @param show - Boolean to control modal visibility
+ * @param eventsPerPage - Number of events to display per page
+ * @returns Modal component with paginated events list
+ */
+interface InterfaceEvent {
+  _id: string;
+  name: string;
+  date: string;
+  isRecurring: boolean;
+  attendees: number;
+}
+
+interface InterfaceEventsAttendedMemberModalProps {
+  eventsAttended: InterfaceEvent[];
+  setShow: (show: boolean) => void;
+  show: boolean;
+  eventsPerPage?: number;
+}
+
+const EventsAttendedMemberModal: React.FC<
+  InterfaceEventsAttendedMemberModalProps
+> = ({ eventsAttended, setShow, show, eventsPerPage = 5 }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'memberDetail',
+  });
+  const [page, setPage] = useState<number>(1);
+
+  const handleClose = (): void => {
+    setShow(false);
+  };
+
+  const handleChangePage = (
+    event: React.ChangeEvent<unknown>,
+    newPage: number,
+  ): void => {
+    setPage(newPage);
+  };
+
+  const totalPages = useMemo(
+    () => Math.ceil(eventsAttended.length / eventsPerPage),
+    [eventsAttended.length, eventsPerPage],
+  );
+
+  const paginatedEvents = useMemo(
+    () =>
+      eventsAttended.slice((page - 1) * eventsPerPage, page * eventsPerPage),
+    [eventsAttended, page, eventsPerPage],
+  );
+
+  return (
+    <Modal show={show} onHide={handleClose} centered size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Events Attended List</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {eventsAttended.length === 0 ? (
+          <p>{t('noeventsAttended')}</p>
+        ) : (
+          <>
+            <h5 className="text-end">
+              Showing {(page - 1) * eventsPerPage + 1} -{' '}
+              {Math.min(page * eventsPerPage, eventsAttended.length)} of{' '}
+              {eventsAttended.length} Events
+            </h5>
+            <TableContainer component={Paper} className="mt-3">
+              <Table aria-label="customized table">
+                <TableHead>
+                  <TableRow data-testid="row">
+                    <TableCell className={styles.customcell}>
+                      Event Name
+                    </TableCell>
+                    <TableCell className={styles.customcell}>
+                      Date of Event
+                    </TableCell>
+                    <TableCell className={styles.customcell}>
+                      Recurring Event
+                    </TableCell>
+                    <TableCell className={styles.customcell}>
+                      Attendees
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {paginatedEvents.map((event) => (
+                    <CustomTableCell key={event._id} eventId={event._id} />
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <div className="d-flex justify-content-center mt-3">
+              <div className="d-flex justify-content-center mt-3">
+                <Pagination
+                  count={totalPages}
+                  page={page}
+                  onChange={handleChangePage}
+                  color="primary"
+                  aria-label="Events navigation"
+                  getItemAriaLabel={(type, page) => {
+                    if (type === 'page') return `Go to page ${page}`;
+                    return `Go to ${type} page`;
+                  }}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default EventsAttendedMemberModal;
diff --git a/src/components/MemberDetail/customTableCell.test.tsx b/src/components/MemberDetail/customTableCell.test.tsx
new file mode 100644
index 0000000000..bc296a74f3
--- /dev/null
+++ b/src/components/MemberDetail/customTableCell.test.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter } from 'react-router-dom';
+import { CustomTableCell } from './customTableCell';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const mocks = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: 'event123' },
+    },
+    result: {
+      data: {
+        event: {
+          _id: 'event123',
+          title: 'Test Event',
+          description: 'This is a test event description',
+          startDate: '2023-05-01',
+          endDate: '2023-05-02',
+          startTime: '09:00:00',
+          endTime: '17:00:00',
+          allDay: false,
+          location: 'Test Location',
+          recurring: true,
+          baseRecurringEvent: {
+            _id: 'recurringEvent123',
+          },
+          organization: {
+            _id: 'org456',
+            members: [
+              { _id: 'member1', firstName: 'John', lastName: 'Doe' },
+              { _id: 'member2', firstName: 'Jane', lastName: 'Smith' },
+            ],
+          },
+          attendees: [{ _id: 'user1' }, { _id: 'user2' }],
+        },
+      },
+    },
+  },
+];
+
+describe('CustomTableCell', () => {
+  it('renders event details correctly', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <BrowserRouter>
+          <table>
+            <tbody>
+              <CustomTableCell eventId="event123" />
+            </tbody>
+          </table>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId('custom-row'));
+
+    expect(screen.getByText('Test Event')).toBeInTheDocument();
+    expect(screen.getByText('May 1, 2023')).toBeInTheDocument();
+    expect(screen.getByText('Yes')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+
+    const link = screen.getByRole('link', { name: 'Test Event' });
+    expect(link).toHaveAttribute('href', '/event/org456/event123');
+  });
+
+  it('displays loading state', () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <table>
+          <tbody>
+            <CustomTableCell eventId="event123" />
+          </tbody>
+        </table>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  // it('displays error state', async () => {
+  //   const errorMock = [
+  //     {
+  //       request: {
+  //         query: EVENT_DETAILS,
+  //         variables: { id: 'event123' },
+  //       },
+  //       error: new Error('An error occurred'),
+  //     },
+  //   ];
+
+  //   render(
+  //     <MockedProvider mocks={errorMock} addTypename={false}>
+  //       <table>
+  //         <tbody>
+  //           <CustomTableCell eventId="event123" />
+  //         </tbody>
+  //       </table>
+  //     </MockedProvider>,
+  //   );
+
+  //   await waitFor(
+  //     () => {
+  //       expect(
+  //         screen.getByText('Error loading event details'),
+  //       ).toBeInTheDocument();
+  //     },
+  //     { timeout: 2000 },
+  //   );
+
+  //   // Check if the error message from toast has been called
+  //   expect(toast.error).toHaveBeenCalledWith('An error occurred');
+  // });
+
+  // it('displays no event found message', async () => {
+  //   const noEventMock = [
+  //     {
+  //       request: {
+  //         query: EVENT_DETAILS,
+  //         variables: { id: 'event123' },
+  //       },
+  //       result: {
+  //         data: {
+  //           event: {
+  //             _id: null,
+  //             title: null,
+  //             startDate: null,
+  //             description: null,
+  //             endDate: null,
+  //             startTime: null,
+  //             endTime: null,
+  //             allDay: false,
+  //             location: null,
+  //             recurring: null,
+  //             organization: {
+  //               _id: null,
+  //               members: [],
+  //             },
+  //             baseRecurringEvent: {
+  //               _id: 'recurringEvent123',
+  //             },
+  //             attendees: [],
+  //           },
+  //         },
+  //       },
+  //     },
+  //   ];
+
+  //   render(
+  //     <MockedProvider mocks={noEventMock} addTypename={false}>
+  //       <table>
+  //         <tbody>
+  //           <CustomTableCell eventId="event123" />
+  //         </tbody>
+  //       </table>
+  //     </MockedProvider>,
+  //   );
+
+  //   await waitFor(() => screen.getByText('No event found'));
+  //   expect(screen.getByText('No event found')).toBeInTheDocument();
+  // });
+});
diff --git a/src/components/MemberDetail/customTableCell.tsx b/src/components/MemberDetail/customTableCell.tsx
new file mode 100644
index 0000000000..b8cc2bdd98
--- /dev/null
+++ b/src/components/MemberDetail/customTableCell.tsx
@@ -0,0 +1,78 @@
+import { useQuery } from '@apollo/client';
+import { CircularProgress, TableCell, TableRow } from '@mui/material';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import React from 'react';
+import styles from '../../screens/MemberDetail/MemberDetail.module.css';
+import { Link } from 'react-router-dom';
+/**
+ * Custom table cell component to display event details
+ * @param eventId - ID of the event to fetch and display
+ * @returns TableRow component with event information
+ */
+
+export const CustomTableCell: React.FC<{ eventId: string }> = ({ eventId }) => {
+  const { data, loading, error } = useQuery(EVENT_DETAILS, {
+    variables: {
+      id: eventId,
+    },
+    errorPolicy: 'all',
+    fetchPolicy: 'cache-first',
+    nextFetchPolicy: 'cache-and-network',
+    pollInterval: 30000,
+  });
+
+  if (loading)
+    return (
+      <TableRow data-testid="loading-state">
+        <TableCell colSpan={4}>
+          <CircularProgress />
+        </TableCell>
+      </TableRow>
+    );
+  /*istanbul ignore next*/
+  if (error) {
+    return (
+      <TableRow data-testid="error-state">
+        <TableCell colSpan={4} align="center">
+          {`Unable to load event details. Please try again later.`}
+        </TableCell>
+      </TableRow>
+    );
+  }
+  const event = data?.event;
+  /*istanbul ignore next*/
+  if (!event) {
+    return (
+      <TableRow data-testid="no-event-state">
+        <TableCell colSpan={4} align="center">
+          Event not found or has been deleted
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <TableRow className="my-6" data-testid="custom-row">
+      <TableCell align="left">
+        <Link
+          to={`/event/${event.organization._id}/${event._id}`}
+          className={styles.membername}
+        >
+          {event.title}
+        </Link>
+      </TableCell>
+      <TableCell align="left">
+        {new Date(event.startDate).toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          timeZone: 'UTC',
+        })}
+      </TableCell>
+      <TableCell align="left">{event.recurring ? 'Yes' : 'No'}</TableCell>
+      <TableCell align="left">
+        <span title="Number of attendees">{event.attendees?.length ?? 0}</span>
+      </TableCell>
+    </TableRow>
+  );
+};
diff --git a/src/components/MemberRequestCard/MemberRequestCard.module.css b/src/components/MemberRequestCard/MemberRequestCard.module.css
new file mode 100644
index 0000000000..fdc99eba83
--- /dev/null
+++ b/src/components/MemberRequestCard/MemberRequestCard.module.css
@@ -0,0 +1,57 @@
+.memberlist {
+  margin-top: -1px;
+}
+.memberimg {
+  border-radius: 10px;
+  margin-left: 10px;
+}
+.singledetails {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.singledetails p {
+  margin-bottom: -5px;
+}
+.singledetails_data_left {
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #707070;
+}
+.singledetails_data_right {
+  justify-content: right;
+  margin-top: 10px;
+  text-align: right;
+  color: #707070;
+}
+.membername {
+  font-size: 16px;
+  font-weight: bold;
+}
+.memberfont {
+  margin-top: 3px;
+}
+.memberfont > span {
+  width: 80%;
+}
+.memberfontcreated {
+  margin-top: 18px;
+}
+.memberfontcreatedbtn {
+  margin-top: 33px;
+  border-radius: 7px;
+  border-color: #e8e5e5;
+  background-color: #f7f7f7;
+  padding-right: 10px;
+  padding-left: 10px;
+  justify-content: flex-end;
+  float: right;
+  text-align: right;
+  box-shadow: none;
+}
+#grid_wrapper {
+  align-items: left;
+}
+.peoplelistdiv {
+  margin-right: 50px;
+}
diff --git a/src/components/MemberRequestCard/MemberRequestCard.test.tsx b/src/components/MemberRequestCard/MemberRequestCard.test.tsx
new file mode 100644
index 0000000000..a38a046ea2
--- /dev/null
+++ b/src/components/MemberRequestCard/MemberRequestCard.test.tsx
@@ -0,0 +1,122 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+
+import {
+  ACCEPT_ORGANIZATION_REQUEST_MUTATION,
+  REJECT_ORGANIZATION_REQUEST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import MemberRequestCard from './MemberRequestCard';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const MOCKS = [
+  {
+    request: {
+      query: ACCEPT_ORGANIZATION_REQUEST_MUTATION,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '1',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: REJECT_ORGANIZATION_REQUEST_MUTATION,
+      variables: { userid: '234' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '2',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Member Request Card', () => {
+  const props = {
+    id: '1',
+    memberName: 'John Doe',
+    memberLocation: 'India',
+    joinDate: '18/03/2022',
+    memberImage: 'image',
+    email: 'johndoe@gmail.com',
+  };
+
+  global.alert = jest.fn();
+
+  it('should render props and text elements test for the page component', async () => {
+    global.confirm = (): boolean => true;
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <MemberRequestCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText(/Accept/i));
+    userEvent.click(screen.getByText(/Reject/i));
+
+    expect(screen.getByAltText(/userImage/i)).toBeInTheDocument();
+    expect(screen.getByText(/Joined:/i)).toBeInTheDocument();
+    expect(screen.getByText(props.memberName)).toBeInTheDocument();
+    expect(screen.getByText(props.memberLocation)).toBeInTheDocument();
+    expect(screen.getByText(props.joinDate)).toBeInTheDocument();
+    expect(screen.getByText(props.email)).toBeInTheDocument();
+  });
+
+  it('should render text elements when props value is not passed', async () => {
+    global.confirm = (): boolean => false;
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <MemberRequestCard
+            id="1"
+            memberName=""
+            memberLocation="India"
+            joinDate="18/03/2022"
+            memberImage=""
+            email="johndoe@gmail.com"
+          />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText(/Accept/i));
+    userEvent.click(screen.getByText(/Reject/i));
+
+    expect(screen.getByAltText(/userImage/i)).toBeInTheDocument();
+    expect(screen.getByText(/Joined:/i)).toBeInTheDocument();
+    expect(screen.queryByText(props.memberName)).not.toBeInTheDocument();
+    expect(screen.getByText(props.memberLocation)).toBeInTheDocument();
+    expect(screen.getByText(props.joinDate)).toBeInTheDocument();
+    expect(screen.getByText(props.email)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/MemberRequestCard/MemberRequestCard.tsx b/src/components/MemberRequestCard/MemberRequestCard.tsx
new file mode 100644
index 0000000000..c45b698506
--- /dev/null
+++ b/src/components/MemberRequestCard/MemberRequestCard.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import styles from './MemberRequestCard.module.css';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
+import { useMutation } from '@apollo/client';
+import {
+  ACCEPT_ORGANIZATION_REQUEST_MUTATION,
+  REJECT_ORGANIZATION_REQUEST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import defaultImg from 'assets/images/blank.png';
+import { errorHandler } from 'utils/errorHandler';
+
+interface InterfaceMemberRequestCardProps {
+  id: string; // Unique identifier for the member
+  memberName: string; // Name of the member
+  memberLocation: string; // Location of the member
+  joinDate: string; // Date when the member joined
+  memberImage: string; // URL for the member's image
+  email: string; // Email of the member
+}
+
+/**
+ * Component for displaying and managing member requests.
+ *
+ * @param props - Properties for the member request card.
+ * @returns JSX element for member request card.
+ */
+function MemberRequestCard(
+  props: InterfaceMemberRequestCardProps,
+): JSX.Element {
+  const [acceptMutation] = useMutation(ACCEPT_ORGANIZATION_REQUEST_MUTATION);
+  const [rejectMutation] = useMutation(REJECT_ORGANIZATION_REQUEST_MUTATION);
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'membershipRequest',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  /**
+   * Handles accepting a member request.
+   * Displays a success message and reloads the page.
+   */
+  const addMember = async (): Promise<void> => {
+    try {
+      await acceptMutation({
+        variables: {
+          id: props.id,
+        },
+      });
+
+      /* istanbul ignore next */
+      toast.success(t('memberAdded') as string);
+      /* istanbul ignore next */
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  /**
+   * Handles rejecting a member request.
+   * Confirms rejection and reloads the page if confirmed.
+   */
+  const rejectMember = async (): Promise<void> => {
+    const sure = window.confirm('Are you sure you want to Reject Request ?');
+    if (sure) {
+      try {
+        await rejectMutation({
+          variables: {
+            userid: props.id,
+          },
+        });
+
+        /* istanbul ignore next */
+        window.location.reload();
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.peoplelistdiv}>
+        <Row className={styles.memberlist}>
+          {props.memberImage ? (
+            <img
+              src={props.memberImage}
+              className={styles.alignimg}
+              alt="userImage"
+            />
+          ) : (
+            <img
+              src={defaultImg}
+              className={styles.memberimg}
+              alt="userImage"
+            />
+          )}
+          <Col className={styles.singledetails}>
+            <div className={styles.singledetails_data_left}>
+              <p className={styles.membername}>
+                {props.memberName ? <>{props.memberName}</> : <>Dogs Care</>}
+              </p>
+              <p className={styles.memberfont}>{props.memberLocation}</p>
+              <p className={styles.memberfontcreated}>{props.email}</p>
+            </div>
+            <div className={styles.singledetails_data_right}>
+              <p className={styles.memberfont}>
+                {tCommon('joined')}: <span>{props.joinDate}</span>
+              </p>
+              <Button
+                className={styles.memberfontcreatedbtn}
+                onClick={addMember}
+              >
+                {t('accept')}
+              </Button>
+              <Button
+                className={styles.memberfontcreatedbtn}
+                onClick={rejectMember}
+              >
+                {t('reject')}
+              </Button>
+            </div>
+          </Col>
+        </Row>
+      </div>
+      <hr />
+    </>
+  );
+}
+export default MemberRequestCard;
diff --git a/src/components/NotFound/NotFound.module.css b/src/components/NotFound/NotFound.module.css
new file mode 100644
index 0000000000..a209bc9f48
--- /dev/null
+++ b/src/components/NotFound/NotFound.module.css
@@ -0,0 +1,22 @@
+.section {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.error {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+@media (min-width: 440px) and (max-width: 570px) {
+  .section {
+    margin-left: 50px;
+  }
+  .error {
+    font-size: 1.1rem;
+    font-style: oblique;
+  }
+}
diff --git a/src/components/NotFound/NotFound.test.tsx b/src/components/NotFound/NotFound.test.tsx
new file mode 100644
index 0000000000..54c0bcfe4a
--- /dev/null
+++ b/src/components/NotFound/NotFound.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+
+import { render, screen } from '@testing-library/react';
+import NotFound from './NotFound';
+
+describe('Tesing the NotFound Component', () => {
+  it('renders the component with the correct title for posts', () => {
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <NotFound title="post" keyPrefix="postNotFound" />
+      </I18nextProvider>,
+    );
+    expect(screen.getByText(/Not Found!/i)).toBeInTheDocument();
+  });
+
+  it('renders the component with the correct title for users', () => {
+    render(
+      <I18nextProvider i18n={i18nForTest}>
+        <NotFound title="user" keyPrefix="userNotFound" />
+      </I18nextProvider>,
+    );
+    expect(screen.getByText(/Not Found!/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx
new file mode 100644
index 0000000000..6b5332bbcf
--- /dev/null
+++ b/src/components/NotFound/NotFound.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './NotFound.module.css';
+
+interface InterfaceNotFoundProps {
+  title: string; // Title of the page or resource not found
+  keyPrefix: string; // Translation key prefix
+}
+
+/**
+ * Component to display a "Not Found" message.
+ *
+ * @param title - Title of the page or resource that was not found.
+ * @param keyPrefix - Prefix for translation keys.
+ * @returns JSX element for the "Not Found" page.
+ */
+function notFound(props: InterfaceNotFoundProps): JSX.Element {
+  const key = props.keyPrefix.toString();
+  const { t } = useTranslation('translation', {
+    keyPrefix: key,
+  });
+  return (
+    <>
+      <section className={styles.section}>
+        <h2 className={styles.error}> {t(`${props.title} not found!`)} </h2>
+      </section>
+    </>
+  );
+}
+
+export default notFound;
diff --git a/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx b/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx
new file mode 100644
index 0000000000..7baea946d2
--- /dev/null
+++ b/src/components/OrgAdminListCard/OrgAdminListCard.test.tsx
@@ -0,0 +1,108 @@
+import React, { act } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { REMOVE_ADMIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import OrgAdminListCard from './OrgAdminListCard';
+import i18nForTest from 'utils/i18nForTest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const MOCKS = [
+  {
+    request: {
+      query: REMOVE_ADMIN_MUTATION,
+      variables: { userid: '456', orgid: '987' },
+    },
+    result: {
+      data: {
+        removeAdmin: {
+          _id: '456',
+        },
+      },
+    },
+  },
+];
+const link = new StaticMockLink(MOCKS, true);
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const renderOrgAdminListCard = (props: {
+  toggleRemoveModal: () => boolean;
+  id: string | undefined;
+}): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgpeople/987']}>
+        <I18nextProvider i18n={i18nForTest}>
+          <Routes>
+            <Route
+              path="/orgpeople/:orgId"
+              element={<OrgAdminListCard {...props} />}
+            />
+            <Route
+              path="/orgList"
+              element={<div data-testid="orgListScreen">orgListScreen</div>}
+            />
+          </Routes>
+        </I18nextProvider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+jest.mock('i18next-browser-languagedetector', () => ({
+  init: jest.fn(),
+  type: 'languageDetector',
+  detect: jest.fn(() => 'en'),
+  cacheUserLanguage: jest.fn(),
+}));
+describe('Testing Organization Admin List Card', () => {
+  global.alert = jest.fn();
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('should render props and text elements test for the page component', async () => {
+    const props = {
+      toggleRemoveModal: () => true,
+      id: '456',
+    };
+
+    renderOrgAdminListCard(props);
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/removeAdminBtn/i));
+
+    await wait(2000);
+  });
+
+  test('Should not render text elements when props value is not passed', async () => {
+    const props = {
+      toggleRemoveModal: () => true,
+      id: undefined,
+    };
+
+    renderOrgAdminListCard(props);
+
+    await waitFor(() => {
+      const orgListScreen = screen.getByTestId('orgListScreen');
+      expect(orgListScreen).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/OrgAdminListCard/OrgAdminListCard.tsx b/src/components/OrgAdminListCard/OrgAdminListCard.tsx
new file mode 100644
index 0000000000..f8fc454823
--- /dev/null
+++ b/src/components/OrgAdminListCard/OrgAdminListCard.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { REMOVE_ADMIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useParams } from 'react-router-dom';
+import { errorHandler } from 'utils/errorHandler';
+
+interface InterfaceOrgPeopleListCardProps {
+  id: string | undefined;
+  toggleRemoveModal: () => void;
+}
+/**
+ * Component to confirm and handle the removal of an admin.
+ *
+ * @param id - ID of the admin to be removed.
+ * @param toggleRemoveModal - Function to toggle the visibility of the modal.
+ * @returns JSX element for the removal confirmation modal.
+ */
+function orgAdminListCard(props: InterfaceOrgPeopleListCardProps): JSX.Element {
+  if (!props.id) {
+    return <Navigate to={'/orglist'} />;
+  }
+  const { orgId: currentUrl } = useParams();
+  const [remove] = useMutation(REMOVE_ADMIN_MUTATION);
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgAdminListCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  /**
+   * Function to remove the admin from the organization
+   * and display a success message.
+   */
+  const removeAdmin = async (): Promise<void> => {
+    try {
+      const { data } = await remove({
+        variables: {
+          userid: props.id,
+          orgid: currentUrl,
+        },
+      });
+      if (data) {
+        toast.success(t('adminRemoved') as string);
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+  return (
+    <>
+      <Modal show={true} onHide={props.toggleRemoveModal}>
+        <Modal.Header>
+          <h5 id={`removeAdminModalLabel${props.id}`}>{t('removeAdmin')}</h5>
+          <Button variant="danger" onClick={props.toggleRemoveModal}>
+            <i className="fas fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>{t('removeAdminMsg')}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="danger" onClick={props.toggleRemoveModal}>
+            {tCommon('no')}
+          </Button>
+          <Button
+            variant="success"
+            onClick={removeAdmin}
+            data-testid="removeAdminBtn"
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+export default orgAdminListCard;
diff --git a/src/components/OrgContriCards/OrgContriCards.module.css b/src/components/OrgContriCards/OrgContriCards.module.css
new file mode 100644
index 0000000000..d20b696621
--- /dev/null
+++ b/src/components/OrgContriCards/OrgContriCards.module.css
@@ -0,0 +1,22 @@
+.cards {
+  width: 45%;
+  background: #fcfcfc;
+  margin: 10px 20px;
+  padding: 20px 30px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 3px 5px #c9c9c9;
+  margin-right: 40px;
+  color: #737373;
+}
+.cards > h2 {
+  font-size: 19px;
+}
+.cards > h3 {
+  font-size: 17px;
+}
+.cards > p {
+  font-size: 14px;
+  margin-top: -5px;
+  margin-bottom: 7px;
+}
diff --git a/src/components/OrgContriCards/OrgContriCards.test.tsx b/src/components/OrgContriCards/OrgContriCards.test.tsx
new file mode 100644
index 0000000000..4f202cd355
--- /dev/null
+++ b/src/components/OrgContriCards/OrgContriCards.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { I18nextProvider } from 'react-i18next';
+
+import OrgContriCards from './OrgContriCards';
+import i18nForTest from 'utils/i18nForTest';
+import { BACKEND_URL } from 'Constant/constant';
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  uri: BACKEND_URL,
+});
+
+describe('Testing the Organization Contributions Cards', () => {
+  const props = {
+    key: '123',
+    id: '123',
+    userName: 'John Doe',
+    contriDate: '06/03/2022',
+    contriAmount: '500',
+    contriTransactionId: 'QW56DA88',
+    userEmail: 'johndoe@gmail.com',
+  };
+
+  it('should render props and text elements test for the page component', () => {
+    render(
+      <ApolloProvider client={client}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgContriCards
+            id={props.key}
+            key={props.id}
+            userName={props.userName}
+            contriDate={props.contriDate}
+            contriAmount={props.contriAmount}
+            contriTransactionId={props.contriTransactionId}
+            userEmail={props.userEmail}
+          />
+        </I18nextProvider>
+      </ApolloProvider>,
+    );
+    expect(screen.getByText('Date:')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('06/03/2022')).toBeInTheDocument();
+    expect(screen.getByText('500')).toBeInTheDocument();
+    expect(screen.getByText('QW56DA88')).toBeInTheDocument();
+    expect(screen.getByText('johndoe@gmail.com')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrgContriCards/OrgContriCards.tsx b/src/components/OrgContriCards/OrgContriCards.tsx
new file mode 100644
index 0000000000..6635be09b8
--- /dev/null
+++ b/src/components/OrgContriCards/OrgContriCards.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { useTranslation } from 'react-i18next';
+
+import styles from './OrgContriCards.module.css';
+
+/**
+ * Props for the OrgContriCards component
+ */
+interface InterfaceOrgContriCardsProps {
+  key: string;
+  id: string;
+  userName: string;
+  contriDate: string;
+  contriAmount: string;
+  contriTransactionId: string;
+  userEmail: string;
+}
+
+/**
+ * Component to display organization contribution cards
+ *
+ * This component shows the contribution details of a user in a card format. It includes
+ * the user's name, email, contribution date, transaction ID, and the contribution amount.
+ *
+ * @param props - The properties passed to the component
+ * @returns JSX.Element representing a contribution card
+ */
+function orgContriCards(props: InterfaceOrgContriCardsProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgContriCards',
+  });
+
+  return (
+    <>
+      <Row>
+        <Col className={styles.cards}>
+          <h2>{props.userName}</h2>
+          <p>{props.userEmail}</p>
+          <p>
+            {t('date')}:<span>{props.contriDate}</span>
+          </p>
+          <p>
+            {t('transactionId')}: <span>{props.contriTransactionId} </span>
+          </p>
+          <h3>
+            {t('amount')}: $ <span>{props.contriAmount}</span>
+          </h3>
+        </Col>
+      </Row>
+    </>
+  );
+}
+export default orgContriCards;
diff --git a/src/components/OrgDelete/OrgDelete.test.tsx b/src/components/OrgDelete/OrgDelete.test.tsx
new file mode 100644
index 0000000000..b9b9ca2572
--- /dev/null
+++ b/src/components/OrgDelete/OrgDelete.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { I18nextProvider } from 'react-i18next';
+
+import OrgDelete from './OrgDelete';
+import i18nForTest from 'utils/i18nForTest';
+import { BACKEND_URL } from 'Constant/constant';
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  uri: BACKEND_URL,
+});
+
+describe('Testing Organization People List Card', () => {
+  test('should render props and text elements test for the page component', () => {
+    render(
+      <ApolloProvider client={client}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgDelete />
+        </I18nextProvider>
+      </ApolloProvider>,
+    );
+    expect(screen.getByText('Delete Org')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrgDelete/OrgDelete.tsx b/src/components/OrgDelete/OrgDelete.tsx
new file mode 100644
index 0000000000..e596445e5c
--- /dev/null
+++ b/src/components/OrgDelete/OrgDelete.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Component for displaying organization deletion message
+ *
+ * This component renders a message related to deleting an organization.
+ *
+ * @returns JSX.Element representing the organization deletion message
+ */
+function orgDelete(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgDelete',
+  });
+
+  return (
+    <>
+      {/* Container for the organization deletion message */}
+      <div id="OrgDelete" className="search-OrgDelete">
+        {t('deleteOrg')}
+      </div>
+    </>
+  );
+}
+export default orgDelete;
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
new file mode 100644
index 0000000000..430ea318d6
--- /dev/null
+++ b/src/components/OrgListCard/OrgListCard.module.css
@@ -0,0 +1,141 @@
+.orgCard {
+  background-color: var(--bs-white);
+  margin: 0.5rem;
+  height: calc(120px + 2rem);
+  padding: 1rem;
+  border-radius: 8px;
+  outline: 1px solid var(--bs-gray-200);
+  position: relative;
+}
+
+.orgCard .innerContainer {
+  display: flex;
+}
+
+.orgCard .innerContainer .orgImgContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.orgCard .innerContainer .orgImgContainer {
+  width: 125px;
+  height: 120px;
+  object-fit: contain;
+}
+
+.orgCard .innerContainer .orgImgContainer {
+  width: 125px;
+  height: 120px;
+  background-color: var(--bs-gray-200);
+}
+
+.orgCard .innerContainer .content {
+  flex: 1;
+  margin-left: 1rem;
+  width: 70%;
+  margin-top: 0.7rem;
+}
+
+.orgCard button {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+.flaskIcon {
+  margin-top: 4px;
+}
+
+.manageBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+}
+
+.orgName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 1rem;
+}
+
+.orgdesc {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  max-width: 20rem;
+}
+
+.orgadmin {
+  font-size: 0.9rem;
+}
+
+.orgmember {
+  font-size: 0.9rem;
+}
+
+.address {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  align-items: center;
+}
+
+.address h6 {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+}
+
+@media (max-width: 580px) {
+  .orgCard {
+    height: unset;
+    margin: 0.5rem 0;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .orgCard .innerContainer {
+    flex-direction: column;
+  }
+
+  .orgCard .innerContainer .orgImgContainer {
+    margin-bottom: 0.8rem;
+  }
+
+  .orgCard .innerContainer .orgImgContainer img {
+    height: auto;
+    width: 100%;
+  }
+
+  .orgCard .innerContainer .content {
+    margin-left: 0;
+  }
+
+  .orgCard button {
+    bottom: 0;
+    right: 0;
+    position: relative;
+    margin-left: auto;
+    display: block;
+  }
+
+  .flaskIcon {
+    margin-bottom: 6px;
+  }
+
+  .manageBtn {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+  }
+}
diff --git a/src/components/OrgListCard/OrgListCard.test.tsx b/src/components/OrgListCard/OrgListCard.test.tsx
new file mode 100644
index 0000000000..4072265ea4
--- /dev/null
+++ b/src/components/OrgListCard/OrgListCard.test.tsx
@@ -0,0 +1,149 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceOrgListCardProps } from './OrgListCard';
+import OrgListCard from './OrgListCard';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { MockedProvider } from '@apollo/react-testing';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem, removeItem } = useLocalStorage();
+
+const MOCKS = [
+  {
+    request: {
+      query: IS_SAMPLE_ORGANIZATION_QUERY,
+      variables: {
+        isSampleOrganizationId: 'xyz',
+      },
+    },
+    result: {
+      data: {
+        isSampleOrganization: true,
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const props: InterfaceOrgListCardProps = {
+  data: {
+    _id: 'xyz',
+    name: 'Dogs Care',
+    image: 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+    address: {
+      city: 'Sample City',
+      countryCode: 'US',
+      dependentLocality: 'Sample Dependent Locality',
+      line1: '123 Sample Street',
+      line2: 'Apartment 456',
+      postalCode: '12345',
+      sortingCode: 'ABC-123',
+      state: 'Sample State',
+    },
+    admins: [
+      {
+        _id: '123',
+      },
+      {
+        _id: '456',
+      },
+    ],
+    members: [],
+    createdAt: '04/07/2019',
+    creator: {
+      _id: 'abc',
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+  },
+};
+
+describe('Testing the Super Dash List', () => {
+  test('should render props and text elements test for the page component', async () => {
+    removeItem('id');
+    setItem('id', '123'); // Means the user is an admin
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgListCard {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(screen.getByAltText(/Dogs Care image/i)).toBeInTheDocument();
+    expect(screen.getByText(/Admins:/i)).toBeInTheDocument();
+    expect(screen.getByText(/Members:/i)).toBeInTheDocument();
+    expect(screen.getByText('Dogs Care')).toBeInTheDocument();
+    expect(screen.getByText(/Sample City/i)).toBeInTheDocument();
+    expect(screen.getByText(/123 Sample Street/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/manageBtn/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/flaskIcon/i)).toBeInTheDocument();
+    userEvent.click(screen.getByTestId(/manageBtn/i));
+    removeItem('id');
+  });
+
+  test('Testing if the props data is not provided', () => {
+    window.location.assign('/orgdash');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgListCard {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(window.location).toBeAt('/orgdash');
+  });
+
+  test('Testing if component is rendered properly when image is null', () => {
+    const imageNullProps = {
+      ...props,
+      ...{ data: { ...props.data, ...{ image: null } } },
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgListCard {...imageNullProps} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(screen.getByTestId(/emptyContainerForImage/i)).toBeInTheDocument();
+  });
+
+  test('Testing if user is redirected to orgDash screen', () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgListCard {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByTestId('manageBtn'));
+  });
+});
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
new file mode 100644
index 0000000000..10365d2364
--- /dev/null
+++ b/src/components/OrgListCard/OrgListCard.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import FlaskIcon from 'assets/svgs/flask.svg?react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import styles from './OrgListCard.module.css';
+import { useNavigate } from 'react-router-dom';
+import type {
+  InterfaceOrgConnectionInfoType,
+  InterfaceQueryOrganizationsListObject,
+} from 'utils/interfaces';
+import {
+  IS_SAMPLE_ORGANIZATION_QUERY,
+  ORGANIZATIONS_LIST,
+} from 'GraphQl/Queries/Queries';
+import { useQuery } from '@apollo/client';
+import { Tooltip } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+
+/**
+ * Props for the OrgListCard component
+ */
+export interface InterfaceOrgListCardProps {
+  data: InterfaceOrgConnectionInfoType;
+}
+
+/**
+ * Component for displaying a list card for an organization
+ *
+ * This component renders a card that displays information about an organization,
+ * including its name, address, members, and admins. It also provides a button
+ * to manage the organization, navigating to the organization's dashboard.
+ *
+ * @param props - The properties passed to the component
+ * @returns JSX.Element representing an organization list card
+ */
+function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
+  // Destructure data from props
+  const { _id, admins, image, address, members, name } = props.data;
+
+  // Query to check if the organization is a sample organization
+  const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
+    variables: {
+      isSampleOrganizationId: _id,
+    },
+  });
+
+  // Use navigate hook from react-router-dom to navigate to the organization dashboard
+  const navigate = useNavigate();
+
+  // Query to get the organization list
+  const {
+    data: userData,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationsListObject[];
+    };
+  } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: _id },
+  });
+
+  // Handle click event to navigate to the organization dashboard
+  function handleClick(): void {
+    const url = '/orgdash/' + _id;
+
+    // Dont change the below two lines
+    navigate(url);
+  }
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgListCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  return (
+    <>
+      {/* Container for the organization card */}
+      <div className={styles.orgCard}>
+        <div className={styles.innerContainer}>
+          {/* Container for the organization image */}
+          <div className={styles.orgImgContainer}>
+            {image ? (
+              <img src={image} alt={`${name} image`} />
+            ) : (
+              <Avatar
+                name={name}
+                alt={`${name} image`}
+                dataTestId="emptyContainerForImage"
+              />
+            )}
+          </div>
+          <div className={styles.content}>
+            {/* Tooltip for the organization name */}
+            <Tooltip title={name} placement="top-end">
+              <h4 className={`${styles.orgName} fw-semibold`}>{name}</h4>
+            </Tooltip>
+            {/* Description of the organization */}
+            <h6 className={`${styles.orgdesc} fw-semibold`}>
+              <span>{userData?.organizations[0].description}</span>
+            </h6>
+            {/* Display the organization address if available */}
+            {address && address.city && (
+              <div className={styles.address}>
+                <h6 className="text-secondary">
+                  <span className="address-line">{address.line1}, </span>
+                  <span className="address-line">{address.city}, </span>
+                  <span className="address-line">{address.countryCode}</span>
+                </h6>
+              </div>
+            )}
+            {/* Display the number of admins and members */}
+            <h6 className={styles.orgadmin}>
+              {tCommon('admins')}: <span>{admins.length}</span> &nbsp; &nbsp;
+              &nbsp; {tCommon('members')}: <span>{members.length}</span>
+            </h6>
+          </div>
+        </div>
+        {/* Button to manage the organization */}
+        <Button
+          onClick={handleClick}
+          data-testid="manageBtn"
+          className={styles.manageBtn}
+        >
+          {/* Show flask icon if the organization is a sample organization */}
+          {data && data?.isSampleOrganization && (
+            <FlaskIcon
+              fill="var(--bs-white)"
+              width={12}
+              className={styles.flaskIcon}
+              title={t('sampleOrganization')}
+              data-testid="flaskIcon"
+            />
+          )}
+          {'  '}
+          {t('manage')}
+        </Button>
+      </div>
+    </>
+  );
+}
+export default orgListCard;
diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx
new file mode 100644
index 0000000000..7cee31107f
--- /dev/null
+++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.test.tsx
@@ -0,0 +1,81 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+
+import OrgPeopleListCard from './OrgPeopleListCard';
+import { REMOVE_MEMBER_MUTATION } from 'GraphQl/Mutations/mutations';
+import i18nForTest from 'utils/i18nForTest';
+import { BrowserRouter } from 'react-router-dom';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const MOCKS = [
+  {
+    request: {
+      query: REMOVE_MEMBER_MUTATION,
+      variable: { userid: '123', orgid: '456' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '1',
+          },
+        ],
+      },
+    },
+  },
+];
+const link = new StaticMockLink(MOCKS, true);
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Organization People List Card', () => {
+  const props = {
+    toggleRemoveModal: () => true,
+    id: '1',
+  };
+  global.alert = jest.fn();
+
+  test('should render props and text elements test for the page component', async () => {
+    global.confirm = (): boolean => true;
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgPeopleListCard {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/removeMemberBtn/i));
+  });
+
+  test('Should not render modal when id is undefined', async () => {
+    global.confirm = (): boolean => false;
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgPeopleListCard id={undefined} toggleRemoveModal={() => true} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(window.location.pathname).toEqual('/orglist');
+  });
+});
diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
new file mode 100644
index 0000000000..dca72b84e7
--- /dev/null
+++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import { REMOVE_MEMBER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useParams, Navigate } from 'react-router-dom';
+import { errorHandler } from 'utils/errorHandler';
+import styles from '../../style/app.module.css';
+import { Close } from '@mui/icons-material';
+
+/**
+ * Props for the OrgPeopleListCard component
+ */
+interface InterfaceOrgPeopleListCardProps {
+  id: string | undefined;
+  toggleRemoveModal: () => void;
+}
+
+/**
+ * Component for displaying a modal to remove a member from an organization
+ *
+ * This component shows a modal that confirms the removal of a member from the organization.
+ * It performs the removal action and displays success or error messages.
+ *
+ * @param props - The properties passed to the component
+ * @returns JSX.Element representing the organization people list card modal
+ */
+function orgPeopleListCard(
+  props: InterfaceOrgPeopleListCardProps,
+): JSX.Element {
+  // Get the current organization ID from the URL parameters
+  const { orgId: currentUrl } = useParams();
+
+  // If the member ID is not provided, navigate to the organization list
+  if (!props.id) {
+    return <Navigate to={'/orglist'} />;
+  }
+
+  // Mutation to remove a member from the organization
+  const [remove] = useMutation(REMOVE_MEMBER_MUTATION);
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgPeopleListCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Function to remove a member and handle success or error
+  const removeMember = async (): Promise<void> => {
+    try {
+      const { data } = await remove({
+        variables: {
+          userid: props.id,
+          orgid: currentUrl,
+        },
+      });
+      // If the mutation is successful, show a success message and reload the page
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('memberRemoved') as string);
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  return (
+    <div>
+      {/* Modal to confirm member removal */}
+      <Modal show={true} onHide={props.toggleRemoveModal}>
+        <Modal.Header>
+          <h5>{t('removeMember')}</h5>
+          {/* Button to close the modal */}
+          <Button
+            variant="danger"
+            onClick={props.toggleRemoveModal}
+            className={styles.closeButton}
+          >
+            <Close className={styles.closeButton} />
+          </Button>
+        </Modal.Header>
+        <Modal.Body>{t('removeMemberMsg')}</Modal.Body>
+        <Modal.Footer>
+          {/* Button to cancel the removal action */}
+          <Button
+            variant="danger"
+            onClick={props.toggleRemoveModal}
+            className={styles.closeButton}
+          >
+            {tCommon('no')}
+          </Button>
+          {/* Button to confirm the removal action */}
+          <Button
+            type="button"
+            className={styles.yesButton}
+            onClick={removeMember}
+            data-testid="removeMemberBtn"
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+}
+export {};
+export default orgPeopleListCard;
diff --git a/src/components/OrgPostCard/OrgPostCard.module.css b/src/components/OrgPostCard/OrgPostCard.module.css
new file mode 100644
index 0000000000..c7ff8073d2
--- /dev/null
+++ b/src/components/OrgPostCard/OrgPostCard.module.css
@@ -0,0 +1,278 @@
+.cards h2 {
+  font-size: 20px;
+}
+.cards > h3 {
+  font-size: 17px;
+}
+.card {
+  width: 100%;
+  height: 20rem;
+  margin-bottom: 2rem;
+}
+.postimage {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-width: 100%;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+  color: black;
+}
+.preview {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.preview img {
+  width: 400px;
+  height: auto;
+}
+.preview video {
+  width: 400px;
+  height: auto;
+}
+.nopostimage {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+}
+.cards:hover {
+  filter: brightness(0.8);
+}
+.cards:hover::before {
+  opacity: 0.5;
+}
+.knowMoreText {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  color: white;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 1.5rem;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.cards:hover .knowMoreText {
+  opacity: 1;
+}
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.9
+  ); /* Dark grey modal background with transparency */
+  z-index: 9999;
+}
+
+.modalContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  padding: 20px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.modalImage {
+  flex: 1;
+  margin-right: 20px;
+  width: 25rem;
+  height: 15rem;
+}
+.nomodalImage {
+  flex: 1;
+  margin-right: 20px;
+  width: 100%;
+  height: 15rem;
+}
+
+.modalImage img,
+.modalImage video {
+  border-radius: 0px;
+  width: 100%;
+  height: 25rem;
+  max-width: 25rem;
+  max-height: 15rem;
+  object-fit: cover;
+  position: relative;
+}
+.modalInfo {
+  flex: 1;
+}
+.title {
+  font-size: 16px;
+  color: #000;
+  font-weight: 600;
+}
+.text {
+  font-size: 13px;
+  color: #000;
+  font-weight: 300;
+}
+.author {
+  color: #737373;
+  font-weight: 100;
+  font-size: 13px;
+}
+.closeButton {
+  position: relative;
+  bottom: 5rem;
+  right: 10px;
+  padding: 4px;
+  background-color: red; /* Red close button color */
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+.closeButtonP {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+.cards:hover::after {
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+.cards > p {
+  font-size: 14px;
+  margin-top: 0px;
+  margin-bottom: 7px;
+}
+.cards a {
+  color: #737373;
+  font-weight: 600;
+}
+.cards a:hover {
+  color: black;
+}
+.infodiv {
+  margin-bottom: 7px;
+  width: 15rem;
+  text-align: justify;
+  word-wrap: break-word;
+}
+.infodiv > p {
+  margin: 0;
+}
+.dispflex {
+  display: flex;
+  justify-content: space-between;
+}
+.iconContainer {
+  display: flex;
+}
+.icon {
+  transform: scale(0.75);
+  cursor: pointer;
+}
+/* .cards {
+  width: 75%;
+  background: #fcfcfc;
+  margin: 10px 40px;
+  padding: 20px 30px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 3px 5px #c9c9c9;
+  margin-right: 30px;
+  color: #737373;
+  box-sizing: border-box;
+} */
+.cards:last-child:nth-last-child(odd) {
+  grid-column: auto / span 2;
+}
+.cards:first-child:nth-last-child(even),
+.cards:first-child:nth-last-child(even) ~ .box {
+  grid-column: auto / span 1;
+}
+.toggleClickBtn {
+  color: #31bb6b;
+  cursor: pointer;
+  border: none;
+  font-size: 12px;
+  background-color: white;
+}
+.toggleClickBtnNone {
+  display: none;
+}
+/* Menu Modal Styles */
+.menuModal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.7); /* Dark grey modal background */
+  z-index: 9999;
+}
+
+.menuContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  padding-top: 20px;
+  max-width: 700px;
+  max-height: 500px;
+  overflow: hidden;
+  position: relative;
+}
+
+.menuOptions {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.menuOptions li {
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+  padding-left: 100px;
+  padding-right: 100px;
+  cursor: pointer;
+}
+
+.moreOptionsButton {
+  position: relative;
+  bottom: 5rem;
+  right: 10px;
+  padding: 2px;
+  background-color: transparent;
+  color: #000;
+  border: none;
+  cursor: pointer;
+}
+.list {
+  color: red;
+  cursor: pointer;
+}
diff --git a/src/components/OrgPostCard/OrgPostCard.test.tsx b/src/components/OrgPostCard/OrgPostCard.test.tsx
new file mode 100644
index 0000000000..7105e5e8f2
--- /dev/null
+++ b/src/components/OrgPostCard/OrgPostCard.test.tsx
@@ -0,0 +1,788 @@
+import React from 'react';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import OrgPostCard from './OrgPostCard';
+import { I18nextProvider } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import {
+  DELETE_POST_MUTATION,
+  UPDATE_POST_MUTATION,
+  TOGGLE_PINNED_POST,
+} from 'GraphQl/Mutations/mutations';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import convertToBase64 from 'utils/convertToBase64';
+import { BrowserRouter } from 'react-router-dom';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const MOCKS = [
+  {
+    request: {
+      query: DELETE_POST_MUTATION,
+      variables: { id: '12' },
+    },
+    result: {
+      data: {
+        removePost: {
+          _id: '12',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_POST_MUTATION,
+      variables: {
+        id: '12',
+        title: 'updated title',
+        text: 'This is a updated text',
+      },
+    },
+    result: {
+      data: {
+        updatePost: {
+          _id: '12',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: TOGGLE_PINNED_POST,
+      variables: {
+        id: '12',
+      },
+    },
+    result: {
+      data: {
+        togglePostPin: {
+          _id: '12',
+        },
+      },
+    },
+  },
+];
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+jest.mock('i18next-browser-languagedetector', () => ({
+  init: jest.fn(),
+  type: 'languageDetector',
+  detect: jest.fn(() => 'en'),
+  cacheUserLanguage: jest.fn(),
+}));
+const link = new StaticMockLink(MOCKS, true);
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+describe('Testing Organization Post Card', () => {
+  const originalLocation = window.location;
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        reload: jest.fn(),
+      },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: originalLocation,
+    });
+  });
+
+  const props = {
+    id: '12',
+    postID: '123',
+    postTitle: 'Event Info',
+    postInfo: 'Time change',
+    postAuthor: 'John Doe',
+    postPhoto: 'test.png',
+    postVideo: 'test.mp4',
+    pinned: false,
+  };
+
+  jest.mock('react-toastify', () => ({
+    toast: {
+      success: jest.fn(),
+      warn: jest.fn(),
+      error: jest.fn(),
+    },
+  }));
+  jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useRef: jest.fn(),
+  }));
+  global.alert = jest.fn();
+
+  test('Opens post on image click', () => {
+    const { getByTestId, getByAltText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByAltText('image'));
+
+    expect(getByTestId('card-text')).toBeInTheDocument();
+    expect(getByTestId('card-title')).toBeInTheDocument();
+    expect(getByAltText('image')).toBeInTheDocument();
+  });
+  test('renders with default props', () => {
+    const { getByAltText, getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    expect(getByTestId('card-text')).toBeInTheDocument();
+    expect(getByTestId('card-title')).toBeInTheDocument();
+    expect(getByAltText('image')).toBeInTheDocument();
+  });
+  test('toggles "Read more" button', () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByAltText('image'));
+    const toggleButton = getByTestId('toggleBtn');
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveTextContent('hide');
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveTextContent('Read more');
+  });
+  test('opens and closes edit modal', async () => {
+    setItem('id', '123');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+    const createOrgBtn = screen.getByTestId('modalOrganizationHeader');
+    expect(createOrgBtn).toBeInTheDocument();
+    userEvent.click(createOrgBtn);
+    userEvent.click(screen.getByTestId('closeOrganizationModal'));
+  });
+  test('Should render text elements when props value is not passed', async () => {
+    global.confirm = (): boolean => false;
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByAltText('image'));
+    expect(screen.getByAltText('Post Image')).toBeInTheDocument();
+  });
+  test('Testing post updating after post is updated', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+    fireEvent.change(getByTestId('updateTitle'), {
+      target: { value: 'updated title' },
+    });
+    fireEvent.change(getByTestId('updateText'), {
+      target: { value: 'This is a updated text' },
+    });
+    const postVideoUrlInput = screen.queryByTestId('postVideoUrl');
+    if (postVideoUrlInput) {
+      fireEvent.change(getByTestId('postVideoUrl'), {
+        target: { value: 'This is a updated video' },
+      });
+      userEvent.click(screen.getByPlaceholderText(/video/i));
+      const input = getByTestId('postVideoUrl');
+      const file = new File(['test-video'], 'test.mp4', { type: 'video/mp4' });
+      Object.defineProperty(input, 'files', {
+        value: [file],
+      });
+      fireEvent.change(input);
+      await waitFor(() => {
+        convertToBase64(file);
+      });
+
+      userEvent.click(screen.getByTestId('closePreview'));
+    }
+    const imageUrlInput = screen.queryByTestId('postImageUrl');
+    if (imageUrlInput) {
+      fireEvent.change(getByTestId('postImageUrl'), {
+        target: { value: 'This is a updated image' },
+      });
+      userEvent.click(screen.getByPlaceholderText(/image/i));
+      const input = getByTestId('postImageUrl');
+      const file = new File(['test-image'], 'test.jpg', { type: 'image/jpeg' });
+      Object.defineProperty(input, 'files', {
+        value: [file],
+      });
+      fireEvent.change(input);
+
+      // Simulate the asynchronous base64 conversion function
+      await waitFor(() => {
+        convertToBase64(file); // Replace with the expected base64-encoded image
+      });
+      document.getElementById = jest.fn(() => input);
+      const clearImageButton = getByTestId('closeimage');
+      fireEvent.click(clearImageButton);
+    }
+    userEvent.click(screen.getByTestId('updatePostBtn'));
+
+    await waitFor(
+      () => {
+        expect(window.location.reload).toHaveBeenCalled();
+      },
+      { timeout: 2500 },
+    );
+  });
+  test('Testing post updating functionality fail case', async () => {
+    const props2 = {
+      id: '',
+      postID: '123',
+      postTitle: 'Event Info',
+      postInfo: 'Time change',
+      postAuthor: 'John Doe',
+      postPhoto: 'test.png',
+      postVideo: 'test.mp4',
+      pinned: true,
+    };
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props2} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+    fireEvent.change(getByTestId('updateTitle'), {
+      target: { value: 'updated title' },
+    });
+    fireEvent.change(getByTestId('updateText'), {
+      target: { value: 'This is a updated text' },
+    });
+    const postVideoUrlInput = screen.queryByTestId('postVideoUrl');
+    if (postVideoUrlInput) {
+      fireEvent.change(getByTestId('postVideoUrl'), {
+        target: { value: 'This is a updated video' },
+      });
+      userEvent.click(screen.getByPlaceholderText(/video/i));
+      const input = getByTestId('postVideoUrl');
+      const file = new File(['test-video'], 'test.mp4', { type: 'video/mp4' });
+      Object.defineProperty(input, 'files', {
+        value: [file],
+      });
+      fireEvent.change(input);
+      await waitFor(() => {
+        convertToBase64(file);
+      });
+
+      userEvent.click(screen.getByTestId('closePreview'));
+    }
+    const imageUrlInput = screen.queryByTestId('postImageUrl');
+    if (imageUrlInput) {
+      fireEvent.change(getByTestId('postImageUrl'), {
+        target: { value: 'This is a updated image' },
+      });
+      userEvent.click(screen.getByPlaceholderText(/image/i));
+      const input = getByTestId('postImageUrl');
+      const file = new File(['test-image'], 'test.jpg', { type: 'image/jpeg' });
+      Object.defineProperty(input, 'files', {
+        value: [file],
+      });
+      fireEvent.change(input);
+
+      // Simulate the asynchronous base64 conversion function
+      await waitFor(() => {
+        convertToBase64(file); // Replace with the expected base64-encoded image
+      });
+      document.getElementById = jest.fn(() => input);
+      const clearImageButton = getByTestId('closeimage');
+      fireEvent.click(clearImageButton);
+    }
+    userEvent.click(screen.getByTestId('updatePostBtn'));
+
+    await waitFor(
+      () => {
+        expect(window.location.reload).toHaveBeenCalled();
+      },
+      { timeout: 2500 },
+    );
+  });
+  test('Testing pin post functionality', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    userEvent.click(screen.getByTestId('pinpostBtn'));
+
+    await waitFor(
+      () => {
+        expect(window.location.reload).toHaveBeenCalled();
+      },
+      { timeout: 3000 },
+    );
+  });
+  test('Testing pin post functionality fail case', async () => {
+    const props2 = {
+      id: '',
+      postID: '123',
+      postTitle: 'Event Info',
+      postInfo: 'Time change',
+      postAuthor: 'John Doe',
+      postPhoto: 'test.png',
+      postVideo: 'test.mp4',
+      pinned: true,
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props2} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    userEvent.click(screen.getByTestId('pinpostBtn'));
+  });
+  test('Testing post delete functionality', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgPostCard {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('deletePostModalBtn'));
+    fireEvent.click(screen.getByTestId('deletePostBtn'));
+
+    await waitFor(
+      () => {
+        expect(window.location.reload).toHaveBeenCalled();
+      },
+      { timeout: 3000 },
+    );
+  });
+  test('Testing post delete functionality fail case', async () => {
+    const props2 = {
+      id: '',
+      postID: '123',
+      postTitle: 'Event Info',
+      postInfo: 'Time change',
+      postAuthor: 'John Doe',
+      postPhoto: 'test.png',
+      postVideo: 'test.mp4',
+      pinned: true,
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgPostCard {...props2} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('deletePostModalBtn'));
+    fireEvent.click(screen.getByTestId('deletePostBtn'));
+  });
+  test('Testing close functionality of primary modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('closeiconbtn'));
+
+    //Primary Modal is closed
+    expect(screen.queryByTestId('moreiconbtn')).not.toBeInTheDocument();
+  });
+  test('Testing close functionality of secondary modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    userEvent.click(screen.getByTestId('closebtn'));
+
+    //Secondary Modal is closed
+    expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('editPostModalBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('pinpostBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('closebtn')).not.toBeInTheDocument();
+  });
+  test('renders without "Read more" button when postInfo length is less than or equal to 43', () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    expect(screen.queryByTestId('toggleBtn')).not.toBeInTheDocument();
+  });
+  test('renders with "Read more" button when postInfo length is more than 43', () => {
+    const props2 = {
+      id: '12',
+      postID: '123',
+      postTitle: 'Event Info',
+      postInfo:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.', // Length is greater than 43
+      postAuthor: 'John Doe',
+      postPhoto: 'photoLink',
+      postVideo: 'videoLink',
+      pinned: false,
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props2} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByAltText('image'));
+
+    expect(screen.getByTestId('toggleBtn')).toBeInTheDocument();
+  });
+  test('updates state variables correctly when handleEditModal is called', () => {
+    const link2 = new StaticMockLink(MOCKS, true);
+    render(
+      <MockedProvider link={link2} addTypename={false}>
+        <OrgPostCard {...props} />
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByAltText('image'));
+
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    expect(screen.queryByTestId('editPostModalBtn')).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+    //Primary Modal is closed
+    expect(screen.queryByTestId('closeiconbtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('moreiconbtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('toggleBtn')).not.toBeInTheDocument();
+
+    //Secondary Modal is closed
+    expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('editPostModalBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('pinpostBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('closebtn')).not.toBeInTheDocument();
+  });
+  test('updates state variables correctly when handleDeleteModal is called', () => {
+    const link2 = new StaticMockLink(MOCKS, true);
+    render(
+      <MockedProvider link={link2} addTypename={false}>
+        <OrgPostCard {...props} />
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByAltText('image'));
+
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    expect(screen.queryByTestId('deletePostModalBtn')).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('deletePostModalBtn'));
+
+    //Primary Modal is closed
+    expect(screen.queryByTestId('closeiconbtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('moreiconbtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('toggleBtn')).not.toBeInTheDocument();
+
+    //Secondary Modal is closed
+    expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('editPostModalBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('pinpostBtn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('closebtn')).not.toBeInTheDocument();
+  });
+  test('clears postvideo state and resets file input value', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+    const postVideoUrlInput = screen.queryByTestId('postVideoUrl');
+
+    if (postVideoUrlInput) {
+      fireEvent.change(getByTestId('postVideoUrl'), {
+        target: { value: '' },
+      });
+      userEvent.click(screen.getByPlaceholderText(/video/i));
+      const input = getByTestId('postVideoUrl');
+      const file = new File(['test-video'], 'test.mp4', { type: 'video/mp4' });
+      Object.defineProperty(input, 'files', {
+        value: [file],
+      });
+      fireEvent.change(input);
+      await waitFor(() => {
+        convertToBase64(file);
+      });
+
+      userEvent.click(screen.getByTestId('closePreview'));
+    }
+  });
+  test('clears postimage state and resets file input value', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+    const imageUrlInput = screen.queryByTestId('postImageUrl');
+
+    if (imageUrlInput) {
+      fireEvent.change(getByTestId('postImageUrl'), {
+        target: { value: '' },
+      });
+      userEvent.click(screen.getByPlaceholderText(/image/i));
+      const input = getByTestId('postImageUrl');
+      const file = new File(['test-image'], 'test.jpg', { type: 'image/jpeg' });
+      Object.defineProperty(input, 'files', {
+        value: [file],
+      });
+      fireEvent.change(input);
+
+      // Simulate the asynchronous base64 conversion function
+      await waitFor(() => {
+        convertToBase64(file); // Replace with the expected base64-encoded image
+      });
+      document.getElementById = jest.fn(() => input);
+      const clearImageButton = getByTestId('closeimage');
+      fireEvent.click(clearImageButton);
+    }
+  });
+  test('clears postitle state and resets file input value', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+    fireEvent.change(getByTestId('updateTitle'), {
+      target: { value: '' },
+    });
+
+    userEvent.click(screen.getByTestId('updatePostBtn')); // Should not update post
+
+    expect(screen.getByTestId('updateTitle')).toHaveValue('');
+    expect(screen.getByTestId('closeOrganizationModal')).toBeInTheDocument();
+    expect(screen.getByTestId('updatePostBtn')).toBeInTheDocument();
+  });
+  test('clears postinfo state and resets file input value', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByAltText('image'));
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+    fireEvent.change(getByTestId('updateText'), {
+      target: { value: '' },
+    });
+
+    userEvent.click(screen.getByTestId('updatePostBtn')); // Should not update post
+
+    expect(screen.getByTestId('updateText')).toHaveValue('');
+    expect(screen.getByTestId('closeOrganizationModal')).toBeInTheDocument();
+    expect(screen.getByTestId('updatePostBtn')).toBeInTheDocument();
+  });
+  test('Testing create organization modal', async () => {
+    setItem('id', '123');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByAltText('image'));
+
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+
+    userEvent.click(screen.getByTestId('editPostModalBtn'));
+    const createOrgBtn = screen.getByTestId('modalOrganizationHeader');
+    expect(createOrgBtn).toBeInTheDocument();
+    userEvent.click(createOrgBtn);
+    userEvent.click(screen.getByTestId('closeOrganizationModal'));
+  });
+  test('should toggle post pin when pin button is clicked', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByAltText('image'));
+
+    userEvent.click(screen.getByTestId('moreiconbtn'));
+    const pinButton = getByTestId('pinpostBtn');
+    fireEvent.click(pinButton);
+    await waitFor(() => {
+      expect(MOCKS[2].request.variables).toEqual({
+        id: '12',
+      });
+    });
+  });
+  test('testing video play and pause on mouse enter and leave events', async () => {
+    const { getByTestId } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    const card = getByTestId('cardVid');
+
+    HTMLVideoElement.prototype.play = jest.fn();
+    HTMLVideoElement.prototype.pause = jest.fn();
+
+    fireEvent.mouseEnter(card);
+    expect(HTMLVideoElement.prototype.play).toHaveBeenCalled();
+
+    fireEvent.mouseLeave(card);
+    expect(HTMLVideoElement.prototype.pause).toHaveBeenCalled();
+  });
+  test('for rendering when no image and no video is available', async () => {
+    const props2 = {
+      id: '',
+      postID: '123',
+      postTitle: 'Event Info',
+      postInfo: 'Time change',
+      postAuthor: 'John Doe',
+      postPhoto: '',
+      postVideo: '',
+      pinned: true,
+    };
+
+    const { getByAltText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgPostCard {...props2} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(getByAltText('image not found')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
new file mode 100644
index 0000000000..b7cc419d12
--- /dev/null
+++ b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -0,0 +1,611 @@
+import { useMutation } from '@apollo/client';
+import { Close, MoreVert, PushPin } from '@mui/icons-material';
+import {
+  DELETE_POST_MUTATION,
+  TOGGLE_PINNED_POST,
+  UPDATE_POST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import AboutImg from 'assets/images/defaultImg.png';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Button, Card, Modal } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import convertToBase64 from 'utils/convertToBase64';
+import { errorHandler } from 'utils/errorHandler';
+import type { InterfacePostForm } from 'utils/interfaces';
+import styles from './OrgPostCard.module.css';
+interface InterfaceOrgPostCardProps {
+  postID: string;
+  id: string;
+  postTitle: string;
+  postInfo: string;
+  postAuthor: string;
+  postPhoto: string | null;
+  postVideo: string | null;
+  pinned: boolean;
+}
+export default function OrgPostCard(
+  props: InterfaceOrgPostCardProps,
+): JSX.Element {
+  const {
+    postID, // Destructure the key prop from props
+    // ...rest // Spread the rest of the props
+  } = props;
+  const [postformState, setPostFormState] = useState<InterfacePostForm>({
+    posttitle: '',
+    postinfo: '',
+    postphoto: '',
+    postvideo: '',
+    pinned: false,
+  });
+  const [postPhotoUpdated, setPostPhotoUpdated] = useState(false);
+  const [postVideoUpdated, setPostVideoUpdated] = useState(false);
+  const [togglePost, setPostToggle] = useState('Read more');
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [toggle] = useMutation(TOGGLE_PINNED_POST);
+  const togglePostPin = async (id: string, pinned: boolean): Promise<void> => {
+    try {
+      const { data } = await toggle({
+        variables: {
+          id,
+        },
+      });
+      if (data) {
+        setModalVisible(false);
+        setMenuVisible(false);
+        toast.success(`${pinned ? 'Post unpinned' : 'Post pinned'}`);
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    }
+  };
+  const toggleShowEditModal = (): void => {
+    const { postTitle, postInfo, postPhoto, postVideo, pinned } = props;
+    setPostFormState({
+      posttitle: postTitle,
+      postinfo: postInfo,
+      postphoto: postPhoto,
+      postvideo: postVideo,
+      pinned: pinned,
+    });
+    setPostPhotoUpdated(false);
+    setPostVideoUpdated(false);
+    setShowEditModal((prev) => !prev);
+  };
+  const toggleShowDeleteModal = (): void => setShowDeleteModal((prev) => !prev);
+  const handleVideoPlay = (): void => {
+    setPlaying(true);
+    videoRef.current?.play();
+  };
+  const handleVideoPause = (): void => {
+    setPlaying(false);
+    videoRef.current?.pause();
+  };
+  const handleCardClick = (): void => {
+    setModalVisible(true);
+  };
+  const handleMoreOptionsClick = (): void => {
+    setMenuVisible(true);
+  };
+  const clearImageInput = (): void => {
+    setPostFormState({
+      ...postformState,
+      postphoto: '',
+    });
+    setPostPhotoUpdated(true);
+    const fileInput = document.getElementById(
+      'postImageUrl',
+    ) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = '';
+    }
+  };
+  const clearVideoInput = (): void => {
+    setPostFormState({
+      ...postformState,
+      postvideo: '',
+    });
+    setPostVideoUpdated(true);
+    const fileInput = document.getElementById(
+      'postVideoUrl',
+    ) as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = '';
+    }
+  };
+  function handletoggleClick(): void {
+    if (togglePost === 'Read more') {
+      setPostToggle('hide');
+    } else {
+      setPostToggle('Read more');
+    }
+  }
+  function handleEditModal(): void {
+    const { postPhoto, postVideo } = props;
+    setModalVisible(false);
+    setMenuVisible(false);
+    setShowEditModal(true);
+    setPostFormState({
+      ...postformState,
+      postphoto: postPhoto,
+      postvideo: postVideo,
+    });
+  }
+  function handleDeleteModal(): void {
+    setModalVisible(false);
+    setMenuVisible(false);
+    setShowDeleteModal(true);
+  }
+  useEffect(() => {
+    setPostFormState({
+      posttitle: props.postTitle,
+      postinfo: props.postInfo,
+      postphoto: props.postPhoto,
+      postvideo: props.postVideo,
+      pinned: props.pinned,
+    });
+  }, []);
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgPostCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const [deletePostMutation] = useMutation(DELETE_POST_MUTATION);
+  const [updatePostMutation] = useMutation(UPDATE_POST_MUTATION);
+  const deletePost = async (): Promise<void> => {
+    try {
+      const { data } = await deletePostMutation({
+        variables: {
+          id: props.id,
+        },
+      });
+      if (data) {
+        toast.success(t('postDeleted') as string);
+        toggleShowDeleteModal();
+        setTimeout(() => {
+          window.location.reload();
+        });
+      }
+    } catch (error: unknown) {
+      errorHandler(t, error);
+    }
+  };
+  const handleInputEvent = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    const { name, value } = e.target;
+    setPostFormState((prevPostFormState) => ({
+      ...prevPostFormState,
+      [name]: value,
+    }));
+  };
+  const updatePostHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      const { data } = await updatePostMutation({
+        variables: {
+          id: props.id,
+          title: postformState.posttitle,
+          text: postformState.postinfo,
+          ...(postPhotoUpdated && {
+            imageUrl: postformState.postphoto,
+          }),
+          ...(postVideoUpdated && {
+            videoUrl: postformState.postvideo,
+          }),
+        },
+      });
+      if (data) {
+        toast.success(t('postUpdated') as string);
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+  return (
+    <>
+      <div
+        key={postID}
+        className="col-xl-4 col-lg-4 col-md-6"
+        data-testid="post-item"
+      >
+        <div
+          className={styles.cards}
+          onClick={handleCardClick}
+          data-testid="cardStructure"
+        >
+          {props.postVideo && (
+            <Card
+              className={styles.card}
+              data-testid="cardVid"
+              onMouseEnter={handleVideoPlay}
+              onMouseLeave={handleVideoPause}
+            >
+              <video
+                ref={videoRef}
+                muted
+                className={styles.postimage}
+                autoPlay={playing}
+                loop={true}
+                playsInline
+              >
+                <source src={props?.postVideo} type="video/mp4" />
+              </video>
+              <Card.Body>
+                {props.pinned && (
+                  <PushPin
+                    color="success"
+                    fontSize="large"
+                    className="fs-5"
+                    data-testid="pin-icon"
+                  />
+                )}
+                <Card.Title className={styles.title} data-testid="card-title">
+                  {props.postTitle}
+                </Card.Title>
+                <Card.Text className={styles.text} data-testid="card-text">
+                  {props.postInfo}
+                </Card.Text>
+                <Card.Link data-testid="card-authour">
+                  {props.postAuthor}
+                </Card.Link>
+              </Card.Body>
+            </Card>
+          )}
+          {props.postPhoto ? (
+            <Card className={styles.card}>
+              <Card.Img
+                className={styles.postimage}
+                variant="top"
+                src={props.postPhoto}
+                alt="image"
+              />
+              <Card.Body>
+                {props.pinned && (
+                  <PushPin color="success" fontSize="large" className="fs-5" />
+                )}
+                <Card.Title className={styles.title}>
+                  {props.postTitle}
+                </Card.Title>
+                <Card.Text className={styles.text}>{props.postInfo}</Card.Text>
+                <Card.Link>{props.postAuthor}</Card.Link>
+              </Card.Body>
+            </Card>
+          ) : !props.postVideo ? (
+            <span>
+              <Card className={styles.card}>
+                <Card.Img
+                  variant="top"
+                  src={AboutImg}
+                  alt="image not found"
+                  className={styles.nopostimage}
+                />
+                <Card.Body>
+                  {props.pinned && (
+                    <PushPin
+                      color="success"
+                      fontSize="large"
+                      className="fs-5"
+                    />
+                  )}
+                  <Card.Title className={styles.title}>
+                    {props.postTitle}
+                  </Card.Title>
+                  <Card.Text className={styles.text}>
+                    {props.postInfo && props.postInfo.length > 20
+                      ? props.postInfo.substring(0, 20) + '...'
+                      : props.postInfo}
+                  </Card.Text>{' '}
+                  <Card.Link className={styles.author}>
+                    {props.postAuthor}
+                  </Card.Link>
+                </Card.Body>
+              </Card>
+            </span>
+          ) : (
+            ''
+          )}
+        </div>
+        {modalVisible && (
+          <div className={styles.modal} data-testid={'imagepreviewmodal'}>
+            <div className={styles.modalContent}>
+              {props.postPhoto && (
+                <div className={styles.modalImage}>
+                  <img src={props.postPhoto} alt="Post Image" />
+                </div>
+              )}
+              {props.postVideo && (
+                <div className={styles.modalImage}>
+                  <video controls autoPlay loop muted>
+                    <source src={props?.postVideo} type="video/mp4" />
+                  </video>
+                </div>
+              )}
+              {!props.postPhoto && !props.postVideo && (
+                <div className={styles.modalImage}>
+                  {' '}
+                  <img src={AboutImg} alt="Post Image" />
+                </div>
+              )}
+              <div className={styles.modalInfo}>
+                <p>
+                  {t('author')}:<span> {props.postAuthor}</span>
+                </p>
+                <div className={styles.infodiv}>
+                  {togglePost === 'Read more' ? (
+                    <p data-testid="toggleContent">
+                      {props.postInfo.length > 43
+                        ? props.postInfo.substring(0, 40) + '...'
+                        : props.postInfo}
+                    </p>
+                  ) : (
+                    <p data-testid="toggleContent">{props.postInfo}</p>
+                  )}
+                  <button
+                    role="toggleBtn"
+                    data-testid="toggleBtn"
+                    className={`${
+                      props.postInfo.length > 43
+                        ? styles.toggleClickBtn
+                        : styles.toggleClickBtnNone
+                    }`}
+                    onClick={handletoggleClick}
+                  >
+                    {togglePost}
+                  </button>
+                </div>
+              </div>
+              <button
+                className={styles.moreOptionsButton}
+                onClick={handleMoreOptionsClick}
+                data-testid="moreiconbtn"
+              >
+                <MoreVert />
+              </button>
+              <button
+                className={styles.closeButton}
+                onClick={(): void => setModalVisible(false)}
+                data-testid="closeiconbtn"
+              >
+                <Close />
+              </button>
+            </div>
+          </div>
+        )}
+        {menuVisible && (
+          <div className={styles.menuModal}>
+            <div className={styles.menuContent}>
+              <ul className={styles.menuOptions}>
+                <li
+                  data-toggle="modal"
+                  data-target={`#editPostModal${props.id}`}
+                  onClick={handleEditModal}
+                  data-testid="editPostModalBtn"
+                >
+                  {tCommon('edit')}
+                </li>
+                <li
+                  data-toggle="modal"
+                  data-target={`#deletePostModal${props.id}`}
+                  onClick={handleDeleteModal}
+                  data-testid="deletePostModalBtn"
+                >
+                  {t('deletePost')}
+                </li>
+                <li
+                  data-testid="pinpostBtn"
+                  onClick={(): Promise<void> =>
+                    togglePostPin(props.id, props.pinned)
+                  }
+                >
+                  {!props.pinned ? 'Pin post' : 'Unpin post'}
+                </li>
+                <li
+                  className={styles.list}
+                  onClick={(): void => setMenuVisible(false)}
+                  data-testid="closebtn"
+                >
+                  {tCommon('close')}
+                </li>
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
+      <Modal show={showDeleteModal} onHide={toggleShowDeleteModal}>
+        <Modal.Header>
+          <h5>{t('deletePost')}</h5>
+          <Button variant="danger" onClick={toggleShowDeleteModal}>
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>{t('deletePostMsg')}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="danger" onClick={toggleShowDeleteModal}>
+            {tCommon('no')}
+          </Button>
+          <Button
+            type="button"
+            className="btn btn-success"
+            onClick={deletePost}
+            data-testid="deletePostBtn"
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+      <Modal
+        show={showEditModal}
+        onHide={toggleShowEditModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header
+          className="bg-primary"
+          data-testid="modalOrganizationHeader"
+          closeButton
+        >
+          <Modal.Title className="text-white">{t('editPost')}</Modal.Title>
+        </Modal.Header>
+        <Form onSubmitCapture={updatePostHandler}>
+          <Modal.Body>
+            <Form.Label htmlFor="posttitle">{t('postTitle')}</Form.Label>
+            <Form.Control
+              type="text"
+              id="postTitle"
+              name="posttitle"
+              value={postformState.posttitle}
+              onChange={handleInputEvent}
+              data-testid="updateTitle"
+              required
+              className="mb-3"
+              placeholder={t('postTitle1')}
+              autoComplete="off"
+            />
+            <Form.Label htmlFor="postinfo">{t('information')}</Form.Label>
+            <Form.Control
+              type="descrip"
+              id="descrip"
+              className="mb-3"
+              name="postinfo"
+              value={postformState.postinfo}
+              placeholder={t('information1')}
+              autoComplete="off"
+              onChange={handleInputEvent}
+              data-testid="updateText"
+              required
+            />
+            {!props.postPhoto && (
+              <>
+                <Form.Label htmlFor="postPhoto">{t('image')}</Form.Label>
+                <Form.Control
+                  accept="image/*"
+                  id="postImageUrl"
+                  data-testid="postImageUrl"
+                  name="postphoto"
+                  type="file"
+                  placeholder={t('image')}
+                  multiple={false}
+                  onChange={async (
+                    e: React.ChangeEvent<HTMLInputElement>,
+                  ): Promise<void> => {
+                    setPostFormState((prevPostFormState) => ({
+                      ...prevPostFormState,
+                      postphoto: '',
+                    }));
+                    setPostPhotoUpdated(true);
+                    const file = e.target.files?.[0];
+                    if (file) {
+                      setPostFormState({
+                        ...postformState,
+                        postphoto: await convertToBase64(file),
+                      });
+                    }
+                  }}
+                />
+                {props.postPhoto && (
+                  <>
+                    {postformState.postphoto && (
+                      <div className={styles.preview}>
+                        <img
+                          src={postformState.postphoto}
+                          alt="Post Image Preview"
+                        />
+                        <button
+                          className={styles.closeButtonP}
+                          onClick={clearImageInput}
+                          data-testid="closeimage"
+                        >
+                          <i className="fa fa-times"></i>
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+            {!props.postVideo && (
+              <>
+                <Form.Label htmlFor="postvideo">{t('video')}</Form.Label>
+                <Form.Control
+                  accept="video/*"
+                  id="postVideoUrl"
+                  data-testid="postVideoUrl"
+                  name="postvideo"
+                  type="file"
+                  placeholder={t('video')}
+                  multiple={false}
+                  onChange={async (
+                    e: React.ChangeEvent<HTMLInputElement>,
+                  ): Promise<void> => {
+                    setPostFormState((prevPostFormState) => ({
+                      ...prevPostFormState,
+                      postvideo: '',
+                    }));
+                    setPostVideoUpdated(true);
+                    const target = e.target as HTMLInputElement;
+                    const file = target.files && target.files[0];
+                    if (file) {
+                      const videoBase64 = await convertToBase64(file);
+                      setPostFormState({
+                        ...postformState,
+                        postvideo: videoBase64,
+                      });
+                    }
+                  }}
+                />
+                {postformState.postvideo && (
+                  <div className={styles.preview}>
+                    <video controls>
+                      <source src={postformState.postvideo} type="video/mp4" />
+                      {t('tag')}
+                    </video>
+                    <button
+                      className={styles.closeButtonP}
+                      data-testid="closePreview"
+                      onClick={clearVideoInput}
+                    >
+                      <i className="fa fa-times"></i>
+                    </button>
+                  </div>
+                )}
+              </>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={toggleShowEditModal}
+              data-testid="closeOrganizationModal"
+              type="button"
+            >
+              {tCommon('close')}
+            </Button>
+            <Button type="submit" value="invite" data-testid="updatePostBtn">
+              {t('updatePost')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx
new file mode 100644
index 0000000000..39d4884e8b
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/CategoryModal.test.tsx
@@ -0,0 +1,208 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, MOCKS_ERROR } from './OrgActionItemCategoryMocks';
+import type { InterfaceActionItemCategoryModal } from './CategoryModal';
+import CategoryModal from './CategoryModal';
+import { toast } from 'react-toastify';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link3 = new StaticMockLink(MOCKS_ERROR);
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.orgActionItemCategories ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const categoryProps: InterfaceActionItemCategoryModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    refetchCategories: jest.fn(),
+    orgId: 'orgId',
+    mode: 'create',
+    category: {
+      _id: 'categoryId',
+      name: 'Category 1',
+      isDisabled: false,
+      createdAt: '2044-01-01',
+      creator: { _id: 'userId', firstName: 'John', lastName: 'Doe' },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    refetchCategories: jest.fn(),
+    orgId: 'orgId',
+    mode: 'edit',
+    category: {
+      _id: 'categoryId',
+      name: 'Category 1',
+      isDisabled: false,
+      createdAt: '2044-01-01',
+      creator: { _id: 'userId', firstName: 'John', lastName: 'Doe' },
+    },
+  },
+];
+
+const renderCategoryModal = (
+  link: ApolloLink,
+  props: InterfaceActionItemCategoryModal,
+): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <CategoryModal {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+const fillFormAndSubmit = async (
+  name: string,
+  isDisabled: boolean,
+): Promise<void> => {
+  const nameInput = screen.getByLabelText('Name *');
+  const isDisabledSwitch = screen.getByTestId('isDisabledSwitch');
+  const submitBtn = screen.getByTestId('formSubmitButton');
+
+  fireEvent.change(nameInput, { target: { value: name } });
+  if (isDisabled) {
+    userEvent.click(isDisabledSwitch);
+  }
+  userEvent.click(submitBtn);
+};
+
+describe('Testing Action Item Category Modal', () => {
+  it('should populate form fields with correct values in edit mode', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    await waitFor(() =>
+      expect(
+        screen.getByText(translations.categoryDetails),
+      ).toBeInTheDocument(),
+    );
+
+    expect(screen.getByLabelText('Name *')).toHaveValue('Category 1');
+    expect(screen.getByTestId('isDisabledSwitch')).not.toBeChecked();
+  });
+
+  it('should update name when input value changes', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    const nameInput = screen.getByLabelText('Name *');
+    expect(nameInput).toHaveValue('Category 1');
+    fireEvent.change(nameInput, { target: { value: 'Category 2' } });
+    expect(nameInput).toHaveValue('Category 2');
+  });
+
+  it('should update isDisabled when switch is toggled', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    const isDisabledSwitch = screen.getByTestId('isDisabledSwitch');
+    expect(isDisabledSwitch).not.toBeChecked();
+    userEvent.click(isDisabledSwitch);
+    expect(isDisabledSwitch).toBeChecked();
+  });
+
+  it('should edit category', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    await fillFormAndSubmit('Category 2', true);
+
+    await waitFor(() => {
+      expect(categoryProps[1].refetchCategories).toHaveBeenCalled();
+      expect(categoryProps[1].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfulUpdation,
+      );
+    });
+  });
+
+  it('Edit only Name', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    await fillFormAndSubmit('Category 2', false);
+
+    await waitFor(() => {
+      expect(categoryProps[1].refetchCategories).toHaveBeenCalled();
+      expect(categoryProps[1].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfulUpdation,
+      );
+    });
+  });
+
+  it('Edit only isDisabled', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    await fillFormAndSubmit('Category 1', true);
+
+    await waitFor(() => {
+      expect(categoryProps[1].refetchCategories).toHaveBeenCalled();
+      expect(categoryProps[1].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfulUpdation,
+      );
+    });
+  });
+
+  it('Error in updating category', async () => {
+    renderCategoryModal(link3, categoryProps[1]);
+    await fillFormAndSubmit('Category 2', true);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+
+  it('should create category', async () => {
+    renderCategoryModal(link1, categoryProps[0]);
+    await fillFormAndSubmit('Category 2', true);
+
+    await waitFor(() => {
+      expect(categoryProps[0].refetchCategories).toHaveBeenCalled();
+      expect(categoryProps[0].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfulCreation,
+      );
+    });
+  });
+
+  it('Error in creating category', async () => {
+    renderCategoryModal(link3, categoryProps[0]);
+    await fillFormAndSubmit('Category 2', true);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+
+  it('Try to edit without changing any field', async () => {
+    renderCategoryModal(link1, categoryProps[1]);
+    const submitBtn = screen.getByTestId('formSubmitButton');
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(translations.sameNameConflict);
+    });
+  });
+});
diff --git a/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
new file mode 100644
index 0000000000..43018db0ab
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/CategoryModal.tsx
@@ -0,0 +1,208 @@
+import React, { type ChangeEvent, type FC, useEffect, useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import styles from './OrgActionItemCategories.module.css';
+import { useTranslation } from 'react-i18next';
+import type { InterfaceActionItemCategoryInfo } from 'utils/interfaces';
+import { useMutation } from '@apollo/client';
+import {
+  CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+  UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+} from 'GraphQl/Mutations/ActionItemCategoryMutations';
+import { toast } from 'react-toastify';
+import { FormControl, TextField } from '@mui/material';
+
+/**
+ * Props for the `CategoryModal` component.
+ *
+ *
+ * isOpen - The state of the modal.
+ * hide - The function to hide the modal.
+ * refetchCategories - The function to refetch the categories.
+ * orgId - The organization ID.
+ * category - The category to be edited.
+ * mode - The mode of the modal.
+ * @returns The `CategoryModal` component.
+ */
+export interface InterfaceActionItemCategoryModal {
+  isOpen: boolean;
+  hide: () => void;
+  refetchCategories: () => void;
+  orgId: string;
+  category: InterfaceActionItemCategoryInfo | null;
+  mode: 'create' | 'edit';
+}
+
+/**
+ * A modal component for creating and editing action item categories.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `CategoryModal` component.
+ */
+const CategoryModal: FC<InterfaceActionItemCategoryModal> = ({
+  category,
+  hide,
+  isOpen,
+  mode,
+  refetchCategories,
+  orgId,
+}) => {
+  const { t: tCommon } = useTranslation('common');
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgActionItemCategories',
+  });
+
+  const [formState, setFormState] = useState({
+    name: category?.name ?? '',
+    isDisabled: category?.isDisabled ?? false,
+  });
+
+  const { name, isDisabled } = formState;
+
+  useEffect(() => {
+    setFormState({
+      name: category?.name ?? '',
+      isDisabled: category?.isDisabled ?? false,
+    });
+  }, [category]);
+
+  // Mutations for creating and updating categories
+  const [createActionItemCategory] = useMutation(
+    CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+  );
+
+  const [updateActionItemCategory] = useMutation(
+    UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+  );
+
+  /**
+   * Handles category creation.
+   *
+   * @param e - The form submission event.
+   */
+  const handleCreate = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await createActionItemCategory({
+        variables: {
+          name,
+          isDisabled,
+          organizationId: orgId,
+        },
+      });
+
+      refetchCategories();
+      hide();
+      toast.success(t('successfulCreation'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  /**
+   * Handles category update.
+   *
+   * @param e - The form submission event.
+   */
+  const handleEdit = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+    if (name === category?.name && isDisabled === category?.isDisabled) {
+      toast.error(t('sameNameConflict')); // Show error if the name is the same
+    } else {
+      try {
+        const updatedFields: { [key: string]: string | boolean } = {};
+        if (name != category?.name) {
+          updatedFields.name = name;
+        }
+        if (isDisabled != category?.isDisabled) {
+          updatedFields.isDisabled = isDisabled;
+        }
+
+        await updateActionItemCategory({
+          variables: {
+            actionItemCategoryId: category?._id,
+            ...updatedFields,
+          },
+        });
+
+        setFormState({
+          name: '',
+          isDisabled: false,
+        });
+        refetchCategories();
+        hide();
+        toast.success(t('successfulUpdation'));
+      } catch (error: unknown) {
+        toast.error((error as Error).message);
+      }
+    }
+  };
+
+  return (
+    <Modal className={styles.createModal} show={isOpen} onHide={hide}>
+      <Modal.Header>
+        <p className={`${styles.titlemodal}`}>{t('categoryDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="actionItemCategoryModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form
+          onSubmitCapture={mode === 'create' ? handleCreate : handleEdit}
+          className="p-2"
+        >
+          {/* Input field to enter amount to be pledged */}
+
+          <FormControl fullWidth className="mb-2">
+            <TextField
+              label={t('actionItemCategoryName')}
+              type="text"
+              variant="outlined"
+              autoComplete="off"
+              className={styles.noOutline}
+              value={name}
+              onChange={(e): void =>
+                setFormState({ ...formState, name: e.target.value })
+              }
+              required
+            />
+          </FormControl>
+          <Form.Group className="d-flex flex-column mb-4">
+            <label>{tCommon('disabled')} </label>
+            <Form.Switch
+              type="checkbox"
+              checked={isDisabled}
+              data-testid="isDisabledSwitch"
+              className="mt-2 ms-2"
+              onChange={() =>
+                setFormState({
+                  ...formState,
+                  isDisabled: !isDisabled,
+                })
+              }
+            />
+          </Form.Group>
+
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            value="creatActionItemCategory"
+            data-testid="formSubmitButton"
+          >
+            {mode === 'create'
+              ? tCommon('create')
+              : t('updateActionItemCategory')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default CategoryModal;
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
new file mode 100644
index 0000000000..919421b0f2
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.module.css
@@ -0,0 +1,138 @@
+/* Button Styles */
+.addButton {
+  /* Position and size of the button */
+  width: 7em;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+/* Modal Styles */
+.createModal {
+  /* Position and size of the modal */
+  margin-top: 20vh;
+  margin-left: 13vw;
+  max-width: 80vw;
+}
+
+.icon {
+  /* Size and color of the icon */
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.message {
+  /* Centering the content of the modal */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.titlemodal {
+  /* Styling for the modal title */
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  /* Styling for the modal close button */
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Input Styles */
+.noOutline input {
+  /* Removing the outline from the input */
+  outline: none;
+}
+
+/* Header and Action Item Categories Styles */
+.btnsContainer {
+  /* Styling for the container of the buttons */
+  display: flex;
+  margin: 0.5rem 0 1.5rem 0;
+}
+
+.btnsContainer .input {
+  /* Styling for the input field */
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  /* Styling for the input border */
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  /* Styling for the button in the input field */
+  width: 52px;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/* Dropdown Styles */
+.dropdown {
+  /* Styling for the dropdown */
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+/* Datagrid Styles */
+.rowBackground {
+  /* Styling for the row background */
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.tableHeader {
+  /* Styling for the table header */
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.chipIcon {
+  /* Styling for the chip icon */
+  height: 0.9rem !important;
+}
+
+.chip {
+  /* Styling for the chip */
+  height: 1.5rem !important;
+}
+
+.active {
+  /* Styling for the active state */
+  background-color: #31bb6a50 !important;
+}
+
+.pending {
+  /* Styling for the pending state */
+  background-color: #ffd76950 !important;
+  color: #bb952bd0 !important;
+  border-color: #bb952bd0 !important;
+}
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx
new file mode 100644
index 0000000000..d3698bf346
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.test.tsx
@@ -0,0 +1,241 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './OrgActionItemCategoryMocks';
+import OrgActionItemCategories from './OrgActionItemCategories';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_EMPTY);
+const link3 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.orgActionItemCategories ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const renderActionItemCategories = (
+  link: ApolloLink,
+  orgId: string,
+): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <OrgActionItemCategories orgId={orgId} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Organisation Action Item Categories', () => {
+  it('should render the Action Item Categories Screen', async () => {
+    renderActionItemCategories(link1, 'orgId');
+    await waitFor(() => {
+      expect(screen.getByTestId('searchByName')).toBeInTheDocument();
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.getByText('Category 2')).toBeInTheDocument();
+    });
+  });
+
+  it('Sort the Categories (asc/desc) by createdAt', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by createdAt_DESC
+    fireEvent.click(sortBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('createdAt_DESC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('createdAt_DESC'));
+    await waitFor(() => {
+      expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+        'Category 1',
+      );
+    });
+
+    // Sort by createdAt_ASC
+    fireEvent.click(sortBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('createdAt_ASC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('createdAt_ASC'));
+    await waitFor(() => {
+      expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+        'Category 2',
+      );
+    });
+  });
+
+  it('Filter the categories by status (All/Disabled)', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    // Filter by All
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusAll')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusAll'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.getByText('Category 2')).toBeInTheDocument();
+    });
+
+    // Filter by Disabled
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusDisabled')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusDisabled'));
+    await waitFor(() => {
+      expect(screen.queryByText('Category 1')).toBeNull();
+      expect(screen.getByText('Category 2')).toBeInTheDocument();
+    });
+  });
+
+  it('Filter the categories by status (Active)', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusActive')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusActive'));
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.queryByText('Category 2')).toBeNull();
+    });
+  });
+
+  it('open and closes Create Category modal', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const addCategoryBtn = await screen.findByTestId(
+      'createActionItemCategoryBtn',
+    );
+    expect(addCategoryBtn).toBeInTheDocument();
+    userEvent.click(addCategoryBtn);
+
+    await waitFor(() => expect(screen.getAllByText(t.create)).toHaveLength(2));
+    userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
+    await waitFor(() =>
+      expect(
+        screen.queryByTestId('actionItemCategoryModalCloseBtn'),
+      ).toBeNull(),
+    );
+  });
+
+  it('open and closes Edit Category modal', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const editCategoryBtn = await screen.findByTestId('editCategoryBtn1');
+    await waitFor(() => expect(editCategoryBtn).toBeInTheDocument());
+    userEvent.click(editCategoryBtn);
+
+    await waitFor(() =>
+      expect(screen.getByText(t.updateActionItemCategory)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
+    await waitFor(() =>
+      expect(
+        screen.queryByTestId('actionItemCategoryModalCloseBtn'),
+      ).toBeNull(),
+    );
+  });
+
+  it('Search categories by name', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'Category 1');
+    userEvent.click(screen.getByTestId('searchBtn'));
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.queryByText('Category 2')).toBeNull();
+    });
+  });
+
+  it('Search categories by name and clear the input by backspace', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+
+    // Clear the search input by backspace
+    userEvent.type(searchInput, 'A{backspace}');
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.getByText('Category 2')).toBeInTheDocument();
+    });
+  });
+
+  it('Search categories by name on press of ENTER', async () => {
+    renderActionItemCategories(link1, 'orgId');
+
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'Category 1');
+    userEvent.type(searchInput, '{enter}');
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.queryByText('Category 2')).toBeNull();
+    });
+  });
+
+  it('should render Empty Action Item Categories Screen', async () => {
+    renderActionItemCategories(link2, 'orgId');
+    await waitFor(() => {
+      expect(screen.getByTestId('searchByName')).toBeInTheDocument();
+      expect(screen.getByText(t.noActionItemCategories)).toBeInTheDocument();
+    });
+  });
+
+  it('should render the Action Item Categories Screen with error', async () => {
+    renderActionItemCategories(link3, 'orgId');
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
new file mode 100644
index 0000000000..49cf47dd49
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategories.tsx
@@ -0,0 +1,418 @@
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import styles from './OrgActionItemCategories.module.css';
+import { useTranslation } from 'react-i18next';
+
+import { useQuery } from '@apollo/client';
+import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
+import type { InterfaceActionItemCategoryInfo } from 'utils/interfaces';
+import Loader from 'components/Loader/Loader';
+import {
+  Circle,
+  Search,
+  Sort,
+  WarningAmberRounded,
+  FilterAltOutlined,
+} from '@mui/icons-material';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import dayjs from 'dayjs';
+import { Chip, Stack } from '@mui/material';
+import CategoryModal from './CategoryModal';
+
+enum ModalState {
+  SAME = 'same',
+  DELETE = 'delete',
+}
+
+enum CategoryStatus {
+  Active = 'active',
+  Disabled = 'disabled',
+}
+
+interface InterfaceActionItemCategoryProps {
+  orgId: string;
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Represents the component for managing organization action item categories.
+ * This component allows creating, updating, enabling, and disabling action item categories.
+ */
+const OrgActionItemCategories: FC<InterfaceActionItemCategoryProps> = ({
+  orgId,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgActionItemCategories',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  const [category, setCategory] =
+    useState<InterfaceActionItemCategoryInfo | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [sortBy, setSortBy] = useState<'createdAt_ASC' | 'createdAt_DESC'>(
+    'createdAt_DESC',
+  );
+  const [status, setStatus] = useState<CategoryStatus | null>(null);
+  const [categories, setCategories] = useState<
+    InterfaceActionItemCategoryInfo[]
+  >([]);
+  const [modalMode, setModalMode] = useState<'edit' | 'create'>('create');
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.SAME]: false,
+    [ModalState.DELETE]: false,
+  });
+
+  // Query to fetch action item categories
+  const {
+    data: catData,
+    loading: catLoading,
+    error: catError,
+    refetch: refetchCategories,
+  }: {
+    data?: {
+      actionItemCategoriesByOrganization: InterfaceActionItemCategoryInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(ACTION_ITEM_CATEGORY_LIST, {
+    variables: {
+      organizationId: orgId,
+      where: {
+        name_contains: searchTerm,
+        is_disabled: !status ? undefined : status === CategoryStatus.Disabled,
+      },
+      orderBy: sortBy,
+    },
+  });
+
+  const openModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+
+  const closeModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+  const handleOpenModal = useCallback(
+    (
+      category: InterfaceActionItemCategoryInfo | null,
+      mode: 'edit' | 'create',
+    ): void => {
+      setCategory(category);
+      setModalMode(mode);
+      openModal(ModalState.SAME);
+    },
+    [openModal],
+  );
+
+  useEffect(() => {
+    if (catData && catData.actionItemCategoriesByOrganization) {
+      setCategories(catData.actionItemCategoriesByOrganization);
+    }
+  }, [catData]);
+
+  // Show loader while data is being fetched
+  if (catLoading) {
+    return <Loader styles={styles.message} size="lg" />;
+  }
+
+  // Show error message if there's an error
+  if (catError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Action Item Categories' })}
+          <br />
+          {`${catError.message}`}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: 'Sr. No.',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'categoryName',
+      headerName: 'Category',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="categoryName"
+          >
+            {params.row.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'status',
+      headerName: 'Status',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Chip
+            icon={<Circle className={styles.chipIcon} />}
+            label={params.row.isDisabled ? 'Disabled' : 'Active'}
+            variant="outlined"
+            color="primary"
+            className={`${styles.chip} ${params.row.isDisabled ? styles.pending : styles.active}`}
+          />
+        );
+      },
+    },
+    {
+      field: 'createdBy',
+      headerName: 'Created By',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return params.row.creator.firstName + ' ' + params.row.creator.lastName;
+      },
+    },
+    {
+      field: 'createdOn',
+      headerName: 'Created On',
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="createdOn">
+            {dayjs(params.row.createdAt).format('DD/MM/YYYY')}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'action',
+      headerName: 'Action',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Button
+            variant="success"
+            size="sm"
+            className="me-2 rounded"
+            data-testid={'editCategoryBtn' + params.row.id}
+            onClick={() =>
+              handleOpenModal(
+                params.row as InterfaceActionItemCategoryInfo,
+                'edit',
+              )
+            }
+          >
+            <i className="fa fa-edit" />
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div className="mx-4">
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchByName')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onKeyUp={(e) => {
+              if (e.key === 'Enter') {
+                setSearchTerm(searchValue);
+              } else if (e.key === 'Backspace' && searchValue === '') {
+                setSearchTerm('');
+              }
+            }}
+            data-testid="searchByName"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            onClick={() => setSearchTerm(searchValue)}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-4">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_DESC')}
+                  data-testid="createdAt_DESC"
+                >
+                  {tCommon('createdLatest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_ASC')}
+                  data-testid="createdAt_ASC"
+                >
+                  {tCommon('createdEarliest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <FilterAltOutlined className={'me-1'} />
+                {t('status')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setStatus(null)}
+                  data-testid="statusAll"
+                >
+                  {tCommon('all')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setStatus(CategoryStatus.Active)}
+                  data-testid="statusActive"
+                >
+                  {tCommon('active')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setStatus(CategoryStatus.Disabled)}
+                  data-testid="statusDisabled"
+                >
+                  {tCommon('disabled')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              onClick={() => handleOpenModal(null, 'create')}
+              style={{ marginTop: '11px' }}
+              data-testid="createActionItemCategoryBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {tCommon('create')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Action Item Categories */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={6}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noActionItemCategories')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={categories.map((category, index) => ({
+          id: index + 1,
+          ...category,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      <CategoryModal
+        isOpen={modalState[ModalState.SAME]}
+        hide={() => closeModal(ModalState.SAME)}
+        refetchCategories={refetchCategories}
+        category={category}
+        orgId={orgId}
+        mode={modalMode}
+      />
+    </div>
+  );
+};
+
+export default OrgActionItemCategories;
diff --git a/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts
new file mode 100644
index 0000000000..10310a01e4
--- /dev/null
+++ b/src/components/OrgSettings/ActionItemCategories/OrgActionItemCategoryMocks.ts
@@ -0,0 +1,288 @@
+import {
+  CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+  UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+
+import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: '' },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [
+          {
+            _id: 'categoryId1',
+            name: 'Category 1',
+            isDisabled: false,
+            createdAt: '2024-08-26',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+          },
+          {
+            _id: 'categoryId2',
+            name: 'Category 2',
+            isDisabled: true,
+            createdAt: '2024-08-25',
+            creator: {
+              _id: 'creatorId2',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: '' },
+        orderBy: 'createdAt_ASC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [
+          {
+            _id: 'categoryId2',
+            name: 'Category 2',
+            isDisabled: true,
+            createdAt: '2024-08-25',
+            creator: {
+              _id: 'creatorId2',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+          {
+            _id: 'categoryId1',
+            name: 'Category 1',
+            isDisabled: false,
+            createdAt: '2024-08-26',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: '', is_disabled: false },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [
+          {
+            _id: 'categoryId1',
+            name: 'Category 1',
+            isDisabled: false,
+            createdAt: '2024-08-26',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: '', is_disabled: true },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [
+          {
+            _id: 'categoryId2',
+            name: 'Category 2',
+            isDisabled: true,
+            createdAt: '2024-08-25',
+            creator: {
+              _id: 'creatorId2',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: 'Category 1' },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [
+          {
+            _id: 'categoryId1',
+            name: 'Category 1',
+            isDisabled: false,
+            createdAt: '2024-08-26',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+      variables: {
+        name: 'Category 2',
+        isDisabled: true,
+        organizationId: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        createActionItemCategory: {
+          _id: 'categoryId3',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+      variables: {
+        name: 'Category 2',
+        isDisabled: true,
+        actionItemCategoryId: 'categoryId',
+      },
+    },
+    result: {
+      data: {
+        updateActionItemCategory: {
+          _id: 'categoryId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+      variables: {
+        name: 'Category 2',
+        isDisabled: false,
+        actionItemCategoryId: 'categoryId',
+      },
+    },
+    result: {
+      data: {
+        updateActionItemCategory: {
+          _id: 'categoryId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+      variables: {
+        name: 'Category 1',
+        isDisabled: true,
+        actionItemCategoryId: 'categoryId',
+      },
+    },
+    result: {
+      data: {
+        updateActionItemCategory: {
+          _id: 'categoryId',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_EMPTY = [
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: '' },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [],
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: { name_contains: '' },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_CATEGORY_MUTATION,
+      variables: {
+        name: 'Category 2',
+        isDisabled: true,
+        organizationId: 'orgId',
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION,
+      variables: {
+        name: 'Category 2',
+        isDisabled: true,
+        actionItemCategoryId: 'categoryId',
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx
new file mode 100644
index 0000000000..da92dfd201
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.test.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AgendaCategoryCreateModal from './AgendaCategoryCreateModal';
+
+const mockFormState = {
+  name: 'Test Name',
+  description: 'Test Description',
+  createdBy: 'Test User',
+};
+const mockHideCreateModal = jest.fn();
+const mockSetFormState = jest.fn();
+const mockCreateAgendaCategoryHandler = jest.fn();
+const mockT = (key: string): string => key;
+
+describe('AgendaCategoryCreateModal', () => {
+  test('renders modal correctly', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryCreateModal
+                  agendaCategoryCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaCategoryHandler={mockCreateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('agendaCategoryDetails')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('createAgendaCategoryFormSubmitBtn'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('createAgendaCategoryModalCloseBtn'),
+    ).toBeInTheDocument();
+  });
+  test('tests the condition for formState.name and formState.description', () => {
+    const mockFormState = {
+      name: 'Test Name',
+      description: 'Test Description',
+      createdBy: 'Test User',
+    };
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryCreateModal
+                  agendaCategoryCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaCategoryHandler={mockCreateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const nameInput = screen.getByLabelText('name');
+    fireEvent.change(nameInput, {
+      target: { value: 'New name' },
+    });
+    const descriptionInput = screen.getByLabelText('description');
+    fireEvent.change(descriptionInput, {
+      target: { value: 'New description' },
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      name: 'New name',
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      description: 'New description',
+    });
+  });
+  test('calls createAgendaCategoryHandler when form is submitted', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryCreateModal
+                  agendaCategoryCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaCategoryHandler={mockCreateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.submit(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
+    expect(mockCreateAgendaCategoryHandler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
new file mode 100644
index 0000000000..57a3057b3f
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import type { ChangeEvent } from 'react';
+import styles from './OrganizationAgendaCategory.module.css';
+
+/**
+ * InterfaceFormStateType is an object containing the form state
+ */
+interface InterfaceFormStateType {
+  name: string;
+  description: string;
+  createdBy: string;
+}
+
+/**
+ * InterfaceAgendaCategoryCreateModalProps is an object containing the props for AgendaCategoryCreateModal component
+ */
+interface InterfaceAgendaCategoryCreateModalProps {
+  agendaCategoryCreateModalIsOpen: boolean;
+  hideCreateModal: () => void;
+  formState: InterfaceFormStateType;
+  setFormState: (state: React.SetStateAction<InterfaceFormStateType>) => void;
+  createAgendaCategoryHandler: (
+    e: ChangeEvent<HTMLFormElement>,
+  ) => Promise<void>;
+  t: (key: string) => string;
+}
+
+/**
+ * AgendaCategoryCreateModal component is used to create the agenda category details like name, description
+ * @param  agendaCategoryCreateModalIsOpen - boolean value to check if the modal is open or not
+ * @param  hideCreateModal - function to hide the modal
+ * @param  formState - object containing the form state
+ * @param  setFormState - function to set the form state
+ * @param  createAgendaCategoryHandler - function to create the agenda category
+ * @param  t - i18n function to translate the text
+ * @returns  returns the AgendaCategoryCreateModal component
+ */
+const AgendaCategoryCreateModal: React.FC<
+  InterfaceAgendaCategoryCreateModalProps
+> = ({
+  agendaCategoryCreateModalIsOpen,
+  hideCreateModal,
+  formState,
+  setFormState,
+  createAgendaCategoryHandler,
+  t,
+}) => {
+  return (
+    <Modal
+      className={styles.AgendaCategoryModal}
+      show={agendaCategoryCreateModalIsOpen}
+      onHide={hideCreateModal}
+    >
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('agendaCategoryDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={hideCreateModal}
+          data-testid="createAgendaCategoryModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={createAgendaCategoryHandler}>
+          <Form.Group className="mb-3" controlId="name">
+            <Form.Label>{t('name')}</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder={t('name')}
+              value={formState.name}
+              required
+              onChange={(e) =>
+                setFormState({ ...formState, name: e.target.value })
+              }
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="description">
+            <Form.Label>{t('description')}</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder={t('description')}
+              required
+              value={formState.description}
+              onChange={(e) =>
+                setFormState({ ...formState, description: e.target.value })
+              }
+            />
+          </Form.Group>
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            value="createAgendaCategory"
+            data-testid="createAgendaCategoryFormSubmitBtn"
+          >
+            {t('createAgendaCategory')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default AgendaCategoryCreateModal;
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
new file mode 100644
index 0000000000..a16186bac7
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import styles from './OrganizationAgendaCategory.module.css';
+
+/**
+ * InterfaceAgendaCategoryDeleteModalProps is an object containing the props for AgendaCategoryDeleteModal component
+ */
+interface InterfaceAgendaCategoryDeleteModalProps {
+  agendaCategoryDeleteModalIsOpen: boolean;
+  toggleDeleteModal: () => void;
+  deleteAgendaCategoryHandler: () => Promise<void>;
+  t: (key: string) => string;
+  tCommon: (key: string) => string;
+}
+
+/**
+ * AgendaCategoryDeleteModal component is used to delete the agenda category
+ * @param  agendaCategoryDeleteModalIsOpen - boolean value to check if the modal is open or not
+ * @param  toggleDeleteModal - function to toggle the modal
+ * @param  deleteAgendaCategoryHandler - function to delete the agenda category
+ * @param  t - i18n function to translate the text
+ * @param  tCommon - i18n function to translate the text
+ * @returns  returns the AgendaCategoryDeleteModal component
+ */
+const AgendaCategoryDeleteModal: React.FC<
+  InterfaceAgendaCategoryDeleteModalProps
+> = ({
+  agendaCategoryDeleteModalIsOpen,
+  toggleDeleteModal,
+  deleteAgendaCategoryHandler,
+  t,
+  tCommon,
+}) => {
+  return (
+    <Modal
+      size="sm"
+      id={`deleteAgendaCategoryModal`}
+      className={styles.agendaCategoryModal}
+      show={agendaCategoryDeleteModalIsOpen}
+      onHide={toggleDeleteModal}
+      backdrop="static"
+      keyboard={false}
+    >
+      <Modal.Header closeButton className="bg-primary">
+        <Modal.Title className="text-white" id={`deleteAgendaCategory`}>
+          {t('deleteAgendaCategory')}
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <p>{t('deleteAgendaCategoryMsg')}</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          type="button"
+          className="btn btn-danger"
+          data-dismiss="modal"
+          onClick={toggleDeleteModal}
+          data-testid="deleteAgendaCategoryCloseBtn"
+        >
+          {tCommon('no')}
+        </Button>
+        <Button
+          type="button"
+          className="btn btn-success"
+          onClick={deleteAgendaCategoryHandler}
+          data-testid="deleteAgendaCategoryBtn"
+        >
+          {tCommon('yes')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default AgendaCategoryDeleteModal;
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
new file mode 100644
index 0000000000..794db27ad3
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+
+import styles from './OrganizationAgendaCategory.module.css';
+
+/**
+ * InterfaceFormStateType is an object containing the form state
+ */
+interface InterfaceFormStateType {
+  name: string;
+  description: string;
+  createdBy: string;
+}
+
+/**
+ * InterfaceAgendaCategoryPreviewModalProps is an object containing the props for AgendaCategoryPreviewModal component
+ */
+interface InterfaceAgendaCategoryPreviewModalProps {
+  agendaCategoryPreviewModalIsOpen: boolean;
+  hidePreviewModal: () => void;
+  showUpdateModal: () => void;
+  toggleDeleteModal: () => void;
+  formState: InterfaceFormStateType;
+
+  t: (key: string) => string;
+}
+
+/**
+ * AgendaCategoryPreviewModal component is used to preview the agenda category details like name, description, createdBy
+ * @param  agendaCategoryPreviewModalIsOpen - boolean value to check if the modal is open or not
+ * @param  hidePreviewModal - function to hide the modal
+ * @param  showUpdateModal - function to show the update modal
+ * @param  toggleDeleteModal - function to toggle the delete modal
+ * @param  formState - object containing the form state
+ * @param  t - i18n function to translate the text
+ * @returns  returns the AgendaCategoryPreviewModal component
+ */
+const AgendaCategoryPreviewModal: React.FC<
+  InterfaceAgendaCategoryPreviewModalProps
+> = ({
+  agendaCategoryPreviewModalIsOpen,
+  hidePreviewModal,
+  showUpdateModal,
+  toggleDeleteModal,
+  formState,
+  t,
+}) => {
+  return (
+    <Modal
+      className={styles.AgendaCategoryModal}
+      show={agendaCategoryPreviewModalIsOpen}
+      onHide={hidePreviewModal}
+    >
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('agendaCategoryDetails')}</p>
+        <Button
+          onClick={hidePreviewModal}
+          data-testid="previewAgendaCategoryModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form>
+          <div>
+            <p className={styles.preview}>
+              {t('name')}
+              <span className={styles.view}>{formState.name}</span>
+            </p>
+            <p className={styles.preview}>
+              {t('description')}
+              <span className={styles.view}>{formState.description}</span>
+            </p>
+            <p className={styles.preview}>
+              {t('createdBy')}
+              <span className={styles.view}>{formState.createdBy}</span>
+            </p>
+          </div>
+          <div className={styles.iconContainer}>
+            <Button
+              size="sm"
+              data-testid="editAgendaCategoryPreviewModalBtn"
+              className={styles.icon}
+              onClick={() => {
+                showUpdateModal();
+                hidePreviewModal();
+              }}
+            >
+              <i className="fas fa-edit"></i>
+            </Button>
+            <Button
+              size="sm"
+              className={`${styles.icon} ms-2`}
+              data-testid="deleteAgendaCategoryModalBtn"
+              onClick={toggleDeleteModal}
+              variant="danger"
+            >
+              <i className="fas fa-trash"></i>
+            </Button>
+          </div>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default AgendaCategoryPreviewModal;
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx
new file mode 100644
index 0000000000..168b97abd3
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.test.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AgendaCategoryUpdateModal from './AgendaCategoryUpdateModal';
+
+const mockFormState = {
+  name: 'Test Name',
+  description: 'Test Description',
+  createdBy: 'Test User',
+};
+const mockHideUpdateModal = jest.fn();
+const mockSetFormState = jest.fn();
+const mockUpdateAgendaCategoryHandler = jest.fn();
+const mockT = (key: string): string => key;
+
+describe('AgendaCategoryUpdateModal', () => {
+  test('renders modal correctly', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryUpdateModal
+                  agendaCategoryUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaCategoryHandler={mockUpdateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('updateAgendaCategory')).toBeInTheDocument();
+    expect(screen.getByTestId('editAgendaCategoryBtn')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('updateAgendaCategoryModalCloseBtn'),
+    ).toBeInTheDocument();
+  });
+
+  test('calls hideUpdateModal when close button is clicked', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <BrowserRouter>
+                <AgendaCategoryUpdateModal
+                  agendaCategoryUpdateModalIsOpen={true}
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaCategoryHandler={mockUpdateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </BrowserRouter>
+            </LocalizationProvider>
+          </I18nextProvider>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByTestId('updateAgendaCategoryModalCloseBtn'));
+    expect(mockHideUpdateModal).toHaveBeenCalledTimes(1);
+  });
+
+  test('tests the condition for formState.name and formState.description', () => {
+    const mockFormState = {
+      name: 'Test Name',
+      description: 'Test Description',
+      createdBy: 'Test User',
+    };
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryUpdateModal
+                  agendaCategoryUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaCategoryHandler={mockUpdateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const nameInput = screen.getByLabelText('name');
+    fireEvent.change(nameInput, {
+      target: { value: 'New name' },
+    });
+    const descriptionInput = screen.getByLabelText('description');
+    fireEvent.change(descriptionInput, {
+      target: { value: 'New description' },
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      name: 'New name',
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      description: 'New description',
+    });
+  });
+
+  test('calls updateAgendaCategoryHandler when form is submitted', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryUpdateModal
+                  agendaCategoryUpdateModalIsOpen
+                  hideUpdateModal={mockHideUpdateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  updateAgendaCategoryHandler={mockUpdateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.submit(screen.getByTestId('editAgendaCategoryBtn'));
+    expect(mockUpdateAgendaCategoryHandler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
new file mode 100644
index 0000000000..508f1db69b
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import type { ChangeEvent } from 'react';
+
+import styles from './OrganizationAgendaCategory.module.css';
+
+/**
+ * InterfaceFormStateType is an object containing the form state
+ */
+interface InterfaceFormStateType {
+  name: string;
+  description: string;
+  createdBy: string;
+}
+
+/**
+ * InterfaceAgendaCategoryUpdateModalProps is an object containing the props for AgendaCategoryUpdateModal component
+ */
+interface InterfaceAgendaCategoryUpdateModalProps {
+  agendaCategoryUpdateModalIsOpen: boolean;
+  hideUpdateModal: () => void;
+  formState: InterfaceFormStateType;
+  setFormState: (state: React.SetStateAction<InterfaceFormStateType>) => void;
+  updateAgendaCategoryHandler: (
+    e: ChangeEvent<HTMLFormElement>,
+  ) => Promise<void>;
+  t: (key: string) => string;
+}
+
+/**
+ * AgendaCategoryUpdateModal component is used to update the agenda category details like name, description
+ * @param  agendaCategoryUpdateModalIsOpen - boolean value to check if the modal is open or not
+ * @param  hideUpdateModal - function to hide the modal
+ * @param  formState - object containing the form state
+ * @param  setFormState - function to set the form state
+ * @param  updateAgendaCategoryHandler - function to update the agenda category
+ * @param  t - i18n function to translate the text
+ * @returns  returns the AgendaCategoryUpdateModal component
+ */
+const AgendaCategoryUpdateModal: React.FC<
+  InterfaceAgendaCategoryUpdateModalProps
+> = ({
+  agendaCategoryUpdateModalIsOpen,
+  hideUpdateModal,
+  formState,
+  setFormState,
+  updateAgendaCategoryHandler,
+  t,
+}) => {
+  return (
+    <Modal
+      className={styles.AgendaCategoryModal}
+      show={agendaCategoryUpdateModalIsOpen}
+      onHide={hideUpdateModal}
+    >
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('updateAgendaCategory')}</p>
+        <Button
+          onClick={hideUpdateModal}
+          data-testid="updateAgendaCategoryModalCloseBtn"
+        >
+          <i className="fa fa-times" />
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={updateAgendaCategoryHandler}>
+          <Form.Group className="mb-3" controlId="name">
+            <Form.Label>{t('name')}</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder={t('name')}
+              value={formState.name}
+              onChange={(e) =>
+                setFormState({ ...formState, name: e.target.value })
+              }
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="description">
+            <Form.Label>{t('description')}</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder={t('description')}
+              value={formState.description}
+              onChange={(e) =>
+                setFormState({ ...formState, description: e.target.value })
+              }
+            />
+          </Form.Group>
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            data-testid="editAgendaCategoryBtn"
+          >
+            {t('update')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default AgendaCategoryUpdateModal;
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
new file mode 100644
index 0000000000..13e187f8b5
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
@@ -0,0 +1,171 @@
+.agendaCategoryContainer {
+  height: 90vh;
+}
+
+.agendaCategoryModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.btnsContainer {
+  display: flex;
+  gap: 10px;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  gap: 10px;
+}
+
+.btnsContainer button {
+  display: flex;
+  align-items: center;
+}
+
+.container {
+  min-height: 100vh;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+}
+
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.dropdown {
+  display: block;
+}
+
+.dropdownToggle {
+  margin-bottom: 0;
+  display: flex;
+}
+
+.dropdownModalToggle {
+  width: 50%;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px var(--bs-gray-300);
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: var(--bs-primary);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+h2 {
+  margin-top: 0.5rem;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--bs-gray-500);
+  margin: 1rem;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 1px;
+}
+
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.organizationAgendaCategoryContainer h2 {
+  margin: 0.6rem 0;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
+.removeFilterIcon {
+  cursor: pointer;
+}
+
+.searchForm {
+  display: inline;
+}
+
+.titlemodal {
+  color: var(--bs-gray-600);
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid var(--bs-primary);
+  width: 65%;
+}
+
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--bs-gray-600);
+}
+
+@media (max-width: 767px) {
+  .btnsContainer {
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .btnsContainer .btnsBlock .dropdownToggle {
+    flex-grow: 1;
+  }
+
+  .btnsContainer button {
+    width: 100%;
+  }
+
+  .createAgendaCategoryButton {
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
+  }
+}
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
new file mode 100644
index 0000000000..56cb450647
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.test.tsx
@@ -0,0 +1,237 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { MockedProvider } from '@apollo/client/testing';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import i18n from 'utils/i18nForTest';
+import { toast } from 'react-toastify';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import OrganizationAgendaCategory from './OrganizationAgendaCategory';
+import {
+  MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY,
+  MOCKS_ERROR_MUTATION,
+} from './OrganizationAgendaCategoryErrorMocks';
+import { MOCKS } from './OrganizationAgendaCategoryMocks';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: '123' }),
+}));
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(
+  MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY,
+  true,
+);
+const link3 = new StaticMockLink(MOCKS_ERROR_MUTATION, true);
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationAgendaCategory ??
+        {},
+    ),
+  ),
+};
+
+describe('Testing Agenda Categories Component', () => {
+  const formData = {
+    name: 'Category',
+    description: 'Test Description',
+    createdBy: 'Test User',
+  };
+  test('Component loads correctly', async () => {
+    const { getByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              {<OrganizationAgendaCategory orgId="123" />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.createAgendaCategory)).toBeInTheDocument();
+    });
+  });
+
+  test('render error component on unsuccessful agenda category list query', async () => {
+    const { queryByText } = render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              {<OrganizationAgendaCategory orgId="123" />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        queryByText(translations.createAgendaCategory),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the create agenda category modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('createAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaCategoryModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('createAgendaCategoryModalCloseBtn'),
+    );
+  });
+  test('creates new agenda cagtegory', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('createAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.name),
+      formData.name,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.description),
+      formData.description,
+    );
+    userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaCategoryCreated,
+      );
+    });
+  });
+
+  // test('toasts error on unsuccessful creation', async () => {
+  //   render(
+  //     <MockedProvider addTypename={false} link={link3}>
+  //       <Provider store={store}>
+  //         <BrowserRouter>
+  //           <LocalizationProvider dateAdapter={AdapterDayjs}>
+  //             <I18nextProvider i18n={i18n}>
+  //               {<OrganizationAgendaCategory />}
+  //             </I18nextProvider>
+  //           </LocalizationProvider>
+  //         </BrowserRouter>
+  //       </Provider>
+  //     </MockedProvider>,
+  //   );
+
+  //   await wait();
+
+  //   await waitFor(() => {
+  //     expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
+  //   });
+  //   userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
+
+  //   await waitFor(() => {
+  //     return expect(
+  //       screen.findByTestId('createAgendaCategoryModalCloseBtn'),
+  //     ).resolves.toBeInTheDocument();
+  //   });
+
+  //   userEvent.type(
+  //     screen.getByPlaceholderText(translations.name),
+  //     formData.name,
+  //   );
+
+  //   userEvent.type(
+  //     screen.getByPlaceholderText(translations.description),
+  //     formData.description,
+  //   );
+  //   userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
+
+  //   await waitFor(() => {
+  //     expect(toast.error).toBeCalledWith();
+  //   });
+  // });
+});
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
new file mode 100644
index 0000000000..884371d862
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import type { ChangeEvent, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'react-bootstrap';
+
+import { WarningAmberRounded } from '@mui/icons-material';
+import { toast } from 'react-toastify';
+
+import { useMutation, useQuery } from '@apollo/client';
+import { AGENDA_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries';
+import { CREATE_AGENDA_ITEM_CATEGORY_MUTATION } from 'GraphQl/Mutations/mutations';
+
+import type { InterfaceAgendaItemCategoryList } from 'utils/interfaces';
+import AgendaCategoryContainer from 'components/AgendaCategory/AgendaCategoryContainer';
+import AgendaCategoryCreateModal from './AgendaCategoryCreateModal';
+import styles from './OrganizationAgendaCategory.module.css';
+import Loader from 'components/Loader/Loader';
+
+interface InterfaceAgendaCategoryProps {
+  orgId: string;
+}
+
+/**
+ * Component for managing and displaying agenda item categories within an organization.
+ *
+ * This component allows users to view, create, and manage agenda item categories. It includes functionality for displaying categories, handling creation, and managing modal visibility.
+ *
+ * @returns The rendered component.
+ */
+
+const organizationAgendaCategory: FC<InterfaceAgendaCategoryProps> = ({
+  orgId,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationAgendaCategory',
+  });
+
+  // State for managing modal visibility and form data
+  const [agendaCategoryCreateModalIsOpen, setAgendaCategoryCreateModalIsOpen] =
+    useState<boolean>(false);
+
+  const [formState, setFormState] = useState({
+    name: '',
+    description: '',
+    createdBy: '',
+  });
+
+  /**
+   * Query to fetch agenda item categories for the organization.
+   */
+  const {
+    data: agendaCategoryData,
+    loading: agendaCategoryLoading,
+    error: agendaCategoryError,
+    refetch: refetchAgendaCategory,
+  }: {
+    data: InterfaceAgendaItemCategoryList | undefined;
+    loading: boolean;
+    error?: unknown | undefined;
+    refetch: () => void;
+  } = useQuery(AGENDA_ITEM_CATEGORY_LIST, {
+    variables: { organizationId: orgId },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  /**
+   * Mutation to create a new agenda item category.
+   */
+  const [createAgendaCategory] = useMutation(
+    CREATE_AGENDA_ITEM_CATEGORY_MUTATION,
+  );
+
+  /**
+   * Handler function to create a new agenda item category.
+   *
+   * @param e - The form submit event.
+   * @returns A promise that resolves when the agenda item category is created.
+   */
+  const createAgendaCategoryHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await createAgendaCategory({
+        variables: {
+          input: {
+            organizationId: orgId,
+            name: formState.name,
+            description: formState.description,
+          },
+        },
+      });
+      toast.success(t('agendaCategoryCreated') as string);
+      setFormState({ name: '', description: '', createdBy: '' });
+      refetchAgendaCategory();
+      hideCreateModal();
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  /**
+   * Toggles the visibility of the create agenda item category modal.
+   */
+  const showCreateModal = (): void => {
+    setAgendaCategoryCreateModalIsOpen(!agendaCategoryCreateModalIsOpen);
+  };
+
+  /**
+   * Hides the create agenda item category modal.
+   */
+  const hideCreateModal = (): void => {
+    setAgendaCategoryCreateModalIsOpen(!agendaCategoryCreateModalIsOpen);
+  };
+
+  if (agendaCategoryLoading) return <Loader size="xl" />;
+
+  if (agendaCategoryError) {
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occured while loading{' '}
+            {agendaCategoryError && 'Agenda Categories'}
+            Data
+            <br />
+            {agendaCategoryError && (agendaCategoryError as Error).message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.organizationAgendaCategoryContainer} mx-4`}>
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={`pt-4 mx-4`}>
+          <div className={styles.btnsContainer}>
+            <div className=" d-none d-lg-inline flex-grow-1 d-flex align-items-center border bg-light-subtle rounded-3">
+              {/* <input
+                type="search"
+                className="form-control border-0 bg-light-subtle"
+                placeholder={t('searchAgendaCategories')}
+                onChange={(e) => setSearchValue(e.target.value)}
+                value={searchValue}
+                data-testid="searchAgendaCategories"
+              /> */}
+            </div>
+
+            <Button
+              variant="success"
+              onClick={showCreateModal}
+              data-testid="createAgendaCategoryBtn"
+              className={styles.createAgendaCategoryButton}
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('createAgendaCategory')}
+            </Button>
+          </div>
+        </div>
+
+        <hr />
+
+        <AgendaCategoryContainer
+          agendaCategoryConnection={`Organization`}
+          agendaCategoryData={
+            agendaCategoryData?.agendaItemCategoriesByOrganization
+          }
+          agendaCategoryRefetch={refetchAgendaCategory}
+        />
+      </div>
+      <AgendaCategoryCreateModal
+        agendaCategoryCreateModalIsOpen={agendaCategoryCreateModalIsOpen}
+        hideCreateModal={hideCreateModal}
+        formState={formState}
+        setFormState={setFormState}
+        createAgendaCategoryHandler={createAgendaCategoryHandler}
+        t={t}
+      />
+    </div>
+  );
+};
+
+export default organizationAgendaCategory;
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
new file mode 100644
index 0000000000..10809c3da8
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
@@ -0,0 +1,51 @@
+import { CREATE_AGENDA_ITEM_CATEGORY_MUTATION } from 'GraphQl/Mutations/AgendaCategoryMutations';
+
+import { AGENDA_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/AgendaCategoryQueries';
+
+export const MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY = [
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: '123' },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
+
+export const MOCKS_ERROR_MUTATION = [
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: '123' },
+    },
+    result: {
+      data: {
+        agendaItemCategoriesByOrganization: [
+          {
+            _id: 'agendaItemCategory1',
+            name: 'Category',
+            description: 'Test Description',
+            createdBy: {
+              _id: 'user1',
+              firstName: 'Harve',
+              lastName: 'Lance',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        input: {
+          organizationId: '123',
+          name: 'Category',
+          description: 'Test Description',
+        },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
new file mode 100644
index 0000000000..434b0dcad2
--- /dev/null
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
@@ -0,0 +1,47 @@
+import { CREATE_AGENDA_ITEM_CATEGORY_MUTATION } from 'GraphQl/Mutations/AgendaCategoryMutations';
+
+import { AGENDA_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/AgendaCategoryQueries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: '123' },
+    },
+    result: {
+      data: {
+        agendaItemCategoriesByOrganization: [
+          {
+            _id: 'agendaItemCategory1',
+            name: 'Category',
+            description: 'Test Description',
+            createdBy: {
+              _id: 'user1',
+              firstName: 'Harve',
+              lastName: 'Lance',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_AGENDA_ITEM_CATEGORY_MUTATION,
+      variables: {
+        input: {
+          organizationId: '123',
+          name: 'Category',
+          description: 'Test Description',
+        },
+      },
+    },
+    result: {
+      data: {
+        createAgendaCategory: {
+          _id: 'agendaItemCategory1',
+        },
+      },
+    },
+  },
+];
diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css
new file mode 100644
index 0000000000..2b15a2ac0c
--- /dev/null
+++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.module.css
@@ -0,0 +1,25 @@
+.settingsBody {
+  margin: 2.5rem 0;
+}
+
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 180px;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--bs-secondary);
+}
diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx
new file mode 100644
index 0000000000..77ffe65c08
--- /dev/null
+++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.test.tsx
@@ -0,0 +1,307 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen, waitFor } from '@testing-library/react';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+import {
+  DELETE_ORGANIZATION_MUTATION,
+  REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import DeleteOrg from './DeleteOrg';
+import { ToastContainer, toast } from 'react-toastify';
+import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 1000): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+  });
+}
+
+const MOCKS = [
+  {
+    request: {
+      query: IS_SAMPLE_ORGANIZATION_QUERY,
+      variables: {
+        isSampleOrganizationId: '123',
+      },
+    },
+    result: {
+      data: {
+        isSampleOrganization: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+    },
+    result: {
+      data: {
+        removeSampleOrganization: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_ORGANIZATION_MUTATION,
+      variables: {
+        id: '456',
+      },
+    },
+    result: {
+      data: {
+        removeOrganization: {
+          _id: '456',
+        },
+      },
+    },
+  },
+];
+
+const MOCKS_WITH_ERROR = [
+  {
+    request: {
+      query: IS_SAMPLE_ORGANIZATION_QUERY,
+      variables: {
+        isSampleOrganizationId: '123',
+      },
+    },
+    result: {
+      data: {
+        isSampleOrganization: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_ORGANIZATION_MUTATION,
+      variables: {
+        id: '456',
+      },
+    },
+    error: new Error('Failed to delete organization'),
+  },
+  {
+    request: {
+      query: REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+    },
+    error: new Error('Failed to delete sample organization'),
+  },
+];
+
+const mockNavgatePush = jest.fn();
+let mockURL = '123';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockURL }),
+  useNavigate: () => mockNavgatePush,
+}));
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_WITH_ERROR, true);
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('Delete Organization Component', () => {
+  test('should be able to Toggle Delete Organization Modal', async () => {
+    mockURL = '456';
+    setItem('SuperAdmin', true);
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <DeleteOrg />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    act(() => {
+      screen.getByTestId(/openDeleteModalBtn/i).click();
+    });
+    expect(await screen.findByTestId(/orgDeleteModal/i)).toBeInTheDocument();
+    act(() => {
+      screen.getByTestId(/closeDelOrgModalBtn/i).click();
+    });
+    await waitFor(() => {
+      expect(screen.queryByTestId(/orgDeleteModal/i)).not.toBeInTheDocument();
+    });
+  });
+
+  test('should be able to Toggle Delete Organization Modal When Organization is Sample Organization', async () => {
+    mockURL = '123';
+    setItem('SuperAdmin', true);
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <DeleteOrg />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+    act(() => {
+      screen.getByTestId(/openDeleteModalBtn/i).click();
+    });
+    expect(screen.getByTestId(/orgDeleteModal/i)).toBeInTheDocument();
+    act(() => {
+      screen.getByTestId(/closeDelOrgModalBtn/i).click();
+    });
+    await waitFor(() => {
+      expect(screen.queryByTestId(/orgDeleteModal/i)).not.toBeInTheDocument();
+    });
+  });
+
+  test('Delete organization functionality should work properly', async () => {
+    mockURL = '456';
+    setItem('SuperAdmin', true);
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <DeleteOrg />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    screen.debug();
+    act(() => {
+      screen.getByTestId('openDeleteModalBtn').click();
+    });
+    screen.debug();
+    expect(await screen.findByTestId('orgDeleteModal')).toBeInTheDocument();
+    const deleteButton = await screen.findByTestId('deleteOrganizationBtn');
+    act(() => {
+      deleteButton.click();
+    });
+  });
+
+  test('Delete organization functionality should work properly for sample org', async () => {
+    mockURL = '123';
+    setItem('SuperAdmin', true);
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <DeleteOrg />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('openDeleteModalBtn')).toBeInTheDocument();
+    });
+    act(() => {
+      screen.getByTestId('openDeleteModalBtn').click();
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
+    });
+    const deleteButton = await screen.findByTestId('deleteOrganizationBtn');
+    act(() => {
+      deleteButton.click();
+    });
+    await wait(2000);
+    expect(mockNavgatePush).toHaveBeenCalledWith('/orglist');
+  });
+
+  test('Error handling for IS_SAMPLE_ORGANIZATION_QUERY mock', async () => {
+    mockURL = '123';
+    setItem('SuperAdmin', true);
+    jest.spyOn(toast, 'error');
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <DeleteOrg />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('openDeleteModalBtn')).toBeInTheDocument();
+    });
+    act(() => {
+      screen.getByTestId('openDeleteModalBtn').click();
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
+    });
+    act(() => {
+      screen.getByTestId('deleteOrganizationBtn').click();
+    });
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(
+        'Failed to delete sample organization',
+      );
+    });
+  });
+
+  test('Error handling for DELETE_ORGANIZATION_MUTATION mock', async () => {
+    mockURL = '456';
+    setItem('SuperAdmin', true);
+    jest.spyOn(toast, 'error');
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <DeleteOrg />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('openDeleteModalBtn')).toBeInTheDocument();
+    });
+    act(() => {
+      screen.getByTestId('openDeleteModalBtn').click();
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('orgDeleteModal')).toBeInTheDocument();
+    });
+    act(() => {
+      screen.getByTestId('deleteOrganizationBtn').click();
+    });
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Failed to delete organization');
+    });
+  });
+});
diff --git a/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx
new file mode 100644
index 0000000000..8edf11ca22
--- /dev/null
+++ b/src/components/OrgSettings/General/DeleteOrg/DeleteOrg.tsx
@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { Button, Card, Modal } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
+import { errorHandler } from 'utils/errorHandler';
+import { toast } from 'react-toastify';
+import {
+  DELETE_ORGANIZATION_MUTATION,
+  REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
+import styles from './DeleteOrg.module.css';
+import { useNavigate, useParams } from 'react-router-dom';
+import useLocalStorage from 'utils/useLocalstorage';
+
+/**
+ * A component for deleting an organization.
+ *
+ * It displays a card with a delete button. When the delete button is clicked,
+ * a modal appears asking for confirmation. Depending on the type of organization
+ * (sample or regular), it performs the delete operation and shows appropriate
+ * success or error messages.
+ *
+ * @returns JSX.Element - The rendered component with delete functionality.
+ */
+function deleteOrg(): JSX.Element {
+  // Translation hook for localization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'deleteOrg',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Get the current organization ID from the URL
+  const { orgId: currentUrl } = useParams();
+  // Navigation hook for redirecting
+  const navigate = useNavigate();
+  // State to control the visibility of the delete confirmation modal
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  // Hook for accessing local storage
+  const { getItem } = useLocalStorage();
+  // Check if the user has super admin privileges
+  const canDelete = getItem('SuperAdmin');
+
+  /**
+   * Toggles the visibility of the delete confirmation modal.
+   */
+  const toggleDeleteModal = (): void => setShowDeleteModal(!showDeleteModal);
+
+  // GraphQL mutations for deleting organizations
+  const [del] = useMutation(DELETE_ORGANIZATION_MUTATION);
+  const [removeSampleOrganization] = useMutation(
+    REMOVE_SAMPLE_ORGANIZATION_MUTATION,
+  );
+
+  // Query to check if the organization is a sample organization
+  const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
+    variables: {
+      isSampleOrganizationId: currentUrl,
+    },
+  });
+
+  /**
+   * Deletes the organization. It handles both sample and regular organizations.
+   * Displays success or error messages based on the operation result.
+   */
+  const deleteOrg = async (): Promise<void> => {
+    if (data && data.isSampleOrganization) {
+      // If it's a sample organization, use a specific mutation
+      removeSampleOrganization()
+        .then(() => {
+          toast.success(t('successfullyDeletedSampleOrganization') as string);
+          setTimeout(() => {
+            navigate('/orglist');
+          }, 1000);
+        })
+        .catch((error) => {
+          toast.error(error.message);
+        });
+    } else {
+      // For regular organizations, use a different mutation
+      try {
+        await del({
+          variables: {
+            id: currentUrl,
+          },
+        });
+        navigate('/orglist');
+      } catch (error) {
+        errorHandler(t, error);
+      }
+    }
+  };
+
+  return (
+    <>
+      {canDelete && (
+        <Card className="rounded-4 shadow-sm mb-4 border border-light-subtle">
+          <div className={styles.cardHeader}>
+            <div className={styles.cardTitle}>{t('deleteOrganization')}</div>
+          </div>
+          <Card.Body className={styles.cardBody}>
+            <div className={styles.textBox}>{t('longDelOrgMsg')}</div>
+            <Button
+              variant="danger"
+              className={styles.deleteButton}
+              onClick={toggleDeleteModal}
+              data-testid="openDeleteModalBtn"
+            >
+              {data && data.isSampleOrganization
+                ? t('deleteSampleOrganization')
+                : t('deleteOrganization')}
+            </Button>
+          </Card.Body>
+        </Card>
+      )}
+      {/* Delete Organization Modal */}
+      {canDelete && (
+        <Modal
+          show={showDeleteModal}
+          onHide={toggleDeleteModal}
+          data-testid="orgDeleteModal"
+        >
+          <Modal.Header className="bg-primary" closeButton>
+            <h5 className="text-white fw-bold">{t('deleteOrganization')}</h5>
+          </Modal.Header>
+          <Modal.Body>{t('deleteMsg')}</Modal.Body>
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={toggleDeleteModal}
+              data-testid="closeDelOrgModalBtn"
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button
+              variant="danger"
+              onClick={deleteOrg}
+              data-testid="deleteOrganizationBtn"
+            >
+              {t('confirmDelete')}
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default deleteOrg;
diff --git a/src/components/OrgSettings/General/GeneralSettings.tsx b/src/components/OrgSettings/General/GeneralSettings.tsx
new file mode 100644
index 0000000000..4dbca1b6eb
--- /dev/null
+++ b/src/components/OrgSettings/General/GeneralSettings.tsx
@@ -0,0 +1,73 @@
+import React, { type FC } from 'react';
+import { Card, Col, Form, Row } from 'react-bootstrap';
+import styles from 'screens/OrgSettings/OrgSettings.module.css';
+import OrgProfileFieldSettings from './OrgProfileFieldSettings/OrgProfileFieldSettings';
+import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
+import DeleteOrg from './DeleteOrg/DeleteOrg';
+import OrgUpdate from './OrgUpdate/OrgUpdate';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Props for the `GeneralSettings` component.
+ */
+interface InterfaceGeneralSettingsProps {
+  orgId: string;
+}
+
+/**
+ * A component for displaying general settings for an organization.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `GeneralSettings` component.
+ */
+const GeneralSettings: FC<InterfaceGeneralSettingsProps> = ({ orgId }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgSettings',
+  });
+
+  return (
+    <Row className={`${styles.settingsBody} mt-3`}>
+      <Col lg={7}>
+        <Card className="rounded-4 mb-4 mx-auto shadow-sm border border-light-subtle">
+          <div className={styles.cardHeader}>
+            <div className={styles.cardTitle}>{t('updateOrganization')}</div>
+          </div>
+          <Card.Body className={styles.cardBody}>
+            {/* Render organization update component */}
+            <OrgUpdate orgId={orgId} />
+          </Card.Body>
+        </Card>
+      </Col>
+      <Col lg={5}>
+        <DeleteOrg />
+        <Card className="rounded-4 mb-4 mx-auto shadow-sm border border-light-subtle">
+          <div className={styles.cardHeader}>
+            <div className={styles.cardTitle}>{t('otherSettings')}</div>
+          </div>
+          <Card.Body className={styles.cardBody}>
+            <div className={styles.textBox}>
+              <Form.Label className={'text-secondary fw-bold'}>
+                {t('changeLanguage')}
+              </Form.Label>
+              {/* Render language change dropdown component */}
+              <ChangeLanguageDropDown />
+            </div>
+          </Card.Body>
+        </Card>
+      </Col>
+      <Col lg={7}>
+        <Card className="rounded-4 mb-4 mx-auto shadow-sm border border-light-subtle">
+          <div className={styles.cardHeader}>
+            <div className={styles.cardTitle}>{t('manageCustomFields')}</div>
+          </div>
+          <Card.Body className={styles.cardBody}>
+            {/* Render organization profile field settings component */}
+            <OrgProfileFieldSettings />
+          </Card.Body>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+export default GeneralSettings;
diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
new file mode 100644
index 0000000000..851f70ce39
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.module.css
@@ -0,0 +1,24 @@
+.customDataTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.customDataTable th,
+.customDataTable td {
+  padding: 8px;
+  text-align: left;
+}
+
+.customDataTable th {
+  background-color: #f2f2f2;
+}
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.saveButton {
+  width: 10em;
+  align-self: self-end;
+}
diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
new file mode 100644
index 0000000000..8db8773381
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.test.tsx
@@ -0,0 +1,280 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import OrgProfileFieldSettings from './OrgProfileFieldSettings';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import {
+  ADD_CUSTOM_FIELD,
+  REMOVE_CUSTOM_FIELD,
+} from 'GraphQl/Mutations/mutations';
+import { ORGANIZATION_CUSTOM_FIELDS } from 'GraphQl/Queries/Queries';
+import { ToastContainer, toast } from 'react-toastify';
+
+const MOCKS = [
+  {
+    request: {
+      query: ADD_CUSTOM_FIELD,
+      variables: {
+        type: '',
+        name: '',
+      },
+    },
+    result: {
+      data: {
+        addOrganizationCustomField: {
+          name: 'Custom Field Name',
+          type: 'string',
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: REMOVE_CUSTOM_FIELD,
+      variables: { customFieldId: 'adsdasdsa334343yiu423434' },
+    },
+    result: {
+      data: {
+        removeOrganizationCustomField: {
+          type: '',
+          name: '',
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: ORGANIZATION_CUSTOM_FIELDS,
+      variables: {},
+    },
+    result: {
+      data: {
+        customFieldsByOrganization: [
+          {
+            _id: 'adsdasdsa334343yiu423434',
+            type: 'fieldType',
+            name: 'fieldName',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const ERROR_MOCKS = [
+  {
+    request: {
+      query: ADD_CUSTOM_FIELD,
+      variables: {
+        type: '',
+        name: '',
+      },
+    },
+    error: new Error('Failed to add custom field'),
+  },
+  {
+    request: {
+      query: REMOVE_CUSTOM_FIELD,
+      variables: {
+        customFieldId: 'adsdasdsa334343yiu423434',
+      },
+    },
+    error: new Error('Failed to remove custom field'),
+  },
+  {
+    request: {
+      query: ORGANIZATION_CUSTOM_FIELDS,
+      variables: {},
+    },
+    result: {
+      data: {
+        customFieldsByOrganization: [
+          {
+            _id: 'adsdasdsa334343yiu423434',
+            type: 'fieldType',
+            name: 'fieldName',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const ORGANIZATION_CUSTOM_FIELDS_ERROR_MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_CUSTOM_FIELDS,
+      variables: {},
+    },
+    error: new Error('Failed to fetch custom field'),
+  },
+];
+
+const NO_C_FIELD_MOCK = [
+  {
+    request: {
+      query: ADD_CUSTOM_FIELD,
+      variables: {
+        type: 'fieldType',
+        name: 'fieldName',
+      },
+    },
+    result: {
+      data: {
+        addOrganizationCustomField: {
+          name: 'Custom Field Name',
+          type: 'string',
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: ORGANIZATION_CUSTOM_FIELDS,
+      variables: {},
+    },
+    result: {
+      data: {
+        customFieldsByOrganization: [],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(NO_C_FIELD_MOCK, true);
+const link3 = new StaticMockLink(ERROR_MOCKS, true);
+const link4 = new StaticMockLink(ORGANIZATION_CUSTOM_FIELDS_ERROR_MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Save Button', () => {
+  test('Testing Failure Case For Fetching Custom field', async () => {
+    render(
+      <MockedProvider
+        mocks={ORGANIZATION_CUSTOM_FIELDS_ERROR_MOCKS}
+        addTypename={false}
+        link={link4}
+      >
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(
+      screen.queryByText('Failed to fetch custom field'),
+    ).toBeInTheDocument();
+  });
+  test('Saving Organization Custom Field', async () => {
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ToastContainer />
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('saveChangesBtn'));
+    await wait();
+    expect(screen.queryByText('Field added successfully')).toBeInTheDocument();
+  });
+
+  test('Testing Failure Case For Saving Custom Field', async () => {
+    render(
+      <MockedProvider mocks={ERROR_MOCKS} addTypename={false} link={link3}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ToastContainer />
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByTestId('saveChangesBtn'));
+    await wait();
+    expect(
+      screen.queryByText('Failed to add custom field'),
+    ).toBeInTheDocument();
+    await wait();
+    userEvent.type(screen.getByTestId('customFieldInput'), 'Age{enter}');
+    await wait();
+    expect(
+      screen.queryByText('Failed to add custom field'),
+    ).toBeInTheDocument();
+  });
+
+  test('Testing Typing Organization Custom Field Name', async () => {
+    const { getByTestId } = render(
+      <MockedProvider mocks={MOCKS} addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const fieldNameInput = getByTestId('customFieldInput');
+    userEvent.type(fieldNameInput, 'Age');
+  });
+  test('When No Custom Data is Present', async () => {
+    const { getByText } = render(
+      <MockedProvider mocks={NO_C_FIELD_MOCK} addTypename={false} link={link2}>
+        <I18nextProvider i18n={i18nForTest}>
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(getByText('No custom fields available')).toBeInTheDocument();
+  });
+  test('Testing Remove Custom Field Button', async () => {
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ToastContainer />
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('removeCustomFieldBtn'));
+    await wait();
+    expect(
+      screen.queryByText('Field removed successfully'),
+    ).toBeInTheDocument();
+  });
+
+  test('Testing Failure Case For Removing Custom Field', async () => {
+    const toastSpy = jest.spyOn(toast, 'error');
+    render(
+      <MockedProvider mocks={ERROR_MOCKS} addTypename={false} link={link3}>
+        <I18nextProvider i18n={i18nForTest}>
+          <ToastContainer />
+          <OrgProfileFieldSettings />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByTestId('removeCustomFieldBtn'));
+    await wait();
+    expect(toastSpy).toHaveBeenCalledWith('Failed to remove custom field');
+  });
+});
diff --git a/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
new file mode 100644
index 0000000000..dcb6992e21
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx
@@ -0,0 +1,191 @@
+import { useMutation, useQuery } from '@apollo/client';
+import React, { useState } from 'react';
+import { FaTrash } from 'react-icons/fa';
+import { Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import {
+  ADD_CUSTOM_FIELD,
+  REMOVE_CUSTOM_FIELD,
+} from 'GraphQl/Mutations/mutations';
+import { ORGANIZATION_CUSTOM_FIELDS } from 'GraphQl/Queries/Queries';
+import styles from './OrgProfileFieldSettings.module.css';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import EditOrgCustomFieldDropDown from 'components/EditCustomFieldDropDown/EditCustomFieldDropDown';
+import { useParams } from 'react-router-dom';
+import type { InterfaceCustomFieldData } from 'utils/interfaces';
+
+/**
+ * Component for managing organization profile field settings
+ *
+ * This component allows adding and removing custom fields for an organization.
+ * It displays existing custom fields and provides a form to add new fields.
+ *
+ * @returns JSX.Element representing the organization profile field settings
+ */
+const OrgProfileFieldSettings = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgProfileField',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // State to hold the custom field data
+  const [customFieldData, setCustomFieldData] =
+    useState<InterfaceCustomFieldData>({
+      type: '',
+      name: '',
+    });
+
+  // Get the current organization ID from the URL parameters
+  const { orgId: currentOrgId } = useParams();
+
+  // Mutation to add a custom field
+  const [addCustomField] = useMutation(ADD_CUSTOM_FIELD);
+
+  // Mutation to remove a custom field
+  const [removeCustomField] = useMutation(REMOVE_CUSTOM_FIELD);
+
+  // Query to fetch custom fields for the organization
+  const { loading, error, data, refetch } = useQuery(
+    ORGANIZATION_CUSTOM_FIELDS,
+    {
+      variables: {
+        customFieldsByOrganizationId: currentOrgId,
+      },
+    },
+  );
+
+  // Function to handle saving a new custom field
+  const handleSave = async (): Promise<void> => {
+    try {
+      await addCustomField({
+        variables: {
+          organizationId: currentOrgId,
+          ...customFieldData,
+        },
+      });
+      toast.success(t('fieldSuccessMessage') as string);
+      setCustomFieldData({ type: '', name: '' });
+      refetch();
+    } catch (error) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  // Function to handle removing a custom field
+  const handleRemove = async (customFieldId: string): Promise<void> => {
+    try {
+      await removeCustomField({
+        variables: {
+          organizationId: currentOrgId,
+          customFieldId: customFieldId,
+        },
+      });
+
+      toast.success(t('fieldRemovalSuccess') as string);
+      refetch();
+    } catch (error) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  // Render loading or error messages if needed
+  if (loading) return <p> {tCommon('loading')}</p>;
+  if (error) return <p>{error.message} </p>;
+
+  return (
+    <div>
+      {/* Display existing custom fields or a message if there are none */}
+      {data.customFieldsByOrganization.length === 0 ? (
+        <p>{t('noCustomField')}</p>
+      ) : (
+        <table className={styles.customDataTable}>
+          <tbody>
+            {data.customFieldsByOrganization.map(
+              (
+                field: {
+                  _id: string;
+                  name: string;
+                  type: string;
+                },
+                index: number,
+              ) => (
+                <tr key={index}>
+                  <td>{field.name}</td>
+                  <td>{field.type}</td>
+                  <td>
+                    {/* Button to remove a custom field */}
+                    <Button
+                      variant="danger"
+                      size={'sm'}
+                      onClick={() => handleRemove(field._id)}
+                      title={t('Remove Custom Field')}
+                      data-testid="removeCustomFieldBtn"
+                    >
+                      <FaTrash />
+                    </Button>
+                  </td>
+                </tr>
+              ),
+            )}
+          </tbody>
+        </table>
+      )}
+      <hr />
+      <div>
+        <div>
+          <div>
+            {/* Form to add a new custom field */}
+            <form>
+              <div>
+                <Form.Label>{t('customFieldName')}</Form.Label>
+                <Form.Control
+                  className="mb-3"
+                  placeholder={t('enterCustomFieldName')}
+                  autoComplete="off"
+                  required
+                  data-testid="customFieldInput"
+                  value={customFieldData.name}
+                  onChange={(event) => {
+                    setCustomFieldData({
+                      ...customFieldData,
+                      name: event.target.value,
+                    });
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      handleSave();
+                    }
+                  }}
+                />
+              </div>
+
+              <div className={styles.textBox}>
+                <Form.Label className={'text-secondary fw-bold'}>
+                  {t('customFieldType')}
+                </Form.Label>
+                <EditOrgCustomFieldDropDown
+                  setCustomFieldData={setCustomFieldData}
+                  customFieldData={customFieldData}
+                />
+              </div>
+
+              <Button
+                variant="success"
+                value="savechanges"
+                onClick={handleSave}
+                className={styles.saveButton}
+                data-testid="saveChangesBtn"
+              >
+                {tCommon('saveChanges')}
+              </Button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrgProfileFieldSettings;
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css
new file mode 100644
index 0000000000..fca7ac5e5b
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.module.css
@@ -0,0 +1,13 @@
+.message {
+  height: 420px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.icon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx
new file mode 100644
index 0000000000..6304bb3ec9
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.test.tsx
@@ -0,0 +1,242 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import OrgUpdate from './OrgUpdate';
+import {
+  MOCKS,
+  MOCKS_ERROR_ORGLIST,
+  MOCKS_ERROR_UPDATE_ORGLIST,
+} from './OrgUpdateMocks';
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Organization Update', () => {
+  const props = {
+    orgId: '123',
+  };
+
+  const formData = {
+    name: 'Palisadoes Organization',
+    description: 'This is a updated description',
+    address: {
+      city: 'Kingston',
+      countryCode: 'JM',
+      dependentLocality: 'Sample Dependent Locality',
+      line1: '123 Jamaica Street',
+      line2: 'Apartment 456',
+      postalCode: 'JM12345',
+      sortingCode: 'ABC-123',
+      state: 'Kingston Parish',
+    },
+    displayImage: new File(['hello'], 'hello.png', { type: 'image/png' }),
+    userRegistrationRequired: false,
+    isVisible: true,
+  };
+
+  global.alert = jest.fn();
+
+  test('should render props and text elements test for the page component along with mock data', async () => {
+    act(() => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgUpdate {...props} />
+          </I18nextProvider>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+    // Check labels are present or not
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Address')).toBeInTheDocument();
+    expect(screen.getByText('Display Image:')).toBeInTheDocument();
+    expect(screen.getByText(/Registration/)).toBeInTheDocument();
+    expect(screen.getByText('Visible in Search:')).toBeInTheDocument();
+
+    // Get the input fields, and btns
+    const name = screen.getByPlaceholderText(/Enter Organization Name/i);
+    const des = screen.getByPlaceholderText(/Description/i);
+    const city = screen.getByPlaceholderText(/City/i);
+    const countryCode = screen.getByTestId('countrycode');
+    const line1 = screen.getByPlaceholderText(/Line 1/i);
+    const line2 = screen.getByPlaceholderText(/Line 2/i);
+    const dependentLocality =
+      screen.getByPlaceholderText(/Dependent Locality/i);
+    const sortingCode = screen.getByPlaceholderText(/Sorting code/i);
+    const postalCode = screen.getByPlaceholderText(/Postal Code/i);
+    const userRegistrationRequired =
+      screen.getByPlaceholderText(/Registration/i);
+    const isVisible = screen.getByPlaceholderText(/Visible/i);
+
+    // Checking if form fields got updated according to the mock data
+    expect(name).toHaveValue('Palisadoes');
+    expect(des).toHaveValue('Equitable Access to STEM Education Jobs');
+    expect(city).toHaveValue('Kingston');
+    expect(countryCode).toHaveValue('JM');
+    expect(dependentLocality).toHaveValue('Sample Dependent Locality');
+    expect(line1).toHaveValue('123 Jamaica Street');
+    expect(line2).toHaveValue('Apartment 456');
+    expect(postalCode).toHaveValue('JM12345');
+    expect(sortingCode).toHaveValue('ABC-123');
+    expect(userRegistrationRequired).toBeChecked();
+    expect(isVisible).not.toBeChecked();
+  });
+
+  test('Should Update organization properly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgUpdate {...props} />
+          </I18nextProvider>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+
+    // Get the input fields, and btns
+    const name = screen.getByPlaceholderText(/Enter Organization Name/i);
+    const des = screen.getByPlaceholderText(/Description/i);
+
+    const city = screen.getByPlaceholderText(/City/i);
+    const countryCode = screen.getByTestId('countrycode');
+    const line1 = screen.getByPlaceholderText(/Line 1/i);
+    const line2 = screen.getByPlaceholderText(/Line 2/i);
+    const dependentLocality =
+      screen.getByPlaceholderText(/Dependent Locality/i);
+    const sortingCode = screen.getByPlaceholderText(/Sorting code/i);
+    const postalCode = screen.getByPlaceholderText(/Postal Code/i);
+    const displayImage = screen.getByPlaceholderText(/Display Image/i);
+    const userRegistrationRequired =
+      screen.getByPlaceholderText(/Registration/i);
+    const isVisible = screen.getByPlaceholderText(/Visible/i);
+    const saveChangesBtn = screen.getByText(/Save Changes/i);
+
+    // Emptying the text fields to add updated data
+    fireEvent.change(name, { target: { value: '' } });
+    fireEvent.change(des, { target: { value: '' } });
+    fireEvent.change(city, { target: { value: '' } });
+    fireEvent.change(line1, { target: { value: '' } });
+    fireEvent.change(line2, { target: { value: '' } });
+    fireEvent.change(postalCode, { target: { value: '' } });
+    fireEvent.change(sortingCode, { target: { value: '' } });
+    fireEvent.change(dependentLocality, { target: { value: '' } });
+
+    // Mocking filling form behaviour
+    userEvent.type(name, formData.name);
+    userEvent.type(des, formData.description);
+    userEvent.type(city, formData.address.city);
+    userEvent.selectOptions(countryCode, formData.address.countryCode);
+    userEvent.type(line1, formData.address.line1);
+    userEvent.type(line2, formData.address.line2);
+    userEvent.type(postalCode, formData.address.postalCode);
+    userEvent.type(dependentLocality, formData.address.dependentLocality);
+    userEvent.type(sortingCode, formData.address.sortingCode);
+    userEvent.upload(displayImage, formData.displayImage);
+    userEvent.click(userRegistrationRequired);
+    userEvent.click(isVisible);
+
+    await wait();
+    userEvent.click(saveChangesBtn);
+
+    // Checking if the form got update accordingly
+    expect(name).toHaveValue(formData.name);
+    expect(des).toHaveValue(formData.description);
+    expect(city).toHaveValue(formData.address.city);
+    expect(countryCode).toHaveValue(formData.address.countryCode);
+    expect(dependentLocality).toHaveValue(formData.address.dependentLocality);
+    expect(line1).toHaveValue(formData.address.line1);
+    expect(line2).toHaveValue(formData.address.line2);
+    expect(postalCode).toHaveValue(formData.address.postalCode);
+    expect(sortingCode).toHaveValue(formData.address.sortingCode);
+    expect(displayImage).toBeTruthy();
+    expect(userRegistrationRequired).not.toBeChecked();
+    expect(isVisible).toBeChecked();
+  });
+
+  test('Should render error occured text when Organization Could not be found', async () => {
+    act(() => {
+      render(
+        <MockedProvider addTypename={false} mocks={MOCKS_ERROR_ORGLIST}>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgUpdate {...props} />
+          </I18nextProvider>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+    expect(screen.getByText(/Mock Graphql Error/i)).toBeInTheDocument();
+  });
+
+  test('Should show error occured toast when Organization could not be updated', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} mocks={MOCKS_ERROR_UPDATE_ORGLIST}>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrgUpdate {...props} />
+          </I18nextProvider>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+
+    // Get the input fields, and btns
+    const name = screen.getByPlaceholderText(/Enter Organization Name/i);
+    const des = screen.getByPlaceholderText(/Description/i);
+    const city = screen.getByPlaceholderText(/City/i);
+    const countryCode = screen.getByTestId('countrycode');
+    const line1 = screen.getByPlaceholderText(/Line 1/i);
+    const line2 = screen.getByPlaceholderText(/Line 2/i);
+    const dependentLocality =
+      screen.getByPlaceholderText(/Dependent Locality/i);
+    const sortingCode = screen.getByPlaceholderText(/Sorting code/i);
+    const postalCode = screen.getByPlaceholderText(/Postal Code/i);
+    const displayImage = screen.getByPlaceholderText(/Display Image/i);
+    const userRegistrationRequired =
+      screen.getByPlaceholderText(/Registration/i);
+    const isVisible = screen.getByPlaceholderText(/Visible/i);
+    const saveChangesBtn = screen.getByText(/Save Changes/i);
+
+    // Emptying the text fields to add updated data
+    fireEvent.change(name, { target: { value: '' } });
+    fireEvent.change(des, { target: { value: '' } });
+    fireEvent.change(city, { target: { value: '' } });
+    fireEvent.change(line1, { target: { value: '' } });
+    fireEvent.change(line2, { target: { value: '' } });
+    fireEvent.change(postalCode, { target: { value: '' } });
+    fireEvent.change(sortingCode, { target: { value: '' } });
+    fireEvent.change(dependentLocality, { target: { value: '' } });
+
+    // Mocking filling form behaviour
+    userEvent.type(name, formData.name);
+    userEvent.type(des, formData.description);
+    userEvent.type(city, formData.address.city);
+    userEvent.selectOptions(countryCode, formData.address.countryCode);
+    userEvent.type(line1, formData.address.line1);
+    userEvent.type(line2, formData.address.line2);
+    userEvent.type(postalCode, formData.address.postalCode);
+    userEvent.type(dependentLocality, formData.address.dependentLocality);
+    userEvent.type(sortingCode, formData.address.sortingCode);
+    userEvent.upload(displayImage, formData.displayImage);
+    userEvent.click(userRegistrationRequired);
+    userEvent.click(isVisible);
+
+    await wait();
+    userEvent.click(saveChangesBtn);
+  });
+});
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
new file mode 100644
index 0000000000..6e0be28a56
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdate.tsx
@@ -0,0 +1,359 @@
+import React, { useState, useEffect } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+
+import type { ApolloError } from '@apollo/client';
+import { WarningAmberRounded } from '@mui/icons-material';
+import { UPDATE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import Loader from 'components/Loader/Loader';
+import { Col, Form, Row } from 'react-bootstrap';
+import convertToBase64 from 'utils/convertToBase64';
+import { errorHandler } from 'utils/errorHandler';
+import styles from './OrgUpdate.module.css';
+import type {
+  InterfaceQueryOrganizationsListObject,
+  InterfaceAddress,
+} from 'utils/interfaces';
+import { countryOptions } from 'utils/formEnumFields';
+
+interface InterfaceOrgUpdateProps {
+  orgId: string;
+}
+
+/**
+ * Component for updating organization details.
+ *
+ * This component allows users to update the organization's name, description, address,
+ * visibility settings, and upload an image. It uses GraphQL mutations and queries to
+ * fetch and update data.
+ *
+ * @param props - Component props containing the organization ID.
+ * @returns The rendered component.
+ */
+function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element {
+  const { orgId } = props;
+
+  const [formState, setFormState] = useState<{
+    orgName: string;
+    orgDescrip: string;
+    address: InterfaceAddress;
+    orgImage: string | null;
+  }>({
+    orgName: '',
+    orgDescrip: '',
+    address: {
+      city: '',
+      countryCode: '',
+      dependentLocality: '',
+      line1: '',
+      line2: '',
+      postalCode: '',
+      sortingCode: '',
+      state: '',
+    },
+    orgImage: null,
+  });
+
+  const handleInputChange = (fieldName: string, value: string): void => {
+    setFormState((prevState) => ({
+      ...prevState,
+      address: {
+        ...prevState.address,
+        [fieldName]: value,
+      },
+    }));
+  };
+
+  const [userRegistrationRequiredChecked, setuserRegistrationRequiredChecked] =
+    React.useState(false);
+  const [visiblechecked, setVisibleChecked] = React.useState(false);
+
+  const [login] = useMutation(UPDATE_ORGANIZATION_MUTATION);
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgUpdate',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const {
+    data,
+    loading,
+    refetch,
+    error,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationsListObject[];
+    };
+    loading: boolean;
+    refetch: (variables: { id: string }) => void;
+    error?: ApolloError;
+  } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: orgId },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  // Update form state when data changes
+  useEffect(() => {
+    let isMounted = true;
+    if (data && isMounted) {
+      setFormState({
+        ...formState,
+        orgName: data.organizations[0].name,
+        orgDescrip: data.organizations[0].description,
+        address: data.organizations[0].address,
+      });
+      setuserRegistrationRequiredChecked(
+        data.organizations[0].userRegistrationRequired,
+      );
+      setVisibleChecked(data.organizations[0].visibleInSearch);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [data, orgId]);
+
+  /**
+   * Handles the save button click event.
+   * Updates the organization with the form data.
+   */
+  const onSaveChangesClicked = async (): Promise<void> => {
+    try {
+      const { data } = await login({
+        variables: {
+          id: orgId,
+          name: formState.orgName,
+          description: formState.orgDescrip,
+          address: {
+            city: formState.address.city,
+            countryCode: formState.address.countryCode,
+            dependentLocality: formState.address.dependentLocality,
+            line1: formState.address.line1,
+            line2: formState.address.line2,
+            postalCode: formState.address.postalCode,
+            sortingCode: formState.address.sortingCode,
+            state: formState.address.state,
+          },
+          userRegistrationRequired: userRegistrationRequiredChecked,
+          visibleInSearch: visiblechecked,
+          file: formState.orgImage,
+        },
+      });
+      // istanbul ignore next
+      if (data) {
+        refetch({ id: orgId });
+        toast.success(t('successfulUpdated') as string);
+      }
+    } catch (error: unknown) {
+      errorHandler(t, error);
+    }
+  };
+
+  if (loading) {
+    return <Loader styles={styles.message} size="lg" />;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.message}>
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          Error occured while loading Organization Data
+          <br />
+          {`${error.message}`}
+        </h6>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div id="orgupdate" className={styles.userupdatediv}>
+        <form>
+          <Form.Label>{tCommon('name')}</Form.Label>
+          <Form.Control
+            className="mb-3"
+            placeholder={t('enterNameOrganization')}
+            autoComplete="off"
+            required
+            value={formState.orgName}
+            onChange={(e): void => {
+              setFormState({
+                ...formState,
+                orgName: e.target.value,
+              });
+            }}
+          />
+          <Form.Label>{tCommon('description')}</Form.Label>
+          <Form.Control
+            className="mb-3"
+            placeholder={tCommon('description')}
+            autoComplete="off"
+            required
+            value={formState.orgDescrip}
+            onChange={(e): void => {
+              setFormState({
+                ...formState,
+                orgDescrip: e.target.value,
+              });
+            }}
+          />
+          <Form.Label>{tCommon('address')}</Form.Label>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                required
+                as="select"
+                value={formState.address.countryCode}
+                data-testid="countrycode"
+                onChange={(e) => {
+                  const countryCode = e.target.value;
+                  handleInputChange('countryCode', countryCode);
+                }}
+              >
+                <option value="" disabled>
+                  Select a country
+                </option>
+                {countryOptions.map((country) => (
+                  <option
+                    key={country.value.toUpperCase()}
+                    value={country.value.toUpperCase()}
+                  >
+                    {country.label}
+                  </option>
+                ))}
+              </Form.Control>
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('city')}
+                autoComplete="off"
+                required
+                value={formState.address.city}
+                onChange={(e) => handleInputChange('city', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('state')}
+                autoComplete="off"
+                value={formState.address.state}
+                onChange={(e) => handleInputChange('state', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('dependentLocality')}
+                autoComplete="off"
+                value={formState.address.dependentLocality}
+                onChange={(e) =>
+                  handleInputChange('dependentLocality', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
+          <Row className="mb-3">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line1')}
+                autoComplete="off"
+                value={formState.address.line1}
+                onChange={(e) => handleInputChange('line1', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line2')}
+                autoComplete="off"
+                value={formState.address.line2}
+                onChange={(e) => handleInputChange('line2', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('postalCode')}
+                autoComplete="off"
+                value={formState.address.postalCode}
+                onChange={(e) =>
+                  handleInputChange('postalCode', e.target.value)
+                }
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('sortingCode')}
+                autoComplete="off"
+                value={formState.address.sortingCode}
+                onChange={(e) =>
+                  handleInputChange('sortingCode', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={6} className="d-flex mb-3">
+              <Form.Label className="me-3">
+                {t('userRegistrationRequired')}:
+              </Form.Label>
+              <Form.Switch
+                placeholder={t('userRegistrationRequired')}
+                checked={userRegistrationRequiredChecked}
+                onChange={(): void =>
+                  setuserRegistrationRequiredChecked(
+                    !userRegistrationRequiredChecked,
+                  )
+                }
+              />
+            </Col>
+            <Col sm={6} className="d-flex mb-3">
+              <Form.Label className="me-3">
+                {t('isVisibleInSearch')}:
+              </Form.Label>
+              <Form.Switch
+                placeholder={t('isVisibleInSearch')}
+                checked={visiblechecked}
+                onChange={(): void => setVisibleChecked(!visiblechecked)}
+              />
+            </Col>
+          </Row>
+          <Form.Label htmlFor="orgphoto">{tCommon('displayImage')}:</Form.Label>
+          <Form.Control
+            className="mb-4"
+            accept="image/*"
+            placeholder={tCommon('displayImage')}
+            name="photo"
+            type="file"
+            multiple={false}
+            onChange={async (e: React.ChangeEvent): Promise<void> => {
+              const target = e.target as HTMLInputElement;
+              const file = target.files && target.files[0];
+              /* istanbul ignore else */
+              if (file)
+                setFormState({
+                  ...formState,
+                  orgImage: await convertToBase64(file),
+                });
+            }}
+            data-testid="organisationImage"
+          />
+          <div className="d-flex justify-content-end">
+            <Button
+              variant="success"
+              value="savechanges"
+              onClick={onSaveChangesClicked}
+            >
+              {tCommon('saveChanges')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}
+export default orgUpdate;
diff --git a/src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts b/src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts
new file mode 100644
index 0000000000..4c7f704719
--- /dev/null
+++ b/src/components/OrgSettings/General/OrgUpdate/OrgUpdateMocks.ts
@@ -0,0 +1,204 @@
+import { UPDATE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image: null,
+            name: 'Palisadoes',
+            description: 'Equitable Access to STEM Education Jobs',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: false,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'johndoe@example.com',
+            },
+            members: {
+              _id: '123',
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'johndoe@gmail.com',
+            },
+            admins: [
+              {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@gmail.com',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: {
+              _id: '456',
+              user: {
+                firstName: 'Sam',
+                lastName: 'Smith',
+                email: 'samsmith@gmail.com',
+              },
+            },
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ORGANIZATION_MUTATION,
+      variables: {
+        id: '123',
+        name: 'Updated Organization',
+        description: 'This is an updated test organization',
+        address: {
+          city: 'Kingston',
+          countryCode: 'JM',
+          dependentLocality: 'Sample Dependent Locality',
+          line1: '123 Jamaica Street',
+          line2: 'Apartment 456',
+          postalCode: 'JM12345',
+          sortingCode: 'ABC-123',
+          state: 'Kingston Parish',
+        },
+        image: new File(['hello'], 'hello.png', { type: 'image/png' }),
+        userRegistrationRequired: true,
+        visibleInSearch: false,
+      },
+    },
+    result: {
+      data: {
+        updateOrganization: {
+          _id: '123',
+          name: 'Updated Organization',
+          description: 'This is an updated test organization',
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          userRegistrationRequired: true,
+          visibleInSearch: false,
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR_ORGLIST = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
+
+export const MOCKS_ERROR_UPDATE_ORGLIST = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image: null,
+            name: 'Palisadoes',
+            description: 'Equitable Access to STEM Education Jobs',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: false,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'johndoe@example.com',
+            },
+            members: {
+              _id: '123',
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'johndoe@gmail.com',
+            },
+            admins: [
+              {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@gmail.com',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: {
+              _id: '456',
+              user: {
+                firstName: 'Sam',
+                lastName: 'Smith',
+                email: 'samsmith@gmail.com',
+              },
+            },
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ORGANIZATION_MUTATION,
+      variables: {
+        id: '123',
+        name: 'Updated Organization',
+        description: 'This is an updated test organization',
+        address: {
+          city: 'Kingston',
+          countryCode: 'JM',
+          dependentLocality: 'Sample Dependent Locality',
+          line1: '123 Jamaica Street',
+          line2: 'Apartment 456',
+          postalCode: 'JM12345',
+          sortingCode: 'ABC-123',
+          state: 'Kingston Parish',
+        },
+        image: new File(['hello'], 'hello.png', { type: 'image/png' }),
+        userRegistrationRequired: true,
+        visibleInSearch: false,
+      },
+    },
+    erorr: new Error('Mock Graphql Updating Organization Error'),
+  },
+];
diff --git a/src/components/OrganizationCard/OrganizationCard.module.css b/src/components/OrganizationCard/OrganizationCard.module.css
new file mode 100644
index 0000000000..6c65b8258b
--- /dev/null
+++ b/src/components/OrganizationCard/OrganizationCard.module.css
@@ -0,0 +1,46 @@
+.alignimg {
+  border-radius: 50%;
+  background-blend-mode: darken;
+  height: 65px;
+  width: 65px;
+}
+
+.box {
+  color: #ffbd59;
+}
+
+.box :hover {
+  color: #ffbd59;
+}
+
+.first_box {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.second_box {
+  padding-left: 20px;
+  padding-top: 10px;
+}
+
+.second_box > h4 {
+  font-size: 10;
+  font-weight: bold;
+  text-decoration: none;
+  color: black;
+}
+
+.second_box > h5 {
+  text-decoration: none;
+  font-size: 10;
+  font-weight: 100;
+  color: #969696;
+}
+
+.deco {
+  border: 1px solid #dfdfdf;
+  width: 65vw;
+  height: 0px !important;
+}
diff --git a/src/components/OrganizationCard/OrganizationCard.test.tsx b/src/components/OrganizationCard/OrganizationCard.test.tsx
new file mode 100644
index 0000000000..e4abf3a1fd
--- /dev/null
+++ b/src/components/OrganizationCard/OrganizationCard.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OrganizationCard from './OrganizationCard';
+
+describe('Testing the Organization Card', () => {
+  test('should render props and text elements test for the page component', () => {
+    const props = {
+      id: '123',
+      image: 'https://via.placeholder.com/80',
+      firstName: 'John',
+      lastName: 'Doe',
+      name: 'Sample',
+    };
+
+    render(<OrganizationCard {...props} />);
+
+    expect(screen.getByText(props.name)).toBeInTheDocument();
+    expect(screen.getByText(/Owner:/i)).toBeInTheDocument();
+    expect(screen.getByText(props.firstName)).toBeInTheDocument();
+    expect(screen.getByText(props.lastName)).toBeInTheDocument();
+  });
+
+  test('Should render text elements when props value is not passed', () => {
+    const props = {
+      id: '123',
+      image: '',
+      firstName: 'John',
+      lastName: 'Doe',
+      name: 'Sample',
+    };
+
+    render(<OrganizationCard {...props} />);
+
+    expect(screen.getByText(props.name)).toBeInTheDocument();
+    expect(screen.getByText(/Owner:/i)).toBeInTheDocument();
+    expect(screen.getByText(props.firstName)).toBeInTheDocument();
+    expect(screen.getByText(props.lastName)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrganizationCard/OrganizationCard.tsx b/src/components/OrganizationCard/OrganizationCard.tsx
new file mode 100644
index 0000000000..ae513eff5d
--- /dev/null
+++ b/src/components/OrganizationCard/OrganizationCard.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styles from './OrganizationCard.module.css';
+
+interface InterfaceOrganizationCardProps {
+  image: string;
+  id: string;
+  name: string;
+  lastName: string;
+  firstName: string;
+}
+
+/**
+ * Component to display an organization's card with its image and owner details.
+ *
+ * @param props - Properties for the organization card.
+ * @returns JSX element representing the organization card.
+ */
+function OrganizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
+  const uri = '/superorghome/i=' + props.id;
+
+  return (
+    <a href={uri}>
+      <div className={styles.box}>
+        <div className={styles.first_box}>
+          {props.image ? (
+            <img
+              src={props.image}
+              className={styles.alignimg}
+              alt="Organization"
+            />
+          ) : (
+            <img
+              src="https://via.placeholder.com/80"
+              className={styles.alignimg}
+              alt="Placeholder"
+            />
+          )}
+          <div className={styles.second_box}>
+            <h4>{props.name}</h4>
+            <h5>
+              Owner:
+              <span>{props.firstName}</span>
+              <span>
+                &nbsp;
+                {props.lastName}
+              </span>
+            </h5>
+          </div>
+        </div>
+        <div className={styles.deco}></div>
+      </div>
+    </a>
+  );
+}
+
+export default OrganizationCard;
diff --git a/src/components/OrganizationCardStart/OrganizationCardStart.module.css b/src/components/OrganizationCardStart/OrganizationCardStart.module.css
new file mode 100644
index 0000000000..6c65b8258b
--- /dev/null
+++ b/src/components/OrganizationCardStart/OrganizationCardStart.module.css
@@ -0,0 +1,46 @@
+.alignimg {
+  border-radius: 50%;
+  background-blend-mode: darken;
+  height: 65px;
+  width: 65px;
+}
+
+.box {
+  color: #ffbd59;
+}
+
+.box :hover {
+  color: #ffbd59;
+}
+
+.first_box {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.second_box {
+  padding-left: 20px;
+  padding-top: 10px;
+}
+
+.second_box > h4 {
+  font-size: 10;
+  font-weight: bold;
+  text-decoration: none;
+  color: black;
+}
+
+.second_box > h5 {
+  text-decoration: none;
+  font-size: 10;
+  font-weight: 100;
+  color: #969696;
+}
+
+.deco {
+  border: 1px solid #dfdfdf;
+  width: 65vw;
+  height: 0px !important;
+}
diff --git a/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx b/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
new file mode 100644
index 0000000000..dd65c8649e
--- /dev/null
+++ b/src/components/OrganizationCardStart/OrganizationCardStart.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OrganizationCardStart from './OrganizationCardStart';
+
+describe('Testing the Organization Cards', () => {
+  test('should render props and text elements test for the page component', () => {
+    const props = {
+      id: '123',
+      image: 'https://via.placeholder.com/80',
+      name: 'Sample',
+    };
+
+    render(<OrganizationCardStart key="456" {...props} />);
+
+    expect(screen.getByText(props.name)).toBeInTheDocument();
+  });
+
+  test('Should render text elements when props value is not passed', () => {
+    const props = {
+      id: '123',
+      image: '',
+      name: 'Sample',
+    };
+
+    render(<OrganizationCardStart key="456" {...props} />);
+
+    expect(screen.getByText(props.name)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrganizationCardStart/OrganizationCardStart.tsx b/src/components/OrganizationCardStart/OrganizationCardStart.tsx
new file mode 100644
index 0000000000..298fb13db9
--- /dev/null
+++ b/src/components/OrganizationCardStart/OrganizationCardStart.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './OrganizationCardStart.module.css';
+
+interface InterfaceOrganizationCardStartProps {
+  image: string;
+  id: string;
+  name: string;
+}
+
+/**
+ * Component to display a simplified card for an organization.
+ *
+ * @param image - URL of the organization's image.
+ * @param id - Unique identifier for the organization.
+ * @param name - Name of the organization.
+ * @returns JSX element representing the organization card.
+ */
+function organizationCardStart(
+  props: InterfaceOrganizationCardStartProps,
+): JSX.Element {
+  const uri = '/orghome/i=' + props.id;
+
+  return (
+    <>
+      <a href={uri}>
+        <div className={styles.box}>
+          <div className={styles.first_box}>
+            {props.image ? (
+              <img src={props.image} className={styles.alignimg} />
+            ) : (
+              <img
+                src="https://via.placeholder.com/80"
+                className={styles.alignimg}
+              />
+            )}
+            <div className={styles.second_box}>
+              <h4>{props.name}</h4>
+              <h5></h5>
+            </div>
+          </div>
+          <div className={styles.deco}></div>
+        </div>
+      </a>
+    </>
+  );
+}
+
+export default organizationCardStart;
diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css
new file mode 100644
index 0000000000..bfb85cb1bb
--- /dev/null
+++ b/src/components/OrganizationDashCards/CardItem.module.css
@@ -0,0 +1,81 @@
+.cardItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.cardItem .iconWrapper {
+  position: relative;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cardItem .iconWrapper .themeOverlay {
+  background: var(--bs-primary);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.12;
+  border-radius: 50%;
+}
+
+.cardItem .iconWrapper .dangerOverlay {
+  background: var(--bs-danger);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.12;
+  border-radius: 50%;
+}
+
+.cardItem .title {
+  font-size: 1rem;
+  flex: 1;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  margin-left: 3px;
+}
+
+.cardItem .location {
+  font-size: 0.9rem;
+  color: var(--bs-primary);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.cardItem .time {
+  font-size: 0.9rem;
+  color: var(--bs-secondary);
+}
+
+.cardItem .creator {
+  font-size: 1rem;
+  color: rgb(33, 208, 21);
+}
+
+.rightCard {
+  display: flex;
+  gap: 7px;
+  min-width: 170px;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 10px;
+  overflow-x: hidden;
+  width: 210px;
+}
diff --git a/src/components/OrganizationDashCards/CardItem.test.tsx b/src/components/OrganizationDashCards/CardItem.test.tsx
new file mode 100644
index 0000000000..31f3474607
--- /dev/null
+++ b/src/components/OrganizationDashCards/CardItem.test.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import CardItem from './CardItem';
+import type { InterfaceCardItem } from './CardItem';
+import dayjs from 'dayjs';
+
+describe('Testing the Organization Card', () => {
+  test('Should render props and text elements For event card', () => {
+    const props: InterfaceCardItem = {
+      type: 'Event',
+      title: 'Event Title',
+      startdate: '2023-09-13',
+      enddate: '2023-09-14',
+      location: 'Event Location',
+    };
+
+    render(<CardItem {...props} />);
+
+    expect(screen.getByText(/Event Title/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        `${dayjs(props.startdate).format('MMM D, YYYY')} - ${dayjs(
+          props.enddate,
+        ).format('MMM D, YYYY')}`,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Event Location/i)).toBeInTheDocument();
+  });
+
+  test('Should render props and text elements for Post card', () => {
+    const props: InterfaceCardItem = {
+      type: 'Post',
+      title: 'Post Title',
+      time: '2023-09-03',
+      creator: {
+        email: 'johndoe@example.com',
+        firstName: 'John',
+        lastName: 'Doe',
+        __typename: 'User',
+        _id: '1',
+      },
+    };
+
+    render(<CardItem {...props} />);
+
+    expect(screen.getByText(/Post Title/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(dayjs(props.time).format('MMM D, YYYY')),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
+  });
+
+  test('Should render props and text elements for Membership Request card', () => {
+    const props: InterfaceCardItem = {
+      type: 'MembershipRequest',
+      title: 'Membership Request Title',
+    };
+
+    render(<CardItem {...props} />);
+    expect(screen.getByText(/Membership Request Title/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx
new file mode 100644
index 0000000000..a7cfaa0f57
--- /dev/null
+++ b/src/components/OrganizationDashCards/CardItem.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import EventsIcon from 'assets/svgs/cardItemEvent.svg?react';
+import PostsIcon from 'assets/svgs/post.svg?react';
+import MarkerIcon from 'assets/svgs/cardItemLocation.svg?react';
+import DateIcon from 'assets/svgs/cardItemDate.svg?react';
+import UserIcon from 'assets/svgs/user.svg?react';
+import dayjs from 'dayjs';
+import styles from './CardItem.module.css';
+import { PersonAddAlt1Rounded } from '@mui/icons-material';
+
+/**
+ * Interface for the CardItem component's props.
+ */
+export interface InterfaceCardItem {
+  type: 'Event' | 'Post' | 'MembershipRequest';
+  title: string;
+  time?: string;
+  startdate?: string;
+  enddate?: string;
+  creator?: any;
+  location?: string;
+}
+
+/**
+ * Component to display a card item with various types such as Event, Post, or MembershipRequest.
+ *
+ * @param props - Props for the CardItem component.
+ * @returns JSX element representing the card item.
+ */
+const cardItem = (props: InterfaceCardItem): JSX.Element => {
+  const { creator, type, title, startdate, time, enddate, location } = props;
+  return (
+    <>
+      <div
+        className={`${styles.cardItem} border-bottom py-3 pe-5 ps-4`}
+        data-testid="cardItem"
+      >
+        <div className={`${styles.iconWrapper} me-3`}>
+          <div className={styles.themeOverlay} />
+          {type == 'Event' ? (
+            <EventsIcon fill="var(--bs-primary)" width={20} height={20} />
+          ) : type == 'Post' ? (
+            <PostsIcon fill="var(--bs-primary)" width={20} height={20} />
+          ) : (
+            type == 'MembershipRequest' && (
+              <PersonAddAlt1Rounded
+                style={{ color: 'var(--bs-primary)' }}
+                width={16}
+                height={16}
+              />
+            )
+          )}
+        </div>
+
+        <div className={styles.rightCard}>
+          {creator && (
+            <small className={styles.creator}>
+              <UserIcon
+                title="Post Creator"
+                fill="var(--bs-primary)"
+                width={20}
+                height={20}
+              />{' '}
+              {'  '}
+              <a>
+                {creator.firstName} {creator.lastName}
+              </a>
+            </small>
+          )}
+
+          {title && (
+            <span
+              className={`${styles.title} fst-normal fw-semibold --bs-black`}
+            >
+              {title}
+            </span>
+          )}
+
+          {location && (
+            <span className={`${styles.location} fst-normal fw-semibold`}>
+              <MarkerIcon
+                title="Event Location"
+                stroke="var(--bs-primary)"
+                width={22}
+                height={22}
+              />{' '}
+              {location}
+            </span>
+          )}
+          {type == 'Event' && startdate && (
+            <span className={`${styles.time} fst-normal fw-semibold`}>
+              {type === 'Event' && (
+                <DateIcon
+                  title="Event Date"
+                  fill="var(--bs-gray-600)"
+                  width={20}
+                  height={20}
+                />
+              )}{' '}
+              {dayjs(startdate).format('MMM D, YYYY')} -{' '}
+              {dayjs(enddate).format('MMM D, YYYY')}
+            </span>
+          )}
+          {type == 'Post' && time && (
+            <span className={`${styles.time} fst-normal fw-semibold`}>
+              {type === 'Post' && (
+                <DateIcon
+                  title="Event Date"
+                  fill="var(--bs-gray-600)"
+                  width={20}
+                  height={20}
+                />
+              )}{' '}
+              {dayjs(time).format('MMM D, YYYY')}
+            </span>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default cardItem;
diff --git a/src/components/OrganizationDashCards/CardItemLoading.tsx b/src/components/OrganizationDashCards/CardItemLoading.tsx
new file mode 100644
index 0000000000..c7c666afb6
--- /dev/null
+++ b/src/components/OrganizationDashCards/CardItemLoading.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './CardItem.module.css';
+
+/**
+ * CardItemLoading component is a loading state for the card item. It is used when the data is being fetched.
+ * @returns JSX.Element
+ */
+const cardItemLoading = (): JSX.Element => {
+  return (
+    <>
+      <div
+        className={`${styles.cardItem} border-bottom`}
+        data-testid="cardItemLoading"
+      >
+        <div className={`${styles.iconWrapper} me-3`}>
+          <div className={styles.themeOverlay} />
+        </div>
+        <span
+          className={`${styles.title} shimmer rounded`}
+          style={{
+            height: '1.5rem',
+          }}
+        >
+          &nbsp;
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default cardItemLoading;
diff --git a/src/components/OrganizationDashCards/DashboardCard.test.tsx b/src/components/OrganizationDashCards/DashboardCard.test.tsx
new file mode 100644
index 0000000000..71e5e1fed0
--- /dev/null
+++ b/src/components/OrganizationDashCards/DashboardCard.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DashboardCard from './DashboardCard';
+
+describe('Testing the Dashboard Card', () => {
+  test('should render props and text elements For event card', () => {
+    const props = {
+      icon: <i className="fa fa-user" />,
+      title: 'Example Title',
+      count: 100,
+    };
+
+    render(<DashboardCard {...props} />);
+
+    expect(screen.getByText(/Example Title/i)).toBeInTheDocument();
+    expect(screen.getByText(/100/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrganizationDashCards/DashboardCard.tsx b/src/components/OrganizationDashCards/DashboardCard.tsx
new file mode 100644
index 0000000000..4a29eafc57
--- /dev/null
+++ b/src/components/OrganizationDashCards/DashboardCard.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Card, Row } from 'react-bootstrap';
+import Col from 'react-bootstrap/Col';
+import styles from './Dashboardcard.module.css';
+
+/** Dashboard card component is used to display the card with icon, title and count.
+ * @param  icon - Icon for the card
+ * @param  title - Title for the card
+ * @param  count - Count for the card
+ * @returns  Dashboard card component
+ *
+ */
+const dashBoardCard = (props: {
+  icon: React.ReactNode;
+  title: string;
+  count?: number;
+}): JSX.Element => {
+  const { icon, count, title } = props;
+  return (
+    <Card className="rounded-4" border="0">
+      <Card.Body className={styles.cardBody}>
+        <Row className="align-items-center">
+          <Col sm={4}>
+            <div className={styles.iconWrapper}>
+              <div className={styles.themeOverlay} />
+              {icon}
+            </div>
+          </Col>
+          <Col sm={8} className={styles.textWrapper}>
+            <span className={styles.primaryText}>{count ?? 0}</span>
+            <span className={styles.secondaryText}>{title}</span>
+          </Col>
+        </Row>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default dashBoardCard;
diff --git a/src/components/OrganizationDashCards/DashboardCardLoading.tsx b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
new file mode 100644
index 0000000000..b37c1e2065
--- /dev/null
+++ b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Card, Row } from 'react-bootstrap';
+import Col from 'react-bootstrap/Col';
+import styles from './Dashboardcard.module.css';
+
+/**
+ * Dashboard card loading component is a loading state for the dashboard card. It is used when the data is being fetched.
+ * @returns JSX.Element
+ */
+const dashBoardCardLoading = (): JSX.Element => {
+  return (
+    <Card className="rounded-4" border="0">
+      <Card.Body className={styles.cardBody}>
+        <Row className="align-items-center">
+          <Col sm={4}>
+            <div className={styles.iconWrapper}>
+              <div className={styles.themeOverlay} />
+            </div>
+          </Col>
+          <Col sm={8} className={styles.textWrapper}>
+            <span
+              className={`${styles.primaryText} shimmer rounded w-75 mb-2`}
+              style={{
+                height: '1.75rem',
+              }}
+            />
+            <span
+              className={`${styles.secondaryText} shimmer rounded`}
+              style={{
+                height: '1.25rem',
+              }}
+            />
+          </Col>
+        </Row>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default dashBoardCardLoading;
diff --git a/src/components/OrganizationDashCards/Dashboardcard.module.css b/src/components/OrganizationDashCards/Dashboardcard.module.css
new file mode 100644
index 0000000000..365657fb4f
--- /dev/null
+++ b/src/components/OrganizationDashCards/Dashboardcard.module.css
@@ -0,0 +1,60 @@
+.cardBody {
+  padding: 1.25rem 1.5rem;
+}
+
+.cardBody .iconWrapper {
+  position: relative;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cardBody .iconWrapper .themeOverlay {
+  background: var(--bs-primary);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.12;
+  border-radius: 50%;
+}
+
+.cardBody .textWrapper .primaryText {
+  font-size: 24px;
+  font-weight: bold;
+  display: block;
+}
+
+.cardBody .textWrapper .secondaryText {
+  font-size: 14px;
+  display: block;
+  color: var(--bs-secondary);
+}
+
+@media (max-width: 600px) {
+  .cardBody {
+    min-height: 120px;
+  }
+
+  .cardBody .iconWrapper {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+  }
+
+  .cardBody .textWrapper {
+    margin-top: calc(0.5rem + 36px);
+    text-align: right;
+  }
+
+  .cardBody .textWrapper .primaryText {
+    font-size: 1.5rem;
+  }
+
+  .cardBody .textWrapper .secondaryText {
+    font-size: 1rem;
+  }
+}
diff --git a/src/components/OrganizationScreen/OrganizationScreen.module.css b/src/components/OrganizationScreen/OrganizationScreen.module.css
new file mode 100644
index 0000000000..9b8190a3ad
--- /dev/null
+++ b/src/components/OrganizationScreen/OrganizationScreen.module.css
@@ -0,0 +1,178 @@
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.5s ease-in-out;
+}
+.avatarStyle {
+  border-radius: 100%;
+}
+.profileContainer {
+  border: none;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  align-items: center;
+  background-color: white !important;
+  box-shadow:
+    0 4px 4px 0 rgba(177, 177, 177, 0.2),
+    0 6px 20px 0 rgba(151, 151, 151, 0.19);
+}
+.profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+.imageContainer {
+  width: 56px;
+}
+.profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.angleDown {
+  margin-left: 4px;
+}
+.profileContainer .profileText .primaryText {
+  font-size: 1rem;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+.profileDropdown {
+  background-color: transparent !important;
+}
+.profileDropdown .dropdown-toggle .btn .btn-normal {
+  display: none !important;
+  background-color: transparent !important;
+}
+.dropdownToggle {
+  background-image: url(/public/images/svg/angleDown.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: azure;
+}
+
+.dropdownToggle::after {
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+.opendrawer:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+.collapseSidebarButton:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(276px + 2rem + 1.5rem);
+  }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+@media (max-height: 900px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(300px + 2rem);
+  }
+  .collapseSidebarButton {
+    height: 30px;
+    width: calc(300px + 1rem);
+  }
+}
+@media (max-height: 650px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(270px);
+  }
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .pageContainer {
+    padding-left: 2.5rem;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/src/components/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
new file mode 100644
index 0000000000..cd039cc3ca
--- /dev/null
+++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import 'jest-location-mock';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import OrganizationScreen from './OrganizationScreen';
+import { ORGANIZATION_EVENT_LIST } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import styles from './OrganizationScreen.module.css';
+
+const mockID: string | undefined = '123';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockID }),
+  useMatch: () => ({ params: { eventId: 'event123', orgId: '123' } }),
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_EVENT_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        eventsByOrganization: [
+          {
+            _id: 'event123',
+            title: 'Test Event Title',
+            description: 'Test Description',
+            startDate: '2024-01-01',
+            endDate: '2024-01-02',
+            location: 'Test Location',
+            startTime: '09:00',
+            endTime: '17:00',
+            allDay: false,
+            recurring: false,
+            isPublic: true,
+            isRegisterable: true,
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+describe('Testing OrganizationScreen', () => {
+  const renderComponent = (): void => {
+    render(
+      <MockedProvider addTypename={false} link={link} mocks={MOCKS}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  };
+
+  test('renders correctly with event title', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      const mainPage = screen.getByTestId('mainpageright');
+      expect(mainPage).toBeInTheDocument();
+    });
+  });
+
+  test('handles drawer toggle correctly', () => {
+    renderComponent();
+
+    const closeButton = screen.getByTestId('closeMenu');
+    fireEvent.click(closeButton);
+
+    // Check for contract class after closing
+    expect(screen.getByTestId('mainpageright')).toHaveClass('_expand_ccl5z_8');
+
+    const openButton = screen.getByTestId('openMenu');
+    fireEvent.click(openButton);
+
+    // Check for expand class after opening
+    expect(screen.getByTestId('mainpageright')).toHaveClass(
+      '_contract_ccl5z_61',
+    );
+  });
+
+  test('handles window resize', () => {
+    renderComponent();
+
+    window.innerWidth = 800;
+    fireEvent(window, new Event('resize'));
+
+    expect(screen.getByTestId('mainpageright')).toHaveClass(styles.expand);
+  });
+});
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
new file mode 100644
index 0000000000..85fb6ee181
--- /dev/null
+++ b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -0,0 +1,189 @@
+import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import {
+  Navigate,
+  Outlet,
+  useLocation,
+  useParams,
+  useMatch,
+} from 'react-router-dom';
+import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
+import type { RootState } from 'state/reducers';
+import type { TargetsType } from 'state/reducers/routesReducer';
+import styles from './OrganizationScreen.module.css';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+import { Button } from 'react-bootstrap';
+import type { InterfaceMapType } from 'utils/interfaces';
+import { useQuery } from '@apollo/client';
+import { ORGANIZATION_EVENT_LIST } from 'GraphQl/Queries/Queries';
+interface InterfaceEvent {
+  _id: string;
+  title: string;
+}
+
+/**
+ * Component for the organization screen
+ *
+ * This component displays the organization screen and handles the layout
+ * including a side drawer, header, and main content area. It adjusts
+ * the layout based on the screen size and shows the appropriate content
+ * based on the route.
+ *
+ * @returns JSX.Element representing the organization screen
+ */
+const OrganizationScreen = (): JSX.Element => {
+  // Get the current location to determine the translation key
+  const location = useLocation();
+  const titleKey: string | undefined = map[location.pathname.split('/')[1]];
+  const { t } = useTranslation('translation', { keyPrefix: titleKey });
+
+  // State to manage visibility of the side drawer
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+
+  // Get the organization ID from the URL parameters
+  const { orgId } = useParams();
+  const [eventName, setEventName] = useState<string | null>(null);
+
+  const isEventPath = useMatch('/event/:orgId/:eventId');
+
+  // If no organization ID is found, navigate back to the home page
+  if (!orgId) {
+    /*istanbul ignore next*/
+    return <Navigate to={'/'} replace />;
+  }
+
+  // Get the application routes from the Redux store
+  const appRoutes: {
+    targets: TargetsType[];
+  } = useSelector((state: RootState) => state.appRoutes);
+  const { targets } = appRoutes;
+
+  const dispatch = useAppDispatch();
+
+  // Update targets whenever the organization ID changes
+  useEffect(() => {
+    dispatch(updateTargets(orgId));
+  }, [orgId]);
+
+  const { data: eventsData } = useQuery(ORGANIZATION_EVENT_LIST, {
+    variables: { id: orgId },
+  });
+
+  useEffect(() => {
+    if (isEventPath?.params.eventId && eventsData?.eventsByOrganization) {
+      const eventId = isEventPath.params.eventId;
+      const event = eventsData.eventsByOrganization.find(
+        (e: InterfaceEvent) => e._id === eventId,
+      );
+      /*istanbul ignore next*/
+      if (!event) {
+        console.warn(`Event with id ${eventId} not found`);
+        setEventName(null);
+        return;
+      }
+      setEventName(event.title);
+    } else {
+      setEventName(null);
+    }
+  }, [isEventPath, eventsData]);
+
+  // Handle screen resizing to show/hide the side drawer
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
+  };
+
+  // Set up event listener for window resize
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="closeMenu"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <div className={styles.drawer}>
+        <LeftDrawerOrg
+          orgId={orgId}
+          targets={targets}
+          hideDrawer={hideDrawer}
+          setHideDrawer={setHideDrawer}
+        />
+      </div>
+      <div
+        className={`${styles.pageContainer} ${
+          hideDrawer === null
+            ? ''
+            : hideDrawer
+              ? styles.expand
+              : styles.contract
+        } `}
+        data-testid="mainpageright"
+      >
+        <div className="d-flex justify-content-between align-items-center">
+          <div style={{ flex: 1 }}>
+            <h1>{t('title')}</h1>
+            {eventName && <h4 className="">{eventName}</h4>}
+          </div>
+          <ProfileDropdown />
+        </div>
+        <Outlet />
+      </div>
+    </>
+  );
+};
+
+export default OrganizationScreen;
+
+/**
+ * Mapping object to get translation keys based on route
+ */
+const map: InterfaceMapType = {
+  orgdash: 'dashboard',
+  orgpeople: 'organizationPeople',
+  orgtags: 'organizationTags',
+  requests: 'requests',
+  orgads: 'advertisement',
+  member: 'memberDetail',
+  orgevents: 'organizationEvents',
+  orgactionitems: 'organizationActionItems',
+  orgagendacategory: 'organizationAgendaCategory',
+  orgcontribution: 'orgContribution',
+  orgpost: 'orgPost',
+  orgfunds: 'funds',
+  orgfundcampaign: 'fundCampaign',
+  fundCampaignPledge: 'pledges',
+  orgsetting: 'orgSettings',
+  orgstore: 'addOnStore',
+  blockuser: 'blockUnblockUser',
+  orgvenues: 'organizationVenues',
+  event: 'eventManagement',
+  leaderboard: 'leaderboard',
+};
diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx
new file mode 100644
index 0000000000..40ac2ed19a
--- /dev/null
+++ b/src/components/Pagination/Pagination.test.tsx
@@ -0,0 +1,64 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Pagination from './Pagination';
+import { store } from 'state/store';
+import userEvent from '@testing-library/user-event';
+
+describe('Testing Pagination component', () => {
+  const props = {
+    count: 5,
+    page: 10,
+    rowsPerPage: 5,
+    onPageChange: (): number => {
+      return 10;
+    },
+  };
+
+  test('Component should be rendered properly on rtl', async () => {
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <Pagination {...props} />
+        </Provider>
+      </BrowserRouter>,
+    );
+    await act(async () => {
+      userEvent.click(screen.getByTestId(/nextPage/i));
+      userEvent.click(screen.getByTestId(/previousPage/i));
+    });
+  });
+});
+
+const props = {
+  count: 5,
+  page: 10,
+  rowsPerPage: 5,
+  onPageChange: (): number => {
+    return 10;
+  },
+  theme: { direction: 'rtl' },
+};
+
+test('Component should be rendered properly', async () => {
+  const theme = createTheme({
+    direction: 'rtl',
+  });
+
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <Pagination {...props} />
+        </ThemeProvider>
+      </Provider>
+    </BrowserRouter>,
+  );
+
+  await act(async () => {
+    userEvent.click(screen.getByTestId(/nextPage/i));
+    userEvent.click(screen.getByTestId(/previousPage/i));
+  });
+});
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..637492a289
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+
+interface InterfaceTablePaginationActionsProps {
+  count: number; // Total number of items
+  page: number; // Current page index
+  rowsPerPage: number; // Number of items per page
+  onPageChange: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    newPage: number, // New page index to navigate to
+  ) => void; // Callback function for page changes
+}
+
+/**
+ * Pagination component for navigating between pages in a table.
+ *
+ * This component provides buttons to navigate to the first page, previous page,
+ * next page, and last page of a table. The visibility and functionality of the
+ * buttons are controlled based on the current page and the total number of items.
+ *
+ * @param  props - Component properties.
+ * @returns The rendered component.
+ */
+function pagination(props: InterfaceTablePaginationActionsProps): JSX.Element {
+  const theme = useTheme();
+  const { count, page, rowsPerPage, onPageChange } = props;
+
+  /**
+   * Handles the event when the "First Page" button is clicked.
+   * Navigates to the first page (page 0).
+   *
+   * @param event - The click event.
+   */
+  /* istanbul ignore next */
+  const handleFirstPageButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ): void => {
+    onPageChange(event, 0);
+  };
+
+  /**
+   * Handles the event when the "Previous Page" button is clicked.
+   * Navigates to the previous page.
+   *
+   * @param event - The click event.
+   */
+  const handleBackButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ): void => {
+    onPageChange(event, page - 1);
+  };
+
+  /**
+   * Handles the event when the "Next Page" button is clicked.
+   * Navigates to the next page.
+   *
+   * @param event - The click event.
+   */
+
+  /* istanbul ignore next */
+  const handleNextButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ): void => {
+    onPageChange(event, page + 1);
+  };
+
+  /**
+   * Handles the event when the "Last Page" button is clicked.
+   * Navigates to the last page.
+   *
+   * @param event - The click event.
+   */
+  /* istanbul ignore next */
+  const handleLastPageButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ): void => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+        data-testid="firstPage"
+      >
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+        data-testid="previousPage"
+      >
+        {theme.direction === 'rtl' ? (
+          <KeyboardArrowRight />
+        ) : (
+          <KeyboardArrowLeft />
+        )}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+        data-testid="nextPage"
+      >
+        {theme.direction === 'rtl' ? (
+          <KeyboardArrowLeft />
+        ) : (
+          <KeyboardArrowRight />
+        )}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+        data-testid="lastPage"
+      >
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </Box>
+  );
+}
+
+export default pagination;
diff --git a/src/components/PaginationList/PaginationList.css b/src/components/PaginationList/PaginationList.css
new file mode 100644
index 0000000000..2354c9a5f9
--- /dev/null
+++ b/src/components/PaginationList/PaginationList.css
@@ -0,0 +1,7 @@
+.MuiTablePagination-selectLabel {
+  margin-top: 1rem;
+}
+
+.MuiTablePagination-displayedRows {
+  margin-top: 1rem;
+}
diff --git a/src/components/PaginationList/PaginationList.tsx b/src/components/PaginationList/PaginationList.tsx
new file mode 100644
index 0000000000..430e8ba1aa
--- /dev/null
+++ b/src/components/PaginationList/PaginationList.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Hidden, TablePagination } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import Pagination from '../Pagination/Pagination';
+import './PaginationList.css';
+
+interface InterfacePropsInterface {
+  count: number;
+  rowsPerPage: number;
+  page: number;
+  onPageChange: (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number,
+  ) => void;
+  onRowsPerPageChange: (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+}
+/**
+ * A component that provides pagination controls for a table.
+ * It uses different pagination styles based on screen size.
+ *
+ * @param count - The total number of rows in the table.
+ * @param rowsPerPage - The number of rows displayed per page.
+ * @param page - The current page number.
+ * @param onPageChange - Callback function to handle page changes.
+ * @param onRowsPerPageChange - Callback function to handle changes in rows per page.
+ */
+
+const PaginationList = ({
+  count,
+  rowsPerPage,
+  page,
+  onPageChange,
+  onRowsPerPageChange,
+}: InterfacePropsInterface): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'paginationList',
+  });
+
+  return (
+    <>
+      <Hidden smUp>
+        <TablePagination
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          rowsPerPageOptions={[]}
+          colSpan={5}
+          count={count}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          SelectProps={{
+            inputProps: {
+              'aria-label': 'rows per page',
+            },
+            native: true,
+          }}
+          onPageChange={onPageChange}
+          onRowsPerPageChange={onRowsPerPageChange}
+          ActionsComponent={Pagination}
+        />
+      </Hidden>
+      <Hidden smDown initialWidth={'lg'}>
+        <TablePagination
+          rowsPerPageOptions={[
+            5,
+            10,
+            30,
+            { label: t('all'), value: Number.MAX_SAFE_INTEGER },
+          ]}
+          data-testid={'table-pagination'}
+          colSpan={4}
+          count={count}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          SelectProps={{
+            inputProps: {
+              'aria-label': 'rows per page',
+            },
+            native: true,
+          }}
+          onPageChange={onPageChange}
+          onRowsPerPageChange={onRowsPerPageChange}
+          ActionsComponent={Pagination}
+          labelRowsPerPage={t('rowsPerPage')}
+        />
+      </Hidden>
+    </>
+  );
+};
+
+export default PaginationList;
diff --git a/src/components/ProfileDropdown/ProfileDropdown.module.css b/src/components/ProfileDropdown/ProfileDropdown.module.css
new file mode 100644
index 0000000000..46af582126
--- /dev/null
+++ b/src/components/ProfileDropdown/ProfileDropdown.module.css
@@ -0,0 +1,75 @@
+.profileContainer {
+  border: none;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  align-items: center;
+  background-color: white !important;
+  box-shadow:
+    0 4px 4px 0 rgba(177, 177, 177, 0.2),
+    0 6px 44px 0 rgba(246, 246, 246, 0.19);
+}
+.profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+.imageContainer {
+  width: 56px;
+  height: 56px;
+  border-radius: 100%;
+  margin-right: 10px;
+}
+.imageContainer img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 100%;
+}
+.profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.angleDown {
+  margin-left: 4px;
+}
+.profileContainer .profileText .primaryText {
+  font-size: 1rem;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+.profileDropdown {
+  background-color: transparent !important;
+}
+.profileDropdown .dropdown-toggle .btn .btn-normal {
+  display: none !important;
+  background-color: transparent !important;
+}
+.dropdownToggle {
+  background-image: url(/public/images/svg/angleDown.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: azure;
+}
+
+.dropdownToggle::after {
+  border-top: none !important;
+  border-bottom: none !important;
+}
+.avatarStyle {
+  border-radius: 100%;
+}
diff --git a/src/components/ProfileDropdown/ProfileDropdown.test.tsx b/src/components/ProfileDropdown/ProfileDropdown.test.tsx
new file mode 100644
index 0000000000..785f33ee92
--- /dev/null
+++ b/src/components/ProfileDropdown/ProfileDropdown.test.tsx
@@ -0,0 +1,148 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import ProfileDropdown from './ProfileDropdown';
+import 'jest-localstorage-mock';
+import { MockedProvider } from '@apollo/react-testing';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from 'utils/useLocalstorage';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+
+const { setItem } = useLocalStorage();
+const MOCKS = [
+  {
+    request: {
+      query: REVOKE_REFRESH_TOKEN,
+    },
+    result: {
+      data: {
+        revokeRefreshTokenForUser: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          timeout: 30,
+        },
+      },
+    },
+    delay: 1000,
+  },
+];
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+  clear: jest.fn(),
+}));
+
+beforeEach(() => {
+  setItem('FirstName', 'John');
+  setItem('LastName', 'Doe');
+  setItem(
+    'UserImage',
+    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+  );
+  setItem('SuperAdmin', false);
+  setItem('AdminFor', []);
+  setItem('id', '123');
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  localStorage.clear();
+});
+afterEach(() => {
+  jest.clearAllMocks();
+  localStorage.clear();
+});
+
+describe('ProfileDropdown Component', () => {
+  test('renders with user information', () => {
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <ProfileDropdown />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByTestId('display-name')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('User')).toBeInTheDocument();
+    expect(screen.getByTestId('display-type')).toBeInTheDocument();
+    expect(screen.getByAltText('profile picture')).toBeInTheDocument();
+  });
+
+  test('renders Super admin', () => {
+    setItem('SuperAdmin', true);
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false}>
+        <BrowserRouter>
+          <ProfileDropdown />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(screen.getByText('SuperAdmin')).toBeInTheDocument();
+  });
+  test('renders Admin', () => {
+    setItem('AdminFor', ['123']);
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false}>
+        <BrowserRouter>
+          <ProfileDropdown />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  test('logout functionality clears local storage and redirects to home', async () => {
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false}>
+        <BrowserRouter>
+          <ProfileDropdown />
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await act(async () => {
+      userEvent.click(screen.getByTestId('togDrop'));
+    });
+
+    userEvent.click(screen.getByTestId('logoutBtn'));
+
+    expect(global.window.location.pathname).toBe('/');
+  });
+
+  describe('Member screen routing testing', () => {
+    test('member screen', async () => {
+      render(
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>
+            <ProfileDropdown />
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+      await act(async () => {
+        userEvent.click(screen.getByTestId('togDrop'));
+      });
+
+      userEvent.click(screen.getByTestId('profileBtn'));
+      expect(global.window.location.pathname).toBe('/user/settings');
+    });
+  });
+});
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx
new file mode 100644
index 0000000000..059e5b910a
--- /dev/null
+++ b/src/components/ProfileDropdown/ProfileDropdown.tsx
@@ -0,0 +1,124 @@
+import Avatar from 'components/Avatar/Avatar';
+import React from 'react';
+import { ButtonGroup, Dropdown } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import useLocalStorage from 'utils/useLocalstorage';
+import styles from './ProfileDropdown.module.css';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { useMutation } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
+import useSession from 'utils/useSession';
+
+/**
+ * Renders a profile dropdown menu for the user.
+ *
+ * This component displays the user's profile picture or an avatar, their name (truncated if necessary),
+ * and their role (SuperAdmin, Admin, or User). It provides options to view the profile or log out.
+ *
+ * - If a user image is available, it displays that; otherwise, it shows an avatar.
+ * - The displayed name is truncated if it exceeds a specified length.
+ * - The logout function revokes the refresh token and clears local storage before redirecting to the home page.
+ *
+ * @returns JSX.Element - The profile dropdown menu.
+ */
+const profileDropdown = (): JSX.Element => {
+  const { endSession } = useSession();
+  const { t: tCommon } = useTranslation('common');
+  const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
+  const { getItem } = useLocalStorage();
+  const superAdmin = getItem('SuperAdmin');
+  const adminFor = getItem('AdminFor');
+  const userRole = superAdmin
+    ? 'SuperAdmin'
+    : adminFor?.length > 0
+      ? 'Admin'
+      : 'User';
+  const firstName = getItem('FirstName');
+  const lastName = getItem('LastName');
+  const userImage = getItem('UserImage');
+  const userID = getItem('id');
+  const navigate = useNavigate();
+
+  const logout = async (): Promise<void> => {
+    try {
+      await revokeRefreshToken();
+    } catch (error) {
+      /*istanbul ignore next*/
+      console.error('Error revoking refresh token:', error);
+    }
+    localStorage.clear();
+    endSession();
+    navigate('/');
+  };
+  const MAX_NAME_LENGTH = 20;
+  const fullName = `${firstName} ${lastName}`;
+  const displayedName =
+    fullName.length > MAX_NAME_LENGTH
+      ? /*istanbul ignore next*/
+        fullName.substring(0, MAX_NAME_LENGTH - 3) + '...'
+      : fullName;
+
+  return (
+    <Dropdown as={ButtonGroup} variant="none">
+      <div className={styles.profileContainer}>
+        <div className={styles.imageContainer}>
+          {userImage && userImage !== 'null' ? (
+            /*istanbul ignore next*/
+            <img
+              src={userImage}
+              alt={`profile picture`}
+              data-testid="display-img"
+            />
+          ) : (
+            <Avatar
+              data-testid="display-img"
+              size={45}
+              avatarStyle={styles.avatarStyle}
+              name={`${firstName} ${lastName}`}
+              alt={`dummy picture`}
+            />
+          )}
+        </div>
+        <div className={styles.profileText}>
+          <span className={styles.primaryText} data-testid="display-name">
+            {displayedName}
+          </span>
+          <span className={styles.secondaryText} data-testid="display-type">
+            {`${userRole}`}
+          </span>
+        </div>
+      </div>
+      <Dropdown.Toggle
+        split
+        variant="none"
+        style={{ backgroundColor: 'white' }}
+        data-testid="togDrop"
+        id="dropdown-split-basic"
+        className={styles.dropdownToggle}
+        aria-label="User Profile Menu"
+      />
+      <Dropdown.Menu>
+        <Dropdown.Item
+          data-testid="profileBtn"
+          onClick={() =>
+            userRole === 'User'
+              ? navigate(`/user/settings`)
+              : navigate(`/member/${userID}`)
+          }
+          aria-label="View Profile"
+        >
+          {tCommon('viewProfile')}
+        </Dropdown.Item>
+        <Dropdown.Item
+          style={{ color: 'red' }}
+          onClick={logout}
+          data-testid="logoutBtn"
+        >
+          {tCommon('logout')}
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default profileDropdown;
diff --git a/src/components/RecurrenceOptions/CustomRecurrence.test.tsx b/src/components/RecurrenceOptions/CustomRecurrence.test.tsx
new file mode 100644
index 0000000000..fc0cacf5c4
--- /dev/null
+++ b/src/components/RecurrenceOptions/CustomRecurrence.test.tsx
@@ -0,0 +1,721 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import OrganizationEvents from '../../screens/OrganizationEvents/OrganizationEvents';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import { createTheme } from '@mui/material';
+import { ThemeProvider } from 'react-bootstrap';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MOCKS } from '../../screens/OrganizationEvents/OrganizationEventsMocks';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#31bb6b',
+    },
+  },
+});
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const translations = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.organizationEvents,
+  ),
+);
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe('Testing the creaction of recurring events with custom recurrence patterns', () => {
+  const formData = {
+    title: 'Dummy Org',
+    description: 'This is a dummy organization',
+    startDate: '03/28/2022',
+    endDate: '03/30/2022',
+    recurrenceEndDate: '04/15/2023',
+    location: 'New Delhi',
+    startTime: '09:00 AM',
+    endTime: '05:00 PM',
+  };
+
+  test('Changing the recurrence frequency', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customDailyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customDailyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Day');
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customWeeklyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customWeeklyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Week');
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customMonthlyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customMonthlyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Month');
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customYearlyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customYearlyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Year');
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('customRecurrenceSubmitBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Selecting and unselecting recurrence weekdays', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceSubmitBtn'),
+      ).toBeInTheDocument();
+    });
+
+    const weekDaysOptions = screen.getAllByTestId('recurrenceWeekDay');
+
+    weekDaysOptions.forEach((weekDay) => {
+      userEvent.click(weekDay);
+    });
+
+    weekDaysOptions.forEach((weekDay) => {
+      userEvent.click(weekDay);
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('customRecurrenceSubmitBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Selecting different monthly recurrence options from the dropdown menu', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    const startDatePicker = screen.getByLabelText('Start Date');
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    const endDatePicker = screen.getByLabelText('End Date');
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customMonthlyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customMonthlyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Month');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('monthlyRecurrenceOptions')).toHaveTextContent(
+        'Monthly on Day 28',
+      );
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOptionOnThatOccurence'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(
+      screen.getByTestId('monthlyRecurrenceOptionOnThatOccurence'),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('monthlyRecurrenceOptions')).toHaveTextContent(
+        'Monthly on Fourth Monday',
+      );
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOptionOnLastOccurence'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(
+      screen.getByTestId('monthlyRecurrenceOptionOnLastOccurence'),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('monthlyRecurrenceOptions')).toHaveTextContent(
+        'Monthly on Last Monday',
+      );
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOptionOnThatDay'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOptionOnThatDay'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('monthlyRecurrenceOptions')).toHaveTextContent(
+        'Monthly on Day 28',
+      );
+    });
+  });
+
+  test('Selecting the "Ends on" option for specifying the end of recurrence', async () => {
+    //  i.e. when would the recurring event end: never, on a certain date, or after a certain number of occurences
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('never')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('never'));
+    userEvent.click(screen.getByTestId('on'));
+    userEvent.click(screen.getByTestId('after'));
+    userEvent.click(screen.getByTestId('never'));
+
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('customRecurrenceSubmitBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Creating a bi monthly recurring event through custom recurrence modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Location/i),
+      formData.location,
+    );
+
+    const startDatePicker = screen.getByLabelText('Start Date');
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    const eventEndDatePicker = screen.getByLabelText('End Date');
+    fireEvent.change(eventEndDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customMonthlyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customMonthlyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Month');
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOptionOnThatOccurence'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(
+      screen.getByTestId('monthlyRecurrenceOptionOnThatOccurence'),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('on')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('on'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('on')).toBeChecked();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByLabelText('End Date')[1]).toBeEnabled();
+    });
+
+    const recurrenceEndDatePicker = screen.getAllByLabelText('End Date')[1];
+    fireEvent.change(recurrenceEndDatePicker, {
+      target: { value: formData.recurrenceEndDate },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceIntervalInput'),
+      ).toBeInTheDocument();
+    });
+
+    const recurrenceCount = screen.getByTestId('customRecurrenceIntervalInput');
+    fireEvent.change(recurrenceCount, {
+      target: { value: 2 },
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('customRecurrenceSubmitBtn'),
+      ).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('recurrenceOptions')).toHaveTextContent(
+      'Every 2 months on Fourth Monday, until April...',
+      // "..." because of the overlay component that would trim the recurrence rule text at 45 characters
+    );
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventCreated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Creating a daily recurring event with a certain number of occurences', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Location/i),
+      formData.location,
+    );
+
+    const startDatePicker = screen.getByLabelText('Start Date');
+    const endDatePicker = screen.getByLabelText('End Date');
+
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    userEvent.click(screen.getByTestId('customRecurrenceFrequencyDropdown'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customDailyRecurrence')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('customDailyRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceFrequencyDropdown'),
+      ).toHaveTextContent('Day');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('after')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('after'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('after')).toBeChecked();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceCountInput'),
+      ).toBeInTheDocument();
+    });
+
+    const recurrenceCount = screen.getByTestId('customRecurrenceCountInput');
+    fireEvent.change(recurrenceCount, {
+      target: { value: 100 },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrenceCountInput')).toHaveValue(100);
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceSubmitBtn'));
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('customRecurrenceSubmitBtn'),
+      ).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId('recurrenceOptions')).toHaveTextContent(
+      'Daily, 100 times',
+    );
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventCreated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/RecurrenceOptions/CustomRecurrenceModal.module.css b/src/components/RecurrenceOptions/CustomRecurrenceModal.module.css
new file mode 100644
index 0000000000..5fe5d33c47
--- /dev/null
+++ b/src/components/RecurrenceOptions/CustomRecurrenceModal.module.css
@@ -0,0 +1,59 @@
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 65%;
+}
+
+.recurrenceRuleNumberInput {
+  width: 70px;
+}
+
+.recurrenceRuleDateBox {
+  width: 70%;
+}
+
+.recurrenceDayButton {
+  width: 33px;
+  height: 33px;
+  border: 1px solid var(--bs-gray);
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+}
+
+.recurrenceDayButton:hover {
+  background-color: var(--bs-gray);
+}
+
+.recurrenceDayButton.selected {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+  color: var(--bs-white);
+}
+
+.recurrenceDayButton span {
+  color: var(--bs-gray);
+  padding: 0.25rem;
+  text-align: center;
+}
+
+.recurrenceDayButton:hover span {
+  color: var(--bs-white);
+}
+
+.recurrenceDayButton.selected span {
+  color: var(--bs-white);
+}
+
+.recurrenceRuleSubmitBtn {
+  margin-left: 82%;
+  padding: 7px 15px;
+}
diff --git a/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx b/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx
new file mode 100644
index 0000000000..deb1a03dab
--- /dev/null
+++ b/src/components/RecurrenceOptions/CustomRecurrenceModal.tsx
@@ -0,0 +1,430 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Dropdown, Form, FormControl, Modal } from 'react-bootstrap';
+import styles from './CustomRecurrenceModal.module.css';
+import { DatePicker } from '@mui/x-date-pickers';
+import {
+  Days,
+  Frequency,
+  daysOptions,
+  endsAfter,
+  endsNever,
+  endsOn,
+  frequencies,
+  getRecurrenceRuleText,
+  getWeekDayOccurenceInMonth,
+  isLastOccurenceOfWeekDay,
+  recurrenceEndOptions,
+} from 'utils/recurrenceUtils';
+import type {
+  InterfaceRecurrenceRuleState,
+  RecurrenceEndOption,
+  WeekDays,
+} from 'utils/recurrenceUtils';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+/**
+ * Props for the CustomRecurrenceModal component.
+ */
+interface InterfaceCustomRecurrenceModalProps {
+  recurrenceRuleState: InterfaceRecurrenceRuleState;
+  recurrenceRuleText: string;
+  setRecurrenceRuleState: (
+    state: React.SetStateAction<InterfaceRecurrenceRuleState>,
+  ) => void;
+  customRecurrenceModalIsOpen: boolean;
+  hideCustomRecurrenceModal: () => void;
+  setCustomRecurrenceModalIsOpen: (
+    state: React.SetStateAction<boolean>,
+  ) => void;
+  t: (key: string) => string;
+  tCommon: (key: string) => string;
+}
+
+/**
+ * A modal for setting up custom recurrence rules.
+ *
+ * This component allows users to configure how often an event should repeat, and
+ * when it should end. It includes options for daily, weekly, monthly, and yearly
+ * recurrence, as well as specific end options.
+ *
+ * @param props - The props object containing various configurations and state management functions.
+ * @returns The JSX element representing the CustomRecurrenceModal.
+ */
+const CustomRecurrenceModal: React.FC<InterfaceCustomRecurrenceModalProps> = ({
+  recurrenceRuleState,
+  recurrenceRuleText,
+  setRecurrenceRuleState,
+  customRecurrenceModalIsOpen,
+  hideCustomRecurrenceModal,
+  setCustomRecurrenceModalIsOpen,
+  t,
+  tCommon,
+}) => {
+  const {
+    recurrenceStartDate,
+    recurrenceEndDate,
+    frequency,
+    weekDays,
+    interval,
+    count,
+  } = recurrenceRuleState;
+  const [selectedRecurrenceEndOption, setSelectedRecurrenceEndOption] =
+    useState<RecurrenceEndOption>(endsNever);
+
+  useEffect(() => {
+    if (recurrenceEndDate) {
+      setSelectedRecurrenceEndOption(endsOn);
+    } else if (count) {
+      setSelectedRecurrenceEndOption(endsAfter);
+    }
+  }, [recurrenceRuleState]);
+
+  /**
+   * Handles changes to the recurrence end option.
+   *
+   * Updates the recurrence rule state based on the selected option.
+   *
+   * @param e - The event object from the radio button change.
+   */
+  const handleRecurrenceEndOptionChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const selectedRecurrenceEndOption = e.target.value as RecurrenceEndOption;
+    setSelectedRecurrenceEndOption(selectedRecurrenceEndOption);
+    if (selectedRecurrenceEndOption === endsNever) {
+      setRecurrenceRuleState({
+        ...recurrenceRuleState,
+        recurrenceEndDate: null,
+        count: undefined,
+      });
+    }
+    if (selectedRecurrenceEndOption === endsOn) {
+      setRecurrenceRuleState({
+        ...recurrenceRuleState,
+        recurrenceEndDate: dayjs().add(1, 'month').toDate(),
+        count: undefined,
+      });
+    }
+    if (selectedRecurrenceEndOption === endsAfter) {
+      setRecurrenceRuleState({
+        ...recurrenceRuleState,
+        recurrenceEndDate: null,
+        count: 10,
+      });
+    }
+  };
+
+  /**
+   * Handles clicks on day buttons for weekly recurrence.
+   *
+   * Toggles the selected state of a day button in the weekly recurrence setup.
+   *
+   * @param day - The day of the week to toggle.
+   */
+  const handleDayClick = (day: WeekDays): void => {
+    if (weekDays !== undefined && weekDays.includes(day)) {
+      setRecurrenceRuleState({
+        ...recurrenceRuleState,
+        weekDays: weekDays.filter((d) => d !== day),
+        weekDayOccurenceInMonth: undefined,
+      });
+    } else {
+      setRecurrenceRuleState({
+        ...recurrenceRuleState,
+        weekDays: [...(weekDays ?? []), day],
+        weekDayOccurenceInMonth: undefined,
+      });
+    }
+  };
+
+  /**
+   * Toggles the visibility of the custom recurrence modal.
+   */
+  const handleCustomRecurrenceSubmit = (): void => {
+    setCustomRecurrenceModalIsOpen(!customRecurrenceModalIsOpen);
+  };
+
+  return (
+    <>
+      <Modal
+        show={customRecurrenceModalIsOpen}
+        onHide={hideCustomRecurrenceModal}
+        centered
+      >
+        <Modal.Header>
+          <p className={styles.titlemodal}>{t('customRecurrence')}</p>
+          <Button
+            variant="danger"
+            onClick={hideCustomRecurrenceModal}
+            data-testid="customRecurrenceModalCloseBtn"
+          >
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body className="pb-2">
+          <div className="mb-4">
+            <span className="fw-semibold text-secondary">
+              {t('repeatsEvery')}
+            </span>{' '}
+            <FormControl
+              type="number"
+              value={interval}
+              min={1}
+              className={`${styles.recurrenceRuleNumberInput} ms-2 d-inline-block py-2`}
+              data-testid="customRecurrenceIntervalInput"
+              onChange={(e) =>
+                setRecurrenceRuleState({
+                  ...recurrenceRuleState,
+                  interval: Number(e.target.value),
+                })
+              }
+            />
+            <Dropdown className="ms-3 d-inline-block">
+              <Dropdown.Toggle
+                className="py-2"
+                variant="outline-secondary"
+                id="dropdown-basic"
+                data-testid="customRecurrenceFrequencyDropdown"
+              >
+                {`${frequencies[frequency]}${interval && interval > 1 ? 's' : ''}`}
+              </Dropdown.Toggle>
+
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() =>
+                    setRecurrenceRuleState({
+                      ...recurrenceRuleState,
+                      frequency: Frequency.DAILY,
+                      weekDayOccurenceInMonth: undefined,
+                    })
+                  }
+                  data-testid="customDailyRecurrence"
+                >
+                  {interval && interval > 1 ? 'Days' : 'Day'}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() =>
+                    setRecurrenceRuleState({
+                      ...recurrenceRuleState,
+                      frequency: Frequency.WEEKLY,
+                      weekDays: [Days[recurrenceStartDate.getDay()]],
+                      weekDayOccurenceInMonth: undefined,
+                    })
+                  }
+                  data-testid="customWeeklyRecurrence"
+                >
+                  {interval && interval > 1 ? 'Weeks' : 'Week'}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() =>
+                    setRecurrenceRuleState({
+                      ...recurrenceRuleState,
+                      frequency: Frequency.MONTHLY,
+                      weekDayOccurenceInMonth: undefined,
+                    })
+                  }
+                  data-testid="customMonthlyRecurrence"
+                >
+                  {interval && interval > 1 ? 'Months' : 'Month'}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() =>
+                    setRecurrenceRuleState({
+                      ...recurrenceRuleState,
+                      frequency: Frequency.YEARLY,
+                      weekDayOccurenceInMonth: undefined,
+                    })
+                  }
+                  data-testid="customYearlyRecurrence"
+                >
+                  {interval && interval > 1 ? 'Years' : 'Year'}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+
+          {frequency === Frequency.WEEKLY && (
+            <div className="mb-4">
+              <span className="fw-semibold text-secondary">
+                {t('repeatsOn')}
+              </span>
+              <br />
+              <div className="mx-2 mt-3 d-flex gap-1">
+                {daysOptions.map((day, index) => (
+                  <div
+                    key={index}
+                    className={`${styles.recurrenceDayButton} ${weekDays?.includes(Days[index]) ? styles.selected : ''}`}
+                    onClick={() => handleDayClick(Days[index])}
+                    data-testid="recurrenceWeekDay"
+                  >
+                    <span>{day}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {frequency === Frequency.MONTHLY && (
+            <div className="mb-4">
+              <Dropdown drop="down" className="w-100">
+                <Dropdown.Toggle
+                  variant="outline-secondary"
+                  className="py-2 border border-secondary-subtle rounded-2"
+                  id="dropdown-basic"
+                  data-testid="monthlyRecurrenceOptions"
+                >
+                  <span className="fw-semibold">{recurrenceRuleText}</span>
+                </Dropdown.Toggle>
+                <Dropdown.Menu className="mb-2">
+                  <Dropdown.Item
+                    onClick={() =>
+                      setRecurrenceRuleState({
+                        ...recurrenceRuleState,
+                        frequency: Frequency.MONTHLY,
+                        weekDayOccurenceInMonth: undefined,
+                      })
+                    }
+                    data-testid="monthlyRecurrenceOptionOnThatDay"
+                  >
+                    <span className="fw-semibold text-secondary">
+                      {getRecurrenceRuleText({
+                        ...recurrenceRuleState,
+                        frequency: Frequency.MONTHLY,
+                        weekDayOccurenceInMonth: undefined,
+                      })}
+                    </span>
+                  </Dropdown.Item>
+                  {getWeekDayOccurenceInMonth(recurrenceStartDate) !== 5 && (
+                    <Dropdown.Item
+                      onClick={() =>
+                        setRecurrenceRuleState({
+                          ...recurrenceRuleState,
+                          frequency: Frequency.MONTHLY,
+                          weekDays: [Days[recurrenceStartDate.getDay()]],
+                          weekDayOccurenceInMonth:
+                            getWeekDayOccurenceInMonth(recurrenceStartDate),
+                        })
+                      }
+                      data-testid="monthlyRecurrenceOptionOnThatOccurence"
+                    >
+                      <span className="fw-semibold text-secondary">
+                        {getRecurrenceRuleText({
+                          ...recurrenceRuleState,
+                          frequency: Frequency.MONTHLY,
+                          weekDays: [Days[recurrenceStartDate.getDay()]],
+                          weekDayOccurenceInMonth:
+                            getWeekDayOccurenceInMonth(recurrenceStartDate),
+                        })}
+                      </span>
+                    </Dropdown.Item>
+                  )}
+                  {isLastOccurenceOfWeekDay(recurrenceStartDate) && (
+                    <Dropdown.Item
+                      onClick={() =>
+                        setRecurrenceRuleState({
+                          ...recurrenceRuleState,
+                          frequency: Frequency.MONTHLY,
+                          weekDays: [Days[recurrenceStartDate.getDay()]],
+                          weekDayOccurenceInMonth: -1,
+                        })
+                      }
+                      data-testid="monthlyRecurrenceOptionOnLastOccurence"
+                    >
+                      <span className="fw-semibold text-secondary">
+                        {getRecurrenceRuleText({
+                          ...recurrenceRuleState,
+                          frequency: Frequency.MONTHLY,
+                          weekDays: [Days[recurrenceStartDate.getDay()]],
+                          weekDayOccurenceInMonth: -1,
+                        })}
+                      </span>
+                    </Dropdown.Item>
+                  )}
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+          )}
+
+          <div className="mb-3">
+            <span className="fw-semibold text-secondary">{t('ends')}</span>
+            <div className="ms-3 mt-3">
+              <Form>
+                {recurrenceEndOptions.map((option, index) => (
+                  <div key={index} className="my-0 d-flex align-items-center">
+                    <Form.Check
+                      type="radio"
+                      id={`radio-${index}`}
+                      label={t(option)}
+                      name="recurrenceEndOption"
+                      className="d-inline-block me-5"
+                      value={option}
+                      onChange={handleRecurrenceEndOptionChange}
+                      defaultChecked={option === selectedRecurrenceEndOption}
+                      data-testid={`${option}`}
+                    />
+
+                    {option === endsOn && (
+                      <div className="ms-3">
+                        <DatePicker
+                          label={tCommon('endDate')}
+                          className={styles.recurrenceRuleDateBox}
+                          disabled={selectedRecurrenceEndOption !== endsOn}
+                          value={dayjs(
+                            recurrenceEndDate ?? dayjs().add(1, 'month'),
+                          )}
+                          onChange={(date: Dayjs | null): void => {
+                            /* istanbul ignore next */
+                            if (date) {
+                              setRecurrenceRuleState({
+                                ...recurrenceRuleState,
+                                recurrenceEndDate: date?.toDate(),
+                              });
+                            }
+                          }}
+                        />
+                      </div>
+                    )}
+                    {option === endsAfter && (
+                      <>
+                        <FormControl
+                          type="number"
+                          value={count ?? 10}
+                          min={1}
+                          onChange={(e) =>
+                            setRecurrenceRuleState({
+                              ...recurrenceRuleState,
+                              count: Number(e.target.value),
+                            })
+                          }
+                          className={`${styles.recurrenceRuleNumberInput} ms-1 me-2 d-inline-block py-2`}
+                          disabled={selectedRecurrenceEndOption !== endsAfter}
+                          data-testid="customRecurrenceCountInput"
+                        />{' '}
+                        {t('occurences')}
+                      </>
+                    )}
+                  </div>
+                ))}
+              </Form>
+            </div>
+          </div>
+
+          <hr className="mt-4 mb-2 mx-2" />
+
+          <div className="mx w-100 position-relative">
+            <Button
+              className={styles.recurrenceRuleSubmitBtn}
+              data-testid="customRecurrenceSubmitBtn"
+              onClick={handleCustomRecurrenceSubmit}
+            >
+              {tCommon('done')}
+            </Button>
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default CustomRecurrenceModal;
diff --git a/src/components/RecurrenceOptions/RecurrenceOptions.test.tsx b/src/components/RecurrenceOptions/RecurrenceOptions.test.tsx
new file mode 100644
index 0000000000..2d283460da
--- /dev/null
+++ b/src/components/RecurrenceOptions/RecurrenceOptions.test.tsx
@@ -0,0 +1,587 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import OrganizationEvents from '../../screens/OrganizationEvents/OrganizationEvents';
+import { store } from 'state/store';
+import i18n from 'utils/i18nForTest';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import { createTheme } from '@mui/material';
+import { ThemeProvider } from 'react-bootstrap';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MOCKS } from '../../screens/OrganizationEvents/OrganizationEventsMocks';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#31bb6b',
+    },
+  },
+});
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationEvents ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe('Testing the creaction of recurring events through recurrence options', () => {
+  const formData = {
+    title: 'Dummy Org',
+    description: 'This is a dummy organization',
+    startDate: '03/28/2022',
+    endDate: '03/30/2022',
+    location: 'New Delhi',
+    startTime: '09:00 AM',
+    endTime: '05:00 PM',
+  };
+
+  test('Recurrence options Dropdown shows up after checking the Recurring switch', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+  });
+
+  test('Showing different recurrence options through the Dropdown', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+  });
+
+  test('Toggling of custom recurrence modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('customRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrence'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('customRecurrenceModalCloseBtn'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('customRecurrenceModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('customRecurrenceModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Selecting different recurrence options from the dropdown menu', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    const startDatePicker = screen.getByLabelText('Start Date');
+    const endDatePicker = screen.getByLabelText('End Date');
+
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId('recurrenceOptions')).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dailyRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('dailyRecurrence'));
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('weeklyRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('weeklyRecurrence'));
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOnThatDay'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOnThatDay'));
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOnThatOccurence'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOnThatOccurence'));
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('monthlyRecurrenceOnLastOccurence'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('monthlyRecurrenceOnLastOccurence'));
+
+    // changing the startDate would change the weekDayOccurenceInMonth, if it is defined
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('yearlyRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('yearlyRecurrence'));
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('mondayToFridayRecurrence'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('mondayToFridayRecurrence'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toHaveTextContent(
+        'Monday to Friday',
+      );
+    });
+  }, 30000);
+
+  test('Creating a recurring event with the daily recurrence option', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Location/i),
+      formData.location,
+    );
+
+    const startDatePicker = screen.getByLabelText('Start Date');
+    const endDatePicker = screen.getByLabelText('End Date');
+
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('alldayCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(translations.startTime)).toBeInTheDocument();
+    });
+
+    const startTimePicker = screen.getByLabelText(translations.startTime);
+    const endTimePicker = screen.getByLabelText(translations.endTime);
+
+    fireEvent.change(startTimePicker, {
+      target: { value: formData.startTime },
+    });
+
+    fireEvent.change(endTimePicker, {
+      target: { value: formData.endTime },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dailyRecurrence')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('dailyRecurrence'));
+
+    expect(screen.getByPlaceholderText(/Enter Title/i)).toHaveValue(
+      formData.title,
+    );
+    expect(screen.getByPlaceholderText(/Enter Location/i)).toHaveValue(
+      formData.location,
+    );
+    expect(screen.getByPlaceholderText(/Enter Description/i)).toHaveValue(
+      formData.description,
+    );
+    expect(startDatePicker).toHaveValue(formData.startDate);
+    expect(endDatePicker).toHaveValue(formData.endDate);
+    expect(startTimePicker).toHaveValue(formData.startTime);
+    expect(endTimePicker).toHaveValue(formData.endTime);
+    expect(screen.getByTestId('alldayCheck')).not.toBeChecked();
+    expect(screen.getByTestId('recurringCheck')).toBeChecked();
+
+    expect(screen.getByTestId('recurrenceOptions')).toHaveTextContent('Daily');
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventCreated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Creating a recurring event with the monday to friday recurrence option', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Location/i),
+      formData.location,
+    );
+
+    const startDatePicker = screen.getByLabelText('Start Date');
+    const endDatePicker = screen.getByLabelText('End Date');
+
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+
+    userEvent.click(screen.getByTestId('alldayCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(translations.startTime)).toBeInTheDocument();
+    });
+
+    const startTimePicker = screen.getByLabelText(translations.startTime);
+    const endTimePicker = screen.getByLabelText(translations.endTime);
+
+    fireEvent.change(startTimePicker, {
+      target: { value: formData.startTime },
+    });
+
+    fireEvent.change(endTimePicker, {
+      target: { value: formData.endTime },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurringCheck')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurringCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recurrenceOptions')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('recurrenceOptions'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('mondayToFridayRecurrence'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('mondayToFridayRecurrence'));
+
+    expect(screen.getByPlaceholderText(/Enter Title/i)).toHaveValue(
+      formData.title,
+    );
+    expect(screen.getByPlaceholderText(/Enter Location/i)).toHaveValue(
+      formData.location,
+    );
+    expect(screen.getByPlaceholderText(/Enter Description/i)).toHaveValue(
+      formData.description,
+    );
+    expect(startDatePicker).toHaveValue(formData.startDate);
+    expect(endDatePicker).toHaveValue(formData.endDate);
+    expect(startTimePicker).toHaveValue(formData.startTime);
+    expect(endTimePicker).toHaveValue(formData.endTime);
+    expect(screen.getByTestId('alldayCheck')).not.toBeChecked();
+    expect(screen.getByTestId('recurringCheck')).toBeChecked();
+
+    expect(screen.getByTestId('recurrenceOptions')).toHaveTextContent(
+      'Monday to Friday',
+    );
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventCreated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/RecurrenceOptions/RecurrenceOptions.tsx b/src/components/RecurrenceOptions/RecurrenceOptions.tsx
new file mode 100644
index 0000000000..f1772f1b08
--- /dev/null
+++ b/src/components/RecurrenceOptions/RecurrenceOptions.tsx
@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import { Dropdown, OverlayTrigger } from 'react-bootstrap';
+import {
+  Days,
+  Frequency,
+  type InterfaceRecurrenceRuleState,
+  getRecurrenceRuleText,
+  getWeekDayOccurenceInMonth,
+  isLastOccurenceOfWeekDay,
+  mondayToFriday,
+} from 'utils/recurrenceUtils';
+import CustomRecurrenceModal from './CustomRecurrenceModal';
+
+interface InterfaceRecurrenceOptionsProps {
+  recurrenceRuleState: InterfaceRecurrenceRuleState;
+  recurrenceRuleText: string;
+  setRecurrenceRuleState: (
+    state: React.SetStateAction<InterfaceRecurrenceRuleState>,
+  ) => void;
+  popover: JSX.Element;
+  t: (key: string) => string;
+  tCommon: (key: string) => string;
+}
+/**
+ * Renders a dropdown menu for selecting recurrence options.
+ *
+ * This component allows users to choose various recurrence rules (daily, weekly, monthly, yearly) for a given event.
+ * It displays the current recurrence rule text and provides options to modify it, including a custom recurrence modal.
+ *
+ * The dropdown menu includes options for:
+ * - Daily recurrence
+ * - Weekly recurrence (including a specific day of the week or Monday to Friday)
+ * - Monthly recurrence (on a specific day or occurrence)
+ * - Yearly recurrence
+ * - Custom recurrence (opens a modal for advanced settings)
+ *
+ * The displayed recurrence rule text is truncated if it exceeds a specified length, with an overlay showing the full text on hover.
+ *
+ * @param  props - The properties to configure the recurrence options dropdown.
+ * @param  recurrenceRuleState - The current state of the recurrence rule.
+ * @param  recurrenceRuleText - The text describing the current recurrence rule.
+ * @param  setRecurrenceRuleState - A function to update the recurrence rule state.
+ * @param popover - A JSX element used for displaying additional information on hover.
+ * @param  t - A function for translating text.
+ * @param  tCommon - A function for translating common text.
+ *
+ * @returns JSX.Element - The recurrence options dropdown and the custom recurrence modal.
+ */
+const RecurrenceOptions: React.FC<InterfaceRecurrenceOptionsProps> = ({
+  recurrenceRuleState,
+  recurrenceRuleText,
+  setRecurrenceRuleState,
+  popover,
+  t,
+  tCommon,
+}) => {
+  const [customRecurrenceModalIsOpen, setCustomRecurrenceModalIsOpen] =
+    useState<boolean>(false);
+
+  const { recurrenceStartDate } = recurrenceRuleState;
+
+  const hideCustomRecurrenceModal = (): void => {
+    setCustomRecurrenceModalIsOpen(false);
+  };
+
+  return (
+    <>
+      <Dropdown drop="up" className="mt-2 d-inline-block w-100">
+        <Dropdown.Toggle
+          variant="outline-secondary"
+          className="py-2 border border-secondary-subtle rounded-2"
+          id="dropdown-basic"
+          data-testid="recurrenceOptions"
+        >
+          {recurrenceRuleText.length > 45 ? (
+            <OverlayTrigger
+              trigger={['hover', 'focus']}
+              placement="right"
+              overlay={popover}
+            >
+              <span
+                className="fw-semibold"
+                data-testid="recurrenceRuleTextOverlay"
+              >
+                {`${recurrenceRuleText.substring(0, 45)}...`}
+              </span>
+            </OverlayTrigger>
+          ) : (
+            <span className="fw-semibold">{recurrenceRuleText}</span>
+          )}
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu className="mb-2">
+          <Dropdown.Item
+            onClick={() =>
+              setRecurrenceRuleState({
+                ...recurrenceRuleState,
+                frequency: Frequency.DAILY,
+                weekDayOccurenceInMonth: undefined,
+              })
+            }
+            data-testid="dailyRecurrence"
+          >
+            <span className="fw-semibold text-secondary">
+              {getRecurrenceRuleText({
+                ...recurrenceRuleState,
+                frequency: Frequency.DAILY,
+              })}
+            </span>
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() =>
+              setRecurrenceRuleState({
+                ...recurrenceRuleState,
+                frequency: Frequency.WEEKLY,
+                weekDays: [Days[recurrenceStartDate.getDay()]],
+                weekDayOccurenceInMonth: undefined,
+              })
+            }
+            data-testid="weeklyRecurrence"
+          >
+            <span className="fw-semibold text-secondary">
+              {getRecurrenceRuleText({
+                ...recurrenceRuleState,
+                frequency: Frequency.WEEKLY,
+                weekDays: [Days[recurrenceStartDate.getDay()]],
+              })}
+            </span>
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() =>
+              setRecurrenceRuleState({
+                ...recurrenceRuleState,
+                frequency: Frequency.MONTHLY,
+                weekDayOccurenceInMonth: undefined,
+              })
+            }
+            data-testid="monthlyRecurrenceOnThatDay"
+          >
+            <span className="fw-semibold text-secondary">
+              {getRecurrenceRuleText({
+                ...recurrenceRuleState,
+                frequency: Frequency.MONTHLY,
+                weekDayOccurenceInMonth: undefined,
+              })}
+            </span>
+          </Dropdown.Item>
+          {getWeekDayOccurenceInMonth(recurrenceStartDate) !== 5 && (
+            <Dropdown.Item
+              onClick={() =>
+                setRecurrenceRuleState({
+                  ...recurrenceRuleState,
+                  frequency: Frequency.MONTHLY,
+                  weekDays: [Days[recurrenceStartDate.getDay()]],
+                  weekDayOccurenceInMonth:
+                    getWeekDayOccurenceInMonth(recurrenceStartDate),
+                })
+              }
+              data-testid="monthlyRecurrenceOnThatOccurence"
+            >
+              <span className="fw-semibold text-secondary">
+                {getRecurrenceRuleText({
+                  ...recurrenceRuleState,
+                  frequency: Frequency.MONTHLY,
+                  weekDays: [Days[recurrenceStartDate.getDay()]],
+                  weekDayOccurenceInMonth:
+                    getWeekDayOccurenceInMonth(recurrenceStartDate),
+                })}
+              </span>
+            </Dropdown.Item>
+          )}
+          {isLastOccurenceOfWeekDay(recurrenceStartDate) && (
+            <Dropdown.Item
+              onClick={() =>
+                setRecurrenceRuleState({
+                  ...recurrenceRuleState,
+                  frequency: Frequency.MONTHLY,
+                  weekDays: [Days[recurrenceStartDate.getDay()]],
+                  weekDayOccurenceInMonth: -1,
+                })
+              }
+              data-testid="monthlyRecurrenceOnLastOccurence"
+            >
+              <span className="fw-semibold text-secondary">
+                {getRecurrenceRuleText({
+                  ...recurrenceRuleState,
+                  frequency: Frequency.MONTHLY,
+                  weekDays: [Days[recurrenceStartDate.getDay()]],
+                  weekDayOccurenceInMonth: -1,
+                })}
+              </span>
+            </Dropdown.Item>
+          )}
+          <Dropdown.Item
+            onClick={() =>
+              setRecurrenceRuleState({
+                ...recurrenceRuleState,
+                frequency: Frequency.YEARLY,
+                weekDayOccurenceInMonth: undefined,
+              })
+            }
+            data-testid="yearlyRecurrence"
+          >
+            <span className="fw-semibold text-secondary">
+              {getRecurrenceRuleText({
+                ...recurrenceRuleState,
+                frequency: Frequency.YEARLY,
+                weekDayOccurenceInMonth: undefined,
+              })}
+            </span>
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() =>
+              setRecurrenceRuleState({
+                ...recurrenceRuleState,
+                frequency: Frequency.WEEKLY,
+                weekDays: mondayToFriday,
+                weekDayOccurenceInMonth: undefined,
+              })
+            }
+            data-testid="mondayToFridayRecurrence"
+          >
+            <span className="fw-semibold text-secondary">
+              {getRecurrenceRuleText({
+                ...recurrenceRuleState,
+                frequency: Frequency.WEEKLY,
+                weekDays: mondayToFriday,
+              })}
+            </span>
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() => setCustomRecurrenceModalIsOpen(true)}
+            data-testid="customRecurrence"
+          >
+            <span className="fw-semibold text-body-tertiary">Custom...</span>
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      {/* Custom Recurrence Modal */}
+      <CustomRecurrenceModal
+        recurrenceRuleState={recurrenceRuleState}
+        recurrenceRuleText={recurrenceRuleText}
+        setRecurrenceRuleState={setRecurrenceRuleState}
+        customRecurrenceModalIsOpen={customRecurrenceModalIsOpen}
+        hideCustomRecurrenceModal={hideCustomRecurrenceModal}
+        setCustomRecurrenceModalIsOpen={setCustomRecurrenceModalIsOpen}
+        t={t}
+        tCommon={tCommon}
+      />
+    </>
+  );
+};
+
+export default RecurrenceOptions;
diff --git a/src/components/RequestsTableItem/RequestsTableItem.module.css b/src/components/RequestsTableItem/RequestsTableItem.module.css
new file mode 100644
index 0000000000..9f12bfe996
--- /dev/null
+++ b/src/components/RequestsTableItem/RequestsTableItem.module.css
@@ -0,0 +1,66 @@
+.tableItem {
+  width: 100%;
+}
+
+.tableItem td {
+  padding: 0.5rem;
+}
+
+.tableItem .index {
+  padding-left: 2.5rem;
+  padding-top: 1rem;
+}
+
+.tableItem .name {
+  padding-left: 1.5rem;
+  padding-top: 1rem;
+}
+
+.tableItem .email {
+  padding-left: 1.5rem;
+  padding-top: 1rem;
+}
+
+.acceptButton {
+  background: #31bb6b;
+  width: 120px;
+  height: 46px;
+  margin-left: -1rem;
+}
+
+.rejectButton {
+  background: #dc3545;
+  width: 120px;
+  height: 46px;
+  margin-left: -1rem;
+}
+
+@media (max-width: 1020px) {
+  .tableItem .index {
+    padding-left: 2rem;
+  }
+
+  .tableItem .name,
+  .tableItem .email {
+    padding-left: 1rem;
+  }
+
+  .acceptButton,
+  .rejectButton {
+    margin-left: -0.25rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .tableItem .index,
+  .tableItem .name,
+  .tableItem .email {
+    padding-left: 1rem;
+  }
+
+  .acceptButton,
+  .rejectButton {
+    margin-left: 0;
+    width: 100%;
+  }
+}
diff --git a/src/components/RequestsTableItem/RequestsTableItem.test.tsx b/src/components/RequestsTableItem/RequestsTableItem.test.tsx
new file mode 100644
index 0000000000..bbd895300b
--- /dev/null
+++ b/src/components/RequestsTableItem/RequestsTableItem.test.tsx
@@ -0,0 +1,147 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceRequestsListItem } from './RequestsTableItem';
+import { MOCKS } from './RequestsTableItemMocks';
+import RequestsTableItem from './RequestsTableItem';
+import { BrowserRouter } from 'react-router-dom';
+const link = new StaticMockLink(MOCKS, true);
+import useLocalStorage from 'utils/useLocalstorage';
+import userEvent from '@testing-library/user-event';
+
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+const resetAndRefetchMock = jest.fn();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+    warning: jest.fn(),
+  },
+}));
+
+beforeEach(() => {
+  setItem('id', '123');
+});
+
+afterEach(() => {
+  localStorage.clear();
+  jest.clearAllMocks();
+});
+
+describe('Testing User Table Item', () => {
+  console.error = jest.fn((message) => {
+    if (message.includes('validateDOMNesting')) {
+      return;
+    }
+    console.warn(message);
+  });
+  test('Should render props and text elements test for the page component', async () => {
+    const props: {
+      request: InterfaceRequestsListItem;
+      index: number;
+      resetAndRefetch: () => void;
+    } = {
+      request: {
+        _id: '123',
+        user: {
+          firstName: 'John',
+          lastName: 'Doe',
+          email: 'john@example.com',
+        },
+      },
+      index: 1,
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <RequestsTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByText(/2./i)).toBeInTheDocument();
+    expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
+    expect(screen.getByText(/john@example.com/i)).toBeInTheDocument();
+  });
+
+  test('Accept MembershipRequest Button works properly', async () => {
+    const props: {
+      request: InterfaceRequestsListItem;
+      index: number;
+      resetAndRefetch: () => void;
+    } = {
+      request: {
+        _id: '123',
+        user: {
+          firstName: 'John',
+          lastName: 'Doe',
+          email: 'john@example.com',
+        },
+      },
+      index: 1,
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <RequestsTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('acceptMembershipRequestBtn123'));
+  });
+
+  test('Reject MembershipRequest Button works properly', async () => {
+    const props: {
+      request: InterfaceRequestsListItem;
+      index: number;
+      resetAndRefetch: () => void;
+    } = {
+      request: {
+        _id: '123',
+        user: {
+          firstName: 'John',
+          lastName: 'Doe',
+          email: 'john@example.com',
+        },
+      },
+      index: 1,
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <RequestsTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('rejectMembershipRequestBtn123'));
+  });
+});
diff --git a/src/components/RequestsTableItem/RequestsTableItem.tsx b/src/components/RequestsTableItem/RequestsTableItem.tsx
new file mode 100644
index 0000000000..07feb5d289
--- /dev/null
+++ b/src/components/RequestsTableItem/RequestsTableItem.tsx
@@ -0,0 +1,142 @@
+import { useMutation } from '@apollo/client';
+import {
+  ACCEPT_ORGANIZATION_REQUEST_MUTATION,
+  REJECT_ORGANIZATION_REQUEST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import styles from './RequestsTableItem.module.css';
+
+/**
+ * Represents a membership request in the requests table.
+ */
+export interface InterfaceRequestsListItem {
+  _id: string;
+  user: {
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+}
+
+/**
+ * Props for the RequestsTableItem component.
+ *
+ */
+type Props = {
+  request: InterfaceRequestsListItem;
+  index: number;
+  resetAndRefetch: () => void;
+};
+
+/**
+ * Renders a table row item for a membership request.
+ *
+ * This component displays user details and provides buttons to accept or reject
+ * the membership request. It also handles showing success or error messages using
+ * toast notifications.
+ *
+ * @param props - The props object containing request details, index, and state reset function.
+ * @returns The JSX element representing the RequestsTableItem.
+ */
+const RequestsTableItem = (props: Props): JSX.Element => {
+  const { t } = useTranslation('translation', { keyPrefix: 'requests' });
+  const { request, index, resetAndRefetch } = props;
+  const [acceptUser] = useMutation(ACCEPT_ORGANIZATION_REQUEST_MUTATION);
+  const [rejectUser] = useMutation(REJECT_ORGANIZATION_REQUEST_MUTATION);
+
+  /**
+   * Handles the acceptance of a membership request.
+   *
+   * Sends a mutation request to accept the user and shows a success message if successful.
+   * It also triggers a state reset and refetch.
+   *
+   * @param membershipRequestId - The ID of the membership request to accept.
+   */
+  const handleAcceptUser = async (
+    membershipRequestId: string,
+  ): Promise<void> => {
+    try {
+      const { data } = await acceptUser({
+        variables: {
+          id: membershipRequestId,
+        },
+      });
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('acceptedSuccessfully') as string);
+        resetAndRefetch();
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  /**
+   * Handles the rejection of a membership request.
+   *
+   * Sends a mutation request to reject the user and shows a success message if successful.
+   * It also triggers a state reset and refetch.
+   *
+   * @param membershipRequestId - The ID of the membership request to reject.
+   */
+  const handleRejectUser = async (
+    membershipRequestId: string,
+  ): Promise<void> => {
+    try {
+      const { data } = await rejectUser({
+        variables: {
+          id: membershipRequestId,
+        },
+      });
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('rejectedSuccessfully') as string);
+        resetAndRefetch();
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  return (
+    <tr className={styles.tableItem}>
+      <td className={styles.index}>{index + 1}.</td>
+      <td
+        className={styles.name}
+      >{`${request.user.firstName} ${request.user.lastName}`}</td>
+      <td className={styles.email}>{request.user.email}</td>
+      <td>
+        <Button
+          variant="success"
+          data-testid={`acceptMembershipRequestBtn${request._id}`}
+          onClick={async (): Promise<void> => {
+            await handleAcceptUser(request._id);
+          }}
+          className={styles.acceptButton}
+        >
+          {t('accept')}
+        </Button>
+      </td>
+      <td>
+        <Button
+          variant="danger"
+          data-testid={`rejectMembershipRequestBtn${request._id}`}
+          onClick={async (): Promise<void> => {
+            await handleRejectUser(request._id);
+          }}
+          className={styles.rejectButton}
+        >
+          {t('reject')}
+        </Button>
+      </td>
+    </tr>
+  );
+};
+
+export default RequestsTableItem;
diff --git a/src/components/RequestsTableItem/RequestsTableItemMocks.ts b/src/components/RequestsTableItem/RequestsTableItemMocks.ts
new file mode 100644
index 0000000000..22ea245d3a
--- /dev/null
+++ b/src/components/RequestsTableItem/RequestsTableItemMocks.ts
@@ -0,0 +1,37 @@
+import {
+  ACCEPT_ORGANIZATION_REQUEST_MUTATION,
+  REJECT_ORGANIZATION_REQUEST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ACCEPT_ORGANIZATION_REQUEST_MUTATION,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        acceptMembershipRequest: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: REJECT_ORGANIZATION_REQUEST_MUTATION,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        rejectMembershipRequest: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
diff --git a/src/components/SecuredRoute/SecuredRoute.tsx b/src/components/SecuredRoute/SecuredRoute.tsx
new file mode 100644
index 0000000000..1119800215
--- /dev/null
+++ b/src/components/SecuredRoute/SecuredRoute.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import PageNotFound from 'screens/PageNotFound/PageNotFound';
+import useLocalStorage from 'utils/useLocalstorage';
+const { getItem, setItem } = useLocalStorage();
+
+/**
+ * A route guard that checks if the user is logged in and has the necessary permissions.
+ *
+ * If the user is logged in and has an admin role set, it renders the child routes.
+ * Otherwise, it redirects to the home page or shows a 404 page if admin role is not set.
+ *
+ * @returns The JSX element representing the secured route.
+ */
+const SecuredRoute = (): JSX.Element => {
+  const isLoggedIn = getItem('IsLoggedIn');
+  const adminFor = getItem('AdminFor');
+
+  return isLoggedIn === 'TRUE' ? (
+    <>{adminFor != null ? <Outlet /> : <PageNotFound />}</>
+  ) : (
+    <Navigate to="/" replace />
+  );
+};
+
+// Time constants for session timeout and inactivity interval
+const timeoutMinutes = 15;
+const timeoutMilliseconds = timeoutMinutes * 60 * 1000;
+
+const inactiveIntervalMin = 1;
+const inactiveIntervalMilsec = inactiveIntervalMin * 60 * 1000;
+
+let lastActive: number = Date.now();
+
+// Update lastActive timestamp on mouse movement
+document.addEventListener('mousemove', () => {
+  lastActive = Date.now();
+});
+
+// Check for inactivity and handle session timeout
+setInterval(() => {
+  const currentTime = Date.now();
+  const timeSinceLastActive = currentTime - lastActive;
+
+  // If inactive for longer than the timeout period, show a warning and log out
+  if (timeSinceLastActive > timeoutMilliseconds) {
+    toast.warn('Kindly relogin as sessison has expired');
+
+    window.location.href = '/';
+    setItem('IsLoggedIn', 'FALSE');
+  }
+}, inactiveIntervalMilsec);
+
+export default SecuredRoute;
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.module.css b/src/components/SuperAdminScreen/SuperAdminScreen.module.css
new file mode 100644
index 0000000000..9496ef95fa
--- /dev/null
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.module.css
@@ -0,0 +1,101 @@
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.5s ease-in-out;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .pageContainer {
+    padding-left: 2.5rem;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
+
+@keyframes moveLeft {
+  from {
+    padding-left: calc(300px + 2rem + 1.5rem);
+  }
+
+  to {
+    padding-left: 1.5rem;
+  }
+}
+
+@keyframes moveRight {
+  from {
+    padding-left: 1.5rem;
+  }
+
+  to {
+    padding-left: calc(300px + 2rem + 1.5rem);
+  }
+}
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
new file mode 100644
index 0000000000..84b740ab12
--- /dev/null
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import SuperAdminScreen from './SuperAdminScreen';
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+const clickToggleMenuBtn = (toggleButton: HTMLElement): void => {
+  fireEvent.click(toggleButton);
+};
+
+describe('Testing LeftDrawer in SuperAdminScreen', () => {
+  test('Testing LeftDrawer in page functionality', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <SuperAdminScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const toggleButton = screen.getByTestId('closeMenu') as HTMLElement;
+    const icon = toggleButton.querySelector('i');
+
+    // Resize window to a smaller width
+    resizeWindow(800);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
+
+    // Resize window back to a larger width
+    resizeWindow(1000);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
+
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
+  });
+});
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
new file mode 100644
index 0000000000..948dc334f7
--- /dev/null
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
@@ -0,0 +1,98 @@
+import LeftDrawer from 'components/LeftDrawer/LeftDrawer';
+import React, { useEffect, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { Outlet, useLocation } from 'react-router-dom';
+import styles from './SuperAdminScreen.module.css';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+
+/**
+ * The SuperAdminScreen component manages the layout for the Super Admin screen,
+ * including handling the sidebar visibility and page title based on the current route.
+ *
+ * @returns The JSX element representing the Super Admin screen layout.
+ */
+const superAdminScreen = (): JSX.Element => {
+  const location = useLocation();
+  const titleKey = map[location.pathname.split('/')[1]];
+  const { t } = useTranslation('translation', { keyPrefix: titleKey });
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+
+  /**
+   * Handles resizing of the window to show or hide the sidebar.
+   */
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="closeMenu"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <LeftDrawer hideDrawer={hideDrawer} setHideDrawer={setHideDrawer} />
+      <div
+        className={`${styles.pageContainer} ${
+          hideDrawer === null
+            ? ''
+            : hideDrawer
+              ? styles.expand
+              : styles.contract
+        } `}
+        data-testid="mainpageright"
+      >
+        <div className="d-flex justify-content-between align-items-center">
+          <div style={{ flex: 1 }}>
+            <h2>{t('title')}</h2>
+          </div>
+          <ProfileDropdown />
+        </div>
+        <Outlet />
+      </div>
+    </>
+  );
+};
+
+export default superAdminScreen;
+
+/**
+ * Map of route segments to translation keys for page titles.
+ */
+const map: Record<
+  string,
+  'orgList' | 'requests' | 'users' | 'memberDetail' | 'communityProfile'
+> = {
+  orglist: 'orgList',
+  requests: 'requests',
+  users: 'users',
+  member: 'memberDetail',
+  communityProfile: 'communityProfile',
+};
diff --git a/src/components/TableLoader/TableLoader.module.css b/src/components/TableLoader/TableLoader.module.css
new file mode 100644
index 0000000000..66349e2aa9
--- /dev/null
+++ b/src/components/TableLoader/TableLoader.module.css
@@ -0,0 +1,3 @@
+.loadingItem {
+  height: 30px;
+}
diff --git a/src/components/TableLoader/TableLoader.test.tsx b/src/components/TableLoader/TableLoader.test.tsx
new file mode 100644
index 0000000000..a7d334a1c7
--- /dev/null
+++ b/src/components/TableLoader/TableLoader.test.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+
+import type { InterfaceTableLoader } from './TableLoader';
+import TableLoader from './TableLoader';
+
+beforeAll(() => {
+  console.error = jest.fn();
+});
+
+describe('Testing Loader component', () => {
+  test('Component should be rendered properly only headerTitles is provided', () => {
+    const props: InterfaceTableLoader = {
+      noOfRows: 10,
+      headerTitles: ['header1', 'header2', 'header3'],
+    };
+    render(
+      <BrowserRouter>
+        <TableLoader {...props} />
+      </BrowserRouter>,
+    );
+    // Check if header titles are rendered properly
+    const data = props.headerTitles as string[];
+    data.forEach((title) => {
+      expect(screen.getByText(title)).toBeInTheDocument();
+    });
+
+    // Check if elements are rendered properly
+    for (let rowIndex = 0; rowIndex < props.noOfRows; rowIndex++) {
+      expect(
+        screen.getByTestId(`row-${rowIndex}-tableLoading`),
+      ).toBeInTheDocument();
+      for (let colIndex = 0; colIndex < data.length; colIndex++) {
+        expect(
+          screen.getByTestId(`row-${rowIndex}-col-${colIndex}-tableLoading`),
+        ).toBeInTheDocument();
+      }
+    }
+  });
+  test('Component should be rendered properly only noCols is provided', () => {
+    const props: InterfaceTableLoader = {
+      noOfRows: 10,
+      noOfCols: 3,
+    };
+    render(
+      <BrowserRouter>
+        <TableLoader {...props} />
+      </BrowserRouter>,
+    );
+    // Check if header titles are rendered properly
+    const data = [...Array(props.noOfCols)];
+
+    // Check if elements are rendered properly
+    for (let rowIndex = 0; rowIndex < props.noOfRows; rowIndex++) {
+      expect(
+        screen.getByTestId(`row-${rowIndex}-tableLoading`),
+      ).toBeInTheDocument();
+      for (let colIndex = 0; colIndex < data.length; colIndex++) {
+        expect(
+          screen.getByTestId(`row-${rowIndex}-col-${colIndex}-tableLoading`),
+        ).toBeInTheDocument();
+      }
+    }
+  });
+  test('Component should be throw error when noOfCols and headerTitles are undefined', () => {
+    const props = {
+      noOfRows: 10,
+    };
+    expect(() => {
+      render(
+        <BrowserRouter>
+          <TableLoader {...props} />
+        </BrowserRouter>,
+      );
+    }).toThrow();
+  });
+});
diff --git a/src/components/TableLoader/TableLoader.tsx b/src/components/TableLoader/TableLoader.tsx
new file mode 100644
index 0000000000..631b13d514
--- /dev/null
+++ b/src/components/TableLoader/TableLoader.tsx
@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import styles from './TableLoader.module.css';
+import { Table } from 'react-bootstrap';
+
+export interface InterfaceTableLoader {
+  noOfRows: number;
+  headerTitles?: string[];
+  noOfCols?: number;
+}
+
+/**
+ * The TableLoader component displays a loading skeleton for tables.
+ * It shows a specified number of rows and columns as placeholders
+ * with a shimmering effect to indicate loading content.
+ *
+ * @param props - The properties for the TableLoader component.
+ * @param noOfRows - The number of rows to display.
+ * @param headerTitles - Optional. The titles for the table headers.
+ * @param noOfCols - Optional. The number of columns if headerTitles is not provided.
+ *
+ * @returns The JSX element representing the table loader.
+ */
+const tableLoader = (props: InterfaceTableLoader): JSX.Element => {
+  const { noOfRows, headerTitles, noOfCols } = props;
+
+  useEffect(() => {
+    if (headerTitles == undefined && noOfCols == undefined) {
+      throw new Error(
+        'TableLoader error Either headerTitles or noOfCols is required !',
+      );
+    }
+  }, []);
+
+  return (
+    <>
+      <Table className="mb-4" responsive>
+        <thead>
+          <tr>
+            {headerTitles
+              ? headerTitles.map((title, index) => {
+                  return <th key={index}>{title}</th>;
+                })
+              : noOfCols &&
+                [...Array(noOfCols)].map((_, index) => {
+                  return <th key={index} />;
+                })}
+          </tr>
+        </thead>
+
+        <tbody>
+          {[...Array(noOfRows)].map((_, rowIndex) => {
+            return (
+              <tr
+                key={rowIndex}
+                className="mb-4"
+                data-testid={`row-${rowIndex}-tableLoading`}
+              >
+                {[...Array(headerTitles ? headerTitles?.length : noOfCols)].map(
+                  (_, colIndex) => {
+                    return (
+                      <td
+                        key={colIndex}
+                        data-testid={`row-${rowIndex}-col-${colIndex}-tableLoading`}
+                      >
+                        <div className={`${styles.loadingItem} shimmer`} />
+                      </td>
+                    );
+                  },
+                )}
+              </tr>
+            );
+          })}
+        </tbody>
+      </Table>
+    </>
+  );
+};
+
+export default tableLoader;
diff --git a/src/components/TagActions/TagActions.module.css b/src/components/TagActions/TagActions.module.css
new file mode 100644
index 0000000000..079dffea65
--- /dev/null
+++ b/src/components/TagActions/TagActions.module.css
@@ -0,0 +1,42 @@
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.scrollContainer {
+  height: 100px;
+  overflow-y: auto;
+}
+
+.tagBadge {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px var(--bs-gray-400);
+  max-width: calc(100% - 2rem);
+}
+
+.removeFilterIcon {
+  cursor: pointer;
+}
+
+.loadingDiv {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/TagActions/TagActions.test.tsx b/src/components/TagActions/TagActions.test.tsx
new file mode 100644
index 0000000000..d27f177ebe
--- /dev/null
+++ b/src/components/TagActions/TagActions.test.tsx
@@ -0,0 +1,400 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  cleanup,
+  waitFor,
+  act,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import { store } from 'state/store';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { ApolloLink } from '@apollo/client';
+import type { InterfaceTagActionsProps } from './TagActions';
+import TagActions from './TagActions';
+import i18n from 'utils/i18nForTest';
+import {
+  MOCKS,
+  MOCKS_ERROR_ORGANIZATION_TAGS_QUERY,
+  MOCKS_ERROR_SUBTAGS_QUERY,
+} from './TagActionsMocks';
+import type { TFunction } from 'i18next';
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_ORGANIZATION_TAGS_QUERY, true);
+const link3 = new StaticMockLink(MOCKS_ERROR_SUBTAGS_QUERY, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(i18n.getDataByLanguage('en')?.translation.manageTag ?? {}),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const props: InterfaceTagActionsProps[] = [
+  {
+    tagActionsModalIsOpen: true,
+    hideTagActionsModal: () => {},
+    tagActionType: 'assignToTags',
+    t: ((key: string) => translations[key]) as TFunction<
+      'translation',
+      'manageTag'
+    >,
+    tCommon: ((key: string) => translations[key]) as TFunction<
+      'common',
+      undefined
+    >,
+  },
+  {
+    tagActionsModalIsOpen: true,
+    hideTagActionsModal: () => {},
+    tagActionType: 'removeFromTags',
+    t: ((key: string) => translations[key]) as TFunction<
+      'translation',
+      'manageTag'
+    >,
+    tCommon: ((key: string) => translations[key]) as TFunction<
+      'common',
+      undefined
+    >,
+  },
+];
+
+const renderTagActionsModal = (
+  props: InterfaceTagActionsProps,
+  link: ApolloLink,
+): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgtags/123/manageTag/1']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <Routes>
+              <Route
+                path="/orgtags/:orgId/manageTag/:tagId"
+                element={<TagActions {...props} />}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Organisation Tags Page', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('Component loads correctly and opens assignToTags modal', async () => {
+    const { getByText } = renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.assign)).toBeInTheDocument();
+    });
+  });
+
+  test('Component loads correctly and opens removeFromTags modal', async () => {
+    const { getByText } = renderTagActionsModal(props[1], link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.remove)).toBeInTheDocument();
+    });
+  });
+
+  test('Component calls hideTagActionsModal when modal is closed', async () => {
+    const hideTagActionsModalMock = jest.fn();
+
+    const props2: InterfaceTagActionsProps = {
+      tagActionsModalIsOpen: true,
+      hideTagActionsModal: hideTagActionsModalMock,
+      tagActionType: 'assignToTags',
+      t: ((key: string) => translations[key]) as TFunction<
+        'translation',
+        'manageTag'
+      >,
+      tCommon: ((key: string) => translations[key]) as TFunction<
+        'common',
+        undefined
+      >,
+    };
+
+    renderTagActionsModal(props2, link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('closeTagActionsModalBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('closeTagActionsModalBtn'));
+
+    await waitFor(() => {
+      expect(hideTagActionsModalMock).toHaveBeenCalled();
+    });
+  });
+
+  test('Renders error component when when query is unsuccessful', async () => {
+    const { queryByText } = renderTagActionsModal(props[0], link2);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(queryByText(translations.assign)).not.toBeInTheDocument();
+    });
+  });
+
+  test('Renders error component when when subTags query is unsuccessful', async () => {
+    const { getByText } = renderTagActionsModal(props[0], link3);
+
+    await wait();
+
+    // expand tag 1 to list its subtags
+    await waitFor(() => {
+      expect(screen.getByTestId('expandSubTags1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('expandSubTags1'));
+
+    await waitFor(() => {
+      expect(
+        getByText(translations.errorOccurredWhileLoadingSubTags),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('searchs for tags where the name matches the provided search input', async () => {
+    renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'searchUserTag' } });
+
+    // should render the two searched tags from the mock data
+    // where name starts with "searchUserTag"
+    await waitFor(() => {
+      const tags = screen.getAllByTestId('orgUserTag');
+      expect(tags.length).toEqual(2);
+    });
+  });
+
+  test('Renders more members with infinite scroll', async () => {
+    const { getByText } = renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.assign)).toBeInTheDocument();
+    });
+
+    // Find the infinite scroll div by test ID or another selector
+    const scrollableDiv = screen.getByTestId('scrollableDiv');
+
+    const initialTagsDataLength = screen.getAllByTestId('orgUserTag').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(scrollableDiv, {
+      target: { scrollY: scrollableDiv.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalTagsDataLength = screen.getAllByTestId('orgUserTag').length;
+      expect(finalTagsDataLength).toBeGreaterThan(initialTagsDataLength);
+
+      expect(getByText(translations.assign)).toBeInTheDocument();
+    });
+  });
+
+  test('Selects and deselects tags', async () => {
+    renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag1'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag2')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag2'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag1'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('clearSelectedTag2')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('clearSelectedTag2'));
+  });
+
+  test('fetches and lists the child tags and then selects and deselects them', async () => {
+    renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    // expand tag 1 to list its subtags
+    await waitFor(() => {
+      expect(screen.getByTestId('expandSubTags1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('expandSubTags1'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('subTagsScrollableDiv1')).toBeInTheDocument();
+    });
+    // Find the infinite scroll div for subtags by test ID or another selector
+    const subTagsScrollableDiv1 = screen.getByTestId('subTagsScrollableDiv1');
+
+    const initialTagsDataLength =
+      screen.getAllByTestId('orgUserSubTags').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(subTagsScrollableDiv1, {
+      target: { scrollY: subTagsScrollableDiv1.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalTagsDataLength =
+        screen.getAllByTestId('orgUserSubTags').length;
+      expect(finalTagsDataLength).toBeGreaterThan(initialTagsDataLength);
+    });
+
+    // select subtags 1 & 2
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTagsubTag1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTagsubTag1'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTagsubTag2')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTagsubTag2'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag1'));
+
+    // deselect subtags 1 & 2
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTagsubTag1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTagsubTag1'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTagsubTag2')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTagsubTag2'));
+
+    // hide subtags of tag 1
+    await waitFor(() => {
+      expect(screen.getByTestId('expandSubTags1')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('expandSubTags1'));
+  });
+
+  test('Toasts error when no tag is selected while assigning', async () => {
+    renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('tagActionSubmitBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('tagActionSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(translations.noTagSelected);
+    });
+  });
+
+  test('Successfully assigns to tags', async () => {
+    renderTagActionsModal(props[0], link);
+
+    await wait();
+
+    // select userTags 2 & 3 and assign them
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag2')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag2'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag3')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag3'));
+
+    userEvent.click(screen.getByTestId('tagActionSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfullyAssignedToTags,
+      );
+    });
+  });
+
+  test('Successfully removes from tags', async () => {
+    renderTagActionsModal(props[1], link);
+
+    await wait();
+
+    // select userTag 2 and remove people from it
+    await waitFor(() => {
+      expect(screen.getByTestId('checkTag2')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('checkTag2'));
+
+    userEvent.click(screen.getByTestId('tagActionSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfullyRemovedFromTags,
+      );
+    });
+  });
+});
diff --git a/src/components/TagActions/TagActions.tsx b/src/components/TagActions/TagActions.tsx
new file mode 100644
index 0000000000..083341372f
--- /dev/null
+++ b/src/components/TagActions/TagActions.tsx
@@ -0,0 +1,407 @@
+import { useMutation, useQuery } from '@apollo/client';
+import type { FormEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import { useParams } from 'react-router-dom';
+import type {
+  InterfaceQueryOrganizationUserTags,
+  InterfaceTagData,
+} from 'utils/interfaces';
+import styles from './TagActions.module.css';
+import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import {
+  ASSIGN_TO_TAGS,
+  REMOVE_FROM_TAGS,
+} from 'GraphQl/Mutations/TagMutations';
+import { toast } from 'react-toastify';
+import type {
+  InterfaceOrganizationTagsQuery,
+  TagActionType,
+} from 'utils/organizationTagsUtils';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { WarningAmberRounded } from '@mui/icons-material';
+import TagNode from './TagNode';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+import type { TFunction } from 'i18next';
+
+interface InterfaceUserTagsAncestorData {
+  _id: string;
+  name: string;
+}
+
+/**
+ * Props for the `AssignToTags` component.
+ */
+export interface InterfaceTagActionsProps {
+  tagActionsModalIsOpen: boolean;
+  hideTagActionsModal: () => void;
+  tagActionType: TagActionType;
+  t: TFunction<'translation', 'manageTag'>;
+  tCommon: TFunction<'common', undefined>;
+}
+
+const TagActions: React.FC<InterfaceTagActionsProps> = ({
+  tagActionsModalIsOpen,
+  hideTagActionsModal,
+  tagActionType,
+  t,
+  tCommon,
+}) => {
+  const { orgId, tagId: currentTagId } = useParams();
+
+  const [tagSearchName, setTagSearchName] = useState('');
+
+  const {
+    data: orgUserTagsData,
+    loading: orgUserTagsLoading,
+    error: orgUserTagsError,
+    fetchMore: orgUserTagsFetchMore,
+  }: InterfaceOrganizationTagsQuery = useQuery(ORGANIZATION_USER_TAGS_LIST, {
+    variables: {
+      id: orgId,
+      first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      where: { name: { starts_with: tagSearchName } },
+    },
+    skip: !tagActionsModalIsOpen,
+  });
+
+  const loadMoreUserTags = (): void => {
+    orgUserTagsFetchMore({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: orgUserTagsData?.organizations[0].userTags.pageInfo.endCursor,
+      },
+      updateQuery: (
+        prevResult: { organizations: InterfaceQueryOrganizationUserTags[] },
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult?: {
+            organizations: InterfaceQueryOrganizationUserTags[];
+          };
+        },
+      ) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          organizations: [
+            {
+              ...prevResult.organizations[0],
+              userTags: {
+                ...prevResult.organizations[0].userTags,
+                edges: [
+                  ...prevResult.organizations[0].userTags.edges,
+                  ...fetchMoreResult.organizations[0].userTags.edges,
+                ],
+                pageInfo: fetchMoreResult.organizations[0].userTags.pageInfo,
+              },
+            },
+          ],
+        };
+      },
+    });
+  };
+
+  const userTagsList =
+    orgUserTagsData?.organizations[0]?.userTags.edges.map(
+      (edge) => edge.node,
+    ) ?? /* istanbul ignore next */ [];
+
+  // tags that we have selected to assigned
+  const [selectedTags, setSelectedTags] = useState<InterfaceTagData[]>([]);
+
+  // tags that we have checked, it is there to differentiate between the selected tags and all the checked tags
+  // i.e. selected tags would only be the ones we select, but checked tags will also include the selected tag's ancestors
+  const [checkedTags, setCheckedTags] = useState<Set<string>>(new Set());
+
+  // next 3 states are there to keep track of the ancestor tags of the the tags that we have selected
+  // i.e. when we check a tag, all of it's ancestor tags will be checked too
+  // indicating that the users will be assigned all of the ancestor tags as well
+  const [addAncestorTagsData, setAddAncestorTagsData] = useState<
+    Set<InterfaceUserTagsAncestorData>
+  >(new Set());
+  const [removeAncestorTagsData, setRemoveAncestorTagsData] = useState<
+    Set<InterfaceUserTagsAncestorData>
+  >(new Set());
+  const [ancestorTagsDataMap, setAncestorTagsDataMap] = useState(new Map());
+
+  useEffect(() => {
+    const newCheckedTags = new Set(checkedTags);
+    const newAncestorTagsDataMap = new Map(ancestorTagsDataMap);
+    /* istanbul ignore next */
+    addAncestorTagsData.forEach(
+      (ancestorTag: InterfaceUserTagsAncestorData) => {
+        const prevAncestorTagValue = ancestorTagsDataMap.get(ancestorTag._id);
+        newAncestorTagsDataMap.set(
+          ancestorTag._id,
+          prevAncestorTagValue ? prevAncestorTagValue + 1 : 1,
+        );
+        newCheckedTags.add(ancestorTag._id);
+      },
+    );
+
+    setCheckedTags(newCheckedTags);
+    setAncestorTagsDataMap(newAncestorTagsDataMap);
+  }, [addAncestorTagsData]);
+
+  useEffect(() => {
+    const newCheckedTags = new Set(checkedTags);
+    const newAncestorTagsDataMap = new Map(ancestorTagsDataMap);
+    /* istanbul ignore next */
+    removeAncestorTagsData.forEach(
+      (ancestorTag: InterfaceUserTagsAncestorData) => {
+        const prevAncestorTagValue = ancestorTagsDataMap.get(ancestorTag._id);
+        if (prevAncestorTagValue === 1) {
+          newCheckedTags.delete(ancestorTag._id);
+          newAncestorTagsDataMap.delete(ancestorTag._id);
+        } else {
+          newAncestorTagsDataMap.set(ancestorTag._id, prevAncestorTagValue - 1);
+        }
+      },
+    );
+
+    setCheckedTags(newCheckedTags);
+    setAncestorTagsDataMap(newAncestorTagsDataMap);
+  }, [removeAncestorTagsData]);
+
+  const selectTag = (tag: InterfaceTagData): void => {
+    const newCheckedTags = new Set(checkedTags);
+
+    setSelectedTags((selectedTags) => [...selectedTags, tag]);
+    newCheckedTags.add(tag._id);
+
+    setAddAncestorTagsData(new Set(tag.ancestorTags));
+
+    setCheckedTags(newCheckedTags);
+  };
+
+  const deSelectTag = (tag: InterfaceTagData): void => {
+    if (!selectedTags.some((selectedTag) => selectedTag._id === tag._id)) {
+      /* istanbul ignore next */
+      return;
+    }
+
+    const newCheckedTags = new Set(checkedTags);
+
+    setSelectedTags(
+      selectedTags.filter((selectedTag) => selectedTag._id !== tag._id),
+    );
+    newCheckedTags.delete(tag._id);
+
+    setRemoveAncestorTagsData(new Set(tag.ancestorTags));
+
+    setCheckedTags(newCheckedTags);
+  };
+
+  const toggleTagSelection = (
+    tag: InterfaceTagData,
+    isSelected: boolean,
+  ): void => {
+    if (isSelected) {
+      selectTag(tag);
+    } else {
+      deSelectTag(tag);
+    }
+  };
+
+  const [assignToTags] = useMutation(ASSIGN_TO_TAGS);
+  const [removeFromTags] = useMutation(REMOVE_FROM_TAGS);
+
+  const handleTagAction = async (
+    e: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+
+    if (!selectedTags.length) {
+      toast.error(t('noTagSelected'));
+      return;
+    }
+
+    const mutationObject = {
+      variables: {
+        currentTagId,
+        selectedTagIds: selectedTags.map((selectedTag) => selectedTag._id),
+      },
+    };
+
+    try {
+      const { data } =
+        tagActionType === 'assignToTags'
+          ? await assignToTags(mutationObject)
+          : await removeFromTags(mutationObject);
+
+      if (data) {
+        if (tagActionType === 'assignToTags') {
+          toast.success(t('successfullyAssignedToTags'));
+        } else {
+          toast.success(t('successfullyRemovedFromTags'));
+        }
+        hideTagActionsModal();
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  if (orgUserTagsError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {t('errorOccurredWhileLoadingOrganizationUserTags')}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Modal
+        show={tagActionsModalIsOpen}
+        onHide={hideTagActionsModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header
+          className="bg-primary"
+          data-testid="modalOrganizationHeader"
+          closeButton
+        >
+          <Modal.Title className="text-white">
+            {tagActionType === 'assignToTags'
+              ? t('assignToTags')
+              : t('removeFromTags')}
+          </Modal.Title>
+        </Modal.Header>
+        <Form onSubmit={handleTagAction}>
+          <Modal.Body className="pb-0">
+            <div
+              className={`d-flex flex-wrap align-items-center border border-2 border-dark-subtle bg-light-subtle rounded-3 p-2 ${styles.scrollContainer}`}
+            >
+              {selectedTags.length === 0 ? (
+                <div className="text-body-tertiary mx-auto">
+                  {t('noTagSelected')}
+                </div>
+              ) : (
+                selectedTags.map((tag: InterfaceTagData) => (
+                  <div
+                    key={tag._id}
+                    className={`badge bg-dark-subtle text-secondary-emphasis lh-lg my-2 ms-2 d-flex align-items-center ${styles.tagBadge}`}
+                  >
+                    {tag.name}
+                    <button
+                      className={`${styles.removeFilterIcon} fa fa-times ms-2 text-body-tertiary border-0 bg-transparent`}
+                      onClick={() => deSelectTag(tag)}
+                      data-testid={`clearSelectedTag${tag._id}`}
+                      aria-label={t('remove')}
+                    />
+                  </div>
+                ))
+              )}
+            </div>
+
+            <div className="mt-3 position-relative">
+              <i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
+              <Form.Control
+                type="text"
+                id="userName"
+                className="bg-light"
+                placeholder={tCommon('searchByName')}
+                onChange={(e) => setTagSearchName(e.target.value.trim())}
+                data-testid="searchByName"
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="mt-3 mb-2 fs-5 fw-semibold text-dark-emphasis">
+              {t('allTags')}
+            </div>
+            {orgUserTagsLoading ? (
+              <div className={styles.loadingDiv}>
+                <InfiniteScrollLoader />
+              </div>
+            ) : (
+              <>
+                <div
+                  id="scrollableDiv"
+                  data-testid="scrollableDiv"
+                  style={{
+                    height: 300,
+                    overflow: 'auto',
+                  }}
+                >
+                  <InfiniteScroll
+                    dataLength={userTagsList?.length ?? 0}
+                    next={loadMoreUserTags}
+                    hasMore={
+                      orgUserTagsData?.organizations[0].userTags.pageInfo
+                        .hasNextPage ?? false
+                    }
+                    loader={<InfiniteScrollLoader />}
+                    scrollableTarget="scrollableDiv"
+                  >
+                    {userTagsList?.map((tag) => (
+                      <div key={tag._id} className="position-relative w-100">
+                        <div
+                          className="d-inline-block w-100"
+                          data-testid="orgUserTag"
+                        >
+                          <TagNode
+                            tag={tag}
+                            checkedTags={checkedTags}
+                            toggleTagSelection={toggleTagSelection}
+                            t={t}
+                          />
+                        </div>
+
+                        {/* Ancestor tags breadcrumbs positioned at the end of TagNode */}
+                        {tag.parentTag && (
+                          <div className="position-absolute end-0 top-0 d-flex flex-row mt-2 me-3 pt-0 text-secondary">
+                            <>{'('}</>
+                            {tag.ancestorTags?.map((ancestorTag) => (
+                              <span
+                                key={ancestorTag._id}
+                                className="ms-2 my-0"
+                                data-testid="ancestorTagsBreadCrumbs"
+                              >
+                                {ancestorTag.name}
+                                <i className="ms-2 fa fa-caret-right" />
+                              </span>
+                            ))}
+                            <>{')'}</>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </InfiniteScroll>
+                </div>
+              </>
+            )}
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={(): void => hideTagActionsModal()}
+              data-testid="closeTagActionsModalBtn"
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button type="submit" value="add" data-testid="tagActionSubmitBtn">
+              {tagActionType === 'assignToTags' ? t('assign') : t('remove')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default TagActions;
diff --git a/src/components/TagActions/TagActionsMocks.ts b/src/components/TagActions/TagActionsMocks.ts
new file mode 100644
index 0000000000..f22458fa53
--- /dev/null
+++ b/src/components/TagActions/TagActionsMocks.ts
@@ -0,0 +1,706 @@
+import {
+  ASSIGN_TO_TAGS,
+  REMOVE_FROM_TAGS,
+} from 'GraphQl/Mutations/TagMutations';
+import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import { USER_TAG_SUB_TAGS } from 'GraphQl/Queries/userTagQueries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'userTag 1',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 11,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'userTag 2',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '2',
+                },
+                {
+                  node: {
+                    _id: '3',
+                    name: 'userTag 3',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 0,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '3',
+                },
+                {
+                  node: {
+                    _id: '4',
+                    name: 'userTag 4',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 0,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '4',
+                },
+                {
+                  node: {
+                    _id: '5',
+                    name: 'userTag 5',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '5',
+                },
+                {
+                  node: {
+                    _id: '6',
+                    name: 'userTag 6',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 6,
+                    },
+                    childTags: {
+                      totalCount: 6,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '6',
+                },
+                {
+                  node: {
+                    _id: '7',
+                    name: 'userTag 7',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 7,
+                    },
+                    childTags: {
+                      totalCount: 7,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '7',
+                },
+                {
+                  node: {
+                    _id: '8',
+                    name: 'userTag 8',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 8,
+                    },
+                    childTags: {
+                      totalCount: 8,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '8',
+                },
+                {
+                  node: {
+                    _id: '9',
+                    name: 'userTag 9',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 9,
+                    },
+                    childTags: {
+                      totalCount: 9,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '9',
+                },
+                {
+                  node: {
+                    _id: '10',
+                    name: 'userTag 10',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 10,
+                    },
+                    childTags: {
+                      totalCount: 10,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '10',
+                },
+              ],
+              pageInfo: {
+                startCursor: '1',
+                endCursor: '10',
+                hasNextPage: true,
+                hasPreviousPage: false,
+              },
+              totalCount: 12,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: '10',
+        where: { name: { starts_with: '' } },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '11',
+                    name: 'userTag 11',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '11',
+                },
+                {
+                  node: {
+                    _id: '12',
+                    name: 'userTag 12',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '12',
+                },
+              ],
+              pageInfo: {
+                startCursor: '11',
+                endCursor: '12',
+                hasNextPage: false,
+                hasPreviousPage: true,
+              },
+              totalCount: 12,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: 'searchUserTag' } },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'searchUserTag 1',
+                    parentTag: {
+                      _id: '1',
+                    },
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [
+                      {
+                        _id: '1',
+                        name: 'userTag 1',
+                      },
+                    ],
+                  },
+                  cursor: '1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'searchUserTag 2',
+                    parentTag: {
+                      _id: '1',
+                    },
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [
+                      {
+                        _id: '1',
+                        name: 'userTag 1',
+                      },
+                    ],
+                  },
+                  cursor: '2',
+                },
+              ],
+              pageInfo: {
+                startCursor: '1',
+                endCursor: '2',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'userTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'subTag1',
+                  name: 'subTag 1',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag1',
+              },
+              {
+                node: {
+                  _id: 'subTag2',
+                  name: 'subTag 2',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag2',
+              },
+              {
+                node: {
+                  _id: 'subTag3',
+                  name: 'subTag 3',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag3',
+              },
+              {
+                node: {
+                  _id: 'subTag4',
+                  name: 'subTag 4',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag4',
+              },
+              {
+                node: {
+                  _id: 'subTag5',
+                  name: 'subTag 5',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag5',
+              },
+              {
+                node: {
+                  _id: 'subTag6',
+                  name: 'subTag 6',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag6',
+              },
+              {
+                node: {
+                  _id: 'subTag7',
+                  name: 'subTag 7',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag7',
+              },
+              {
+                node: {
+                  _id: 'subTag8',
+                  name: 'subTag 8',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag8',
+              },
+              {
+                node: {
+                  _id: 'subTag9',
+                  name: 'subTag 9',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag9',
+              },
+              {
+                node: {
+                  _id: 'subTag10',
+                  name: 'subTag 10',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag10',
+              },
+            ],
+            pageInfo: {
+              startCursor: 'subTag1',
+              endCursor: 'subTag10',
+              hasNextPage: true,
+              hasPreviousPage: false,
+            },
+            totalCount: 11,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        after: 'subTag10',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'userTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'subTag11',
+                  name: 'subTag 11',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag11',
+              },
+            ],
+            pageInfo: {
+              startCursor: 'subTag11',
+              endCursor: 'subTag11',
+              hasNextPage: false,
+              hasPreviousPage: true,
+            },
+            totalCount: 11,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: ASSIGN_TO_TAGS,
+      variables: {
+        currentTagId: '1',
+        selectedTagIds: ['2', '3'],
+      },
+    },
+    result: {
+      data: {
+        assignToUserTags: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: REMOVE_FROM_TAGS,
+      variables: {
+        currentTagId: '1',
+        selectedTagIds: ['2'],
+      },
+    },
+    result: {
+      data: {
+        removeFromUserTags: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR_ORGANIZATION_TAGS_QUERY = [
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+      },
+    },
+    error: new Error('Mock Graphql Error for organization root tags query'),
+  },
+];
+
+export const MOCKS_ERROR_SUBTAGS_QUERY = [
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'userTag 1',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 11,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'userTag 2',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '2',
+                },
+              ],
+              pageInfo: {
+                startCursor: '1',
+                endCursor: '2',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+    },
+    error: new Error('Mock Graphql Error for subTags query'),
+  },
+];
diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx
new file mode 100644
index 0000000000..4a085ecaf9
--- /dev/null
+++ b/src/components/TagActions/TagNode.tsx
@@ -0,0 +1,199 @@
+import { useQuery } from '@apollo/client';
+import { USER_TAG_SUB_TAGS } from 'GraphQl/Queries/userTagQueries';
+import React, { useState } from 'react';
+import type {
+  InterfaceQueryUserTagChildTags,
+  InterfaceTagData,
+} from 'utils/interfaces';
+import type { InterfaceOrganizationSubTagsQuery } from 'utils/organizationTagsUtils';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+import styles from './TagActions.module.css';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+import { WarningAmberRounded } from '@mui/icons-material';
+import type { TFunction } from 'i18next';
+
+/**
+ * Props for the `TagNode` component.
+ */
+interface InterfaceTagNodeProps {
+  tag: InterfaceTagData;
+  checkedTags: Set<string>;
+  toggleTagSelection: (tag: InterfaceTagData, isSelected: boolean) => void;
+  t: TFunction<'translation', 'manageTag'>;
+}
+
+/**
+ * Renders the Tags which can be expanded to list subtags.
+ */
+const TagNode: React.FC<InterfaceTagNodeProps> = ({
+  tag,
+  checkedTags,
+  toggleTagSelection,
+  t,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const {
+    data: subTagsData,
+    loading: subTagsLoading,
+    error: subTagsError,
+    fetchMore: fetchMoreSubTags,
+  }: InterfaceOrganizationSubTagsQuery = useQuery(USER_TAG_SUB_TAGS, {
+    variables: {
+      id: tag._id,
+      first: TAGS_QUERY_DATA_CHUNK_SIZE,
+    },
+    skip: !expanded,
+  });
+
+  const loadMoreSubTags = (): void => {
+    fetchMoreSubTags({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: subTagsData?.getChildTags.childTags.pageInfo.endCursor,
+      },
+      updateQuery: (
+        prevResult: { getChildTags: InterfaceQueryUserTagChildTags },
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult?: { getChildTags: InterfaceQueryUserTagChildTags };
+        },
+      ) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          getChildTags: {
+            ...fetchMoreResult.getChildTags,
+            childTags: {
+              ...fetchMoreResult.getChildTags.childTags,
+              edges: [
+                ...prevResult.getChildTags.childTags.edges,
+                ...fetchMoreResult.getChildTags.childTags.edges,
+              ],
+            },
+          },
+        };
+      },
+    });
+  };
+
+  if (subTagsError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {t('errorOccurredWhileLoadingSubTags')}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const subTagsList =
+    subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ??
+    /* istanbul ignore next */ [];
+
+  const handleTagClick = (): void => {
+    setExpanded(!expanded);
+  };
+
+  const handleCheckboxChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    toggleTagSelection(tag, e.target.checked);
+  };
+
+  return (
+    <div className="my-2">
+      <div>
+        {tag.childTags.totalCount ? (
+          <>
+            <span
+              onClick={handleTagClick}
+              className="me-3"
+              style={{ cursor: 'pointer' }}
+              data-testid={`expandSubTags${tag._id}`}
+              aria-label={expanded ? t('collapse') : t('expand')}
+            >
+              {expanded ? '▼' : '▶'}
+            </span>
+            <input
+              style={{ cursor: 'pointer' }}
+              type="checkbox"
+              checked={checkedTags.has(tag._id)}
+              className="me-2"
+              onChange={handleCheckboxChange}
+              data-testid={`checkTag${tag._id}`}
+              aria-label={t('selectTag')}
+            />
+            <i className="fa fa-folder mx-2" />{' '}
+          </>
+        ) : (
+          <>
+            <span className="me-3">●</span>
+            <input
+              style={{ cursor: 'pointer' }}
+              type="checkbox"
+              checked={checkedTags.has(tag._id)}
+              className="ms-1 me-2"
+              onChange={handleCheckboxChange}
+              data-testid={`checkTag${tag._id}`}
+              aria-label={tag.name}
+            />
+            <i className="fa fa-tag mx-2" />{' '}
+          </>
+        )}
+
+        {tag.name}
+      </div>
+
+      {expanded && subTagsLoading && (
+        <div className="ms-5">
+          <div className={styles.simpleLoader}>
+            <div className={styles.spinner} />
+          </div>
+        </div>
+      )}
+      {expanded && subTagsList?.length && (
+        <div style={{ marginLeft: '20px' }}>
+          <div
+            id={`subTagsScrollableDiv${tag._id}`}
+            data-testid={`subTagsScrollableDiv${tag._id}`}
+            style={{
+              maxHeight: 300,
+              overflow: 'auto',
+            }}
+          >
+            <InfiniteScroll
+              dataLength={subTagsList?.length ?? 0}
+              next={loadMoreSubTags}
+              hasMore={
+                subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
+                /* istanbul ignore next */
+                false
+              }
+              loader={<InfiniteScrollLoader />}
+              scrollableTarget={`subTagsScrollableDiv${tag._id}`}
+            >
+              {subTagsList.map((tag: InterfaceTagData) => (
+                <div key={tag._id} data-testid="orgUserSubTags">
+                  <TagNode
+                    tag={tag}
+                    checkedTags={checkedTags}
+                    toggleTagSelection={toggleTagSelection}
+                    t={t}
+                  />
+                </div>
+              ))}
+            </InfiniteScroll>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TagNode;
diff --git a/src/components/UpdateSession/UpdateSession.css b/src/components/UpdateSession/UpdateSession.css
new file mode 100644
index 0000000000..073bbf973d
--- /dev/null
+++ b/src/components/UpdateSession/UpdateSession.css
@@ -0,0 +1,96 @@
+/* Card styles */
+.update-timeout-card {
+  width: 700px;
+  background: #ffffff;
+  border: none;
+  border-radius: 16px;
+  filter: drop-shadow(0px 4px 15.3px rgba(0, 0, 0, 0.08));
+  padding: 20px;
+}
+
+.update-timeout-card-header {
+  background: none;
+  padding: 16px;
+  border-bottom: none;
+}
+
+.update-timeout-card-title {
+  font-family: 'Lato', sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  color: #000000;
+}
+
+.update-timeout-card-body {
+  padding: 20px;
+}
+
+.update-timeout-current {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 20px; /* Increased margin to create more space */
+}
+
+.update-timeout-label {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 10px; /* Keep the same margin to maintain spacing with the slider */
+}
+
+.update-timeout-labels-container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.update-timeout-value {
+  color: #14ae5c;
+  font-weight: bold;
+}
+
+.update-timeout-slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: #757575;
+}
+
+.update-timeout-button-container {
+  display: flex;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.update-timeout-button {
+  width: 112px;
+  height: 36px;
+  background: #31bb6b;
+  border-radius: 6px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: none;
+}
+
+.update-timeout-button:hover {
+  background-color: #28a745;
+  border-color: #28a745;
+  box-shadow: none;
+}
+
+.update-timeout-button:active {
+  transform: scale(0.98);
+}
+
+.update-timeout-slider-container {
+  position: relative;
+}
diff --git a/src/components/UpdateSession/UpdateSession.test.tsx b/src/components/UpdateSession/UpdateSession.test.tsx
new file mode 100644
index 0000000000..ce0a868820
--- /dev/null
+++ b/src/components/UpdateSession/UpdateSession.test.tsx
@@ -0,0 +1,346 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/client/testing';
+import {
+  render,
+  screen,
+  act,
+  within,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import UpdateTimeout from './UpdateSession';
+import i18n from 'utils/i18nForTest';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { UPDATE_SESSION_TIMEOUT } from 'GraphQl/Mutations/mutations';
+import { errorHandler } from 'utils/errorHandler';
+
+const MOCKS = [
+  {
+    request: {
+      query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          timeout: 30,
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: null,
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_SESSION_TIMEOUT,
+      variables: {
+        timeout: 30,
+      },
+    },
+    result: {
+      data: {
+        updateSessionTimeout: true,
+      },
+    },
+  },
+];
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('utils/errorHandler', () => ({
+  errorHandler: jest.fn(),
+}));
+
+describe('Testing UpdateTimeout Component', () => {
+  let consoleWarnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Should handle minimum slider value correctly', async () => {
+    const mockOnValueChange = jest.fn();
+
+    render(
+      <MockedProvider>
+        <UpdateTimeout onValueChange={mockOnValueChange} />
+      </MockedProvider>,
+    );
+
+    const slider = await screen.findByTestId('slider-thumb');
+
+    // Simulate dragging to minimum value
+    userEvent.click(slider, {
+      // Simulate clicking on the slider to focus
+      clientX: -999, // Adjust the clientX to simulate different slider positions
+    });
+
+    expect(mockOnValueChange).toHaveBeenCalledWith(15); // Adjust based on slider min value
+  });
+
+  test('Should handle maximum slider value correctly', async () => {
+    const mockOnValueChange = jest.fn();
+
+    render(
+      <MockedProvider>
+        <UpdateTimeout onValueChange={mockOnValueChange} />
+      </MockedProvider>,
+    );
+
+    const slider = await screen.findByTestId('slider-thumb');
+
+    // Simulate dragging to maximum value
+    userEvent.click(slider, {
+      // Simulate clicking on the slider to focus
+      clientX: 999, // Adjust the clientX to simulate different slider positions
+    });
+
+    expect(mockOnValueChange).toHaveBeenCalledWith(60); // Adjust based on slider max value
+  });
+
+  test('Should not update value if an invalid value is passed', async () => {
+    const mockOnValueChange = jest.fn();
+
+    render(
+      <MockedProvider>
+        <UpdateTimeout onValueChange={mockOnValueChange} />
+      </MockedProvider>,
+    );
+
+    const slider = await screen.findByTestId('slider-thumb');
+
+    // Simulate invalid value handling
+    userEvent.click(slider, {
+      // Simulate clicking on the slider to focus
+      clientX: 0, // Adjust the clientX to simulate different slider positions
+    });
+
+    // Ensure onValueChange is not called with invalid values
+    expect(mockOnValueChange).not.toHaveBeenCalled();
+  });
+
+  test('Should update slider value on user interaction', async () => {
+    const mockOnValueChange = jest.fn();
+
+    render(
+      <MockedProvider>
+        <UpdateTimeout onValueChange={mockOnValueChange} />
+      </MockedProvider>,
+    );
+
+    // Wait for the slider to be present
+    const slider = await screen.findByTestId('slider-thumb');
+
+    // Simulate slider interaction
+    userEvent.type(slider, '45'); // Simulate typing value
+
+    // Assert that the callback was called with the expected value
+    expect(mockOnValueChange).toHaveBeenCalledWith(expect.any(Number)); // Adjust as needed
+  });
+
+  test('Components should render properly', async () => {
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <UpdateTimeout />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    // Use getAllByText to get all elements with "Update Timeout" text
+    const updateTimeoutElements = screen.getAllByText(/Update Timeout/i);
+    expect(updateTimeoutElements).toHaveLength(1); // Check if there are exactly 2 elements with this text
+
+    expect(screen.getByText(/Current Timeout/i)).toBeInTheDocument();
+    expect(screen.getByText(/15 min/i)).toBeInTheDocument();
+
+    // Locate the parent element first
+    const sliderLabelsContainer = screen.getByTestId('slider-labels');
+
+    // Use within to query inside the parent element
+    const sliderLabels = within(sliderLabelsContainer);
+
+    // Check for the specific text within the parent element
+    expect(sliderLabels.getByText('30 min')).toBeInTheDocument();
+
+    expect(screen.getByText(/45 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/60 min/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Update/i })).toBeInTheDocument();
+  });
+
+  test('Should update session timeout', async () => {
+    render(
+      <MockedProvider mocks={MOCKS} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <UpdateTimeout />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const submitButton = screen.getByTestId('update-button');
+    userEvent.click(submitButton);
+
+    // Wait for the toast success call
+
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith(
+      expect.stringContaining('Successfully updated the Profile Details.'),
+    );
+  });
+
+  test('Should handle query errors', async () => {
+    const errorMocks = [
+      {
+        request: {
+          query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+        },
+        error: new Error('An error occurred'),
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={errorMocks} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <UpdateTimeout />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(errorHandler).toHaveBeenCalled();
+  });
+
+  test('Should handle update errors', async () => {
+    const errorMocks = [
+      {
+        request: {
+          query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+        },
+        result: {
+          data: {
+            getCommunityData: {
+              timeout: 30,
+            },
+          },
+        },
+      },
+      {
+        request: {
+          query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+        },
+        result: {
+          data: {
+            getCommunityData: null,
+          },
+        },
+      },
+      {
+        request: {
+          query: UPDATE_SESSION_TIMEOUT,
+          variables: { timeout: 30 },
+        },
+        error: new Error('An error occurred'),
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={errorMocks} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <UpdateTimeout />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const submitButton = screen.getByTestId('update-button');
+    userEvent.click(submitButton);
+
+    await wait();
+
+    expect(errorHandler).toHaveBeenCalled();
+  });
+
+  test('Should handle null community object gracefully', async () => {
+    render(
+      <MockedProvider mocks={[MOCKS[1]]} addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <UpdateTimeout />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    // Assertions to verify the component handles null community object correctly
+    // Use getAllByText to get all elements with "Update Timeout" text
+    const updateTimeoutElements = screen.getAllByText(/Update Timeout/i);
+    expect(updateTimeoutElements).toHaveLength(1); // Check if there are exactly 2 elements with this text
+
+    expect(screen.getByText(/Current Timeout/i)).toBeInTheDocument();
+
+    // Locate the parent element first
+    const sliderLabelsContainer = screen.getByTestId('slider-labels');
+
+    // Use within to query inside the parent element
+    const sliderLabels = within(sliderLabelsContainer);
+
+    // Check for the specific text within the parent element
+    expect(sliderLabels.getByText('15 min')).toBeInTheDocument();
+
+    expect(screen.getByText(/30 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/45 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/60 min/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Update/i })).toBeInTheDocument();
+
+    // Check if the component displays a default value or handles the null state appropriately
+    expect(screen.getByText(/No timeout set/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/UpdateSession/UpdateSession.tsx b/src/components/UpdateSession/UpdateSession.tsx
new file mode 100644
index 0000000000..f49970ebaa
--- /dev/null
+++ b/src/components/UpdateSession/UpdateSession.tsx
@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, Button, Form } from 'react-bootstrap';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import { useMutation, useQuery } from '@apollo/client';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import { UPDATE_SESSION_TIMEOUT } from 'GraphQl/Mutations/mutations';
+import './UpdateSession.css';
+import Loader from 'components/Loader/Loader';
+
+/**
+ * Component for updating the session timeout for a community.
+ *
+ * This component fetches the current session timeout value from the server
+ * and allows the user to update it using a slider.
+ *
+ * The component also handles form submission, making a mutation request to update the session timeout.
+ *
+ * @returns JSX.Element - The rendered component.
+ */
+
+interface TestInterfaceUpdateTimeoutProps {
+  onValueChange?: (value: number) => void;
+}
+
+const UpdateTimeout: React.FC<TestInterfaceUpdateTimeoutProps> = ({
+  onValueChange,
+}): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'communityProfile',
+  });
+
+  const [timeout, setTimeout] = useState<number | undefined>(30);
+  const [communityTimeout, setCommunityTimeout] = useState<number | undefined>(
+    30,
+  ); // Timeout from database for the community
+
+  const {
+    data,
+    loading,
+    error: queryError,
+  } = useQuery(GET_COMMUNITY_SESSION_TIMEOUT_DATA);
+  const [uploadSessionTimeout] = useMutation(UPDATE_SESSION_TIMEOUT);
+
+  type TimeoutDataType = {
+    timeout: number;
+  };
+
+  /**
+   * Effect that fetches the current session timeout from the server and sets the initial state.
+   * If there is an error in fetching the data, it is handled using the error handler.
+   */
+  React.useEffect(() => {
+    if (queryError) {
+      errorHandler(t, queryError as Error);
+    }
+
+    const SessionTimeoutData: TimeoutDataType | undefined =
+      data?.getCommunityData;
+
+    if (SessionTimeoutData && SessionTimeoutData.timeout !== null) {
+      setCommunityTimeout(SessionTimeoutData.timeout);
+      setTimeout(SessionTimeoutData.timeout);
+    } else {
+      setCommunityTimeout(undefined); // Handle null or undefined data
+    }
+  }, [data, queryError]);
+
+  /**
+   * Handles changes to the slider value and updates the timeout state.
+   *
+   * @param e - The event triggered by slider movement.
+   */
+  const handleOnChange = (
+    e: Event | React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    if ('target' in e && e.target) {
+      const target = e.target as HTMLInputElement;
+      // Ensure the value is a number and not NaN
+      const value = parseInt(target.value, 10);
+      if (!Number.isNaN(value)) {
+        setTimeout(value);
+        if (onValueChange) {
+          onValueChange(value);
+        }
+      } else {
+        console.warn('Invalid timeout value:', target.value);
+      }
+    }
+  };
+
+  /**
+   * Handles form submission to update the session timeout.
+   * It makes a mutation request to update the timeout value on the server.
+   * If the update is successful, a success toast is shown, and the state is updated.
+   *
+   * @param e - The event triggered by form submission.
+   */
+  const handleOnSubmit = async (
+    e: React.FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await uploadSessionTimeout({
+        variables: {
+          timeout: timeout,
+        },
+      });
+
+      toast.success(t('profileChangedMsg'));
+      setCommunityTimeout(timeout);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error as Error);
+    }
+  };
+
+  // Show a loader while the data is being fetched
+  if (loading) {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <Card className="update-timeout-card rounded-4 shadow-sm">
+        <Card.Header className="update-timeout-card-header">
+          <div className="update-timeout-card-title">Login Session Timeout</div>
+        </Card.Header>
+        <Card.Body className="update-timeout-card-body">
+          <Form onSubmit={handleOnSubmit}>
+            <div className="update-timeout-labels-container">
+              <Form.Label className="update-timeout-current">
+                Current Timeout:
+                <span
+                  className="update-timeout-value"
+                  data-testid="timeout-value"
+                >
+                  {communityTimeout !== undefined
+                    ? ` ${communityTimeout} minutes`
+                    : ' No timeout set'}
+                </span>
+              </Form.Label>
+
+              <Form.Label className="update-timeout-label">
+                Update Timeout
+              </Form.Label>
+            </div>
+
+            <Box sx={{ width: '100%' }}>
+              <Slider
+                data-testid="slider-thumb"
+                value={timeout}
+                valueLabelDisplay="auto"
+                onChange={handleOnChange}
+                step={5}
+                min={15}
+                max={60}
+                sx={{
+                  '& .MuiSlider-track': {
+                    backgroundColor: '#00c451',
+                    border: 'none',
+                  },
+                  '& .MuiSlider-thumb': {
+                    backgroundColor: '#31BB6B',
+                  },
+                  '& .MuiSlider-rail': {
+                    backgroundColor: '#E6E6E6',
+                  },
+                }}
+              />
+            </Box>
+
+            <div
+              className="update-timeout-slider-labels"
+              data-testid="slider-labels"
+            >
+              <span>15 min</span>
+              <span>30 min</span>
+              <span>45 min</span>
+              <span>60 min</span>
+            </div>
+            <div className="update-timeout-button-container">
+              <Button
+                type="submit"
+                variant="success"
+                className="update-timeout-button"
+                data-testid="update-button"
+              >
+                Update
+              </Button>
+            </div>
+          </Form>
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
+
+export default UpdateTimeout;
diff --git a/src/components/UserListCard/UserListCard.module.css b/src/components/UserListCard/UserListCard.module.css
new file mode 100644
index 0000000000..187757a531
--- /dev/null
+++ b/src/components/UserListCard/UserListCard.module.css
@@ -0,0 +1,74 @@
+.memberlist {
+  margin-top: -1px;
+}
+.memberimg {
+  width: 200px;
+  height: 100px;
+  border-radius: 7px;
+  margin-left: 20px;
+}
+.singledetails {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.singledetails p {
+  margin-bottom: -5px;
+}
+.singledetails_data_left {
+  margin-top: 10px;
+  margin-left: 10px;
+  color: #707070;
+}
+.singledetails_data_right {
+  justify-content: right;
+  margin-top: 10px;
+  text-align: right;
+  color: #707070;
+}
+.membername {
+  font-size: 16px;
+  font-weight: bold;
+}
+.memberfont {
+  margin-top: 3px;
+}
+.memberfont > span {
+  width: 80%;
+}
+.memberfontcreated {
+  margin-top: 18px;
+}
+.memberfontcreatedbtn {
+  margin-top: 33px;
+  border-radius: 7px;
+  border-color: #31bb6b;
+  background-color: #31bb6b;
+  color: white;
+  padding-right: 10px;
+  padding-left: 10px;
+  justify-content: flex-end;
+  float: right;
+  text-align: right;
+  box-shadow: none;
+}
+#grid_wrapper {
+  align-items: left;
+}
+.peoplelistdiv {
+  margin-right: 50px;
+}
+@media only screen and (max-width: 600px) {
+  .singledetails {
+    margin-left: 20px;
+  }
+  .memberimg {
+    margin: auto;
+  }
+  .singledetails_data_right {
+    margin-right: -52px;
+  }
+  .singledetails_data_left {
+    margin-left: 0px;
+  }
+}
diff --git a/src/components/UserListCard/UserListCard.test.tsx b/src/components/UserListCard/UserListCard.test.tsx
new file mode 100644
index 0000000000..e2ad552507
--- /dev/null
+++ b/src/components/UserListCard/UserListCard.test.tsx
@@ -0,0 +1,81 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+
+import UserListCard from './UserListCard';
+import { ADD_ADMIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import i18nForTest from 'utils/i18nForTest';
+import { BrowserRouter } from 'react-router-dom';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const MOCKS = [
+  {
+    request: {
+      query: ADD_ADMIN_MUTATION,
+      variables: { userid: '784', orgid: '554' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '1',
+          },
+        ],
+      },
+    },
+  },
+];
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing User List Card', () => {
+  global.alert = jest.fn();
+
+  test('Should render props and text elements test for the page component', async () => {
+    const props = {
+      id: '456',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UserListCard key={123} {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByText(/Add Admin/i));
+  });
+
+  test('Should render text elements when props value is not passed', async () => {
+    const props = {
+      id: '456',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UserListCard key={123} {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByText(/Add Admin/i));
+  });
+});
diff --git a/src/components/UserListCard/UserListCard.tsx b/src/components/UserListCard/UserListCard.tsx
new file mode 100644
index 0000000000..76ad110ea1
--- /dev/null
+++ b/src/components/UserListCard/UserListCard.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+
+import { ADD_ADMIN_MUTATION } from 'GraphQl/Mutations/mutations';
+import styles from './UserListCard.module.css';
+import { useParams } from 'react-router-dom';
+import { errorHandler } from 'utils/errorHandler';
+
+interface InterfaceUserListCardProps {
+  key: number;
+  id: string;
+}
+
+/**
+ * The UserListCard component allows for adding a user as an admin in a specific organization.
+ * It uses a button to trigger a mutation for updating the user's role.
+ *
+ * @param props - The properties for the UserListCard component.
+ * @param key - The unique key for the component (although not used here).
+ * @param id - The ID of the user to be promoted to admin.
+ *
+ * @returns The JSX element representing the user list card.
+ */
+function userListCard(props: InterfaceUserListCardProps): JSX.Element {
+  const { orgId: currentUrl } = useParams();
+  const [adda] = useMutation(ADD_ADMIN_MUTATION);
+
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userListCard',
+  });
+
+  /**
+   * Handles adding a user as an admin.
+   * It performs a mutation and handles success or failure accordingly.
+   */
+  const addAdmin = async (): Promise<void> => {
+    try {
+      const { data } = await adda({
+        variables: {
+          userid: props.id,
+          orgid: currentUrl,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('addedAsAdmin') as string);
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  return (
+    <>
+      <Button className={styles.memberfontcreatedbtn} onClick={addAdmin}>
+        {t('addAdmin')}
+      </Button>
+    </>
+  );
+}
+export {};
+export default userListCard;
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.module.css b/src/components/UserPasswordUpdate/UserPasswordUpdate.module.css
new file mode 100644
index 0000000000..90b5c09be3
--- /dev/null
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.module.css
@@ -0,0 +1,97 @@
+/* .userupdatediv{
+  border: 1px solid #e8e5e5;
+  box-shadow: 2px 1px #e8e5e5;
+  padding:25px 16px;
+  border-radius: 5px;
+  background:#fdfdfd;
+} */
+.settingstitle {
+  color: #707070;
+  font-size: 20px;
+  margin-bottom: 30px;
+  text-align: center;
+  margin-top: -10px;
+}
+.dispflex {
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+}
+.dispbtnflex {
+  width: 90%;
+  margin-top: 20px;
+  display: flex;
+  margin: 0 30%;
+}
+.dispflex > div {
+  width: 50%;
+  margin-right: 50px;
+}
+
+.radio_buttons > input {
+  margin-bottom: 20px;
+  border: none;
+  box-shadow: none;
+  padding: 0 0;
+  border-radius: 5px;
+  background: none;
+  width: 50%;
+}
+
+.whitebtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 20px;
+  border-radius: 5px;
+  background: none;
+  width: 20%;
+  font-size: 16px;
+  color: #31bb6b;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  float: left;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  margin-right: 30px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 20%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.radio_buttons {
+  width: 55%;
+  margin-top: 10px;
+  display: flex;
+  color: #707070;
+  font-weight: 600;
+  font-size: 14px;
+}
+.radio_buttons > input {
+  transform: scale(1.2);
+}
+.radio_buttons > label {
+  margin-top: -4px;
+  margin-left: 0px;
+  margin-right: 7px;
+}
+.idtitle {
+  width: 88%;
+}
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
new file mode 100644
index 0000000000..65f5e40f76
--- /dev/null
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.test.tsx
@@ -0,0 +1,143 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { UPDATE_USER_PASSWORD_MUTATION } from 'GraphQl/Mutations/mutations';
+import i18nForTest from 'utils/i18nForTest';
+import UserPasswordUpdate from './UserPasswordUpdate';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast as mockToast } from 'react-toastify';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: UPDATE_USER_PASSWORD_MUTATION,
+      variables: {
+        previousPassword: 'anshgoyal',
+        newPassword: 'anshgoyalansh',
+        confirmNewPassword: 'anshgoyalansh',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            _id: '1',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 5): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing User Password Update', () => {
+  const formData = {
+    previousPassword: 'Palisadoes',
+    newPassword: 'ThePalisadoesFoundation',
+    wrongPassword: 'This is wrong password',
+    confirmNewPassword: 'ThePalisadoesFoundation',
+  };
+
+  global.alert = jest.fn();
+
+  test('should render props and text elements test for the page component', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <UserPasswordUpdate id="1" key="123" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Previous Password/i),
+      formData.previousPassword,
+    );
+    userEvent.type(
+      screen.getAllByPlaceholderText(/New Password/i)[0],
+      formData.newPassword,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Confirm New Password/i),
+      formData.confirmNewPassword,
+    );
+
+    userEvent.click(screen.getByText(/Save Changes/i));
+
+    expect(screen.getByText(/Cancel/i)).toBeTruthy();
+    expect(
+      screen.getByPlaceholderText(/Previous Password/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText(/Confirm New Password/i),
+    ).toBeInTheDocument();
+  });
+
+  test('displays an error when the password field is empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <UserPasswordUpdate id="1" key="123" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByText(/Save Changes/i));
+
+    await wait();
+    expect(mockToast.error).toHaveBeenCalledWith(`Password can't be empty`);
+  });
+
+  test('displays an error when new and confirm password field does not match', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <UserPasswordUpdate id="1" key="123" />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Previous Password/i),
+      formData.previousPassword,
+    );
+    userEvent.type(
+      screen.getAllByPlaceholderText(/New Password/i)[0],
+      formData.wrongPassword,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Confirm New Password/i),
+      formData.confirmNewPassword,
+    );
+
+    userEvent.click(screen.getByText(/Save Changes/i));
+
+    expect(screen.getByText(/Cancel/i)).toBeTruthy();
+    await wait();
+    expect(mockToast.error).toHaveBeenCalledWith(
+      'New and Confirm password do not match.',
+    );
+  });
+});
diff --git a/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
new file mode 100644
index 0000000000..1ea75811c1
--- /dev/null
+++ b/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { useMutation } from '@apollo/client';
+import { UPDATE_USER_PASSWORD_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useTranslation } from 'react-i18next';
+import Button from 'react-bootstrap/Button';
+import styles from './UserPasswordUpdate.module.css';
+import { toast } from 'react-toastify';
+import { Form } from 'react-bootstrap';
+
+interface InterfaceUserPasswordUpdateProps {
+  id: string;
+}
+
+/**
+ * UserUpdate component allows users to update their passwords.
+ * It handles form submission and communicates with the backend to update the user's password.
+ *
+ * @param props - The properties for the UserUpdate component.
+ * @param id - The ID of the user whose password is being updated.
+ *
+ * @returns The JSX element for updating user password.
+ */
+const UserUpdate: React.FC<
+  InterfaceUserPasswordUpdateProps
+> = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userPasswordUpdate',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const [formState, setFormState] = React.useState({
+    previousPassword: '',
+    newPassword: '',
+    confirmNewPassword: '',
+  });
+
+  const [login] = useMutation(UPDATE_USER_PASSWORD_MUTATION);
+
+  /**
+   * Handles the password update process.
+   * It validates the form inputs and performs the mutation to update the password.
+   */
+  const loginLink = async (): Promise<string | void> => {
+    if (
+      !formState.previousPassword ||
+      !formState.newPassword ||
+      !formState.confirmNewPassword
+    ) {
+      toast.error(t('passCantBeEmpty') as string);
+      return;
+    }
+
+    if (formState.newPassword !== formState.confirmNewPassword) {
+      toast.error(t('passNoMatch') as string);
+      return;
+    }
+
+    try {
+      const { data } = await login({
+        variables: {
+          previousPassword: formState.previousPassword,
+          newPassword: formState.newPassword,
+          confirmNewPassword: formState.confirmNewPassword,
+        },
+      });
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(
+          tCommon('updatedSuccessfully', { item: 'Password' }) as string,
+        );
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.toString());
+      }
+    }
+  };
+
+  /**
+   * Handles canceling the update process.
+   * It reloads the page to reset any changes.
+   */
+  /* istanbul ignore next */
+  const cancelUpdate = (): void => {
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <div id="userupdate" className={styles.userupdatediv}>
+        <form>
+          {/* <h3 className={styles.settingstitle}>Update Your Details</h3> */}
+          <div className={styles.dispflex}>
+            <div>
+              <label>{t('previousPassword')}</label>
+              <Form.Control
+                type="password"
+                id="previousPassword"
+                placeholder={t('previousPassword')}
+                autoComplete="off"
+                required
+                value={formState.previousPassword}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    previousPassword: e.target.value,
+                  });
+                }}
+              />
+            </div>
+          </div>
+          <div className={styles.dispflex}>
+            <div>
+              <label>{t('newPassword')}</label>
+              <Form.Control
+                type="password"
+                id="newPassword"
+                placeholder={t('newPassword')}
+                autoComplete="off"
+                required
+                value={formState.newPassword}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    newPassword: e.target.value,
+                  });
+                }}
+              />
+            </div>
+          </div>
+          <div className={styles.dispflex}>
+            <div>
+              <label>{t('confirmNewPassword')}</label>
+              <Form.Control
+                type="password"
+                id="confirmNewPassword"
+                placeholder={t('confirmNewPassword')}
+                autoComplete="off"
+                required
+                value={formState.confirmNewPassword}
+                onChange={(e): void => {
+                  setFormState({
+                    ...formState,
+                    confirmNewPassword: e.target.value,
+                  });
+                }}
+              />
+            </div>
+          </div>
+          <div className={styles.dispbtnflex}>
+            <Button
+              type="button"
+              className={styles.greenregbtn}
+              value="savechanges"
+              onClick={loginLink}
+            >
+              {tCommon('saveChanges')}
+            </Button>
+            <Button
+              type="button"
+              className={styles.whitebtn}
+              value="cancelchanges"
+              onClick={cancelUpdate}
+            >
+              {tCommon('cancel')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+export default UserUpdate;
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.module.css b/src/components/UserPortal/ChatRoom/ChatRoom.module.css
new file mode 100644
index 0000000000..5fc98351cd
--- /dev/null
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.module.css
@@ -0,0 +1,250 @@
+.chatAreaContainer {
+  padding: 10px;
+  flex-grow: 1;
+  /* background-color: rgba(196, 255, 211, 0.3); */
+}
+
+.backgroundWhite {
+  background-color: white;
+}
+
+.grey {
+  color: grey;
+}
+
+.header {
+  position: sticky;
+  top: 0px;
+  background: white;
+}
+
+.userInfo {
+  display: flex;
+  border-bottom: 1px solid black;
+  padding-bottom: 5px;
+  align-items: center;
+  margin-top: 5px;
+  gap: 10px;
+}
+
+.contactImage {
+  width: 45px !important;
+  height: auto !important;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.messageSentContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.messageReceivedContainer {
+  display: flex;
+  align-items: flex-end;
+}
+
+.messageReceived {
+  border: 1px solid #c2c2c2;
+  border-radius: 8px 8px 8px 0px;
+  padding: 4px 6px;
+  margin: 4px 6px;
+  width: fit-content;
+  max-width: 75%;
+  min-width: 80px;
+  padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.messageSent {
+  border: 1px solid #c2c2c2;
+  border-radius: 8px 8px 0px 8px;
+  padding: 4px 6px;
+  margin: 4px 6px;
+  width: fit-content;
+  max-width: 75%;
+  background-color: rgba(196, 255, 211, 0.3);
+  min-width: 80px;
+  padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.userDetails {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  gap: 6px;
+}
+
+.userDetails .userImage {
+  height: 20px;
+  width: 20px;
+}
+
+.replyTo {
+  border-left: 4px solid pink;
+  display: flex;
+  justify-content: space-between;
+  background-color: rgb(249, 249, 250);
+  padding: 6px 0px 4px 4px;
+  border-radius: 6px 6px 6px 6px;
+}
+
+.replyToMessageContainer {
+  padding-left: 4px;
+}
+
+.replyToMessageContainer p {
+  margin: 4px 0px 0px;
+}
+
+.replyToMessage {
+  border-left: 4px solid pink;
+  border-radius: 6px;
+  margin: 6px 0px;
+  padding: 6px;
+  background-color: #dbf6db;
+}
+
+.messageReceived .replyToMessage {
+  background-color: #f2f2f2;
+}
+
+.messageTime {
+  font-size: 10px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin-bottom: 0px;
+  margin-left: 6px;
+}
+
+.messageContent {
+  margin-bottom: 0.5px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.createChat {
+  border: none;
+  background-color: white;
+}
+
+.chatMessages {
+  margin: 10px 0;
+}
+
+.userDetails .subtitle {
+  font-size: 12px;
+  color: #959595;
+  margin: 0;
+}
+
+.userDetails .title {
+  font-size: 18px;
+  margin: 0;
+}
+
+.contactImage {
+  height: fit-content;
+}
+
+.senderInfo {
+  margin: 2px 2px 0px 2px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.messageAttributes {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.customToggle {
+  display: none;
+}
+
+.customToggle,
+.closeBtn {
+  padding: 0;
+  background: none;
+  border: none;
+  --bs-btn-active-bg: none;
+}
+.customToggle svg {
+  color: black;
+  font-size: 12px;
+}
+
+.customToggle::after,
+.closeBtn::after {
+  content: none;
+}
+
+.closeBtn svg {
+  color: black;
+  font-size: 18px;
+}
+
+.closeBtn {
+  padding: 2px 10px;
+}
+
+.closeBtn:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
+  border: none;
+}
+
+.messageReceived:hover .customToggle {
+  display: block;
+}
+
+.messageSent:hover .customToggle {
+  display: block;
+}
+
+.messageSent:hover,
+.messageReceived:hover {
+  padding: 0px 6px;
+}
+
+.messageSent:target {
+  scroll-margin-top: 100px;
+  animation-name: test;
+  animation-duration: 1s;
+}
+
+.messageReceived:target {
+  scroll-margin-top: 100px;
+  animation-name: test;
+  animation-duration: 1s;
+}
+
+@keyframes test {
+  from {
+    background-color: white;
+  }
+  to {
+    background-color: rgb(82, 83, 81);
+  }
+}
+
+a {
+  color: currentColor;
+  width: 100%;
+}
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx b/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
new file mode 100644
index 0000000000..c808485132
--- /dev/null
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.test.tsx
@@ -0,0 +1,1586 @@
+import React from 'react';
+
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { MockSubscriptionLink, MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
+import {
+  MESSAGE_SENT_TO_CHAT,
+  SEND_MESSAGE_TO_CHAT,
+} from 'GraphQl/Mutations/OrganizationMutations';
+import ChatRoom from './ChatRoom';
+import { useLocalStorage } from 'utils/useLocalstorage';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const MESSAGE_SENT_TO_CHAT_MOCK = [
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: null,
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          chatMessageBelongsTo: {
+            _id: '1',
+          },
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '2',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1df364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          chatMessageBelongsTo: {
+            _id: '1',
+          },
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '1',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f13603ac4697a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          chatMessageBelongsTo: {
+            _id: '1',
+          },
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+];
+
+const CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          createdAt: '2345678903456',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          messages: [
+            {
+              _id: '4',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '4',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '4',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const CHATS_LIST_MOCK = [
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dd40fgh03db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844efc814ddgh4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844ghjefc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: 'ujhgtrdtyuiop',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dhjmkdftyd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844ewsedrffc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const GROUP_CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '2',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '1',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '1',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const SEND_MESSAGE_TO_CHAT_MOCK = [
+  {
+    request: {
+      query: SEND_MESSAGE_TO_CHAT,
+      variables: {
+        chatId: '1',
+        replyTo: '4',
+        messageContent: 'Test reply message',
+      },
+    },
+    result: {
+      data: {
+        sendMessageToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SEND_MESSAGE_TO_CHAT,
+      variables: {
+        chatId: '1',
+        replyTo: '4',
+        messageContent: 'Test reply message',
+      },
+    },
+    result: {
+      data: {
+        sendMessageToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SEND_MESSAGE_TO_CHAT,
+      variables: {
+        chatId: '1',
+        replyTo: '1',
+        messageContent: 'Test reply message',
+      },
+    },
+    result: {
+      data: {
+        sendMessageToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SEND_MESSAGE_TO_CHAT,
+      variables: {
+        chatId: '1',
+        replyTo: undefined,
+        messageContent: 'Hello',
+      },
+    },
+    result: {
+      data: {
+        sendMessageToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SEND_MESSAGE_TO_CHAT,
+      variables: {
+        chatId: '1',
+        replyTo: '345678',
+        messageContent: 'Test reply message',
+      },
+    },
+    result: {
+      data: {
+        sendMessageToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SEND_MESSAGE_TO_CHAT,
+      variables: {
+        chatId: '1',
+        replyTo: undefined,
+        messageContent: 'Test message',
+      },
+    },
+    result: {
+      data: {
+        sendMessageToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+];
+
+describe('Testing Chatroom Component [User Portal]', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+  test('Chat room should display fallback content if no chat is active', async () => {
+    const mocks = [
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mocks}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(await screen.findByTestId('noChatSelected')).toBeInTheDocument();
+  });
+
+  test('Selected contact is direct chat', async () => {
+    const link = new MockSubscriptionLink();
+    const mocks = [
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mocks} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="1" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('send message direct chat', async () => {
+    setItem('userId', '2');
+    const mocks = [
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    const link2 = new StaticMockLink(mocks, true);
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="1" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const input = (await screen.findByTestId(
+      'messageInput',
+    )) as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Hello' } });
+    });
+    expect(input.value).toBe('Hello');
+
+    const sendBtn = await screen.findByTestId('sendMessage');
+
+    expect(sendBtn).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+    await waitFor(() => {
+      expect(input.value).toBeFalsy();
+    });
+
+    const messages = await screen.findAllByTestId('message');
+
+    console.log('MESSAGES', messages);
+
+    expect(messages.length).not.toBe(0);
+
+    act(() => {
+      fireEvent.mouseOver(messages[0]);
+    });
+
+    await waitFor(async () => {
+      expect(await screen.findByTestId('moreOptions')).toBeInTheDocument();
+    });
+
+    const moreOptionsBtn = await screen.findByTestId('dropdown');
+    act(() => {
+      fireEvent.click(moreOptionsBtn);
+    });
+
+    const replyBtn = await screen.findByTestId('replyBtn');
+
+    act(() => {
+      fireEvent.click(replyBtn);
+    });
+
+    const replyMsg = await screen.findByTestId('replyMsg');
+
+    await waitFor(() => {
+      expect(replyMsg).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Test reply message' } });
+    });
+    expect(input.value).toBe('Test reply message');
+
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+
+    await wait(400);
+  });
+
+  test('send message direct chat when userId is different', async () => {
+    setItem('userId', '8');
+    const mocks = [
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    const link2 = new StaticMockLink(mocks, true);
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="1" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const input = (await screen.findByTestId(
+      'messageInput',
+    )) as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Hello' } });
+    });
+    expect(input.value).toBe('Hello');
+
+    const sendBtn = await screen.findByTestId('sendMessage');
+
+    expect(sendBtn).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+    await waitFor(() => {
+      expect(input.value).toBeFalsy();
+    });
+
+    const messages = await screen.findAllByTestId('message');
+
+    console.log('MESSAGES', messages);
+
+    expect(messages.length).not.toBe(0);
+
+    act(() => {
+      fireEvent.mouseOver(messages[0]);
+    });
+
+    await waitFor(async () => {
+      expect(await screen.findByTestId('moreOptions')).toBeInTheDocument();
+    });
+
+    const moreOptionsBtn = await screen.findByTestId('dropdown');
+    act(() => {
+      fireEvent.click(moreOptionsBtn);
+    });
+
+    const replyBtn = await screen.findByTestId('replyBtn');
+
+    act(() => {
+      fireEvent.click(replyBtn);
+    });
+
+    const replyMsg = await screen.findByTestId('replyMsg');
+
+    await waitFor(() => {
+      expect(replyMsg).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Test reply message' } });
+    });
+    expect(input.value).toBe('Test reply message');
+
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+
+    await wait(400);
+  });
+
+  test('Selected contact is group chat', async () => {
+    const mocks = [
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mocks}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="1" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('send message group chat', async () => {
+    const mocks = [
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mocks}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="1" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const input = (await screen.findByTestId(
+      'messageInput',
+    )) as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Test message' } });
+    });
+    expect(input.value).toBe('Test message');
+
+    const sendBtn = await screen.findByTestId('sendMessage');
+
+    expect(sendBtn).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+    await waitFor(() => {
+      expect(input.value).toBeFalsy();
+    });
+
+    const messages = await screen.findAllByTestId('message');
+
+    expect(messages.length).not.toBe(0);
+
+    act(() => {
+      fireEvent.mouseOver(messages[0]);
+    });
+
+    expect(await screen.findByTestId('moreOptions')).toBeInTheDocument();
+
+    const moreOptionsBtn = await screen.findByTestId('dropdown');
+    act(() => {
+      fireEvent.click(moreOptionsBtn);
+    });
+
+    const replyBtn = await screen.findByTestId('replyBtn');
+
+    act(() => {
+      fireEvent.click(replyBtn);
+    });
+
+    const replyMsg = await screen.findByTestId('replyMsg');
+
+    await waitFor(() => {
+      expect(replyMsg).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Test reply message' } });
+    });
+    expect(input.value).toBe('Test reply message');
+
+    const closeReplyBtn = await screen.findByTestId('closeReply');
+
+    expect(closeReplyBtn).toBeInTheDocument();
+
+    fireEvent.click(closeReplyBtn);
+
+    await wait(500);
+  });
+
+  test('reply to message', async () => {
+    const mocks = [
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...SEND_MESSAGE_TO_CHAT_MOCK,
+    ];
+    const link2 = new StaticMockLink(mocks, true);
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ChatRoom selectedContact="1" />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const input = (await screen.findByTestId(
+      'messageInput',
+    )) as HTMLInputElement;
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Test message' } });
+    });
+    expect(input.value).toBe('Test message');
+
+    const sendBtn = await screen.findByTestId('sendMessage');
+
+    expect(sendBtn).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+    await waitFor(() => {
+      expect(input.value).toBeFalsy();
+    });
+
+    const messages = await screen.findAllByTestId('message');
+
+    expect(messages.length).not.toBe(0);
+
+    act(() => {
+      fireEvent.mouseOver(messages[0]);
+    });
+
+    expect(await screen.findByTestId('moreOptions')).toBeInTheDocument();
+
+    const moreOptionsBtn = await screen.findByTestId('dropdown');
+    act(() => {
+      fireEvent.click(moreOptionsBtn);
+    });
+
+    const replyBtn = await screen.findByTestId('replyBtn');
+
+    act(() => {
+      fireEvent.click(replyBtn);
+    });
+
+    const replyMsg = await screen.findByTestId('replyMsg');
+
+    await waitFor(() => {
+      expect(replyMsg).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'Test reply message' } });
+    });
+    expect(input.value).toBe('Test reply message');
+
+    act(() => {
+      fireEvent.click(sendBtn);
+    });
+
+    await wait(400);
+  });
+});
diff --git a/src/components/UserPortal/ChatRoom/ChatRoom.tsx b/src/components/UserPortal/ChatRoom/ChatRoom.tsx
new file mode 100644
index 0000000000..c23244a314
--- /dev/null
+++ b/src/components/UserPortal/ChatRoom/ChatRoom.tsx
@@ -0,0 +1,378 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { ChangeEvent } from 'react';
+import SendIcon from '@mui/icons-material/Send';
+import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap';
+import styles from './ChatRoom.module.css';
+import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
+import { useTranslation } from 'react-i18next';
+import { CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
+import { useMutation, useQuery, useSubscription } from '@apollo/client';
+import {
+  MESSAGE_SENT_TO_CHAT,
+  SEND_MESSAGE_TO_CHAT,
+} from 'GraphQl/Mutations/OrganizationMutations';
+import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
+import { MoreVert, Close } from '@mui/icons-material';
+
+interface InterfaceChatRoomProps {
+  selectedContact: string;
+}
+
+/**
+ * A chat room component that displays messages and a message input field.
+ *
+ * This component shows a list of messages between the user and a selected contact.
+ * If no contact is selected, it displays a placeholder with an icon and a message asking the user to select a contact.
+ *
+ * @param  props - The properties passed to the component.
+ * @param selectedContact - The ID or name of the currently selected contact. If empty, a placeholder is shown.
+ *
+ * @returns The rendered chat room component.
+ */
+
+type DirectMessage = {
+  _id: string;
+  createdAt: Date;
+  sender: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    image: string;
+  };
+  replyTo:
+    | {
+        _id: string;
+        createdAt: Date;
+        sender: {
+          _id: string;
+          firstName: string;
+          lastName: string;
+          image: string;
+        };
+        messageContent: string;
+        receiver: {
+          _id: string;
+          firstName: string;
+          lastName: string;
+        };
+      }
+    | undefined;
+  messageContent: string;
+  type: string;
+};
+
+type Chat = {
+  _id: string;
+  isGroup: boolean;
+  name?: string;
+  image?: string;
+  messages: DirectMessage[];
+  users: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }[];
+};
+
+export default function chatRoom(props: InterfaceChatRoomProps): JSX.Element {
+  // Translation hook for text in different languages
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userChatRoom',
+  });
+  const isMountedRef = useRef<boolean>(true);
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+  const [chatTitle, setChatTitle] = useState('');
+  const [chatSubtitle, setChatSubtitle] = useState('');
+  const [newMessage, setNewMessage] = useState('');
+  const [chat, setChat] = useState<Chat>();
+  const [replyToDirectMessage, setReplyToDirectMessage] =
+    useState<DirectMessage | null>(null);
+
+  /**
+   * Handles changes to the new message input field.
+   *
+   * Updates the state with the current value of the input field whenever it changes.
+   *
+   * @param e - The event triggered by the input field change.
+   */
+  const handleNewMessageChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const newMessageValue = e.target.value;
+    setNewMessage(newMessageValue);
+  };
+
+  const [sendMessageToChat] = useMutation(SEND_MESSAGE_TO_CHAT, {
+    variables: {
+      chatId: props.selectedContact,
+      replyTo: replyToDirectMessage?._id,
+      messageContent: newMessage,
+    },
+  });
+
+  const { data: chatData, refetch: chatRefetch } = useQuery(CHAT_BY_ID, {
+    variables: {
+      id: props.selectedContact,
+    },
+  });
+
+  useEffect(() => {
+    chatRefetch();
+  }, [props.selectedContact]);
+
+  useEffect(() => {
+    if (chatData) {
+      const chat = chatData.chatById;
+      setChat(chat);
+      if (chat.isGroup) {
+        setChatTitle(chat.name);
+        setChatSubtitle(`${chat.users.length} members`);
+      } else {
+        const otherUser = chat.users.find(
+          (user: { _id: string }) => user._id !== userId,
+        );
+        if (otherUser) {
+          setChatTitle(`${otherUser.firstName} ${otherUser.lastName}`);
+          setChatSubtitle(otherUser.email);
+        }
+      }
+    }
+  }, [chatData]);
+
+  const sendMessage = async (): Promise<void> => {
+    await sendMessageToChat();
+    await chatRefetch();
+    setReplyToDirectMessage(null);
+    setNewMessage('');
+  };
+
+  useSubscription(MESSAGE_SENT_TO_CHAT, {
+    variables: {
+      userId: userId,
+    },
+    onData: (messageSubscriptionData) => {
+      if (
+        messageSubscriptionData?.data.data.messageSentToChat &&
+        messageSubscriptionData?.data.data.messageSentToChat
+          .chatMessageBelongsTo['_id'] == props.selectedContact
+      ) {
+        chatRefetch();
+      } else {
+        chatRefetch({
+          id: messageSubscriptionData?.data.data.messageSentToChat
+            .chatMessageBelongsTo['_id'],
+        });
+      }
+    },
+  });
+
+  useEffect(() => {
+    document
+      .getElementById('chat-area')
+      ?.lastElementChild?.scrollIntoView({ block: 'end' });
+  });
+
+  return (
+    <div
+      className={`d-flex flex-column ${styles.chatAreaContainer}`}
+      id="chat-area"
+    >
+      {!props.selectedContact ? (
+        <div
+          className={`d-flex flex-column justify-content-center align-items-center w-100 h-75 gap-2 ${styles.grey}`}
+        >
+          <PermContactCalendarIcon fontSize="medium" className={styles.grey} />
+          <h6 data-testid="noChatSelected">{t('selectContact')}</h6>
+        </div>
+      ) : (
+        <>
+          <div className={styles.header}>
+            <div className={styles.userInfo}>
+              <Avatar
+                name={chatTitle}
+                alt={chatTitle}
+                avatarStyle={styles.contactImage}
+              />
+              <div className={styles.userDetails}>
+                <p className={styles.title}>{chatTitle}</p>
+                <p className={styles.subtitle}>{chatSubtitle}</p>
+              </div>
+            </div>
+          </div>
+          <div className={`d-flex flex-grow-1 flex-column`}>
+            <div className={styles.chatMessages}>
+              {!!chat?.messages.length && (
+                <div id="messages">
+                  {chat?.messages.map((message: DirectMessage) => {
+                    return (
+                      <div
+                        className={
+                          message.sender._id === userId
+                            ? styles.messageSentContainer
+                            : styles.messageReceivedContainer
+                        }
+                        key={message._id}
+                      >
+                        {chat.isGroup &&
+                          message.sender._id !== userId &&
+                          (message.sender?.image ? (
+                            <img
+                              src={message.sender.image}
+                              alt={message.sender.image}
+                              className={styles.contactImage}
+                            />
+                          ) : (
+                            <Avatar
+                              name={
+                                message.sender.firstName +
+                                ' ' +
+                                message.sender.lastName
+                              }
+                              alt={
+                                message.sender.firstName +
+                                ' ' +
+                                message.sender.lastName
+                              }
+                              avatarStyle={styles.contactImage}
+                            />
+                          ))}
+                        <div
+                          className={
+                            message.sender._id === userId
+                              ? styles.messageSent
+                              : styles.messageReceived
+                          }
+                          data-testid="message"
+                          key={message._id}
+                          id={message._id}
+                        >
+                          <span className={styles.messageContent}>
+                            {chat.isGroup && message.sender._id !== userId && (
+                              <p className={styles.senderInfo}>
+                                {message.sender.firstName +
+                                  ' ' +
+                                  message.sender.lastName}
+                              </p>
+                            )}
+                            {message.replyTo && (
+                              <a href={`#${message.replyTo._id}`}>
+                                <div className={styles.replyToMessage}>
+                                  <p className={styles.senderInfo}>
+                                    {message.replyTo.sender.firstName +
+                                      ' ' +
+                                      message.replyTo.sender.lastName}
+                                  </p>
+                                  <span>{message.replyTo.messageContent}</span>
+                                </div>
+                              </a>
+                            )}
+                            {message.messageContent}
+                          </span>
+                          <div className={styles.messageAttributes}>
+                            <Dropdown
+                              data-testid="moreOptions"
+                              style={{ cursor: 'pointer' }}
+                            >
+                              <Dropdown.Toggle
+                                className={styles.customToggle}
+                                data-testid={'dropdown'}
+                              >
+                                <MoreVert />
+                              </Dropdown.Toggle>
+                              <Dropdown.Menu>
+                                <Dropdown.Item
+                                  onClick={() => {
+                                    setReplyToDirectMessage(message);
+                                  }}
+                                  data-testid="replyBtn"
+                                >
+                                  Reply
+                                </Dropdown.Item>
+                              </Dropdown.Menu>
+                            </Dropdown>
+                            <span className={styles.messageTime}>
+                              {new Date(message?.createdAt).toLocaleTimeString(
+                                'it-IT',
+                                {
+                                  hour: '2-digit',
+                                  minute: '2-digit',
+                                },
+                              )}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+          <div id="messageInput">
+            {!!replyToDirectMessage?._id && (
+              <div data-testid="replyMsg" className={styles.replyTo}>
+                <div className={styles.replyToMessageContainer}>
+                  <div className={styles.userDetails}>
+                    <Avatar
+                      name={
+                        replyToDirectMessage.sender.firstName +
+                        ' ' +
+                        replyToDirectMessage.sender.lastName
+                      }
+                      alt={
+                        replyToDirectMessage.sender.firstName +
+                        ' ' +
+                        replyToDirectMessage.sender.lastName
+                      }
+                      avatarStyle={styles.userImage}
+                    />
+                    <span>
+                      {replyToDirectMessage.sender.firstName +
+                        ' ' +
+                        replyToDirectMessage.sender.lastName}
+                    </span>
+                  </div>
+                  <p>{replyToDirectMessage.messageContent}</p>
+                </div>
+
+                <Button
+                  data-testid="closeReply"
+                  onClick={() => setReplyToDirectMessage(null)}
+                  className={styles.closeBtn}
+                >
+                  <Close />
+                </Button>
+              </div>
+            )}
+            <InputGroup>
+              <Form.Control
+                placeholder={t('sendMessage')}
+                aria-label="Send Message"
+                value={newMessage}
+                data-testid="messageInput"
+                onChange={handleNewMessageChange}
+                className={styles.backgroundWhite}
+              />
+              <Button
+                onClick={sendMessage}
+                variant="primary"
+                id="button-send"
+                data-testid="sendMessage"
+              >
+                <SendIcon fontSize="small" />
+              </Button>
+            </InputGroup>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/UserPortal/CommentCard/CommentCard.module.css b/src/components/UserPortal/CommentCard/CommentCard.module.css
new file mode 100644
index 0000000000..b765d60bbd
--- /dev/null
+++ b/src/components/UserPortal/CommentCard/CommentCard.module.css
@@ -0,0 +1,44 @@
+.mainContainer {
+  width: auto;
+  overflow: hidden;
+  background-color: white;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  border: 1px solid #dddddd;
+  border-radius: 10px;
+}
+
+.personDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.personImage {
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.cardActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.cardActionBtn {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  color: black;
+}
+
+.cardActionBtn:hover {
+  background-color: ghostwhite;
+  border: none;
+  color: green !important;
+}
+
+.likeIcon {
+  width: 20px;
+}
diff --git a/src/components/UserPortal/CommentCard/CommentCard.test.tsx b/src/components/UserPortal/CommentCard/CommentCard.test.tsx
new file mode 100644
index 0000000000..f02e5a606a
--- /dev/null
+++ b/src/components/UserPortal/CommentCard/CommentCard.test.tsx
@@ -0,0 +1,241 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import CommentCard from './CommentCard';
+import userEvent from '@testing-library/user-event';
+import { LIKE_COMMENT, UNLIKE_COMMENT } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { getItem, setItem } = useLocalStorage();
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const MOCKS = [
+  {
+    request: {
+      query: LIKE_COMMENT,
+      variables: {
+        commentId: '1',
+      },
+      result: {
+        data: {
+          likeComment: {
+            _id: '1',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UNLIKE_COMMENT,
+      variables: {
+        commentId: '1',
+      },
+      result: {
+        data: {
+          unlikeComment: {
+            _id: '1',
+          },
+        },
+      },
+    },
+  },
+];
+
+const handleLikeComment = jest.fn();
+const handleDislikeComment = jest.fn();
+const link = new StaticMockLink(MOCKS, true);
+
+describe('Testing CommentCard Component [User Portal]', () => {
+  afterEach(async () => {
+    await act(async () => {
+      await i18nForTest.changeLanguage('en');
+    });
+  });
+
+  test('Component should be rendered properly if comment is already liked by the user.', async () => {
+    const cardProps = {
+      id: '1',
+      creator: {
+        id: '1',
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+      },
+      likeCount: 1,
+      likedBy: [
+        {
+          id: '1',
+        },
+      ],
+      text: 'testComment',
+      handleLikeComment: handleLikeComment,
+      handleDislikeComment: handleDislikeComment,
+    };
+
+    const beforeUserId = getItem('userId');
+    setItem('userId', '2');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <CommentCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test('Component should be rendered properly if comment is not already liked by the user.', async () => {
+    const cardProps = {
+      id: '1',
+      creator: {
+        id: '1',
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+      },
+      likeCount: 1,
+      likedBy: [
+        {
+          id: '1',
+        },
+      ],
+      text: 'testComment',
+      handleLikeComment: handleLikeComment,
+      handleDislikeComment: handleDislikeComment,
+    };
+
+    const beforeUserId = getItem('userId');
+    setItem('userId', '1');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <CommentCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test('Component renders as expected if user likes the comment.', async () => {
+    const cardProps = {
+      id: '1',
+      creator: {
+        id: '1',
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+      },
+      likeCount: 1,
+      likedBy: [
+        {
+          id: '1',
+        },
+      ],
+      text: 'testComment',
+      handleLikeComment: handleLikeComment,
+      handleDislikeComment: handleDislikeComment,
+    };
+
+    const beforeUserId = getItem('userId');
+    setItem('userId', '2');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <CommentCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('likeCommentBtn'));
+
+    await wait();
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test('Component renders as expected if user unlikes the comment.', async () => {
+    const cardProps = {
+      id: '1',
+      creator: {
+        id: '1',
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+      },
+      likeCount: 1,
+      likedBy: [
+        {
+          id: '1',
+        },
+      ],
+      text: 'testComment',
+      handleLikeComment: handleLikeComment,
+      handleDislikeComment: handleDislikeComment,
+    };
+
+    const beforeUserId = getItem('userId');
+    setItem('userId', '1');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <CommentCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('likeCommentBtn'));
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+});
diff --git a/src/components/UserPortal/CommentCard/CommentCard.tsx b/src/components/UserPortal/CommentCard/CommentCard.tsx
new file mode 100644
index 0000000000..9e8c46d241
--- /dev/null
+++ b/src/components/UserPortal/CommentCard/CommentCard.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import styles from './CommentCard.module.css';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import { useMutation } from '@apollo/client';
+import { LIKE_COMMENT, UNLIKE_COMMENT } from 'GraphQl/Mutations/mutations';
+import { toast } from 'react-toastify';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAlt';
+import useLocalStorage from 'utils/useLocalstorage';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+
+interface InterfaceCommentCardProps {
+  id: string;
+  creator: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+  likeCount: number;
+  likedBy: {
+    id: string;
+  }[];
+  text: string;
+  handleLikeComment: (commentId: string) => void;
+  handleDislikeComment: (commentId: string) => void;
+}
+
+/**
+ * Displays a card for a single comment with options to like or dislike the comment.
+ *
+ * Shows the commenter's name, the comment text, and the number of likes.
+ * Allows the user to like or dislike the comment. The button icon changes based on whether the comment is liked by the user.
+ *
+ * @param  props - The properties passed to the component.
+ * @param  id - The unique identifier of the comment.
+ * @param  creator - Information about the creator of the comment.
+ * @param  id - The unique identifier of the creator.
+ * @param  firstName - The first name of the creator.
+ * @param  lastName - The last name of the creator.
+ * @param  email - The email address of the creator.
+ * @param  likeCount - The current number of likes for the comment.
+ * @param  likedBy - An array of users who have liked the comment.
+ * @param  text - The text content of the comment.
+ * @param  handleLikeComment - Function to call when the user likes the comment.
+ * @param  handleDislikeComment - Function to call when the user dislikes the comment.
+ *
+ * @returns The rendered comment card component.
+ */
+function commentCard(props: InterfaceCommentCardProps): JSX.Element {
+  // Full name of the comment creator
+  const creatorName = `${props.creator.firstName} ${props.creator.lastName}`;
+
+  // Hook to get user ID from local storage
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  // Check if the current user has liked the comment
+  const likedByUser = props.likedBy.some((likedBy) => likedBy.id === userId);
+
+  // State to track the number of likes and if the comment is liked by the user
+  const [likes, setLikes] = React.useState(props.likeCount);
+  const [isLikedByUser, setIsLikedByUser] = React.useState(likedByUser);
+
+  // Mutation hooks for liking and unliking comments
+  const [likeComment, { loading: likeLoading }] = useMutation(LIKE_COMMENT);
+  const [unlikeComment, { loading: unlikeLoading }] =
+    useMutation(UNLIKE_COMMENT);
+
+  /**
+   * Toggles the like status of the comment.
+   *
+   * If the comment is already liked by the user, it will be unliked. Otherwise, it will be liked.
+   * Updates the number of likes and the like status accordingly.
+   *
+   * @returns  A promise that resolves when the like/unlike operation is complete.
+   */
+  const handleToggleLike = async (): Promise<void> => {
+    if (isLikedByUser) {
+      try {
+        const { data } = await unlikeComment({
+          variables: {
+            commentId: props.id,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          setLikes((likes) => likes - 1);
+          setIsLikedByUser(false);
+          props.handleDislikeComment(props.id);
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        toast.error(error as string);
+      }
+    } else {
+      try {
+        const { data } = await likeComment({
+          variables: {
+            commentId: props.id,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          setLikes((likes) => likes + 1);
+          setIsLikedByUser(true);
+          props.handleLikeComment(props.id);
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        toast.error(error as string);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.personDetails}>
+        <div className="d-flex align-items-center gap-2">
+          <AccountCircleIcon className="my-2" />
+          <b>{creatorName}</b>
+        </div>
+        <span>{props.text}</span>
+        <div className={`${styles.cardActions}`}>
+          <Button
+            className={`${styles.cardActionBtn}`}
+            onClick={handleToggleLike}
+            data-testid={'likeCommentBtn'}
+            size="sm"
+          >
+            {likeLoading || unlikeLoading ? (
+              <HourglassBottomIcon fontSize="small" />
+            ) : isLikedByUser ? (
+              <ThumbUpIcon fontSize="small" />
+            ) : (
+              <ThumbUpOffAltIcon fontSize="small" />
+            )}
+          </Button>
+          {`${likes} Likes`}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default commentCard;
diff --git a/src/components/UserPortal/ContactCard/ContactCard.module.css b/src/components/UserPortal/ContactCard/ContactCard.module.css
new file mode 100644
index 0000000000..19d66596c9
--- /dev/null
+++ b/src/components/UserPortal/ContactCard/ContactCard.module.css
@@ -0,0 +1,37 @@
+.contact {
+  display: flex;
+  flex-direction: row;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 10px;
+  /* margin-bottom: 10px; */
+  /* border: 2px solid #f5f5f5; */
+}
+
+.contactImage {
+  width: 45px !important;
+  height: auto !important;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.contactNameContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px;
+  justify-content: center;
+}
+
+.grey {
+  color: grey;
+}
+
+.bgGreen {
+  background-color: rgba(196, 255, 211, 0.3);
+}
+
+.bgWhite {
+  background-color: white;
+}
diff --git a/src/components/UserPortal/ContactCard/ContactCard.test.tsx b/src/components/UserPortal/ContactCard/ContactCard.test.tsx
new file mode 100644
index 0000000000..05a6a0a530
--- /dev/null
+++ b/src/components/UserPortal/ContactCard/ContactCard.test.tsx
@@ -0,0 +1,119 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import ContactCard from './ContactCard';
+import userEvent from '@testing-library/user-event';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+let props = {
+  id: '1',
+  title: 'Disha Talreja',
+  subtitle: 'disha@example.com',
+  email: 'noble@mittal.com',
+  isGroup: false,
+  image: '',
+  selectedContact: '',
+  type: '',
+  setSelectedContact: jest.fn(),
+  setSelectedChatType: jest.fn(),
+};
+
+describe('Testing ContactCard Component [User Portal]', () => {
+  test('Component should be rendered properly  if person image is undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Component should be rendered properly if person image is not undefined', async () => {
+    props = {
+      ...props,
+      image: 'personImage',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Contact gets selectected when component is clicked', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('contactContainer'));
+
+    await wait();
+  });
+
+  test('Component is rendered with background color grey if the contact is selected', async () => {
+    props = {
+      ...props,
+      selectedContact: '1',
+      isGroup: true,
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ContactCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('contactContainer'));
+
+    await wait();
+  });
+});
diff --git a/src/components/UserPortal/ContactCard/ContactCard.tsx b/src/components/UserPortal/ContactCard/ContactCard.tsx
new file mode 100644
index 0000000000..ef6bf2c9d5
--- /dev/null
+++ b/src/components/UserPortal/ContactCard/ContactCard.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import styles from './ContactCard.module.css';
+import Avatar from 'components/Avatar/Avatar';
+
+interface InterfaceContactCardProps {
+  id: string;
+  title: string;
+  image: string;
+  selectedContact: string;
+  setSelectedContact: React.Dispatch<React.SetStateAction<string>>;
+  isGroup: boolean;
+}
+
+/**
+ * Displays a card for a contact in a contact list.
+ *
+ * Shows the contact's name, email, and an image or avatar.
+ * The card changes background color based on whether it is selected.
+ * Clicking on the card sets it as the selected contact and updates the contact name.
+ *
+ * @param  props - The properties passed to the component.
+ * @param  id - The unique identifier of the contact.
+ * @param  firstName - The first name of the contact.
+ * @param  lastName - The last name of the contact.
+ * @param  email - The email address of the contact.
+ * @param  image - The URL of the contact's image.
+ * @param  selectedContact - The ID of the currently selected contact.
+ * @param  setSelectedContact - Function to set the ID of the selected contact.
+ * @param  setSelectedContactName - Function to set the name of the selected contact.
+ *
+ * @returns  The rendered contact card component.
+ */
+function contactCard(props: InterfaceContactCardProps): JSX.Element {
+  const handleSelectedContactChange = (): void => {
+    props.setSelectedContact(props.id);
+  };
+  const [isSelected, setIsSelected] = React.useState(
+    props.selectedContact === props.id,
+  );
+
+  // Update selection state when the selected contact changes
+  React.useEffect(() => {
+    setIsSelected(props.selectedContact === props.id);
+  }, [props.selectedContact]);
+
+  return (
+    <>
+      <div
+        className={`${styles.contact} ${
+          isSelected ? styles.bgGreen : styles.bgWhite
+        }`}
+        onClick={handleSelectedContactChange}
+        data-testid="contactContainer"
+      >
+        {props.image ? (
+          <img
+            src={props.image}
+            alt={props.title}
+            className={styles.contactImage}
+          />
+        ) : (
+          <Avatar
+            name={props.title}
+            alt={props.title}
+            avatarStyle={styles.contactImage}
+          />
+        )}
+        <div className={styles.contactNameContainer}>
+          <b>{props.title}</b>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default contactCard;
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css
new file mode 100644
index 0000000000..3795e402fa
--- /dev/null
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.module.css
@@ -0,0 +1,9 @@
+.userData {
+  height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden !important;
+}
+
+.modalContent {
+  width: 530px;
+}
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
new file mode 100644
index 0000000000..d8b3466207
--- /dev/null
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.test.tsx
@@ -0,0 +1,1496 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { USERS_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import Chat from '../../../screens/UserPortal/Chat/Chat';
+import {
+  CREATE_CHAT,
+  MESSAGE_SENT_TO_CHAT,
+} from 'GraphQl/Mutations/OrganizationMutations';
+import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const UserConnectionListMock = [
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              firstName: 'Deanne',
+              lastName: 'Marks',
+              image: null,
+              _id: '6589389d2caa9d8d69087487',
+              email: 'testuser8@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              organizationsBlockedBy: [],
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Queens',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Coffee Street',
+                    line2: 'Apartment 501',
+                    postalCode: '11427',
+                    sortingCode: 'ABC-133',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6637904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Staten Island',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 church Street',
+                    line2: 'Apartment 499',
+                    postalCode: '10301',
+                    sortingCode: 'ABC-122',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6737904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Brooklyn',
+                    countryCode: 'US',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Main Street',
+                    line2: 'Apt 456',
+                    postalCode: '10004',
+                    sortingCode: 'ABC-789',
+                    state: 'NY',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6437904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Bronx',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Random Street',
+                    line2: 'Apartment 456',
+                    postalCode: '10451',
+                    sortingCode: 'ABC-123',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+            appUserProfile: {
+              _id: '64378abd85308f171cf2993d',
+              adminFor: [],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+              __typename: 'AppUserProfile',
+            },
+            __typename: 'UserData',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: 'Disha',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              firstName: 'Deanne',
+              lastName: 'Marks',
+              image: null,
+              _id: '6589389d2caa9d8d69087487',
+              email: 'testuser8@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              organizationsBlockedBy: [],
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Queens',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Coffee Street',
+                    line2: 'Apartment 501',
+                    postalCode: '11427',
+                    sortingCode: 'ABC-133',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6637904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Staten Island',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 church Street',
+                    line2: 'Apartment 499',
+                    postalCode: '10301',
+                    sortingCode: 'ABC-122',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6737904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Brooklyn',
+                    countryCode: 'US',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Main Street',
+                    line2: 'Apt 456',
+                    postalCode: '10004',
+                    sortingCode: 'ABC-789',
+                    state: 'NY',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6437904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Bronx',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Random Street',
+                    line2: 'Apartment 456',
+                    postalCode: '10451',
+                    sortingCode: 'ABC-123',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+            appUserProfile: {
+              _id: '64378abd85308f171cf2993d',
+              adminFor: [],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+              __typename: 'AppUserProfile',
+            },
+            __typename: 'UserData',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const MESSAGE_SENT_TO_CHAT_MOCK = [
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: null,
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          type: 'STRING',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '2',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1df364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          type: 'STRING',
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '1',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f13603ac4697a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          type: 'STRING',
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+];
+
+const CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          createdAt: '2345678903456',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const CHATS_LIST_MOCK = [
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dd40fgh03db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844efc814ddgh4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844ghjefc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: 'ujhgtrdtyuiop',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dhjmkdftyd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844ewsedrffc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dhjmkdftyd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844ewsedrffc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const GROUP_CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const CREATE_CHAT_MUTATION_MOCK = [
+  {
+    request: {
+      query: CREATE_CHAT,
+      variables: {
+        organizationId: undefined,
+        userIds: ['1', '6589389d2caa9d8d69087487'],
+        isGroup: false,
+      },
+    },
+    result: {
+      data: {
+        createChat: {
+          _id: '1',
+          createdAt: '2345678903456',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Create Direct Chat Modal [User Portal]', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('Open and close create new direct chat modal', async () => {
+    const mock = [
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...CHATS_LIST_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CREATE_CHAT_MUTATION_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+    const newDirectChatBtn = await screen.findByTestId('newDirectChat');
+    expect(newDirectChatBtn).toBeInTheDocument();
+    fireEvent.click(newDirectChatBtn);
+
+    const submitBtn = await screen.findByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+
+    const searchInput = (await screen.findByTestId(
+      'searchUser',
+    )) as HTMLInputElement;
+    expect(searchInput).toBeInTheDocument();
+
+    fireEvent.change(searchInput, { target: { value: 'Disha' } });
+
+    expect(searchInput.value).toBe('Disha');
+
+    fireEvent.click(submitBtn);
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+  });
+
+  test('create new direct chat', async () => {
+    setItem('userId', '1');
+    const mock = [
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...CHATS_LIST_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CREATE_CHAT_MUTATION_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+    const newDirectChatBtn = await screen.findByTestId('newDirectChat');
+    expect(newDirectChatBtn).toBeInTheDocument();
+    fireEvent.click(newDirectChatBtn);
+
+    const addBtn = await screen.findAllByTestId('addBtn');
+    waitFor(() => {
+      expect(addBtn[0]).toBeInTheDocument();
+    });
+
+    fireEvent.click(addBtn[0]);
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+
+    await new Promise(process.nextTick);
+
+    await wait();
+  });
+});
diff --git a/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
new file mode 100644
index 0000000000..24c853fcdd
--- /dev/null
+++ b/src/components/UserPortal/CreateDirectChat/CreateDirectChat.tsx
@@ -0,0 +1,205 @@
+import { Paper, TableBody } from '@mui/material';
+import React, { useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import styles from './CreateDirectChat.module.css';
+import type { ApolloQueryResult } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
+import useLocalStorage from 'utils/useLocalstorage';
+import { CREATE_CHAT } from 'GraphQl/Mutations/OrganizationMutations';
+import Table from '@mui/material/Table';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { styled } from '@mui/material/styles';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+import { USERS_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+import Loader from 'components/Loader/Loader';
+import { Search } from '@mui/icons-material';
+import { useParams } from 'react-router-dom';
+
+interface InterfaceCreateDirectChatProps {
+  toggleCreateDirectChatModal: () => void;
+  createDirectChatModalisOpen: boolean;
+  chatsListRefetch: (
+    variables?:
+      | Partial<{
+          id: string;
+        }>
+      | undefined,
+  ) => Promise<ApolloQueryResult<string>>;
+}
+
+/**
+ * Styled table cell with custom styles.
+ */
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: ['#31bb6b', '!important'],
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+/**
+ * Styled table row with custom styles.
+ */
+
+const StyledTableRow = styled(TableRow)(() => ({
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+const { getItem } = useLocalStorage();
+
+export default function createDirectChatModal({
+  toggleCreateDirectChatModal,
+  createDirectChatModalisOpen,
+  chatsListRefetch,
+}: InterfaceCreateDirectChatProps): JSX.Element {
+  const { orgId: organizationId } = useParams();
+
+  const userId: string | null = getItem('userId');
+
+  const [userName, setUserName] = useState('');
+
+  const [createChat] = useMutation(CREATE_CHAT);
+
+  const handleCreateDirectChat = async (id: string): Promise<void> => {
+    await createChat({
+      variables: {
+        organizationId,
+        userIds: [userId, id],
+        isGroup: false,
+      },
+    });
+    await chatsListRefetch();
+    toggleCreateDirectChatModal();
+  };
+
+  const {
+    data: allUsersData,
+    loading: allUsersLoading,
+    refetch: allUsersRefetch,
+  } = useQuery(USERS_CONNECTION_LIST, {
+    variables: {
+      firstName_contains: '',
+      lastName_contains: '',
+    },
+  });
+
+  const handleUserModalSearchChange = (e: React.FormEvent): void => {
+    e.preventDefault();
+    /* istanbul ignore next */
+    const [firstName, lastName] = userName.split(' ');
+
+    const newFilterData = {
+      firstName_contains: firstName || '',
+      lastName_contains: lastName || '',
+    };
+
+    allUsersRefetch({
+      ...newFilterData,
+    });
+  };
+
+  return (
+    <>
+      <Modal
+        data-testid="createDirectChatModal"
+        show={createDirectChatModalisOpen}
+        onHide={toggleCreateDirectChatModal}
+        contentClassName={styles.modalContent}
+      >
+        <Modal.Header closeButton data-testid="createDirectChat">
+          <Modal.Title>{'Chat'}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {allUsersLoading ? (
+            <>
+              <Loader />
+            </>
+          ) : (
+            <>
+              <div className={styles.input}>
+                <Form onSubmit={handleUserModalSearchChange}>
+                  <Form.Control
+                    type="name"
+                    id="searchUser"
+                    data-testid="searchUser"
+                    placeholder="searchFullName"
+                    autoComplete="off"
+                    className={styles.inputFieldModal}
+                    value={userName}
+                    onChange={(e): void => {
+                      const { value } = e.target;
+                      setUserName(value);
+                    }}
+                  />
+                  <Button
+                    type="submit"
+                    data-testid="submitBtn"
+                    className={`position-absolute z-10 bottom-10 end-0  d-flex justify-content-center align-items-center `}
+                  >
+                    <Search />
+                  </Button>
+                </Form>
+              </div>
+              <TableContainer className={styles.userData} component={Paper}>
+                <Table aria-label="customized table">
+                  <TableHead>
+                    <TableRow>
+                      <StyledTableCell>#</StyledTableCell>
+                      <StyledTableCell align="center">{'user'}</StyledTableCell>
+                      <StyledTableCell align="center">{'Chat'}</StyledTableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {allUsersData &&
+                      allUsersData.users.length > 0 &&
+                      allUsersData.users.map(
+                        (
+                          userDetails: InterfaceQueryUserListItem,
+                          index: number,
+                        ) => (
+                          <StyledTableRow
+                            data-testid="user"
+                            key={userDetails.user._id}
+                          >
+                            <StyledTableCell component="th" scope="row">
+                              {index + 1}
+                            </StyledTableCell>
+                            <StyledTableCell align="center">
+                              {userDetails.user.firstName +
+                                ' ' +
+                                userDetails.user.lastName}
+                              <br />
+                              {userDetails.user.email}
+                            </StyledTableCell>
+                            <StyledTableCell align="center">
+                              <Button
+                                onClick={() => {
+                                  handleCreateDirectChat(userDetails.user._id);
+                                }}
+                                data-testid="addBtn"
+                              >
+                                Add
+                              </Button>
+                            </StyledTableCell>
+                          </StyledTableRow>
+                        ),
+                      )}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </>
+          )}
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.module.css b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.module.css
new file mode 100644
index 0000000000..3795e402fa
--- /dev/null
+++ b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.module.css
@@ -0,0 +1,9 @@
+.userData {
+  height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden !important;
+}
+
+.modalContent {
+  width: 530px;
+}
diff --git a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
new file mode 100644
index 0000000000..055985d5fb
--- /dev/null
+++ b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.test.tsx
@@ -0,0 +1,2455 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import {
+  USERS_CONNECTION_LIST,
+  USER_JOINED_ORGANIZATIONS,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import Chat from '../../../screens/UserPortal/Chat/Chat';
+import {
+  CREATE_CHAT,
+  MESSAGE_SENT_TO_CHAT,
+} from 'GraphQl/Mutations/OrganizationMutations';
+import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
+import useLocalStorage from 'utils/useLocalstorage';
+import userEvent from '@testing-library/user-event';
+
+const { setItem } = useLocalStorage();
+
+const USER_JOINED_ORG_MOCK = [
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Test Org 1',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Test Org 1',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Test Org 1',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Test Org 1',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Test org',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: 'qsxhgjhbmnbkhlk,njgjfhgv',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8fhgjhnm07af2',
+                  name: 'Test org',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8egfhbn8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65fghce8e8406b8f07af2',
+                  name: 'Test org',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8jygjgf07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65cehgh8e8406b8f07af2',
+                  name: 'Test org',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406nbmnmb8f07af2',
+                  name: 'Test org',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8fnnmm07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+const UserConnectionListMock = [
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              firstName: 'Deanne',
+              lastName: 'Marks',
+              image: null,
+              _id: '6589389d2caa9d8d69087487',
+              email: 'testuser8@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              organizationsBlockedBy: [],
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Queens',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Coffee Street',
+                    line2: 'Apartment 501',
+                    postalCode: '11427',
+                    sortingCode: 'ABC-133',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6637904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Staten Island',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 church Street',
+                    line2: 'Apartment 499',
+                    postalCode: '10301',
+                    sortingCode: 'ABC-122',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6737904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Brooklyn',
+                    countryCode: 'US',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Main Street',
+                    line2: 'Apt 456',
+                    postalCode: '10004',
+                    sortingCode: 'ABC-789',
+                    state: 'NY',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6437904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Bronx',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Random Street',
+                    line2: 'Apartment 456',
+                    postalCode: '10451',
+                    sortingCode: 'ABC-123',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+            appUserProfile: {
+              _id: '64378abd85308f171cf2993d',
+              adminFor: [],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+              __typename: 'AppUserProfile',
+            },
+            __typename: 'UserData',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: {
+          user: [
+            {
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              image: 'img',
+              _id: '1',
+              email: 'disha@email.com',
+              createdAt: '',
+              appUserProfile: {
+                _id: '12',
+                isSuperAdmin: 'false',
+                createdOrganizations: {
+                  _id: '345678',
+                },
+                createdEvents: {
+                  _id: '34567890',
+                },
+              },
+              organizationsBlockedBy: [],
+              joinedOrganizations: [],
+            },
+            {
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              image: 'img',
+              _id: '1',
+              email: 'disha@email.com',
+              createdAt: '',
+              appUserProfile: {
+                _id: '12',
+                isSuperAdmin: 'false',
+                createdOrganizations: {
+                  _id: '345678',
+                },
+                createdEvents: {
+                  _id: '34567890',
+                },
+              },
+              organizationsBlockedBy: [],
+              joinedOrganizations: [],
+            },
+            {
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              image: 'img',
+              _id: '1',
+              email: 'disha@email.com',
+              createdAt: '',
+              appUserProfile: {
+                _id: '12',
+                isSuperAdmin: 'false',
+                createdOrganizations: {
+                  _id: '345678',
+                },
+                createdEvents: {
+                  _id: '34567890',
+                },
+              },
+              organizationsBlockedBy: [],
+              joinedOrganizations: [],
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: 'Disha',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              firstName: 'Deanne',
+              lastName: 'Marks',
+              image: null,
+              _id: '6589389d2caa9d8d69087487',
+              email: 'testuser8@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              organizationsBlockedBy: [],
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Queens',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Coffee Street',
+                    line2: 'Apartment 501',
+                    postalCode: '11427',
+                    sortingCode: 'ABC-133',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6637904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Staten Island',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 church Street',
+                    line2: 'Apartment 499',
+                    postalCode: '10301',
+                    sortingCode: 'ABC-122',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6737904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Brooklyn',
+                    countryCode: 'US',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Main Street',
+                    line2: 'Apt 456',
+                    postalCode: '10004',
+                    sortingCode: 'ABC-789',
+                    state: 'NY',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6437904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Bronx',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Random Street',
+                    line2: 'Apartment 456',
+                    postalCode: '10451',
+                    sortingCode: 'ABC-123',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+            appUserProfile: {
+              _id: '64378abd85308f171cf2993d',
+              adminFor: [],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+              __typename: 'AppUserProfile',
+            },
+            __typename: 'UserData',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const MESSAGE_SENT_TO_CHAT_MOCK = [
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: null,
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          type: 'STRING',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '2',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1df364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          type: 'STRING',
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '1',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f13603ac4697a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          type: 'STRING',
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+];
+
+const CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          createdAt: '2345678903456',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const CHATS_LIST_MOCK = [
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dd40fgh03db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844efc814ddgh4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844ghjefc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: 'ujhgtrdtyuiop',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dhjmkdftyd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844ewsedrffc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const GROUP_CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const CREATE_CHAT_MUTATION = [
+  {
+    request: {
+      query: CREATE_CHAT,
+      variables: {
+        organizationId: '6401ff65ce8e8406b8jygjgf07af2',
+        userIds: [null],
+        name: 'Test Group',
+        isGroup: true,
+      },
+    },
+    result: {
+      data: {
+        createChat: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_CHAT,
+      variables: {
+        organizationId: '',
+        userIds: [null],
+        name: 'Test Group',
+        isGroup: true,
+      },
+    },
+    result: {
+      data: {
+        createChat: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Create Group Chat Modal [User Portal]', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('open and close create new direct chat modal', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+      ...CREATE_CHAT_MUTATION,
+      ...CHATS_LIST_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+    const newGroupChatBtn = await screen.findByTestId('newGroupChat');
+    expect(newGroupChatBtn).toBeInTheDocument();
+    fireEvent.click(newGroupChatBtn);
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+  });
+
+  test('create new group chat', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+      ...CREATE_CHAT_MUTATION,
+      ...CHATS_LIST_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+
+    const newGroupChatBtn = await screen.findByTestId('newGroupChat');
+    expect(newGroupChatBtn).toBeInTheDocument();
+
+    fireEvent.click(newGroupChatBtn);
+
+    await waitFor(async () => {
+      expect(
+        await screen.findByTestId('createGroupChatModal'),
+      ).toBeInTheDocument();
+    });
+
+    const groupTitleInput = screen.getByLabelText(
+      'Group name',
+    ) as HTMLInputElement;
+
+    expect(groupTitleInput).toBeInTheDocument();
+
+    fireEvent.change(groupTitleInput, { target: { value: 'Test Group' } });
+    await waitFor(() => {
+      expect(groupTitleInput.value).toBe('Test Group');
+    });
+
+    const selectLabel = /select organization/i;
+    const orgSelect = await screen.findByLabelText('Select Organization');
+    // console.log(prettyDOM(document));
+
+    // act(() => {
+    //   fireEvent.change(orgSelect, {
+    //     target: { value: '6401ff65ce8e8406b8f07af2' },
+    //   });
+    // })
+    // fireEvent.change(orgSelect, {
+    //   target: { value: '6401ff65ce8e8406b8f07af2' },
+    // });
+
+    // act(() => {
+    userEvent.click(orgSelect);
+
+    const optionsPopupEl = await screen.findByRole('listbox', {
+      name: selectLabel,
+    });
+
+    userEvent.click(within(optionsPopupEl).getByText(/any organization/i));
+    // });
+
+    // await waitFor(async () => {
+    // const option = await screen.findAllByText('Any Organization');
+
+    // console.log("option", option);
+    // });
+
+    const nextBtn = await screen.findByTestId('nextBtn');
+
+    act(() => {
+      fireEvent.click(nextBtn);
+    });
+
+    const createBtn = await screen.findByTestId('createBtn');
+    await waitFor(async () => {
+      expect(createBtn).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      fireEvent.click(await screen.findByTestId('createBtn'));
+    });
+
+    // await waitFor(() => {
+    //   expect(createBtn).not.toBeInTheDocument();
+    // });
+  }, 3000);
+
+  test('add and remove user', async () => {
+    setItem('userId', '1');
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+      ...CREATE_CHAT_MUTATION,
+      ...CHATS_LIST_MOCK,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+    const newGroupChatBtn = await screen.findByTestId('newGroupChat');
+    expect(newGroupChatBtn).toBeInTheDocument();
+    fireEvent.click(newGroupChatBtn);
+
+    await waitFor(async () => {
+      expect(
+        await screen.findByTestId('createGroupChatModal'),
+      ).toBeInTheDocument();
+    });
+
+    const nextBtn = await screen.findByTestId('nextBtn');
+
+    act(() => {
+      fireEvent.click(nextBtn);
+    });
+
+    await waitFor(async () => {
+      const addBtn = await screen.findAllByTestId('addBtn');
+      expect(addBtn[0]).toBeInTheDocument();
+    });
+
+    const addBtn = await screen.findAllByTestId('addBtn');
+
+    fireEvent.click(addBtn[0]);
+
+    const removeBtn = await screen.findAllByText('Remove');
+    await waitFor(async () => {
+      expect(removeBtn[0]).toBeInTheDocument();
+    });
+    fireEvent.click(removeBtn[0]);
+
+    await waitFor(() => {
+      expect(addBtn[0]).toBeInTheDocument();
+    });
+
+    const submitBtn = await screen.findByTestId('submitBtn');
+
+    expect(submitBtn).toBeInTheDocument();
+
+    const searchInput = (await screen.findByTestId(
+      'searchUser',
+    )) as HTMLInputElement;
+    expect(searchInput).toBeInTheDocument();
+
+    fireEvent.change(searchInput, { target: { value: 'Disha' } });
+
+    expect(searchInput.value).toBe('Disha');
+
+    fireEvent.click(submitBtn);
+
+    const closeButton = screen.getAllByRole('button', { name: /close/i });
+    expect(closeButton[0]).toBeInTheDocument();
+
+    fireEvent.click(closeButton[0]);
+
+    await wait(500);
+  });
+});
diff --git a/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx
new file mode 100644
index 0000000000..e293675a03
--- /dev/null
+++ b/src/components/UserPortal/CreateGroupChat/CreateGroupChat.tsx
@@ -0,0 +1,367 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  TableBody,
+} from '@mui/material';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import styles from './CreateGroupChat.module.css';
+import type { ApolloQueryResult } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
+import { USER_JOINED_ORGANIZATIONS } from 'GraphQl/Queries/OrganizationQueries';
+import useLocalStorage from 'utils/useLocalstorage';
+import { CREATE_CHAT } from 'GraphQl/Mutations/OrganizationMutations';
+import Table from '@mui/material/Table';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { styled } from '@mui/material/styles';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+import { USERS_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+import Loader from 'components/Loader/Loader';
+import { Search } from '@mui/icons-material';
+
+interface InterfaceCreateGroupChatProps {
+  toggleCreateGroupChatModal: () => void;
+  createGroupChatModalisOpen: boolean;
+  chatsListRefetch: (
+    variables?:
+      | Partial<{
+          id: string;
+        }>
+      | undefined,
+  ) => Promise<ApolloQueryResult<string>>;
+}
+
+interface InterfaceOrganization {
+  _id: string;
+  name: string;
+  image: string;
+  description: string;
+  admins: [];
+  members: [];
+  address: {
+    city: string;
+    countryCode: string;
+    line1: string;
+    postalCode: string;
+    state: string;
+  };
+  membershipRequestStatus: string;
+  userRegistrationRequired: boolean;
+  membershipRequests: {
+    _id: string;
+    user: {
+      _id: string;
+    };
+  }[];
+}
+
+/**
+ * Styled table cell with custom styles.
+ */
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: ['#31bb6b', '!important'],
+    color: theme.palette.common.white,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+/**
+ * Styled table row with custom styles.
+ */
+
+const StyledTableRow = styled(TableRow)(() => ({
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+const { getItem } = useLocalStorage();
+
+export default function CreateGroupChat({
+  toggleCreateGroupChatModal,
+  createGroupChatModalisOpen,
+  chatsListRefetch,
+}: InterfaceCreateGroupChatProps): JSX.Element {
+  const userId: string | null = getItem('userId');
+
+  const [createChat] = useMutation(CREATE_CHAT);
+
+  const [organizations, setOrganizations] = useState([]);
+  const [selectedOrganization, setSelectedOrganization] = useState('');
+  const [title, setTitle] = useState('');
+  const [userIds, setUserIds] = useState<string[]>([]);
+
+  const [addUserModalisOpen, setAddUserModalisOpen] = useState(false);
+
+  function openAddUserModal(): void {
+    setAddUserModalisOpen(true);
+  }
+
+  const toggleAddUserModal = /* istanbul ignore next */ (): void =>
+    setAddUserModalisOpen(!addUserModalisOpen);
+
+  const handleChange = (event: SelectChangeEvent<string>): void => {
+    setSelectedOrganization(event.target.value as string);
+  };
+
+  const { data: joinedOrganizationsData } = useQuery(
+    USER_JOINED_ORGANIZATIONS,
+    {
+      variables: { id: userId },
+    },
+  );
+
+  function reset(): void {
+    setTitle('');
+    setUserIds([]);
+    setSelectedOrganization('');
+  }
+
+  useEffect(() => {
+    setUserIds(userIds);
+  }, [userIds]);
+
+  async function handleCreateGroupChat(): Promise<void> {
+    await createChat({
+      variables: {
+        organizationId: selectedOrganization,
+        userIds: [userId, ...userIds],
+        name: title,
+        isGroup: true,
+      },
+    });
+    chatsListRefetch();
+    toggleAddUserModal();
+    toggleCreateGroupChatModal();
+    reset();
+  }
+
+  const [userName, setUserName] = useState('');
+
+  const {
+    data: allUsersData,
+    loading: allUsersLoading,
+    refetch: allUsersRefetch,
+  } = useQuery(USERS_CONNECTION_LIST, {
+    variables: {
+      firstName_contains: '',
+      lastName_contains: '',
+    },
+  });
+
+  const handleUserModalSearchChange = (e: React.FormEvent): void => {
+    e.preventDefault();
+    /* istanbul ignore next */
+    const [firstName, lastName] = userName.split(' ');
+
+    const newFilterData = {
+      firstName_contains: firstName || '',
+      lastName_contains: lastName || '',
+    };
+
+    allUsersRefetch({
+      ...newFilterData,
+    });
+  };
+
+  useEffect(() => {
+    if (joinedOrganizationsData && joinedOrganizationsData.users.length > 0) {
+      const organizations =
+        joinedOrganizationsData.users[0]?.user?.joinedOrganizations || [];
+      setOrganizations(organizations);
+    }
+  }, [joinedOrganizationsData]);
+
+  return (
+    <>
+      <Modal
+        data-testid="createGroupChatModal"
+        show={createGroupChatModalisOpen}
+        onHide={toggleCreateGroupChatModal}
+        contentClassName={styles.modalContent}
+      >
+        <Modal.Header closeButton data-testid="">
+          <Modal.Title>New Group</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form>
+            <FormControl fullWidth>
+              <InputLabel id="select-org">Select Organization</InputLabel>
+              <Select
+                labelId="select-org"
+                id="select-org"
+                data-testid="orgSelect"
+                label="Select Organization"
+                value={selectedOrganization}
+                onChange={handleChange}
+              >
+                {organizations &&
+                  organizations.length &&
+                  organizations.map((organization: InterfaceOrganization) => (
+                    <MenuItem
+                      data-testid="selectOptions"
+                      key={organization._id}
+                      value={organization._id}
+                    >
+                      {`${organization.name}(${organization.address?.city},${organization.address?.state},${organization.address?.countryCode})`}
+                    </MenuItem>
+                  ))}
+              </Select>
+            </FormControl>
+            <Form.Group className="mb-3" controlId="registerForm.Rname">
+              <Form.Label>Group name</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder={'Group name'}
+                autoComplete="off"
+                required
+                data-tsetid="groupTitleInput"
+                value={title}
+                onChange={(e): void => {
+                  setTitle(e.target.value);
+                }}
+              />
+            </Form.Group>
+            <Button
+              className={`${styles.colorPrimary} ${styles.borderNone}`}
+              variant="success"
+              onClick={openAddUserModal}
+              data-testid="nextBtn"
+            >
+              Next
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+      <Modal
+        data-testid="addExistingUserModal"
+        show={addUserModalisOpen}
+        onHide={toggleAddUserModal}
+        contentClassName={styles.modalContent}
+      >
+        <Modal.Header closeButton data-testid="pluginNotificationHeader">
+          <Modal.Title>{'Chat'}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {allUsersLoading ? (
+            <>
+              <Loader />
+            </>
+          ) : (
+            <>
+              <div className={styles.input}>
+                <Form onSubmit={handleUserModalSearchChange}>
+                  <Form.Control
+                    type="name"
+                    id="searchUser"
+                    data-testid="searchUser"
+                    placeholder="searchFullName"
+                    autoComplete="off"
+                    className={styles.inputFieldModal}
+                    value={userName}
+                    onChange={(e): void => {
+                      const { value } = e.target;
+                      setUserName(value);
+                    }}
+                  />
+                  <Button
+                    type="submit"
+                    data-testid="submitBtn"
+                    className={`position-absolute z-10 bottom-10 end-0  d-flex justify-content-center align-items-center `}
+                  >
+                    <Search />
+                  </Button>
+                </Form>
+              </div>
+
+              <TableContainer className={styles.userData} component={Paper}>
+                <Table aria-label="customized table">
+                  <TableHead>
+                    <TableRow>
+                      <StyledTableCell>#</StyledTableCell>
+                      <StyledTableCell align="center">{'user'}</StyledTableCell>
+                      <StyledTableCell align="center">{'Chat'}</StyledTableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {allUsersData &&
+                      allUsersData.users.length > 0 &&
+                      allUsersData.users.map(
+                        (
+                          userDetails: InterfaceQueryUserListItem,
+                          index: number,
+                        ) => (
+                          <StyledTableRow
+                            data-testid="user"
+                            key={userDetails.user._id}
+                          >
+                            <StyledTableCell component="th" scope="row">
+                              {index + 1}
+                            </StyledTableCell>
+                            <StyledTableCell align="center">
+                              {userDetails.user.firstName +
+                                ' ' +
+                                userDetails.user.lastName}
+                              <br />
+                              {userDetails.user.email}
+                            </StyledTableCell>
+                            <StyledTableCell align="center">
+                              {userIds.includes(userDetails.user._id) ? (
+                                <Button
+                                  variant="danger"
+                                  onClick={() => {
+                                    const updatedUserIds = userIds.filter(
+                                      (id) => id !== userDetails.user._id,
+                                    );
+                                    setUserIds(updatedUserIds);
+                                  }}
+                                  data-testid="removeBtn"
+                                >
+                                  Remove
+                                </Button>
+                              ) : (
+                                <Button
+                                  onClick={() => {
+                                    setUserIds([
+                                      ...userIds,
+                                      userDetails.user._id,
+                                    ]);
+                                  }}
+                                  data-testid="addBtn"
+                                >
+                                  Add
+                                </Button>
+                              )}
+                            </StyledTableCell>
+                          </StyledTableRow>
+                        ),
+                      )}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </>
+          )}
+          <Button
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+            variant="success"
+            onClick={handleCreateGroupChat}
+            data-testid="createBtn"
+          >
+            Create
+          </Button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/components/UserPortal/DonationCard/DonationCard.module.css b/src/components/UserPortal/DonationCard/DonationCard.module.css
new file mode 100644
index 0000000000..3fa737ada2
--- /dev/null
+++ b/src/components/UserPortal/DonationCard/DonationCard.module.css
@@ -0,0 +1,41 @@
+.mainContainer {
+  width: 49%;
+  height: 8rem;
+  min-width: max-content;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: white;
+  border: 1px solid #dddddd;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.img {
+  height: 100%;
+  aspect-ratio: 1/1;
+  background-color: rgba(49, 187, 107, 12%);
+}
+
+.btn {
+  display: flex;
+  align-items: flex-end;
+}
+
+.btn button {
+  padding-inline: 2rem !important;
+  border-radius: 5px;
+}
+
+.personDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: max-content;
+}
+
+.personImage {
+  border-radius: 50%;
+  margin-right: 20px;
+}
diff --git a/src/components/UserPortal/DonationCard/DonationCard.test.tsx b/src/components/UserPortal/DonationCard/DonationCard.test.tsx
new file mode 100644
index 0000000000..cddf62dd6c
--- /dev/null
+++ b/src/components/UserPortal/DonationCard/DonationCard.test.tsx
@@ -0,0 +1,49 @@
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import DonationCard from './DonationCard';
+import { type InterfaceDonationCardProps } from 'screens/UserPortal/Donate/Donate';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const props: InterfaceDonationCardProps = {
+  id: '1',
+  name: 'John Doe',
+  amount: '20',
+  userId: '1234',
+  payPalId: 'id',
+  updatedAt: String(new Date()),
+};
+
+describe('Testing ContactCard Component [User Portal]', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <DonationCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+});
diff --git a/src/components/UserPortal/DonationCard/DonationCard.tsx b/src/components/UserPortal/DonationCard/DonationCard.tsx
new file mode 100644
index 0000000000..63082f6acf
--- /dev/null
+++ b/src/components/UserPortal/DonationCard/DonationCard.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styles from './DonationCard.module.css';
+import { type InterfaceDonationCardProps } from 'screens/UserPortal/Donate/Donate';
+import { Button } from 'react-bootstrap';
+
+/**
+ * Displays a card with details about a donation.
+ *
+ * Shows the donor's name, the amount donated, and the date of the donation.
+ * Includes a button to view more details about the donation.
+ *
+ * @param  props - The properties passed to the component.
+ * @param  name - The name of the donor.
+ * @param amount - The amount donated.
+ * @param  updatedAt - The date of the donation, in ISO format.
+ *
+ * @returns The rendered donation card component.
+ */
+function donationCard(props: InterfaceDonationCardProps): JSX.Element {
+  // Create a date object from the donation date string
+  const date = new Date(props.updatedAt);
+
+  // Format the date into a readable string
+  const formattedDate = new Intl.DateTimeFormat('en-US', {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(date);
+
+  return (
+    <div className={`${styles.mainContainer}`}>
+      <div className={styles.img}></div>
+      <div className={styles.personDetails}>
+        <span>
+          <b data-testid="DonorName">{props.name}</b>
+        </span>
+        <span>Amount: {props.amount}</span>
+        <span>Date: {formattedDate}</span>
+      </div>
+      <div className={styles.btn}>
+        <Button size="sm" variant="success">
+          View
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default donationCard;
diff --git a/src/components/UserPortal/EventCard/EventCard.module.css b/src/components/UserPortal/EventCard/EventCard.module.css
new file mode 100644
index 0000000000..28278dd5a6
--- /dev/null
+++ b/src/components/UserPortal/EventCard/EventCard.module.css
@@ -0,0 +1,26 @@
+.mainContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  cursor: pointer;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 2px 2px 8px 0px #c8c8c8;
+  overflow: hidden;
+}
+
+.eventDetails {
+  gap: 5px;
+}
+
+.personImage {
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.eventActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+}
diff --git a/src/components/UserPortal/EventCard/EventCard.test.tsx b/src/components/UserPortal/EventCard/EventCard.test.tsx
new file mode 100644
index 0000000000..78aa32abcf
--- /dev/null
+++ b/src/components/UserPortal/EventCard/EventCard.test.tsx
@@ -0,0 +1,194 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import i18nForTest from 'utils/i18nForTest';
+import EventCard from './EventCard';
+import { render, screen, waitFor } from '@testing-library/react';
+import { REGISTER_EVENT } from 'GraphQl/Mutations/mutations';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import userEvent from '@testing-library/user-event';
+import { debug } from 'jest-preview';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const MOCKS = [
+  {
+    request: {
+      query: REGISTER_EVENT,
+      variables: { eventId: '123' },
+    },
+    result: {
+      data: {
+        registerForEvent: [
+          {
+            _id: '123',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('Testing Event Card In User portal', () => {
+  const props = {
+    id: '123',
+    title: 'Test Event',
+    description: 'This is a test event',
+    location: 'Virtual',
+    startDate: '2023-04-13',
+    endDate: '2023-04-15',
+    isRegisterable: true,
+    isPublic: true,
+    endTime: '19:49:12',
+    startTime: '17:49:12',
+    recurring: false,
+    allDay: true,
+    creator: {
+      firstName: 'Joe',
+      lastName: 'David',
+      id: '123',
+    },
+    registrants: [
+      {
+        id: '234',
+      },
+    ],
+  };
+
+  test('The card should be rendered properly, and all the details should be displayed correct', async () => {
+    const { queryByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <EventCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    debug();
+    await waitFor(() => expect(queryByText('Test Event')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText('This is a test event')).toBeInTheDocument(),
+    );
+    await waitFor(() => expect(queryByText('Location')).toBeInTheDocument());
+    await waitFor(() => expect(queryByText('Virtual')).toBeInTheDocument());
+    await waitFor(() => expect(queryByText('Starts')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.getByTestId('startTime')).toBeInTheDocument(),
+    );
+    await waitFor(() =>
+      expect(queryByText(`13 April '23`)).toBeInTheDocument(),
+    );
+    await waitFor(() => expect(queryByText('Ends')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.getByTestId('endTime')).toBeInTheDocument(),
+    );
+    await waitFor(() =>
+      expect(queryByText(`15 April '23`)).toBeInTheDocument(),
+    );
+    await waitFor(() => expect(queryByText('Creator')).toBeInTheDocument());
+    await waitFor(() => expect(queryByText('Joe David')).toBeInTheDocument());
+    await waitFor(() => expect(queryByText('Register')).toBeInTheDocument());
+  });
+
+  test('When the user is already registered', async () => {
+    setItem('userId', '234');
+    const { queryByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <EventCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() =>
+      expect(queryByText('Already registered')).toBeInTheDocument(),
+    );
+  });
+
+  test('Handle register should work properly', async () => {
+    setItem('userId', '456');
+    const { queryByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <EventCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByText('Register'));
+    await waitFor(() =>
+      expect(
+        queryByText('Successfully registered for Test Event'),
+      ).toBeInTheDocument(),
+    );
+  });
+});
+
+describe('Event card when start and end time are not given', () => {
+  const props = {
+    id: '123',
+    title: 'Test Event',
+    description: 'This is a test event',
+    location: 'Virtual',
+    startDate: '2023-04-13',
+    endDate: '2023-04-15',
+    isRegisterable: true,
+    isPublic: true,
+    endTime: '',
+    startTime: '',
+    recurring: false,
+    allDay: true,
+    creator: {
+      firstName: 'Joe',
+      lastName: 'David',
+      id: '123',
+    },
+    registrants: [
+      {
+        id: '234',
+      },
+    ],
+  };
+
+  test('Card is rendered correctly', async () => {
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <EventCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() =>
+      expect(container.querySelector(':empty')).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/components/UserPortal/EventCard/EventCard.tsx b/src/components/UserPortal/EventCard/EventCard.tsx
new file mode 100644
index 0000000000..e93138ce42
--- /dev/null
+++ b/src/components/UserPortal/EventCard/EventCard.tsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import styles from './EventCard.module.css';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import dayjs from 'dayjs';
+import { Button } from 'react-bootstrap';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+
+import { REGISTER_EVENT } from 'GraphQl/Mutations/mutations';
+import { useTranslation } from 'react-i18next';
+
+import useLocalStorage from 'utils/useLocalstorage';
+
+interface InterfaceEventCardProps {
+  id: string;
+  title: string;
+  description: string;
+  location: string;
+  startDate: string;
+  endDate: string;
+  isRegisterable: boolean;
+  isPublic: boolean;
+  endTime: string;
+  startTime: string;
+  recurring: boolean;
+  allDay: boolean;
+  creator: {
+    firstName: string;
+    lastName: string;
+    id: string;
+  };
+  registrants: {
+    id: string;
+  }[];
+}
+
+/**
+ * Displays information about an event and provides an option to register for it.
+ *
+ * Shows the event's title, description, location, start and end dates and times,
+ * creator's name, and registration status. Includes a button to register for the event
+ * if the user is not already registered.
+ *
+ * @param props - The properties for the event card.
+ * @param id - The unique identifier of the event.
+ * @param title - The title of the event.
+ * @param description - A description of the event.
+ * @param location - The location where the event will take place.
+ * @param startDate - The start date of the event in ISO format.
+ * @param endDate - The end date of the event in ISO format.
+ * @param isRegisterable - Indicates if the event can be registered for.
+ * @param isPublic - Indicates if the event is public.
+ * @param endTime - The end time of the event in HH:mm:ss format.
+ * @param startTime - The start time of the event in HH:mm:ss format.
+ * @param recurring - Indicates if the event is recurring.
+ * @param allDay - Indicates if the event lasts all day.
+ * @param creator - The creator of the event with their name and ID.
+ * @param registrants - A list of registrants with their IDs.
+ *
+ * @returns The event card component.
+ */
+function eventCard(props: InterfaceEventCardProps): JSX.Element {
+  // Extract the translation functions
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userEventCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Get user ID from local storage
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  // Create a full name for the event creator
+  const creatorName = `${props.creator.firstName} ${props.creator.lastName}`;
+
+  // Check if the user is initially registered for the event
+  const isInitiallyRegistered = props.registrants.some(
+    (registrant) => registrant.id === userId,
+  );
+
+  // Set up the mutation for registering for the event
+  const [registerEventMutation, { loading }] = useMutation(REGISTER_EVENT);
+  const [isRegistered, setIsRegistered] = React.useState(isInitiallyRegistered);
+
+  /**
+   * Handles registering for the event.
+   * If the user is not already registered, sends a mutation request to register.
+   * Displays a success or error message based on the result.
+   */
+  const handleRegister = async (): Promise<void> => {
+    if (!isRegistered) {
+      try {
+        const { data } = await registerEventMutation({
+          variables: {
+            eventId: props.id,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          setIsRegistered(true);
+          toast.success(`Successfully registered for ${props.title}`);
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        toast.error(error as string);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.mainContainer}>
+      <div className="d-flex flex-row justify-content-between align-items-center">
+        <div className={styles.orgName}>
+          <b>{props.title}</b>
+        </div>
+        <div>
+          <CalendarMonthIcon />
+        </div>
+      </div>
+      {props.description}
+      <span>
+        {`${tCommon('location')} `}
+        <b>{props.location}</b>
+      </span>
+      <div className={`d-flex flex-row ${styles.eventDetails}`}>
+        {`${t('starts')} `}
+        {props.startTime ? (
+          <b data-testid="startTime">
+            {dayjs(`2015-03-04T${props.startTime}`).format('h:mm:ss A')}
+          </b>
+        ) : (
+          <></>
+        )}
+        <b> {dayjs(props.startDate).format("D MMMM 'YY")}</b>
+      </div>
+      <div className={`d-flex flex-row ${styles.eventDetails}`}>
+        {`${t('ends')} `}
+        {props.endTime ? (
+          <b data-testid="endTime">
+            {dayjs(`2015-03-04T${props.endTime}`).format('h:mm:ss A')}
+          </b>
+        ) : (
+          <></>
+        )}{' '}
+        <b> {dayjs(props.endDate).format("D MMMM 'YY")}</b>
+      </div>
+      <span>
+        {`${t('creator')} `}
+        <b>{creatorName}</b>
+      </span>
+
+      <div className={`d-flex flex-row ${styles.eventActions}`}>
+        {loading ? (
+          <HourglassBottomIcon fontSize="small" />
+        ) : isRegistered ? (
+          <Button size="sm" disabled>
+            {t('alreadyRegistered')}
+          </Button>
+        ) : (
+          <Button size="sm" onClick={handleRegister}>
+            {tCommon('register')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default eventCard;
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
new file mode 100644
index 0000000000..15634f7ad0
--- /dev/null
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
@@ -0,0 +1,149 @@
+.orgCard {
+  background-color: var(--bs-white);
+  margin: 0.5rem;
+  height: calc(120px + 2rem);
+  padding: 1rem;
+  border-radius: 8px;
+  outline: 1px solid var(--bs-gray-200);
+  position: relative;
+}
+
+.orgCard .innerContainer {
+  display: flex;
+}
+
+.orgCard .innerContainer .orgImgContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  width: 125px;
+  height: 120px;
+  object-fit: contain;
+  background-color: var(--bs-gray-200);
+}
+
+.orgCard .innerContainer .content {
+  flex: 1;
+  margin-left: 1rem;
+  width: 70%;
+  margin-top: 0.7rem;
+}
+
+.orgCard button {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+.joinBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+  border-width: medium;
+}
+
+.joinedBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+}
+
+.withdrawBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem;
+}
+
+.orgName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 1rem;
+}
+
+.orgdesc {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  max-width: 20rem;
+}
+
+.orgadmin {
+  font-size: 0.9rem;
+}
+
+.orgmember {
+  font-size: 0.9rem;
+}
+
+.address {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  align-items: center;
+}
+
+.address h6 {
+  font-size: 0.9rem;
+  color: var(--bs-gray-600);
+}
+
+@media (max-width: 1420px) {
+  .orgCard {
+    width: 100%;
+  }
+}
+
+@media (max-width: 550px) {
+  .orgCard {
+    width: 100%;
+  }
+
+  .orgCard {
+    height: unset;
+    margin: 0.5rem 0;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .orgCard .innerContainer .orgImgContainer {
+    margin-bottom: 0.8rem;
+  }
+
+  .orgCard .innerContainer {
+    flex-direction: column;
+  }
+
+  .orgCard .innerContainer .orgImgContainer img {
+    height: auto;
+    width: 100%;
+  }
+
+  .orgCard .innerContainer .content {
+    margin-left: 0;
+  }
+
+  .orgCard button {
+    bottom: 0;
+    right: 0;
+    position: relative;
+    margin-left: auto;
+    display: block;
+  }
+  .joinBtn,
+  .joinedBtn,
+  .withdrawBtn {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+  }
+}
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
new file mode 100644
index 0000000000..77516ddc7a
--- /dev/null
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx
@@ -0,0 +1,346 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import OrganizationCard from './OrganizationCard';
+import {
+  USER_JOINED_ORGANIZATIONS,
+  USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/OrganizationQueries';
+import useLocalStorage from 'utils/useLocalstorage';
+import {
+  SEND_MEMBERSHIP_REQUEST,
+  JOIN_PUBLIC_ORGANIZATION,
+} from 'GraphQl/Mutations/OrganizationMutations';
+import { toast } from 'react-toastify';
+
+const { getItem } = useLocalStorage();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: SEND_MEMBERSHIP_REQUEST,
+      variables: {
+        organizationId: '1',
+      },
+    },
+    result: {
+      data: {
+        sendMembershipRequest: {
+          _id: 'edgwrgui4y28urfejwiwfw',
+          organization: {
+            _id: '1',
+            name: 'organizationName',
+          },
+          user: {
+            _id: '1',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: JOIN_PUBLIC_ORGANIZATION,
+      variables: {
+        organizationId: '2',
+      },
+    },
+    result: {
+      data: {
+        joinPublicOrganization: {
+          _id: 'edgwrgui4y28urfejwiwfw',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: {
+          joinedOrganizations: [
+            {
+              __typename: 'Organization',
+              _id: '2',
+              image: 'organizationImage',
+              name: 'organizationName',
+              description: 'organizationDescription',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_CONNECTION,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            __typename: 'Organization',
+            _id: '2',
+            image: 'organizationImage',
+            address: {
+              city: 'abc',
+              countryCode: '123',
+              postalCode: '456',
+              state: 'def',
+              dependentLocality: 'ghi',
+              line1: 'asdfg',
+              line2: 'dfghj',
+              sortingCode: '4567',
+            },
+            name: 'organizationName',
+            description: 'organizationDescription',
+            userRegistrationRequired: false,
+            createdAt: '12345678900',
+            creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+            members: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: getItem('userId'),
+                },
+              },
+            ],
+            admins: [
+              {
+                _id: '45gj5678jk45678fvgbhnr4rtgh',
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+let props = {
+  id: '1',
+  name: 'organizationName',
+  image: '',
+  description: 'organizationDescription',
+  admins: [
+    {
+      id: '123',
+    },
+  ],
+  members: [],
+  address: {
+    city: 'Sample City',
+    countryCode: 'US',
+    line1: '123 Sample Street',
+    postalCode: '',
+    state: '',
+  },
+  membershipRequestStatus: '',
+  userRegistrationRequired: true,
+  membershipRequests: [
+    {
+      _id: '',
+      user: {
+        _id: '',
+      },
+    },
+  ],
+};
+
+describe('Testing OrganizationCard Component [User Portal]', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Component should be rendered properly if organization Image is not undefined', async () => {
+    props = {
+      ...props,
+      image: 'organizationImage',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Visit organization', async () => {
+    const cardProps = {
+      ...props,
+      id: '3',
+      image: 'organizationImage',
+      userRegistrationRequired: true,
+      membershipRequestStatus: 'accepted',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.getByTestId('manageBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('manageBtn'));
+
+    await wait();
+
+    expect(window.location.pathname).toBe(`/user/organization/${cardProps.id}`);
+  });
+
+  test('Send membership request', async () => {
+    props = {
+      ...props,
+      image: 'organizationImage',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.getByTestId('joinBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('joinBtn'));
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith('MembershipRequestSent');
+  });
+
+  test('send membership request to public org', async () => {
+    const cardProps = {
+      ...props,
+      id: '2',
+      image: 'organizationImage',
+      userRegistrationRequired: false,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.getByTestId('joinBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('joinBtn'));
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledTimes(2);
+  });
+
+  test('withdraw membership request', async () => {
+    const cardProps = {
+      ...props,
+      id: '3',
+      image: 'organizationImage',
+      userRegistrationRequired: true,
+      membershipRequestStatus: 'pending',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.getByTestId('withdrawBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('withdrawBtn'));
+  });
+});
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
new file mode 100644
index 0000000000..e1c2c23beb
--- /dev/null
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
@@ -0,0 +1,228 @@
+import React from 'react';
+import styles from './OrganizationCard.module.css';
+import { Button } from 'react-bootstrap';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import {
+  CANCEL_MEMBERSHIP_REQUEST,
+  JOIN_PUBLIC_ORGANIZATION,
+  SEND_MEMBERSHIP_REQUEST,
+} from 'GraphQl/Mutations/OrganizationMutations';
+import { useMutation, useQuery } from '@apollo/client';
+import {
+  USER_JOINED_ORGANIZATIONS,
+  USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/OrganizationQueries';
+import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
+import { useNavigate } from 'react-router-dom';
+
+const { getItem } = useLocalStorage();
+
+interface InterfaceOrganizationCardProps {
+  id: string;
+  name: string;
+  image: string;
+  description: string;
+  admins: {
+    id: string;
+  }[];
+  members: {
+    id: string;
+  }[];
+  address: {
+    city: string;
+    countryCode: string;
+    line1: string;
+    postalCode: string;
+    state: string;
+  };
+  membershipRequestStatus: string;
+  userRegistrationRequired: boolean;
+  membershipRequests: {
+    _id: string;
+    user: {
+      _id: string;
+    };
+  }[];
+}
+
+/**
+ * Displays an organization card with options to join or manage membership.
+ *
+ * Shows the organization's name, image, description, address, number of admins and members,
+ * and provides buttons for joining, withdrawing membership requests, or visiting the organization page.
+ *
+ * @param props - The properties for the organization card.
+ * @param id - The unique identifier of the organization.
+ * @param name - The name of the organization.
+ * @param image - The URL of the organization's image.
+ * @param description - A description of the organization.
+ * @param admins - The list of admins with their IDs.
+ * @param members - The list of members with their IDs.
+ * @param address - The address of the organization including city, country code, line1, postal code, and state.
+ * @param membershipRequestStatus - The status of the membership request (accepted, pending, or empty).
+ * @param userRegistrationRequired - Indicates if user registration is required to join the organization.
+ * @param membershipRequests - The list of membership requests with user IDs.
+ *
+ * @returns The organization card component.
+ */
+const userId: string | null = getItem('userId');
+
+function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'users',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const navigate = useNavigate();
+
+  // Mutations for handling organization memberships
+  const [sendMembershipRequest] = useMutation(SEND_MEMBERSHIP_REQUEST, {
+    refetchQueries: [
+      { query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
+    ],
+  });
+  const [joinPublicOrganization] = useMutation(JOIN_PUBLIC_ORGANIZATION, {
+    refetchQueries: [
+      { query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
+    ],
+  });
+  const [cancelMembershipRequest] = useMutation(CANCEL_MEMBERSHIP_REQUEST, {
+    refetchQueries: [
+      { query: USER_ORGANIZATION_CONNECTION, variables: { id: props.id } },
+    ],
+  });
+  const { refetch } = useQuery(USER_JOINED_ORGANIZATIONS, {
+    variables: { id: userId },
+  });
+
+  /**
+   * Handles joining the organization. Sends a membership request if registration is required,
+   * otherwise joins the public organization directly. Displays success or error messages.
+   */
+  async function joinOrganization(): Promise<void> {
+    try {
+      if (props.userRegistrationRequired) {
+        await sendMembershipRequest({
+          variables: {
+            organizationId: props.id,
+          },
+        });
+        toast.success(t('MembershipRequestSent') as string);
+      } else {
+        await joinPublicOrganization({
+          variables: {
+            organizationId: props.id,
+          },
+        });
+        toast.success(t('orgJoined') as string);
+      }
+      refetch();
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        if (error.message === 'User is already a member') {
+          toast.error(t('AlreadyJoined') as string);
+        } else {
+          toast.error(t('errorOccured') as string);
+        }
+      }
+    }
+  }
+
+  /**
+   * Handles withdrawing a membership request. Finds the request for the current user and cancels it.
+   */
+  async function withdrawMembershipRequest(): Promise<void> {
+    const membershipRequest = props.membershipRequests.find(
+      (request) => request.user._id === userId,
+    );
+
+    await cancelMembershipRequest({
+      variables: {
+        membershipRequestId: membershipRequest?._id,
+      },
+    });
+  }
+
+  return (
+    <>
+      <div className={styles.orgCard}>
+        <div className={styles.innerContainer}>
+          <div className={styles.orgImgContainer}>
+            {props.image ? (
+              <img src={props.image} alt={`${props.name} image`} />
+            ) : (
+              <Avatar
+                name={props.name}
+                alt={`${props.name} image`}
+                dataTestId="emptyContainerForImage"
+              />
+            )}
+          </div>
+          <div className={styles.content}>
+            <Tooltip title={props.name} placement="top-end">
+              <h4 className={`${styles.orgName} fw-semibold`}>{props.name}</h4>
+            </Tooltip>
+            <h6 className={`${styles.orgdesc} fw-semibold`}>
+              <span>{props.description}</span>
+            </h6>
+            {props.address && props.address.city && (
+              <div className={styles.address}>
+                <h6 className="text-secondary">
+                  <span className="address-line">{props.address.line1}, </span>
+                  <span className="address-line">{props.address.city}, </span>
+                  <span className="address-line">
+                    {props.address.countryCode}
+                  </span>
+                </h6>
+              </div>
+            )}
+            <h6 className={styles.orgadmin}>
+              {tCommon('admins')}: <span>{props.admins?.length}</span> &nbsp;
+              &nbsp; &nbsp; {tCommon('members')}:{' '}
+              <span>{props.members?.length}</span>
+            </h6>
+          </div>
+        </div>
+        {props.membershipRequestStatus === 'accepted' && (
+          <Button
+            variant="success"
+            data-testid="manageBtn"
+            className={styles.joinedBtn}
+            onClick={() => {
+              navigate(`/user/organization/${props.id}`);
+            }}
+          >
+            {t('visit')}
+          </Button>
+        )}
+
+        {props.membershipRequestStatus === 'pending' && (
+          <Button
+            variant="danger"
+            onClick={withdrawMembershipRequest}
+            data-testid="withdrawBtn"
+            className={styles.withdrawBtn}
+          >
+            {t('withdraw')}
+          </Button>
+        )}
+        {props.membershipRequestStatus === '' && (
+          <Button
+            onClick={joinOrganization}
+            data-testid="joinBtn"
+            className={styles.joinBtn}
+            variant="outline-success"
+          >
+            {t('joinNow')}
+          </Button>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default organizationCard;
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.module.css b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.module.css
new file mode 100644
index 0000000000..761b389541
--- /dev/null
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.module.css
@@ -0,0 +1,27 @@
+.talawaImage {
+  width: 40px;
+  height: auto;
+  margin-top: -5px;
+  border: 2px solid white;
+  margin-right: 10px;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+}
+
+.offcanvasContainer {
+  background-color: #31bb6b;
+  color: white;
+}
+
+.link {
+  text-decoration: none !important;
+  color: inherit;
+}
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
new file mode 100644
index 0000000000..038ff626df
--- /dev/null
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.test.tsx
@@ -0,0 +1,452 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import 'jest-localstorage-mock';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter, Router } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import cookies from 'js-cookie';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import OrganizationNavbar from './OrganizationNavbar';
+import userEvent from '@testing-library/user-event';
+import { USER_ORGANIZATION_CONNECTION } from 'GraphQl/Queries/Queries';
+import { PLUGIN_SUBSCRIPTION } from 'GraphQl/Mutations/mutations';
+
+import { createMemoryHistory } from 'history';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem, removeItem } = useLocalStorage();
+
+const organizationId = 'org1234';
+
+const MOCK_ORGANIZATION_CONNECTION = {
+  request: {
+    query: USER_ORGANIZATION_CONNECTION,
+    variables: {
+      id: organizationId,
+    },
+  },
+  result: {
+    data: {
+      organizationsConnection: [
+        {
+          __typename: 'Organization',
+          _id: '6401ff65ce8e8406b8f07af2',
+          image: '',
+          address: {
+            city: 'abc',
+            countryCode: '123',
+            postalCode: '456',
+            state: 'def',
+            dependentLocality: 'ghi',
+            line1: 'asdfg',
+            line2: 'dfghj',
+            sortingCode: '4567',
+          },
+          name: 'anyOrganization1',
+          description: 'desc',
+          userRegistrationRequired: true,
+          createdAt: '12345678900',
+          creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+          members: [
+            {
+              _id: '56gheqyr7deyfuiwfewifruy8',
+              user: {
+                _id: '45ydeg2yet721rtgdu32ry',
+              },
+            },
+          ],
+          admins: [
+            {
+              _id: '45gj5678jk45678fvgbhnr4rtgh',
+            },
+          ],
+          membershipRequests: [
+            {
+              _id: '56gheqyr7deyfuiwfewifruy8',
+              user: {
+                _id: '45ydeg2yet721rtgdu32ry',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+const MOCKS = [MOCK_ORGANIZATION_CONNECTION];
+
+const PLUGIN_SUBSCRIPTION_1 = [
+  MOCK_ORGANIZATION_CONNECTION,
+  {
+    request: {
+      query: PLUGIN_SUBSCRIPTION,
+    },
+    result: {
+      data: {
+        onPluginUpdate: {
+          pluginName: 'TestPlugin1',
+          _id: '123',
+          pluginDesc: 'desc',
+          uninstalledOrgs: [organizationId],
+        },
+      },
+      _loadingSub: false,
+    },
+  },
+];
+
+const PLUGIN_SUBSCRIPTION_2 = [
+  MOCK_ORGANIZATION_CONNECTION,
+  {
+    request: {
+      query: PLUGIN_SUBSCRIPTION,
+    },
+    result: {
+      data: {
+        onPluginUpdate: {
+          pluginName: 'TestPlugin1',
+          _id: '123',
+          pluginDesc: 'desc',
+          uninstalledOrgs: [],
+        },
+      },
+      _loadingSub: false,
+    },
+  },
+];
+
+const PLUGIN_SUBSCRIPTION_3 = [
+  MOCK_ORGANIZATION_CONNECTION,
+  {
+    request: {
+      query: PLUGIN_SUBSCRIPTION,
+    },
+    result: {
+      data: {
+        onPluginUpdate: {
+          pluginName: 'TestPlugin100',
+          _id: '123',
+          pluginDesc: 'desc',
+          uninstalledOrgs: [organizationId],
+        },
+      },
+      _loadingSub: false,
+    },
+  },
+];
+
+const testPlugins = [
+  {
+    pluginName: 'TestPlugin1',
+    alias: 'testPlugin1',
+    link: '/testPlugin1',
+    translated: 'Test Plugin 1',
+    view: true,
+  },
+];
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(PLUGIN_SUBSCRIPTION_1, true);
+const link3 = new StaticMockLink(PLUGIN_SUBSCRIPTION_2, true);
+const link4 = new StaticMockLink(PLUGIN_SUBSCRIPTION_3, true);
+
+const navbarProps = {
+  currentPage: 'home',
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: organizationId }),
+}));
+
+describe('Testing OrganizationNavbar Component [User Portal]', () => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      await i18nForTest.changeLanguage('en');
+    });
+  });
+
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.queryByText('anyOrganization1')).toBeInTheDocument();
+    // Check if navigation links are rendered
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('People')).toBeInTheDocument();
+    expect(screen.getByText('Events')).toBeInTheDocument();
+    expect(screen.getByText('Donate')).toBeInTheDocument();
+    // expect(screen.getByText('Chat')).toBeInTheDocument();
+  });
+
+  test('should navigate correctly on clicking a plugin', async () => {
+    const history = createMemoryHistory();
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Router location={history.location} navigator={history}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </Router>
+      </MockedProvider>,
+    );
+
+    const peoplePlugin = screen.getByText('People');
+    expect(peoplePlugin).toBeInTheDocument();
+
+    userEvent.click(peoplePlugin);
+
+    await wait();
+    expect(history.location.pathname).toBe(`/user/people/${organizationId}`);
+  });
+
+  test('The language is switched to English', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn0'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('en');
+    // Check if navigation links are rendered
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('People')).toBeInTheDocument();
+    expect(screen.getByText('Events')).toBeInTheDocument();
+    expect(screen.getByText('Donate')).toBeInTheDocument();
+    // expect(screen.getByText('Chat')).toBeInTheDocument();
+  });
+
+  test('The language is switched to fr', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn1'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('fr');
+  });
+
+  test('The language is switched to hi', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn2'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('hi');
+  });
+
+  test('The language is switched to sp', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn3'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('sp');
+  });
+
+  test('The language is switched to zh', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn4'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('zh');
+  });
+
+  test('Component should be rendered properly if plugins are present in localStorage', async () => {
+    setItem('talawaPlugins', JSON.stringify(testPlugins));
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    testPlugins.forEach((plugin) => {
+      expect(screen.queryByText(plugin.translated)).toBeInTheDocument();
+    });
+
+    removeItem('talawaPlugins');
+  });
+
+  test('should remove plugin if uninstalledOrgs contains organizationId', async () => {
+    setItem('talawaPlugins', JSON.stringify(testPlugins));
+
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    testPlugins.forEach((plugin) => {
+      expect(screen.queryByText(plugin.translated)).not.toBeInTheDocument();
+    });
+  });
+
+  test('should render plugin if uninstalledOrgs does not contain organizationId', async () => {
+    setItem('talawaPlugins', JSON.stringify(testPlugins));
+
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    testPlugins.forEach((plugin) => {
+      expect(screen.queryByText(plugin.translated)).toBeInTheDocument();
+    });
+  });
+
+  test('should do nothing if pluginName is not found in the rendered plugins', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link4}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationNavbar {...navbarProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+});
diff --git a/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
new file mode 100644
index 0000000000..34022fcfcf
--- /dev/null
+++ b/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx
@@ -0,0 +1,267 @@
+import React from 'react';
+import styles from './OrganizationNavbar.module.css';
+import TalawaImage from 'assets/images/talawa-logo-600x600.png';
+import { Container, Dropdown, Nav, Navbar, Offcanvas } from 'react-bootstrap';
+import { languages } from 'utils/languages';
+import i18next from 'i18next';
+import cookies from 'js-cookie';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useSubscription } from '@apollo/client';
+import { USER_ORGANIZATION_CONNECTION } from 'GraphQl/Queries/Queries';
+import type { DropDirection } from 'react-bootstrap/esm/DropdownContext';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { PLUGIN_SUBSCRIPTION } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from 'utils/useLocalstorage';
+interface InterfaceNavbarProps {
+  currentPage: string | null;
+}
+
+type Plugin = {
+  pluginName: string;
+
+  alias: string;
+  link: string;
+  translated: string;
+  view: boolean;
+};
+
+/**
+ * Displays the organization navbar with navigation options, user settings, and language selection.
+ *
+ * The navbar includes:
+ * - Organization branding and name.
+ * - Navigation links for various plugins based on user permissions.
+ * - Language dropdown for changing the interface language.
+ * - User dropdown for accessing settings and logging out.
+ *
+ * @param props - The properties for the navbar.
+ * @param currentPage - The current page identifier for highlighting the active navigation link.
+ *
+ * @returns The organization navbar component.
+ */
+function organizationNavbar(props: InterfaceNavbarProps): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userNavbar',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const navigate = useNavigate();
+
+  const [organizationDetails, setOrganizationDetails] = React.useState<{
+    name: string;
+  }>({ name: '' });
+
+  const dropDirection: DropDirection = 'start';
+
+  const { orgId: organizationId } = useParams();
+
+  const { data } = useQuery(USER_ORGANIZATION_CONNECTION, {
+    variables: { id: organizationId },
+  });
+
+  const [currentLanguageCode, setCurrentLanguageCode] = React.useState(
+    /* istanbul ignore next */
+    cookies.get('i18next') || 'en',
+  );
+
+  const { getItem, setItem } = useLocalStorage();
+
+  /**
+   * Handles user logout by clearing local storage and redirecting to the home page.
+   */
+  /* istanbul ignore next */
+  const handleLogout = (): void => {
+    localStorage.clear();
+    window.location.replace('/');
+  };
+
+  const userName = getItem('name');
+
+  React.useEffect(() => {
+    if (data) {
+      setOrganizationDetails({ name: data.organizationsConnection[0].name });
+    }
+  }, [data]);
+
+  const homeLink = `/user/organization/${organizationId}`;
+
+  let plugins: Plugin[] = [
+    {
+      pluginName: 'People',
+      alias: 'people',
+      link: `/user/people/${organizationId}`,
+      translated: t('people'),
+      view: true,
+    },
+    {
+      pluginName: 'Events',
+      alias: 'events',
+      link: `/user/events/${organizationId}`,
+      translated: t('events'),
+      view: true,
+    },
+    {
+      pluginName: 'Donation',
+      alias: 'donate',
+      link: `/user/donate/${organizationId}`,
+      translated: t('donate'),
+      view: true,
+    },
+    // {
+    //   pluginName: 'Chats',
+    //   alias: 'chat',
+    //   link: `/user/chat/id=${organizationId}`,
+    //   translated: t('chat'),
+    //   view: true,
+    // },
+  ];
+
+  if (getItem('talawaPlugins')) {
+    const talawaPlugins: string = getItem('talawaPlugins') || '{}';
+    plugins = JSON.parse(talawaPlugins);
+  }
+
+  const { data: updatedPluginData } = useSubscription(PLUGIN_SUBSCRIPTION);
+
+  function getPluginIndex(pluginName: string, pluginsArray: Plugin[]): number {
+    return pluginsArray.findIndex((plugin) => plugin.pluginName === pluginName);
+  }
+
+  if (updatedPluginData != undefined) {
+    const pluginName = updatedPluginData.onPluginUpdate.pluginName;
+    const uninstalledOrgs = updatedPluginData.onPluginUpdate.uninstalledOrgs;
+    const pluginIndexToRemove = getPluginIndex(pluginName, plugins);
+    if (uninstalledOrgs.includes(organizationId)) {
+      if (pluginIndexToRemove != -1) {
+        plugins[pluginIndexToRemove].view = false;
+        setItem('talawaPlugins', JSON.stringify(plugins));
+        console.log(`Plugin ${pluginName} has been removed.`);
+      } else {
+        console.log(`Plugin ${pluginName} is not present.`);
+      }
+    } else {
+      if (pluginIndexToRemove != -1) {
+        plugins[pluginIndexToRemove].view = true;
+        setItem('talawaPlugins', JSON.stringify(plugins));
+      }
+    }
+  }
+
+  return (
+    <Navbar expand={'md'} variant="dark" className={`${styles.colorPrimary}`}>
+      <Container fluid>
+        <Navbar.Brand href="#">
+          <img
+            className={styles.talawaImage}
+            src={TalawaImage}
+            alt="Talawa Branding"
+          />
+          <b>{organizationDetails.name}</b>
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-md}`} />
+        <Navbar.Offcanvas
+          id={`offcanvasNavbar-expand-md`}
+          aria-labelledby={`offcanvasNavbar-expand-md`}
+          placement="end"
+          className={styles.offcanvasContainer}
+        >
+          <Offcanvas.Header closeButton>
+            <Offcanvas.Title>Talawa</Offcanvas.Title>
+          </Offcanvas.Header>
+          <Offcanvas.Body>
+            <Nav className="me-auto flex-grow-1 pe-3 pt-1" variant="dark">
+              <Nav.Link
+                active={props.currentPage === 'home'}
+                onClick={
+                  /* istanbul ignore next */
+                  (): void => navigate(homeLink)
+                }
+              >
+                {t('home')}
+              </Nav.Link>
+              {plugins.map(
+                (plugin, idx) =>
+                  plugin.view && (
+                    <Nav.Link
+                      active={props.currentPage == plugin.alias}
+                      onClick={(): void => navigate(plugin.link)}
+                      key={idx}
+                    >
+                      {plugin.translated}
+                    </Nav.Link>
+                  ),
+              )}
+            </Nav>
+            <Navbar.Collapse className="justify-content-end">
+              <Dropdown data-testid="languageDropdown" drop={dropDirection}>
+                <Dropdown.Toggle
+                  variant="white"
+                  id="dropdown-basic"
+                  data-testid="languageDropdownToggle"
+                  className={styles.colorWhite}
+                >
+                  <LanguageIcon
+                    className={styles.colorWhite}
+                    data-testid="languageIcon"
+                  />
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  {languages.map((language, index: number) => (
+                    <Dropdown.Item
+                      key={index}
+                      onClick={async (): Promise<void> => {
+                        setCurrentLanguageCode(language.code);
+                        await i18next.changeLanguage(language.code);
+                      }}
+                      disabled={currentLanguageCode === language.code}
+                      data-testid={`changeLanguageBtn${index}`}
+                    >
+                      <span
+                        className={`fi fi-${language.country_code} mr-2`}
+                      ></span>{' '}
+                      {language.name}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+
+              <Dropdown drop={dropDirection}>
+                <Dropdown.Toggle
+                  variant="white"
+                  id="dropdown-basic"
+                  data-testid="logoutDropdown"
+                  className={styles.colorWhite}
+                >
+                  <PermIdentityIcon
+                    className={styles.colorWhite}
+                    data-testid="personIcon"
+                  />
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.ItemText>
+                    <b>{userName}</b>
+                  </Dropdown.ItemText>
+                  <Dropdown.Item>
+                    <Link to="/user/settings" className={styles.link}>
+                      {tCommon('settings')}
+                    </Link>
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={handleLogout}
+                    data-testid={`logoutBtn`}
+                  >
+                    {tCommon('logout')}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </Navbar.Collapse>
+          </Offcanvas.Body>
+        </Navbar.Offcanvas>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default organizationNavbar;
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.module.css b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.module.css
new file mode 100644
index 0000000000..cf8bc84dda
--- /dev/null
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.module.css
@@ -0,0 +1,76 @@
+.mainContainer {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  /* align-items: center; */
+  padding: 20px;
+  /* padding-top: 20px; */
+  width: 250px;
+  flex-grow: 1;
+  background-color: var(--bs-white);
+}
+
+@media screen and (max-width: 900px) {
+  .mainContainer {
+    display: none;
+  }
+}
+
+.userDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+}
+
+.boxShadow {
+  box-shadow: 4px 4px 8px 4px #c8c8c8;
+}
+
+.organizationsConatiner {
+  width: 100%;
+  padding-top: 50px;
+}
+
+.heading {
+  padding: 10px 0px;
+}
+
+.orgName {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 4px;
+  margin-left: 5px;
+}
+
+.alignRight {
+  width: 100%;
+  text-align: right;
+  padding: 5px;
+}
+
+.link {
+  text-decoration: none !important;
+  color: black;
+}
+
+.rounded {
+  border-radius: 10px !important;
+}
+
+.colorLight {
+  background-color: #f5f5f5;
+}
+
+.marginTop {
+  margin-top: -2px;
+}
+
+.eventDetails {
+  font-size: small;
+  gap: 5px;
+}
+
+.memberImage {
+  border-radius: 50%;
+}
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
new file mode 100644
index 0000000000..cddac285fd
--- /dev/null
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.test.tsx
@@ -0,0 +1,160 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import {
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  ORGANIZATION_EVENT_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import OrganizationSidebar from './OrganizationSidebar';
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_EVENT_CONNECTION_LIST,
+      variables: {
+        organization_id: 'events',
+        first: 3,
+        skip: 0,
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [
+          {
+            _id: 1,
+            title: 'Event',
+            description: 'Event Test',
+            startDate: '2024-01-01',
+            endDate: '2024-01-02',
+            location: 'New Delhi',
+            startTime: '02:00',
+            endTime: '06:00',
+            allDay: false,
+            recurring: false,
+            attendees: [],
+            recurrenceRule: null,
+            isRecurringEventException: false,
+            isPublic: true,
+            isRegisterable: true,
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: 'members',
+        first: 3,
+        skip: 0,
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              image: null,
+              email: 'noble@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+            {
+              _id: '64001660a711c62d5b4076a3',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              image: 'mockImage',
+              email: 'noble@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+let mockId = '';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockId }),
+}));
+
+describe('Testing OrganizationSidebar Component [User Portal]', () => {
+  test('Component should be rendered properly when members and events list is empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationSidebar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.queryByText('No Members to show')).toBeInTheDocument();
+    expect(screen.queryByText('No Events to show')).toBeInTheDocument();
+  });
+
+  test('Component should be rendered properly when events list is not empty', async () => {
+    mockId = 'events';
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationSidebar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.queryByText('No Members to show')).toBeInTheDocument();
+    expect(screen.queryByText('No Events to show')).not.toBeInTheDocument();
+    expect(screen.queryByText('Event')).toBeInTheDocument();
+  });
+
+  test('Component should be rendered properly when members list is not empty', async () => {
+    mockId = 'members';
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationSidebar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.queryByText('No Members to show')).not.toBeInTheDocument();
+    expect(screen.queryByText('No Events to show')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx
new file mode 100644
index 0000000000..796d30d568
--- /dev/null
+++ b/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx
@@ -0,0 +1,200 @@
+import React, { useEffect } from 'react';
+import { ListGroup } from 'react-bootstrap';
+import AboutImg from 'assets/images/defaultImg.png';
+import styles from './OrganizationSidebar.module.css';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { Link, useParams } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
+import {
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  ORGANIZATION_EVENT_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import type {
+  InterfaceQueryOrganizationEventListItem,
+  InterfaceMemberInfo,
+} from 'utils/interfaces';
+
+/**
+ * OrganizationSidebar displays the sidebar for an organization, showing a list of members and events.
+ *
+ * This component fetches and displays:
+ * - The top 3 members of the organization with their images and names.
+ * - The top 3 upcoming events for the organization with their titles, start, and end dates.
+ *
+ * It includes:
+ * - A link to view all members.
+ * - A link to view all events.
+ *
+ * The sidebar handles loading states and displays appropriate messages while data is being fetched.
+ *
+ * @returns JSX.Element representing the organization sidebar.
+ */
+export default function organizationSidebar(): JSX.Element {
+  // Translation functions for different namespaces
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationSidebar',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Extract the organization ID from the URL parameters
+  const { orgId: organizationId } = useParams();
+  const [members, setMembers] = React.useState<
+    InterfaceMemberInfo[] | undefined
+  >(undefined);
+  const [events, setEvents] = React.useState<
+    InterfaceQueryOrganizationEventListItem[] | undefined
+  >(undefined);
+  const eventsLink = `/user/events/${organizationId}`;
+  const peopleLink = `/user/people/${organizationId}`;
+
+  // Query to fetch members of the organization
+  const { data: memberData, loading: memberLoading } = useQuery(
+    ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+    {
+      variables: {
+        orgId: organizationId,
+        first: 3, // Fetch top 3 members
+        skip: 0, // No offset
+      },
+    },
+  );
+
+  // Query to fetch events of the organization
+  const { data: eventsData, loading: eventsLoading } = useQuery(
+    ORGANIZATION_EVENT_CONNECTION_LIST,
+    {
+      variables: {
+        organization_id: organizationId,
+        first: 3, // Fetch top 3 upcoming events
+        skip: 0, // No offset
+      },
+    },
+  );
+
+  /**
+   * Effect hook to update members state when memberData is fetched.
+   *
+   * Sets the members state with the data from the query.
+   */
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (memberData) {
+      setMembers(memberData.organizationsMemberConnection.edges);
+    }
+  }, [memberData]);
+
+  /**
+   * Effect hook to update events state when eventsData is fetched.
+   *
+   * Sets the events state with the data from the query.
+   */
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (eventsData) {
+      setEvents(eventsData.eventsByOrganizationConnection);
+    }
+  }, [eventsData]);
+
+  return (
+    <div className={`${styles.mainContainer}`}>
+      {/* Members section */}
+      <div className={styles.heading}>
+        <b>{tCommon('members')}</b>
+      </div>
+      {memberLoading ? (
+        <div className={`d-flex flex-row justify-content-center`}>
+          <HourglassBottomIcon /> <span>Loading...</span>
+        </div>
+      ) : (
+        <ListGroup variant="flush">
+          {members && members.length ? (
+            members.map((member: InterfaceMemberInfo) => {
+              const memberName = `${member.firstName} ${member.lastName}`;
+              return (
+                <ListGroup.Item
+                  key={member._id}
+                  action
+                  className={`${styles.rounded} ${styles.colorLight} my-1`}
+                >
+                  <div className="d-flex flex-row">
+                    <img
+                      src={member.image ? member.image : AboutImg}
+                      className={styles.memberImage}
+                      width="auto"
+                      height="30px"
+                    />
+                    <div className={styles.orgName}>{memberName}</div>
+                  </div>
+                </ListGroup.Item>
+              );
+            })
+          ) : (
+            <div className="w-100 text-center">{t('noMembers')}</div>
+          )}
+        </ListGroup>
+      )}
+
+      {/* Link to view all members */}
+      <div className={styles.alignRight}>
+        <Link to={peopleLink} className={styles.link}>
+          {t('viewAll')}
+          <ChevronRightIcon fontSize="small" className={styles.marginTop} />
+        </Link>
+      </div>
+
+      {/* Events section */}
+      <div className={styles.heading}>
+        <b>{t('events')}</b>
+      </div>
+      {eventsLoading ? (
+        <div className={`d-flex flex-row justify-content-center`}>
+          <HourglassBottomIcon /> <span>Loading...</span>
+        </div>
+      ) : (
+        <ListGroup variant="flush">
+          {events && events.length ? (
+            events.map((event: InterfaceQueryOrganizationEventListItem) => {
+              return (
+                <ListGroup.Item
+                  key={event._id}
+                  action
+                  className={`${styles.rounded} ${styles.colorLight} my-1`}
+                >
+                  <div className="d-flex flex-column">
+                    <div className="d-flex flex-row justify-content-between align-items-center">
+                      <div className={styles.orgName}>{event.title}</div>
+                      <div>
+                        <CalendarMonthIcon />
+                      </div>
+                    </div>
+                    <div className={`d-flex flex-row ${styles.eventDetails}`}>
+                      Starts{' '}
+                      <b> {dayjs(event.startDate).format("D MMMM 'YY")}</b>
+                    </div>
+                    <div className={`d-flex flex-row ${styles.eventDetails}`}>
+                      Ends <b> {dayjs(event.endDate).format("D MMMM 'YY")}</b>
+                    </div>
+                  </div>
+                </ListGroup.Item>
+              );
+            })
+          ) : (
+            <div className="w-100 text-center">{t('noEvents')}</div>
+          )}
+        </ListGroup>
+      )}
+
+      {/* Link to view all events */}
+      <div className={styles.alignRight}>
+        <Link to={eventsLink} className={styles.link}>
+          {t('viewAll')}
+          <ChevronRightIcon fontSize="small" className={styles.marginTop} />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.module.css b/src/components/UserPortal/PeopleCard/PeopleCard.module.css
new file mode 100644
index 0000000000..fe9fc3bcbd
--- /dev/null
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.module.css
@@ -0,0 +1,33 @@
+.mainContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: 10px;
+  cursor: pointer;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 2px 2px 8px 0px #c8c8c8;
+  overflow: hidden;
+}
+
+.personDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.personImage {
+  border-radius: 50%;
+  margin-right: 20px;
+  max-width: 70px;
+}
+
+.borderBox {
+  border: 1px solid #dddddd;
+  box-shadow: 5px 5px 4px 0px #31bb6b1f;
+  border-radius: 4px;
+}
+
+.greenText {
+  color: #31bb6b;
+}
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
new file mode 100644
index 0000000000..fd5d6c7f93
--- /dev/null
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.test.tsx
@@ -0,0 +1,69 @@
+import React, { act } from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import PeopleCard from './PeopleCard';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+let props = {
+  id: '1',
+  name: 'First Last',
+  image: '',
+  email: 'first@last.com',
+  role: 'Admin',
+  sno: '1',
+};
+
+describe('Testing PeopleCard Component [User Portal]', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PeopleCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Component should be rendered properly if person image is not undefined', async () => {
+    props = {
+      ...props,
+      image: 'personImage',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PeopleCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+});
diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.tsx
new file mode 100644
index 0000000000..e6b6088801
--- /dev/null
+++ b/src/components/UserPortal/PeopleCard/PeopleCard.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import aboutImg from 'assets/images/defaultImg.png';
+import styles from './PeopleCard.module.css';
+
+/**
+ * Props interface for the PeopleCard component.
+ */
+interface InterfaceOrganizationCardProps {
+  id: string;
+  name: string;
+  image: string;
+  email: string;
+  role: string;
+  sno: string;
+}
+
+/**
+ * PeopleCard component displays information about a person within an organization.
+ *
+ * It includes:
+ * - An image of the person or a default image if none is provided.
+ * - The serial number of the person.
+ * - The person's name.
+ * - The person's email address.
+ * - The person's role within the organization, styled with a border.
+ *
+ * @param props - The properties passed to the component.
+ * @returns JSX.Element representing a card with the person's details.
+ */
+function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element {
+  // Determine the image URL; use default image if no image URL is provided
+  const imageUrl = props.image ? props.image : aboutImg;
+
+  return (
+    <div className={`d-flex flex-row`}>
+      {/* Container for serial number and image */}
+      <span style={{ flex: '1' }} className="d-flex">
+        {/* Serial number */}
+        <span style={{ flex: '1' }} className="align-self-center">
+          {props.sno}
+        </span>
+        {/* Person's image */}
+        <span style={{ flex: '1' }}>
+          <img
+            src={imageUrl}
+            width="80px"
+            height="auto"
+            className={`${styles.personImage}`}
+          />
+        </span>
+      </span>
+      {/* Person's name */}
+      <b style={{ flex: '2' }} className="align-self-center">
+        {props.name}
+      </b>
+      {/* Person's email */}
+      <span style={{ flex: '2' }} className="align-self-center">
+        {props.email}
+      </span>
+      {/* Person's role with additional styling */}
+      <div style={{ flex: '2' }} className="align-self-center">
+        <div className={`w-75 border py-2 px-3 ${styles.borderBox}`}>
+          <span className={`${styles.greenText}`}>{props.role}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default peopleCard;
diff --git a/src/components/UserPortal/PostCard/PostCard.module.css b/src/components/UserPortal/PostCard/PostCard.module.css
new file mode 100644
index 0000000000..e8edc2d82c
--- /dev/null
+++ b/src/components/UserPortal/PostCard/PostCard.module.css
@@ -0,0 +1,183 @@
+.cardStyles {
+  width: 20rem;
+  background-color: white;
+  padding: 0;
+  border: none !important;
+  outline: none !important;
+}
+
+.cardHeader {
+  display: flex;
+  width: 100%;
+  padding-inline: 0;
+  padding-block: 0;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  background-color: white;
+  border-bottom: 1px solid #dddddd;
+}
+
+.creator {
+  display: flex;
+  width: 100%;
+  padding-inline: 1rem;
+  padding-block: 0;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+.creator p {
+  margin-bottom: 0;
+  font-weight: 500;
+}
+.creator svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.customToggle {
+  padding: 0;
+  background: none;
+  border: none;
+  margin-right: 1rem;
+  --bs-btn-active-bg: none;
+}
+.customToggle svg {
+  color: black;
+}
+
+.customToggle::after {
+  content: none;
+}
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
+  border: none;
+}
+.customToggle svg {
+  color: black;
+}
+
+.cardBody div {
+  padding: 0.5rem;
+}
+
+.imageContainer {
+  max-width: 100%;
+}
+
+.cardTitle {
+  --max-lines: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+
+  font-size: 1.3rem !important;
+  font-weight: 600;
+}
+
+.date {
+  font-weight: 600;
+}
+
+.cardText {
+  --max-lines: 2;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+
+  padding-top: 0;
+  font-weight: 300;
+  margin-top: 0.7rem !important;
+  text-align: justify;
+}
+
+.viewBtn {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0.5rem;
+}
+.viewBtn Button {
+  padding-inline: 1rem;
+}
+
+.cardActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+  justify-content: flex-end;
+}
+
+.cardActionBtn {
+  background-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  border: none;
+  color: black;
+}
+
+.cardActionBtn:hover {
+  background-color: ghostwhite;
+  border: none;
+  color: black !important;
+}
+
+.creatorNameModal {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modalActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin: 5px 0px;
+}
+
+.textModal {
+  margin-top: 10px;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+  color: white;
+  cursor: pointer;
+}
+
+.commentContainer {
+  overflow: auto;
+  max-height: 18rem;
+  padding-bottom: 1rem;
+}
+
+.modalFooter {
+  background-color: white;
+  position: absolute;
+  width: calc(100% - 1rem);
+  padding-block: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid #dddddd;
+  bottom: 0;
+  right: 0.5rem;
+  margin-left: 1rem;
+}
+
+.inputArea {
+  border: none;
+  outline: none;
+  background-color: #f1f3f6;
+}
+
+.postImage {
+  height: 300px;
+  object-fit: cover;
+}
diff --git a/src/components/UserPortal/PostCard/PostCard.test.tsx b/src/components/UserPortal/PostCard/PostCard.test.tsx
new file mode 100644
index 0000000000..1b7708b384
--- /dev/null
+++ b/src/components/UserPortal/PostCard/PostCard.test.tsx
@@ -0,0 +1,863 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+
+import PostCard from './PostCard';
+import userEvent from '@testing-library/user-event';
+import {
+  CREATE_COMMENT_POST,
+  LIKE_POST,
+  UNLIKE_POST,
+  LIKE_COMMENT,
+  UNLIKE_COMMENT,
+  DELETE_POST_MUTATION,
+  UPDATE_POST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem, getItem } = useLocalStorage();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    info: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: LIKE_POST,
+      variables: {
+        postId: '',
+      },
+      result: {
+        data: {
+          likePost: {
+            _id: '',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UNLIKE_POST,
+      variables: {
+        post: '',
+      },
+      result: {
+        data: {
+          unlikePost: {
+            _id: '',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_COMMENT_POST,
+      variables: {
+        postId: '1',
+        comment: 'testComment',
+      },
+      result: {
+        data: {
+          createComment: {
+            _id: '64ef885bca85de60ebe0f304',
+            creator: {
+              _id: '63d6064458fce20ee25c3bf7',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              email: 'test@gmail.com',
+              __typename: 'User',
+            },
+            likeCount: 0,
+            likedBy: [],
+            text: 'testComment',
+            __typename: 'Comment',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: LIKE_COMMENT,
+      variables: {
+        commentId: '1',
+      },
+    },
+    result: {
+      data: {
+        likeComment: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UNLIKE_COMMENT,
+      variables: {
+        commentId: '1',
+      },
+    },
+    result: {
+      data: {
+        unlikeComment: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_POST_MUTATION,
+      variables: {
+        id: 'postId',
+        text: 'Edited Post',
+      },
+    },
+    result: {
+      data: {
+        updatePost: {
+          _id: '',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_POST_MUTATION,
+      variables: {
+        id: 'postId',
+      },
+    },
+    result: {
+      data: {
+        removePost: {
+          _id: '',
+        },
+      },
+    },
+  },
+];
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const link = new StaticMockLink(MOCKS, true);
+
+describe('Testing PostCard Component [User Portal]', () => {
+  test('Component should be rendered properly', async () => {
+    const cardProps = {
+      id: 'postId',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 1,
+      comments: [
+        {
+          id: '64eb13beca85de60ebe0ed0e',
+          creator: {
+            id: '63d6064458fce20ee25c3bf7',
+            firstName: 'Noble',
+            lastName: 'Mittal',
+            email: 'test@gmail.com',
+            __typename: 'User',
+          },
+          likeCount: 0,
+          likedBy: [],
+          text: 'First comment from Talawa user portal.',
+          __typename: 'Comment',
+        },
+        {
+          id: '64eb13beca85de60ebe0ed0b',
+          creator: {
+            id: '63d6064458fce20ee25c3bf8',
+            firstName: 'Priyanshu',
+            lastName: 'Bartwal',
+            email: 'test1@gmail.com',
+            __typename: 'User',
+          },
+          likeCount: 0,
+          likedBy: [],
+          text: 'First comment from Talawa user portal.',
+          __typename: 'Comment',
+        },
+      ],
+      likedBy: [
+        {
+          firstName: '',
+          lastName: '',
+          id: '2',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Dropdown component should be rendered properly', async () => {
+    setItem('userId', '2');
+
+    const cardProps = {
+      id: '',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '2',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('dropdown'));
+    await wait();
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  test('Edit post should work properly', async () => {
+    setItem('userId', '2');
+
+    const cardProps = {
+      id: 'postId',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'test Post',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '2',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('dropdown'));
+    userEvent.click(screen.getByTestId('editPost'));
+    await wait();
+
+    expect(screen.getByTestId('editPostModalTitle')).toBeInTheDocument();
+    userEvent.clear(screen.getByTestId('postInput'));
+    userEvent.type(screen.getByTestId('postInput'), 'Edited Post');
+    userEvent.click(screen.getByTestId('editPostBtn'));
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith('Post updated Successfully');
+  });
+
+  test('Delete post should work properly', async () => {
+    setItem('userId', '2');
+
+    const cardProps = {
+      id: 'postId',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'test Post',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '2',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('dropdown'));
+    userEvent.click(screen.getByTestId('deletePost'));
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith(
+      'Successfully deleted the Post.',
+    );
+  });
+
+  test('Component should be rendered properly if user has liked the post', async () => {
+    const beforeUserId = getItem('userId');
+    setItem('userId', '2');
+
+    const cardProps = {
+      id: '',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '2',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test('Component should be rendered properly if user unlikes a post', async () => {
+    const beforeUserId = getItem('userId');
+    setItem('userId', '2');
+
+    const cardProps = {
+      id: '',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '2',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+    userEvent.click(screen.getByTestId('likePostBtn'));
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test('Component should be rendered properly if user likes a post', async () => {
+    const beforeUserId = getItem('userId');
+    setItem('userId', '2');
+
+    const cardProps = {
+      id: '',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: '',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+    userEvent.click(screen.getByTestId('likePostBtn'));
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test('Component should be rendered properly if post image is defined', async () => {
+    const cardProps = {
+      id: '',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Comment is created successfully after create comment button is clicked.', async () => {
+    const cardProps = {
+      id: '1',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const randomComment = 'testComment';
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+
+    userEvent.type(screen.getByTestId('commentInput'), randomComment);
+    userEvent.click(screen.getByTestId('createCommentBtn'));
+
+    await wait();
+  });
+
+  test(`Comment should be liked when like button is clicked`, async () => {
+    const cardProps = {
+      id: '1',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 1,
+      postedAt: '',
+      comments: [
+        {
+          id: '1',
+          creator: {
+            _id: '1',
+            id: '1',
+            firstName: 'test',
+            lastName: 'user',
+            email: 'test@user.com',
+          },
+          likeCount: 1,
+          likedBy: [
+            {
+              id: '1',
+            },
+          ],
+          text: 'testComment',
+        },
+        {
+          id: '2',
+          creator: {
+            _id: '1',
+            id: '1',
+            firstName: 'test',
+            lastName: 'user',
+            email: 'test@user.com',
+          },
+          likeCount: 1,
+          likedBy: [
+            {
+              id: '2',
+            },
+          ],
+          text: 'testComment',
+        },
+      ],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+    const beforeUserId = getItem('userId');
+    setItem('userId', '2');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+
+    userEvent.click(screen.getAllByTestId('likeCommentBtn')[0]);
+
+    await wait();
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+
+  test(`Comment should be unliked when like button is clicked, if already liked`, async () => {
+    const cardProps = {
+      id: '1',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 1,
+      postedAt: '',
+      comments: [
+        {
+          id: '1',
+          creator: {
+            _id: '1',
+            id: '1',
+            firstName: 'test',
+            lastName: 'user',
+            email: 'test@user.com',
+          },
+          likeCount: 1,
+          likedBy: [
+            {
+              id: '1',
+            },
+          ],
+          text: 'testComment',
+        },
+        {
+          id: '2',
+          creator: {
+            _id: '1',
+            id: '1',
+            firstName: 'test',
+            lastName: 'user',
+            email: 'test@user.com',
+          },
+          likeCount: 1,
+          likedBy: [
+            {
+              id: '2',
+            },
+          ],
+          text: 'testComment',
+        },
+      ],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+    const beforeUserId = getItem('userId');
+    setItem('userId', '1');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+
+    userEvent.click(screen.getAllByTestId('likeCommentBtn')[0]);
+
+    await wait();
+
+    if (beforeUserId) {
+      setItem('userId', beforeUserId);
+    }
+  });
+  test('Comment modal pops when show comments button is clicked.', async () => {
+    const cardProps = {
+      id: '',
+      userImage: 'image.png',
+      creator: {
+        firstName: 'test',
+        lastName: 'user',
+        email: 'test@user.com',
+        id: '1',
+      },
+      postedAt: '',
+      image: 'testImage',
+      video: '',
+      text: 'This is post test text',
+      title: 'This is post test title',
+      likeCount: 1,
+      commentCount: 0,
+      comments: [],
+      likedBy: [
+        {
+          firstName: 'test',
+          lastName: 'user',
+          id: '1',
+        },
+      ],
+      fetchPosts: jest.fn(),
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PostCard {...cardProps} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('viewPostBtn'));
+    expect(screen.findAllByText('Comments')).not.toBeNull();
+  });
+});
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
new file mode 100644
index 0000000000..f8fcdaebca
--- /dev/null
+++ b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -0,0 +1,481 @@
+import React from 'react';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import {
+  Col,
+  Button,
+  Card,
+  Dropdown,
+  Form,
+  InputGroup,
+  Modal,
+  ModalFooter,
+} from 'react-bootstrap';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAlt';
+import SendIcon from '@mui/icons-material/Send';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import CommentIcon from '@mui/icons-material/Comment';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+
+import type { InterfacePostCard } from 'utils/interfaces';
+import {
+  CREATE_COMMENT_POST,
+  DELETE_POST_MUTATION,
+  LIKE_POST,
+  UNLIKE_POST,
+  UPDATE_POST_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import CommentCard from '../CommentCard/CommentCard';
+import { errorHandler } from 'utils/errorHandler';
+import useLocalStorage from 'utils/useLocalstorage';
+import styles from './PostCard.module.css';
+import UserDefault from '../../../assets/images/defaultImg.png';
+
+interface InterfaceCommentCardProps {
+  id: string;
+  creator: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+  likeCount: number;
+  likedBy: {
+    id: string;
+  }[];
+  text: string;
+  handleLikeComment: (commentId: string) => void;
+  handleDislikeComment: (commentId: string) => void;
+}
+
+/**
+ * PostCard component displays an individual post, including its details, interactions, and comments.
+ *
+ * The component allows users to:
+ * - View the post's details in a modal.
+ * - Edit or delete the post.
+ * - Like or unlike the post.
+ * - Add comments to the post.
+ * - Like or dislike individual comments.
+ *
+ * @param props - The properties passed to the component including post details, comments, and related actions.
+ * @returns JSX.Element representing a post card with interactive features.
+ */
+export default function postCard(props: InterfacePostCard): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'postCard',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const { getItem } = useLocalStorage();
+
+  // Retrieve user ID from local storage
+  const userId = getItem('userId');
+  // Check if the post is liked by the current user
+  const likedByUser = props.likedBy.some((likedBy) => likedBy.id === userId);
+
+  // State variables
+  const [comments, setComments] = React.useState(props.comments);
+  const [numComments, setNumComments] = React.useState(props.commentCount);
+
+  const [likes, setLikes] = React.useState(props.likeCount);
+  const [isLikedByUser, setIsLikedByUser] = React.useState(likedByUser);
+  const [commentInput, setCommentInput] = React.useState('');
+  const [viewPost, setViewPost] = React.useState(false);
+  const [showEditPost, setShowEditPost] = React.useState(false);
+  const [postContent, setPostContent] = React.useState<string>(props.text);
+
+  // Post creator's full name
+  const postCreator = `${props.creator.firstName} ${props.creator.lastName}`;
+
+  // GraphQL mutations
+  const [likePost, { loading: likeLoading }] = useMutation(LIKE_POST);
+  const [unLikePost, { loading: unlikeLoading }] = useMutation(UNLIKE_POST);
+  const [create, { loading: commentLoading }] =
+    useMutation(CREATE_COMMENT_POST);
+  const [editPost] = useMutation(UPDATE_POST_MUTATION);
+  const [deletePost] = useMutation(DELETE_POST_MUTATION);
+
+  // Toggle the view post modal
+  const toggleViewPost = (): void => setViewPost(!viewPost);
+
+  // Toggle the edit post modal
+  const toggleEditPost = (): void => setShowEditPost(!showEditPost);
+
+  // Handle input changes for the post content
+  const handlePostInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setPostContent(e.target.value);
+  };
+
+  // Toggle like or unlike the post
+  const handleToggleLike = async (): Promise<void> => {
+    if (isLikedByUser) {
+      try {
+        const { data } = await unLikePost({
+          variables: {
+            postId: props.id,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          setLikes((likes) => likes - 1);
+          setIsLikedByUser(false);
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        toast.error(error as string);
+      }
+    } else {
+      try {
+        const { data } = await likePost({
+          variables: {
+            postId: props.id,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          setLikes((likes) => likes + 1);
+          setIsLikedByUser(true);
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        toast.error(error as string);
+      }
+    }
+  };
+
+  // Handle changes to the comment input field
+  const handleCommentInput = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    const comment = event.target.value;
+    setCommentInput(comment);
+  };
+
+  // Dislike a comment
+  const handleDislikeComment = (commentId: string): void => {
+    const updatedComments = comments.map((comment) => {
+      let updatedComment = { ...comment };
+      if (
+        comment.id === commentId &&
+        comment.likedBy.some((user) => user.id === userId)
+      ) {
+        updatedComment = {
+          ...comment,
+          likedBy: comment.likedBy.filter((user) => user.id !== userId),
+          likeCount: comment.likeCount - 1,
+        };
+      }
+      return updatedComment;
+    });
+    setComments(updatedComments);
+  };
+
+  // Like a comment
+  const handleLikeComment = (commentId: string): void => {
+    const updatedComments = comments.map((comment) => {
+      let updatedComment = { ...comment };
+      if (
+        comment.id === commentId &&
+        !comment.likedBy.some((user) => user.id === userId)
+      ) {
+        updatedComment = {
+          ...comment,
+          likedBy: [...comment.likedBy, { id: userId }],
+          likeCount: comment.likeCount + 1,
+        };
+      }
+      return updatedComment;
+    });
+    setComments(updatedComments);
+  };
+
+  // Create a new comment
+  const createComment = async (): Promise<void> => {
+    try {
+      const { data: createEventData } = await create({
+        variables: {
+          postId: props.id,
+          comment: commentInput,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (createEventData) {
+        setCommentInput('');
+        setNumComments((numComments) => numComments + 1);
+
+        const newComment: InterfaceCommentCardProps = {
+          id: createEventData.createComment.id,
+          creator: {
+            id: createEventData.createComment.creator._id,
+            firstName: createEventData.createComment.creator.firstName,
+            lastName: createEventData.createComment.creator.lastName,
+            email: createEventData.createComment.creator.email,
+          },
+          likeCount: createEventData.createComment.likeCount,
+          likedBy: createEventData.createComment.likedBy,
+          text: createEventData.createComment.text,
+          handleLikeComment: handleLikeComment,
+          handleDislikeComment: handleDislikeComment,
+        };
+
+        setComments([...comments, newComment]);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  // Edit the post
+  const handleEditPost = (): void => {
+    try {
+      editPost({
+        variables: {
+          id: props.id,
+          text: postContent,
+        },
+      });
+
+      props.fetchPosts(); // Refresh the posts
+      toggleEditPost();
+      toast.success(tCommon('updatedSuccessfully', { item: 'Post' }) as string);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  // Delete the post
+  const handleDeletePost = (): void => {
+    try {
+      deletePost({
+        variables: {
+          id: props.id,
+        },
+      });
+
+      props.fetchPosts(); // Refresh the posts
+      toast.success('Successfully deleted the Post.');
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  return (
+    <Col key={props.id} className="d-flex justify-content-center my-2">
+      <Card className={`${styles.cardStyles}`}>
+        <Card.Header className={`${styles.cardHeader}`}>
+          <div className={`${styles.creator}`}>
+            <AccountCircleIcon className="my-2" />
+            <p>{postCreator}</p>
+          </div>
+          <Dropdown style={{ cursor: 'pointer' }}>
+            <Dropdown.Toggle
+              className={styles.customToggle}
+              data-testid={'dropdown'}
+            >
+              <MoreVertIcon />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={toggleEditPost} data-testid={'editPost'}>
+                <EditOutlinedIcon
+                  style={{ color: 'grey', marginRight: '8px' }}
+                />
+                {tCommon('edit')}
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={handleDeletePost}
+                data-testid={'deletePost'}
+              >
+                <DeleteOutlineOutlinedIcon
+                  style={{ color: 'red', marginRight: '8px' }}
+                />
+                {tCommon('delete')}
+              </Dropdown.Item>
+              {/* <Dropdown.Item href="#/action-3">Pin Post</Dropdown.Item>
+              <Dropdown.Item href="#/action-3">Report</Dropdown.Item>
+              <Dropdown.Item href="#/action-3">Share</Dropdown.Item> */}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Card.Header>
+        <Card.Img
+          className={styles.postImage}
+          variant="top"
+          src={
+            props.image === '' || props.image === null
+              ? UserDefault
+              : props.image
+          }
+        />
+        <Card.Body className="pb-0">
+          <Card.Title className={`${styles.cardTitle}`}>
+            {props.title}
+          </Card.Title>
+          <Card.Subtitle style={{ color: '#808080' }}>
+            {t('postedOn', { date: props.postedAt })}
+          </Card.Subtitle>
+          <Card.Text className={`${styles.cardText} mt-4`}>
+            {props.text}
+          </Card.Text>
+        </Card.Body>
+        <Card.Footer style={{ border: 'none', background: 'white' }}>
+          <div className={`${styles.cardActions}`}>
+            <Button
+              size="sm"
+              variant="success"
+              className="px-4"
+              data-testid={'viewPostBtn'}
+              onClick={toggleViewPost}
+            >
+              {t('viewPost')}
+            </Button>
+          </div>
+        </Card.Footer>
+      </Card>
+      <Modal show={viewPost} onHide={toggleViewPost} size="xl" centered>
+        <Modal.Body className="d-flex w-100 p-0" style={{ minHeight: '80vh' }}>
+          <div className="w-50 d-flex  align-items-center justify-content-center">
+            <img
+              src={
+                props.image === '' || props.image === null
+                  ? UserDefault
+                  : props.image
+              }
+              alt="postImg"
+              className="w-100"
+            />
+          </div>
+          <div className="w-50 p-2 position-relative">
+            <div className="d-flex justify-content-between align-items-center">
+              <div className={`${styles.cardHeader} p-0`}>
+                <AccountCircleIcon className="my-2" />
+                <p>{postCreator}</p>
+              </div>
+              <div style={{ cursor: 'pointer' }}>
+                <MoreVertIcon />
+              </div>
+            </div>
+            <div className="mt-2">
+              <p style={{ fontSize: '1.5rem', fontWeight: 600 }}>
+                {props.title}
+              </p>
+              <p>{props.text}</p>
+            </div>
+            <h4>Comments</h4>
+            <div className={styles.commentContainer}>
+              {numComments ? (
+                comments.map((comment, index: number) => {
+                  const cardProps: InterfaceCommentCardProps = {
+                    id: comment.id,
+                    creator: {
+                      id: comment.creator.id,
+                      firstName: comment.creator.firstName,
+                      lastName: comment.creator.lastName,
+                      email: comment.creator.email,
+                    },
+                    likeCount: comment.likeCount,
+                    likedBy: comment.likedBy,
+                    text: comment.text,
+                    handleLikeComment: handleLikeComment,
+                    handleDislikeComment: handleDislikeComment,
+                  };
+                  return <CommentCard key={index} {...cardProps} />;
+                })
+              ) : (
+                <p>No comments to show.</p>
+              )}
+            </div>
+            <div className={styles.modalFooter}>
+              <div className={`${styles.modalActions}`}>
+                <div className="d-flex align-items-center gap-2">
+                  <Button
+                    className={`${styles.cardActionBtn}`}
+                    onClick={handleToggleLike}
+                    data-testid={'likePostBtn'}
+                  >
+                    {likeLoading || unlikeLoading ? (
+                      <HourglassBottomIcon fontSize="small" />
+                    ) : isLikedByUser ? (
+                      <ThumbUpIcon fontSize="small" />
+                    ) : (
+                      <ThumbUpOffAltIcon fontSize="small" />
+                    )}
+                  </Button>
+                  {likes}
+                  {` ${t('likes')}`}
+                </div>
+                <div className="d-flex align-items-center gap-2">
+                  <Button className={`${styles.cardActionBtn}`}>
+                    <CommentIcon fontSize="small" />
+                  </Button>
+                  {numComments}
+                  {` ${t('comments')}`}
+                </div>
+              </div>
+              <InputGroup className="mt-2">
+                <Form.Control
+                  placeholder={'Enter comment'}
+                  type="text"
+                  className={styles.inputArea}
+                  value={commentInput}
+                  onChange={handleCommentInput}
+                  data-testid="commentInput"
+                />
+                <InputGroup.Text
+                  className={`${styles.colorPrimary} ${styles.borderNone}`}
+                  onClick={createComment}
+                  data-testid="createCommentBtn"
+                >
+                  {commentLoading ? (
+                    <HourglassBottomIcon fontSize="small" />
+                  ) : (
+                    <SendIcon />
+                  )}
+                </InputGroup.Text>
+              </InputGroup>
+            </div>
+          </div>
+        </Modal.Body>
+      </Modal>
+      <Modal show={showEditPost} onHide={toggleEditPost} size="lg" centered>
+        <Modal.Header closeButton className="py-2 ">
+          <p className="fs-3" data-testid={'editPostModalTitle'}>
+            {t('editPost')}
+          </p>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Control
+            type="text"
+            as="textarea"
+            rows={3}
+            className={styles.postInput}
+            data-testid="postInput"
+            autoComplete="off"
+            required
+            onChange={handlePostInput}
+            value={postContent}
+          />
+        </Modal.Body>
+        <ModalFooter>
+          <Button
+            size="sm"
+            variant="success"
+            className="px-4"
+            data-testid={'editPostBtn'}
+            onClick={handleEditPost}
+          >
+            {t('editPost')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </Col>
+  );
+}
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.module.css b/src/components/UserPortal/PromotedPost/PromotedPost.module.css
new file mode 100644
index 0000000000..676d30a83a
--- /dev/null
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.module.css
@@ -0,0 +1,61 @@
+.cardActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+}
+
+.cardActionBtn {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  color: black;
+}
+
+.cardActionBtn:hover {
+  background-color: ghostwhite;
+  border: none;
+  color: black !important;
+}
+
+.imageContainer {
+  max-width: 100%;
+}
+
+.cardHeader {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  color: #50c878;
+}
+
+.creatorNameModal {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modalActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+  margin: 5px 0px;
+}
+
+.textModal {
+  margin-top: 10px;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+  color: white;
+  cursor: pointer;
+}
+
+.admedia {
+  object-fit: cover;
+  height: 30rem;
+}
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
new file mode 100644
index 0000000000..6ec8ec5de7
--- /dev/null
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx
@@ -0,0 +1,127 @@
+import React, { act } from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import PromotedPost from './PromotedPost';
+
+const link = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+let props = {
+  id: '1',
+  image: '',
+  title: 'Test Post',
+};
+
+describe('Testing PromotedPost Test', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PromotedPost {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Component should be rendered properly if prop image is not undefined', async () => {
+    props = {
+      ...props,
+      image: 'promotedPostImage',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PromotedPost {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+});
+
+test('Component should display the icon correctly', async () => {
+  const { queryByTestId } = render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <PromotedPost {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+
+  await waitFor(() => {
+    const icon = queryByTestId('StarPurple500Icon');
+    expect(icon).toBeInTheDocument();
+  });
+});
+
+test('Component should display the text correctly', async () => {
+  const { queryAllByText } = render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <PromotedPost {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+
+  await waitFor(() => {
+    const title = queryAllByText('Test Post') as HTMLElement[];
+    expect(title[0]).toBeInTheDocument();
+  });
+});
+
+test('Component should display the image correctly', async () => {
+  props = {
+    ...props,
+    image: 'promotedPostImage',
+  };
+  const { queryByRole } = render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <PromotedPost {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+
+  await waitFor(() => {
+    const image = queryByRole('img');
+    expect(image).toHaveAttribute('src', 'promotedPostImage');
+  });
+});
diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.tsx
new file mode 100644
index 0000000000..c1af98f367
--- /dev/null
+++ b/src/components/UserPortal/PromotedPost/PromotedPost.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Card } from 'react-bootstrap';
+import styles from './PromotedPost.module.css';
+import StarPurple500Icon from '@mui/icons-material/StarPurple500';
+
+interface InterfacePostCardProps {
+  id: string;
+  image: string;
+  title: string;
+}
+
+/**
+ * PromotedPost component displays a card representing promoted content.
+ *
+ * This component includes:
+ * - A header with a star icon indicating the content is promoted.
+ * - A title and description of the promoted content.
+ * - An optional image associated with the promoted content.
+ *
+ * @param props - Properties passed to the component including an image, title, and ID.
+ * @returns JSX.Element representing a card with promoted content.
+ */
+export default function promotedPost(
+  props: InterfacePostCardProps,
+): JSX.Element {
+  return (
+    <>
+      <Card className="my-3">
+        <Card.Header>
+          <div className={`${styles.cardHeader}`}>
+            {/* Icon indicating promoted content */}
+            <StarPurple500Icon />
+            {'Promoted Content'}
+          </div>
+        </Card.Header>
+        <Card.Body>
+          {/* Display the title of the promoted content */}
+          <Card.Title>{props.title}</Card.Title>
+          {/* Display a brief description or the title again */}
+          <Card.Text>{props.title}</Card.Text>
+          {/* Conditionally render the image if provided */}
+          {props.image && (
+            <img src={props.image} className={styles.imageContainer} />
+          )}
+        </Card.Body>
+      </Card>
+    </>
+  );
+}
diff --git a/src/components/UserPortal/Register/Register.module.css b/src/components/UserPortal/Register/Register.module.css
new file mode 100644
index 0000000000..1fc2a34af2
--- /dev/null
+++ b/src/components/UserPortal/Register/Register.module.css
@@ -0,0 +1,15 @@
+.loginText {
+  cursor: pointer;
+}
+
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+}
diff --git a/src/components/UserPortal/Register/Register.test.tsx b/src/components/UserPortal/Register/Register.test.tsx
new file mode 100644
index 0000000000..1883d60da3
--- /dev/null
+++ b/src/components/UserPortal/Register/Register.test.tsx
@@ -0,0 +1,267 @@
+import type { SetStateAction } from 'react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { SIGNUP_MUTATION } from 'GraphQl/Mutations/mutations';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Register from './Register';
+import { toast } from 'react-toastify';
+
+const MOCKS = [
+  {
+    request: {
+      query: SIGNUP_MUTATION,
+      variables: {
+        firstName: 'John',
+        lastName: 'Doe',
+        email: 'johndoe@gmail.com',
+        password: 'johnDoe',
+      },
+    },
+    result: {
+      data: {
+        signUp: {
+          user: {
+            _id: '1',
+          },
+          accessToken: 'accessToken',
+          refreshToken: 'refreshToken',
+        },
+      },
+    },
+  },
+];
+
+const formData = {
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'johndoe@gmail.com',
+  password: 'johnDoe',
+  confirmPassword: 'johnDoe',
+};
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const setCurrentMode: React.Dispatch<SetStateAction<string>> = jest.fn();
+
+const props = {
+  setCurrentMode,
+};
+
+describe('Testing Register Component [User Portal]', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Expect the mode to be changed to Login', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('setLoginBtn'));
+
+    expect(setCurrentMode).toHaveBeenCalledWith('login');
+  });
+
+  test('Expect toast.error to be called if email input is empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('registerBtn'));
+
+    expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
+  });
+
+  test('Expect toast.error to be called if password input is empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('emailInput'), formData.email);
+    userEvent.click(screen.getByTestId('registerBtn'));
+
+    expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
+  });
+
+  test('Expect toast.error to be called if first name input is empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('passwordInput'), formData.password);
+
+    userEvent.type(screen.getByTestId('emailInput'), formData.email);
+
+    userEvent.click(screen.getByTestId('registerBtn'));
+
+    expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
+  });
+
+  test('Expect toast.error to be called if last name input is empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('passwordInput'), formData.password);
+
+    userEvent.type(screen.getByTestId('emailInput'), formData.email);
+
+    userEvent.type(screen.getByTestId('firstNameInput'), formData.firstName);
+
+    userEvent.click(screen.getByTestId('registerBtn'));
+
+    expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
+  });
+
+  test("Expect toast.error to be called if confirmPassword doesn't match with password", async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('passwordInput'), formData.password);
+
+    userEvent.type(screen.getByTestId('emailInput'), formData.email);
+
+    userEvent.type(screen.getByTestId('firstNameInput'), formData.firstName);
+
+    userEvent.type(screen.getByTestId('lastNameInput'), formData.lastName);
+
+    userEvent.click(screen.getByTestId('registerBtn'));
+
+    expect(toast.error).toHaveBeenCalledWith(
+      "Password doesn't match. Confirm Password and try again.",
+    );
+  });
+
+  test('Expect toast.success to be called if valid credentials are entered.', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Register {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('passwordInput'), formData.password);
+
+    userEvent.type(
+      screen.getByTestId('confirmPasswordInput'),
+      formData.confirmPassword,
+    );
+
+    userEvent.type(screen.getByTestId('emailInput'), formData.email);
+
+    userEvent.type(screen.getByTestId('firstNameInput'), formData.firstName);
+
+    userEvent.type(screen.getByTestId('lastNameInput'), formData.lastName);
+
+    userEvent.click(screen.getByTestId('registerBtn'));
+
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith(
+      'Successfully registered. Please wait for admin to approve your request.',
+    );
+  });
+});
diff --git a/src/components/UserPortal/Register/Register.tsx b/src/components/UserPortal/Register/Register.tsx
new file mode 100644
index 0000000000..11a810c955
--- /dev/null
+++ b/src/components/UserPortal/Register/Register.tsx
@@ -0,0 +1,253 @@
+import type { ChangeEvent, SetStateAction } from 'react';
+import React from 'react';
+import { Button, Form, InputGroup } from 'react-bootstrap';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import BadgeOutlinedIcon from '@mui/icons-material/BadgeOutlined';
+import { LockOutlined } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { SIGNUP_MUTATION } from 'GraphQl/Mutations/mutations';
+
+import styles from './Register.module.css';
+import { useMutation } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+
+interface InterfaceRegisterProps {
+  /**
+   * Function to change the current mode (e.g., from register to login).
+   */
+  setCurrentMode: React.Dispatch<SetStateAction<string>>;
+}
+
+export default function register(props: InterfaceRegisterProps): JSX.Element {
+  const { setCurrentMode } = props;
+
+  // Translation hooks for user registration and common text
+  const { t } = useTranslation('translation', { keyPrefix: 'userRegister' });
+  const { t: tCommon } = useTranslation('common');
+
+  /**
+   * Changes the mode to login when invoked.
+   */
+  const handleModeChangeToLogin = (): void => {
+    setCurrentMode('login');
+  };
+
+  // Mutation hook for user registration
+  const [registerMutation] = useMutation(SIGNUP_MUTATION);
+
+  // State to manage the registration form variables
+  const [registerVariables, setRegisterVariables] = React.useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  /**
+   * Handles the registration process by validating inputs and invoking the mutation.
+   */
+  const handleRegister = async (): Promise<void> => {
+    if (
+      !(
+        registerVariables.email &&
+        registerVariables.password &&
+        registerVariables.firstName &&
+        registerVariables.lastName
+      )
+    ) {
+      toast.error(t('invalidDetailsMessage') as string); // Error if fields are missing
+    } else if (
+      registerVariables.password !== registerVariables.confirmPassword
+    ) {
+      toast.error(t('passwordNotMatch') as string); // Error if passwords do not match
+    } else {
+      try {
+        await registerMutation({
+          variables: {
+            firstName: registerVariables.firstName,
+            lastName: registerVariables.lastName,
+            email: registerVariables.email,
+            password: registerVariables.password,
+          },
+        });
+
+        toast.success(t('afterRegister') as string); // Success message
+
+        // Reset form fields
+        /* istanbul ignore next */
+        setRegisterVariables({
+          firstName: '',
+          lastName: '',
+          email: '',
+          password: '',
+          confirmPassword: '',
+        });
+      } catch (error: unknown) {
+        // Handle any errors during registration
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    }
+  };
+
+  /**
+   * Updates the state with the first name input value.
+   * @param e - Change event from the input element
+   */
+  /* istanbul ignore next */
+  const handleFirstName = (e: ChangeEvent<HTMLInputElement>): void => {
+    const firstName = e.target.value;
+    setRegisterVariables({ ...registerVariables, firstName });
+  };
+
+  /**
+   * Updates the state with the last name input value.
+   * @param e - Change event from the input element
+   */
+  /* istanbul ignore next */
+  const handleLastName = (e: ChangeEvent<HTMLInputElement>): void => {
+    const lastName = e.target.value;
+    setRegisterVariables({ ...registerVariables, lastName });
+  };
+
+  /**
+   * Updates the state with the email input value.
+   * @param e - Change event from the input element
+   */
+  /* istanbul ignore next */
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const email = e.target.value;
+    setRegisterVariables({ ...registerVariables, email });
+  };
+
+  /**
+   * Updates the state with the password input value.
+   * @param e - Change event from the input element
+   */
+  /* istanbul ignore next */
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const password = e.target.value;
+
+    setRegisterVariables({ ...registerVariables, password });
+  };
+
+  /**
+   * Updates the state with the confirm password input value.
+   * @param e - Change event from the input element
+   */
+  /* istanbul ignore next */
+  const handleConfirmPasswordChange = (
+    e: ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const confirmPassword = e.target.value;
+
+    setRegisterVariables({ ...registerVariables, confirmPassword });
+  };
+
+  return (
+    <>
+      <h3 className="mt-3 font-weight-bold">{tCommon('register')}</h3>
+      <div className="my-3">
+        <h6>{tCommon('firstName')}</h6>
+        <InputGroup className="mb-3">
+          <Form.Control
+            placeholder={t('enterFirstName')}
+            className={styles.borderNone}
+            value={registerVariables.firstName}
+            onChange={handleFirstName}
+            data-testid="firstNameInput"
+          />
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
+            <BadgeOutlinedIcon className={`${styles.colorWhite}`} />
+          </InputGroup.Text>
+        </InputGroup>
+        <h6>{tCommon('lastName')}</h6>
+        <InputGroup className="mb-3">
+          <Form.Control
+            placeholder={t('enterLastName')}
+            className={styles.borderNone}
+            value={registerVariables.lastName}
+            onChange={handleLastName}
+            data-testid="lastNameInput"
+          />
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
+            <BadgeOutlinedIcon className={`${styles.colorWhite}`} />
+          </InputGroup.Text>
+        </InputGroup>
+        <h6>{tCommon('emailAddress')}</h6>
+        <InputGroup className="mb-3">
+          <Form.Control
+            placeholder={tCommon('enterEmail')}
+            type="email"
+            className={styles.borderNone}
+            value={registerVariables.email}
+            onChange={handleEmailChange}
+            data-testid="emailInput"
+          />
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
+            <EmailOutlinedIcon className={`${styles.colorWhite}`} />
+          </InputGroup.Text>
+        </InputGroup>
+        <h6>{tCommon('password')}</h6>
+        <InputGroup className="mb-3">
+          <Form.Control
+            placeholder={tCommon('enterPassword')}
+            type="password"
+            className={styles.borderNone}
+            value={registerVariables.password}
+            onChange={handlePasswordChange}
+            data-testid="passwordInput"
+          />
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
+            <LockOutlined className={`${styles.colorWhite}`} />
+          </InputGroup.Text>
+        </InputGroup>
+        <h6>{tCommon('confirmPassword')}</h6>
+        <InputGroup className="mb-3">
+          <Form.Control
+            placeholder={t('enterConfirmPassword')}
+            type="password"
+            className={styles.borderNone}
+            value={registerVariables.confirmPassword}
+            onChange={handleConfirmPasswordChange}
+            data-testid="confirmPasswordInput"
+          />
+          <InputGroup.Text
+            className={`${styles.colorPrimary} ${styles.borderNone}`}
+          >
+            <LockOutlined className={`${styles.colorWhite}`} />
+          </InputGroup.Text>
+        </InputGroup>
+      </div>
+      <Button
+        className={`${styles.colorPrimary} ${styles.borderNone}`}
+        variant="success"
+        onClick={handleRegister}
+        data-testid="registerBtn"
+      >
+        {tCommon('register')}
+      </Button>
+
+      <div className="mt-4 text-center">
+        {t('alreadyhaveAnAccount')}{' '}
+        <span
+          onClick={handleModeChangeToLogin}
+          className={styles.loginText}
+          data-testid="setLoginBtn"
+        >
+          <u>{tCommon('login')}</u>
+        </span>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx
new file mode 100644
index 0000000000..93b71b14f1
--- /dev/null
+++ b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import SecuredRouteForUser from './SecuredRouteForUser';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+describe('SecuredRouteForUser', () => {
+  test('renders the route when the user is logged in', () => {
+    // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user and do not set 'AdminFor' so that it remains undefined.
+    setItem('IsLoggedIn', 'TRUE');
+
+    render(
+      <MemoryRouter initialEntries={['/user/organizations']}>
+        <Routes>
+          <Route element={<SecuredRouteForUser />}>
+            <Route
+              path="/user/organizations"
+              element={
+                <div data-testid="organizations-content">
+                  Organizations Component
+                </div>
+              }
+            />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId('organizations-content')).toBeInTheDocument();
+  });
+
+  test('redirects to /user when the user is not logged in', async () => {
+    // Set the user as not logged in in local storage
+    setItem('IsLoggedIn', 'FALSE');
+
+    render(
+      <MemoryRouter initialEntries={['/user/organizations']}>
+        <Routes>
+          <Route path="/" element={<div>User Login Page</div>} />
+          <Route element={<SecuredRouteForUser />}>
+            <Route
+              path="/user/organizations"
+              element={
+                <div data-testid="organizations-content">
+                  Organizations Component
+                </div>
+              }
+            />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('User Login Page')).toBeInTheDocument();
+    });
+  });
+
+  test('renders the route when the user is logged in and user is ADMIN', () => {
+    // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user and set 'AdminFor' to simulate ADMIN of some Organization.
+    setItem('IsLoggedIn', 'TRUE');
+    setItem('AdminFor', [
+      {
+        _id: '6537904485008f171cf29924',
+        __typename: 'Organization',
+      },
+    ]);
+
+    render(
+      <MemoryRouter initialEntries={['/user/organizations']}>
+        <Routes>
+          <Route
+            path="/user/organizations"
+            element={<div>Oops! The Page you requested was not found!</div>}
+          />
+          <Route element={<SecuredRouteForUser />}>
+            <Route
+              path="/user/organizations"
+              element={
+                <div data-testid="organizations-content">
+                  Organizations Component
+                </div>
+              }
+            />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(
+      screen.getByText(/Oops! The Page you requested was not found!/i),
+    ).toBeTruthy();
+  });
+});
diff --git a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
new file mode 100644
index 0000000000..21d091dad6
--- /dev/null
+++ b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import PageNotFound from 'screens/PageNotFound/PageNotFound';
+import useLocalStorage from 'utils/useLocalstorage';
+
+/**
+ * A component that guards routes by checking if the user is logged in.
+ * If the user is logged in and does not have 'AdminFor' set, the child routes are rendered.
+ * If the user is not logged in, they are redirected to the homepage.
+ * If the user is logged in but has 'AdminFor' set, a 404 page is shown.
+ *
+ * @returns JSX.Element - Rendered component based on user authentication and role.
+ */
+const SecuredRouteForUser = (): JSX.Element => {
+  // Custom hook to interact with local storage
+  const { getItem } = useLocalStorage();
+
+  // Check if the user is logged in and the role of the user
+  const isLoggedIn = getItem('IsLoggedIn');
+  const adminFor = getItem('AdminFor');
+
+  // Conditional rendering based on authentication status and role
+  return isLoggedIn === 'TRUE' ? (
+    <>{adminFor == undefined ? <Outlet /> : <PageNotFound />}</>
+  ) : (
+    <Navigate to="/" replace />
+  );
+};
+
+export default SecuredRouteForUser;
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.module.css b/src/components/UserPortal/StartPostModal/StartPostModal.module.css
new file mode 100644
index 0000000000..8b709f584d
--- /dev/null
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.module.css
@@ -0,0 +1,50 @@
+.userImage {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 50%;
+  position: relative;
+  border: 2px solid #31bb6b;
+}
+
+.userImage img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  scale: 1.5;
+}
+
+.previewImage {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.previewImage img {
+  border-radius: 8px;
+}
+
+.icons {
+  width: 25px;
+}
+
+.icons svg {
+  stroke: #000;
+}
+
+.icons.dark {
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+.icons.dark svg {
+  stroke: #000;
+}
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
new file mode 100644
index 0000000000..c34f3a2e9e
--- /dev/null
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.test.tsx
@@ -0,0 +1,175 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import StartPostModal from './StartPostModal';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    info: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: CREATE_POST_MUTATION,
+      variables: {
+        title: '',
+        text: 'This is dummy text',
+        organizationId: '123',
+        file: '',
+      },
+      result: {
+        data: {
+          createPost: {
+            _id: '453',
+          },
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const renderStartPostModal = (
+  visibility: boolean,
+  image: string | null,
+): RenderResult => {
+  const cardProps = {
+    show: visibility,
+    onHide: jest.fn(),
+    fetchPosts: jest.fn(),
+    userData: {
+      user: {
+        __typename: 'User',
+        _id: '123',
+        image: image,
+        firstName: 'Glen',
+        lastName: 'dsza',
+        email: 'glen@dsza.com',
+        appLanguageCode: 'en',
+        pluginCreationAllowed: true,
+        createdAt: '2023-02-18T09:22:27.969Z',
+        adminFor: [],
+        createdOrganizations: [],
+        joinedOrganizations: [],
+        createdEvents: [],
+        registeredEvents: [],
+        eventAdmin: [],
+        membershipRequests: [],
+        organizationsBlockedBy: [],
+      },
+      appUserProfile: {
+        __typename: 'AppUserProfile',
+        _id: '123',
+        isSuperAdmin: true,
+        adminFor: [],
+        createdOrganizations: [],
+        createdEvents: [],
+        eventAdmin: [],
+      },
+    },
+    organizationId: '123',
+    img: '',
+  };
+
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <StartPostModal {...cardProps} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing StartPostModal Component: User Portal', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Check if StartPostModal renders properly', async () => {
+    renderStartPostModal(true, null);
+
+    const modal = await screen.findByTestId('startPostModal');
+    expect(modal).toBeInTheDocument();
+  });
+
+  test('On invalid post submission with empty body Error toast should be shown', async () => {
+    const toastSpy = jest.spyOn(toast, 'error');
+    renderStartPostModal(true, null);
+    await wait();
+
+    userEvent.click(screen.getByTestId('createPostBtn'));
+    expect(toastSpy).toHaveBeenCalledWith(
+      "Can't create a post with an empty body.",
+    );
+  });
+
+  test('On valid post submission Info toast should be shown', async () => {
+    renderStartPostModal(true, null);
+    await wait();
+
+    const randomPostInput = 'This is dummy text';
+    userEvent.type(screen.getByTestId('postInput'), randomPostInput);
+    expect(screen.queryByText(randomPostInput)).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('createPostBtn'));
+
+    expect(toast.error).not.toHaveBeenCalledWith();
+    expect(toast.info).toHaveBeenCalledWith(
+      'Processing your post. Please wait.',
+    );
+    // await wait();
+    // expect(toast.success).toBeCalledWith(
+    //   'Your post is now visible in the feed.',
+    // );
+  });
+
+  test('If user image is null then default image should be shown', async () => {
+    renderStartPostModal(true, null);
+    await wait();
+
+    const userImage = screen.getByTestId('userImage');
+    expect(userImage).toHaveAttribute(
+      'src',
+      '/src/assets/images/defaultImg.png',
+    );
+  });
+
+  test('If user image is not null then user image should be shown', async () => {
+    renderStartPostModal(true, 'image.png');
+    await wait();
+
+    const userImage = screen.getByTestId('userImage');
+    expect(userImage).toHaveAttribute('src', 'image.png');
+  });
+});
diff --git a/src/components/UserPortal/StartPostModal/StartPostModal.tsx b/src/components/UserPortal/StartPostModal/StartPostModal.tsx
new file mode 100644
index 0000000000..d48b8425fa
--- /dev/null
+++ b/src/components/UserPortal/StartPostModal/StartPostModal.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { Button, Form, Image, Modal } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import { useMutation } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
+
+import { errorHandler } from 'utils/errorHandler';
+import UserDefault from '../../../assets/images/defaultImg.png';
+import styles from './StartPostModal.module.css';
+import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+
+interface InterfaceStartPostModalProps {
+  show: boolean;
+  onHide: () => void;
+  fetchPosts: () => void;
+  userData: InterfaceQueryUserListItem | undefined;
+  organizationId: string;
+  img: string | null;
+}
+
+/**
+ * A modal component for creating a new post.
+ *
+ * This modal includes:
+ * - A form where users can input the content of the post.
+ * - A preview of the image if provided.
+ * - User's profile image and name displayed in the modal header.
+ *
+ * @param show - Whether the modal is visible.
+ * @param onHide - Function to call when the modal is hidden.
+ * @param fetchPosts - Function to refresh the posts after creating a new one.
+ * @param userData - User data to display in the modal header.
+ * @param organizationId - The ID of the organization for the post.
+ * @param img - The URL of the image to be included in the post.
+ *
+ * @returns JSX.Element - The rendered modal component.
+ */
+const startPostModal = ({
+  show,
+  onHide,
+  fetchPosts,
+  userData,
+  organizationId,
+  img,
+}: InterfaceStartPostModalProps): JSX.Element => {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', { keyPrefix: 'home' });
+
+  // State to manage the content of the post
+  const [postContent, setPostContent] = useState<string>('');
+
+  // Mutation hook for creating a new post
+  const [createPost] = useMutation(CREATE_POST_MUTATION);
+
+  /**
+   * Updates the state with the content of the post as the user types.
+   *
+   * @param e - Change event from the textarea input.
+   */
+  const handlePostInput = (e: ChangeEvent<HTMLInputElement>): void => {
+    setPostContent(e.target.value);
+  };
+
+  /**
+   * Hides the modal and clears the post content.
+   */
+  const handleHide = (): void => {
+    setPostContent('');
+    onHide();
+  };
+
+  /**
+   * Handles the creation of a new post by calling the mutation.
+   * Displays a toast notification based on the outcome.
+   */
+  const handlePost = async (): Promise<void> => {
+    try {
+      if (!postContent) {
+        throw new Error("Can't create a post with an empty body.");
+      }
+      toast.info('Processing your post. Please wait.');
+
+      const { data } = await createPost({
+        variables: {
+          title: '',
+          text: postContent,
+          organizationId: organizationId,
+          file: img,
+        },
+      });
+      /* istanbul ignore next */
+      if (data) {
+        toast.dismiss();
+        toast.success(t('postNowVisibleInFeed') as string);
+        fetchPosts();
+        handleHide();
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  return (
+    <Modal
+      size="lg"
+      show={show}
+      onHide={handleHide}
+      backdrop="static"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      data-testid="startPostModal"
+    >
+      <Modal.Header
+        className="bg-primary"
+        closeButton
+        data-testid="modalHeader"
+      >
+        <Modal.Title className="text-white">
+          <span className="d-flex gap-2 align-items-center">
+            <span className={styles.userImage}>
+              <Image
+                src={userData?.user?.image || UserDefault}
+                roundedCircle
+                className="mt-2"
+                data-testid="userImage"
+              />
+            </span>
+            <span>{`${userData?.user?.firstName} ${userData?.user?.lastName}`}</span>
+          </span>
+        </Modal.Title>
+      </Modal.Header>
+      <Form>
+        <Modal.Body>
+          <Form.Control
+            type="text"
+            as="textarea"
+            rows={3}
+            id="orgname"
+            className={styles.postInput}
+            data-testid="postInput"
+            autoComplete="off"
+            required
+            onChange={handlePostInput}
+            placeholder={t('somethingOnYourMind')}
+            value={postContent}
+          />
+          {img && (
+            <div className={styles.previewImage}>
+              <Image src={img} alt="Post Image Preview" />
+            </div>
+          )}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            size="sm"
+            variant="success"
+            className="px-4"
+            value="invite"
+            data-testid="createPostBtn"
+            onClick={handlePost}
+          >
+            {t('addPost')}
+          </Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  );
+};
+
+export default startPostModal;
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.module.css b/src/components/UserPortal/UserNavbar/UserNavbar.module.css
new file mode 100644
index 0000000000..764a24ab93
--- /dev/null
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.module.css
@@ -0,0 +1,26 @@
+.talawaImage {
+  width: 40px;
+  height: auto;
+  margin-top: -5px;
+  border: 2px solid white;
+  margin-right: 10px;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.boxShadow {
+  box-shadow: 4px 4px 8px 4px #c8c8c8;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+}
+
+.link {
+  text-decoration: none !important;
+  color: inherit;
+}
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
new file mode 100644
index 0000000000..8c3447f25a
--- /dev/null
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.test.tsx
@@ -0,0 +1,217 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import cookies from 'js-cookie';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import UserNavbar from './UserNavbar';
+import userEvent from '@testing-library/user-event';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const MOCKS = [
+  {
+    request: {
+      query: REVOKE_REFRESH_TOKEN,
+    },
+    result: {},
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+describe('Testing UserNavbar Component [User Portal]', () => {
+  afterEach(async () => {
+    await act(async () => {
+      await i18nForTest.changeLanguage('en');
+    });
+  });
+
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('The language is switched to English', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn0'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('en');
+  });
+
+  test('The language is switched to fr', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn1'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('fr');
+  });
+
+  test('The language is switched to hi', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn2'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('hi');
+  });
+
+  test('The language is switched to sp', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn3'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('sp');
+  });
+
+  test('The language is switched to zh', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('languageIcon'));
+
+    userEvent.click(screen.getByTestId('changeLanguageBtn4'));
+
+    await wait();
+
+    expect(cookies.get('i18next')).toBe('zh');
+  });
+
+  test('User can see and interact with the dropdown menu', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('logoutDropdown'));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByTestId('logoutBtn')).toBeInTheDocument();
+  });
+
+  test('User can navigate to the "Settings" page', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserNavbar />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('logoutDropdown'));
+    userEvent.click(screen.getByText('Settings'));
+    expect(window.location.pathname).toBe('/user/settings');
+  });
+});
diff --git a/src/components/UserPortal/UserNavbar/UserNavbar.tsx b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
new file mode 100644
index 0000000000..4160b00aad
--- /dev/null
+++ b/src/components/UserPortal/UserNavbar/UserNavbar.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import styles from './UserNavbar.module.css';
+import TalawaImage from 'assets/images/talawa-logo-600x600.png';
+import { Container, Dropdown, Navbar } from 'react-bootstrap';
+import { languages } from 'utils/languages';
+import i18next from 'i18next';
+import cookies from 'js-cookie';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { useNavigate } from 'react-router-dom';
+import useLocalStorage from 'utils/useLocalstorage';
+
+/**
+ * Navbar component for user-specific actions and settings.
+ *
+ * This component provides:
+ * - A branding image and name.
+ * - A dropdown for language selection.
+ * - A dropdown for user actions including profile settings and logout.
+ *
+ * @returns JSX.Element - The rendered Navbar component.
+ */
+function userNavbar(): JSX.Element {
+  // Hook for local storage operations
+  const { getItem } = useLocalStorage();
+
+  // Hook for programmatic navigation
+  const navigate = useNavigate();
+
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userNavbar',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Mutation hook for revoking the refresh token
+  const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
+
+  // State for managing the current language code
+  const [currentLanguageCode, setCurrentLanguageCode] = React.useState(
+    /* istanbul ignore next */
+    cookies.get('i18next') || 'en',
+  );
+
+  // Retrieve the username from local storage
+  const userName = getItem('name');
+
+  /**
+   * Handles user logout by revoking the refresh token and clearing local storage.
+   * Redirects to the home page after logout.
+   */
+  /* istanbul ignore next */
+  const handleLogout = (): void => {
+    revokeRefreshToken();
+    localStorage.clear();
+    navigate('/');
+  };
+
+  return (
+    <Navbar variant="dark" className={`${styles.colorPrimary}`}>
+      <Container fluid>
+        {/* Navbar brand with logo and name */}
+        <Navbar.Brand href="#">
+          <img
+            className={styles.talawaImage}
+            src={TalawaImage}
+            alt="Talawa Branding"
+          />
+          <b>{t('talawa')}</b>
+        </Navbar.Brand>
+
+        {/* Navbar toggle button for responsive design */}
+        <Navbar.Toggle />
+
+        {/* Navbar collapsible content */}
+        <Navbar.Collapse className="justify-content-end">
+          {/* Dropdown for language selection */}
+          <Dropdown data-testid="languageDropdown" drop="start">
+            <Dropdown.Toggle
+              variant="white"
+              id="dropdown-basic"
+              data-testid="languageDropdownToggle"
+              className={styles.colorWhite}
+            >
+              <LanguageIcon
+                className={styles.colorWhite}
+                data-testid="languageIcon"
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {languages.map((language, index: number) => (
+                <Dropdown.Item
+                  key={index}
+                  onClick={async (): Promise<void> => {
+                    setCurrentLanguageCode(language.code);
+                    await i18next.changeLanguage(language.code);
+                  }}
+                  disabled={currentLanguageCode === language.code}
+                  data-testid={`changeLanguageBtn${index}`}
+                >
+                  <span
+                    className={`fi fi-${language.country_code} mr-2`}
+                  ></span>{' '}
+                  {language.name}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+
+          {/* Dropdown for user actions */}
+          <Dropdown drop="start">
+            <Dropdown.Toggle
+              variant="white"
+              id="dropdown-basic"
+              data-testid="logoutDropdown"
+              className={styles.colorWhite}
+            >
+              <PermIdentityIcon
+                className={styles.colorWhite}
+                data-testid="personIcon"
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {/* Display the user's name */}
+              <Dropdown.ItemText>
+                <b>{userName}</b>
+              </Dropdown.ItemText>
+              {/* Link to user settings */}
+              <Dropdown.Item
+                onClick={() => navigate('/user/settings')}
+                className={styles.link}
+              >
+                {tCommon('settings')}
+              </Dropdown.Item>
+              {/* Logout button */}
+              <Dropdown.Item onClick={handleLogout} data-testid={`logoutBtn`}>
+                {tCommon('logout')}
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default userNavbar;
diff --git a/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx b/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx
new file mode 100644
index 0000000000..82b173e399
--- /dev/null
+++ b/src/components/UserPortal/UserProfile/EventsAttendedByUser.test.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { EventsAttendedByUser } from './EventsAttendedByUser';
+import { MockedProvider } from '@apollo/client/testing';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+
+const mockT = (key: string, params?: Record<string, string>): string => {
+  if (params) {
+    return Object.entries(params).reduce(
+      (acc, [key, value]) => acc.replace(`{{${key}}}`, value),
+      key,
+    );
+  }
+  return key;
+};
+
+const mocks = [
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: '1' },
+    },
+    result: {
+      data: {
+        event: {
+          _id: '1',
+          title: 'Event 1',
+          startDate: '2023-01-01',
+          recurring: false,
+          attendees: [],
+          organization: { _id: 'org1' },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_DETAILS,
+      variables: { id: '2' },
+    },
+    result: {
+      data: {
+        event: {
+          _id: '2',
+          title: 'Event 2',
+          startDate: '2023-01-01',
+          recurring: false,
+          attendees: [],
+          organization: { _id: 'org1' },
+        },
+      },
+    },
+  },
+];
+
+describe('EventsAttendedByUser Component', () => {
+  const mockUserWithEvents = {
+    userDetails: {
+      firstName: 'John',
+      lastName: 'Doe',
+      createdAt: '2023-01-01',
+      gender: 'Male',
+      email: 'john@example.com',
+      phoneNumber: '1234567890',
+      birthDate: '1990-01-01',
+      grade: 'A',
+      empStatus: 'Employed',
+      maritalStatus: 'Single',
+      address: '123 Street',
+      state: 'State',
+      country: 'Country',
+      image: 'image.jpg',
+      eventsAttended: [{ _id: '1' }, { _id: '2' }],
+    },
+    t: mockT,
+  };
+
+  const mockUserWithoutEvents = {
+    userDetails: {
+      firstName: 'Jane',
+      lastName: 'Doe',
+      createdAt: '2023-01-01',
+      gender: 'Female',
+      email: 'jane@example.com',
+      phoneNumber: '0987654321',
+      birthDate: '1990-01-01',
+      grade: 'B',
+      empStatus: 'Unemployed',
+      maritalStatus: 'Single',
+      address: '456 Street',
+      state: 'State',
+      country: 'Country',
+      image: 'image.jpg',
+      eventsAttended: [],
+    },
+    t: mockT,
+  };
+
+  test('renders the component with events', () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <EventsAttendedByUser {...mockUserWithEvents} />
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('eventAttended')).toBeInTheDocument();
+    expect(screen.getAllByTestId('usereventsCard')).toHaveLength(2);
+  });
+
+  test('renders no events message when user has no events', () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <EventsAttendedByUser {...mockUserWithoutEvents} />
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('noeventsAttended')).toBeInTheDocument();
+    expect(screen.queryByTestId('usereventsCard')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/UserPortal/UserProfile/EventsAttendedByUser.tsx b/src/components/UserPortal/UserProfile/EventsAttendedByUser.tsx
new file mode 100644
index 0000000000..13ab9f5f5a
--- /dev/null
+++ b/src/components/UserPortal/UserProfile/EventsAttendedByUser.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Card } from 'react-bootstrap';
+import styles from './common.module.css';
+import EventsAttendedByMember from 'components/MemberDetail/EventsAttendedByMember';
+/**
+ * Component to display events attended by a user in card format
+ * @param userDetails - User information including attended events
+ * @param t - Translation function
+ * @returns Card component containing list of attended events
+ */
+interface InterfaceUser {
+  userDetails: {
+    firstName: string;
+    lastName: string;
+    createdAt: string;
+    gender: string;
+    email: string;
+    phoneNumber: string;
+    birthDate: string;
+    grade: string;
+    empStatus: string;
+    maritalStatus: string;
+    address: string;
+    state: string;
+    country: string;
+    image: string;
+    eventsAttended: { _id: string }[];
+  };
+  t: (key: string) => string;
+}
+export const EventsAttendedByUser: React.FC<InterfaceUser> = ({
+  userDetails,
+  t,
+}) => {
+  return (
+    <Card border="0" className="rounded-4 mb-4">
+      <div className={`${styles.cardHeader}`}>
+        <div className={`${styles.cardTitle}`}>{t('eventAttended')}</div>
+      </div>
+      <Card.Body className={`${styles.cardBody} ${styles.scrollableCardBody}`}>
+        {!userDetails.eventsAttended?.length ? (
+          <div className={styles.emptyContainer}>
+            <h6>{t('noeventsAttended')}</h6>
+          </div>
+        ) : (
+          userDetails.eventsAttended.map((event: { _id: string }) => (
+            <span data-testid="usereventsCard" key={event._id}>
+              <EventsAttendedByMember eventsId={event._id} />
+            </span>
+          ))
+        )}
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default EventsAttendedByUser;
diff --git a/src/components/UserPortal/UserProfile/UserAddressFields.test.tsx b/src/components/UserPortal/UserProfile/UserAddressFields.test.tsx
new file mode 100644
index 0000000000..7aff734bc6
--- /dev/null
+++ b/src/components/UserPortal/UserProfile/UserAddressFields.test.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { UserAddressFields } from './UserAddressFields';
+import { countryOptions } from 'utils/formEnumFields';
+
+describe('UserAddressFields', () => {
+  const mockProps = {
+    tCommon: (key: string) => `translated_${key}`,
+    t: (key: string) => `translated_${key}`,
+    handleFieldChange: jest.fn(),
+    userDetails: {
+      address: '123 Test Street',
+      state: 'Test State',
+      country: 'US',
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders all form fields correctly', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    expect(screen.getByTestId('inputAddress')).toBeInTheDocument();
+    expect(screen.getByTestId('inputState')).toBeInTheDocument();
+    expect(screen.getByTestId('inputCountry')).toBeInTheDocument();
+  });
+
+  test('displays correct labels with translations', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    expect(screen.getByText('translated_address')).toBeInTheDocument();
+    expect(screen.getByText('translated_state')).toBeInTheDocument();
+    expect(screen.getByText('translated_country')).toBeInTheDocument();
+  });
+
+  test('handles address input change', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    const addressInput = screen.getByTestId('inputAddress');
+    fireEvent.change(addressInput, { target: { value: 'New Address' } });
+
+    expect(mockProps.handleFieldChange).toHaveBeenCalledWith(
+      'address',
+      'New Address',
+    );
+  });
+
+  test('handles state input change', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    const stateInput = screen.getByTestId('inputState');
+    fireEvent.change(stateInput, { target: { value: 'New State' } });
+
+    expect(mockProps.handleFieldChange).toHaveBeenCalledWith(
+      'state',
+      'New State',
+    );
+  });
+
+  test('handles country selection change', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    const countrySelect = screen.getByTestId('inputCountry');
+    fireEvent.change(countrySelect, { target: { value: 'CA' } });
+
+    expect(mockProps.handleFieldChange).toHaveBeenCalledWith('country', 'CA');
+  });
+
+  test('renders all country options', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    const countrySelect = screen.getByTestId('inputCountry');
+    const options = countrySelect.getElementsByTagName('option');
+
+    expect(options.length).toBe(countryOptions.length + 1); // +1 for disabled option
+  });
+
+  test('displays initial values correctly', () => {
+    render(<UserAddressFields {...mockProps} />);
+
+    expect(screen.getByTestId('inputAddress')).toHaveValue('123 Test Street');
+    expect(screen.getByTestId('inputState')).toHaveValue('Test State');
+    expect(screen.getByTestId('inputCountry')).toHaveValue('US');
+  });
+});
diff --git a/src/components/UserPortal/UserProfile/UserAddressFields.tsx b/src/components/UserPortal/UserProfile/UserAddressFields.tsx
new file mode 100644
index 0000000000..732209f3b0
--- /dev/null
+++ b/src/components/UserPortal/UserProfile/UserAddressFields.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { countryOptions } from 'utils/formEnumFields';
+import { Col, Form, Row } from 'react-bootstrap';
+import styles from './common.module.css';
+
+interface InterfaceUserAddressFieldsProps {
+  tCommon: (key: string) => string;
+  t: (key: string) => string;
+  handleFieldChange: (field: string, value: string) => void;
+  userDetails: {
+    address: string;
+    state: string;
+    country: string;
+  };
+}
+/**
+ * Form component containing address-related input fields for user profile
+ * Includes fields for address, city, state, and country
+ * @param {Object} props - Component props
+ * @param {function} props.tCommon - Translation function for common strings
+ * @param {function} props.t - Translation function for component-specific strings
+ * @param {function} props.handleFieldChange - Callback for field value changes
+ * @param {Object} props.userDetails - User's address information
+ * @returns Form group with address input fields
+ */
+export const UserAddressFields: React.FC<InterfaceUserAddressFieldsProps> = ({
+  tCommon,
+  t,
+  handleFieldChange,
+  userDetails,
+}) => {
+  return (
+    <Row className="mb-1">
+      <Col lg={4}>
+        <Form.Label htmlFor="address" className={styles.cardLabel}>
+          {tCommon('address')}
+        </Form.Label>
+        <Form.Control
+          type="text"
+          placeholder="Eg: lane 123, Main Street"
+          id="address"
+          value={userDetails.address}
+          onChange={(e) => handleFieldChange('address', e.target.value)}
+          className={styles.cardControl}
+          data-testid="inputAddress"
+        />
+      </Col>
+      <Col lg={4}>
+        <Form.Label htmlFor="inputState" className={styles.cardLabel}>
+          {t('state')}
+        </Form.Label>
+        <Form.Control
+          type="text"
+          id="inputState"
+          placeholder={t('enterState')}
+          value={userDetails.state}
+          onChange={(e) => handleFieldChange('state', e.target.value)}
+          className={styles.cardControl}
+          data-testid="inputState"
+        />
+      </Col>
+      <Col lg={4}>
+        <Form.Label htmlFor="country" className={styles.cardLabel}>
+          {t('country')}
+        </Form.Label>
+        <Form.Control
+          as="select"
+          id="country"
+          value={userDetails.country}
+          onChange={(e) => handleFieldChange('country', e.target.value)}
+          className={styles.cardControl}
+          data-testid="inputCountry"
+        >
+          <option value="" disabled>
+            {t('selectCountry')}
+          </option>
+          {[...countryOptions]
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map((country) => (
+              <option
+                key={country.value.toUpperCase()}
+                value={country.value.toUpperCase()}
+                aria-label={`Select ${country.label} as your country`}
+              >
+                {country.label}
+              </option>
+            ))}
+        </Form.Control>
+      </Col>
+    </Row>
+  );
+};
+
+export default UserAddressFields;
diff --git a/src/components/UserPortal/UserProfile/common.module.css b/src/components/UserPortal/UserProfile/common.module.css
new file mode 100644
index 0000000000..a8125dcb3a
--- /dev/null
+++ b/src/components/UserPortal/UserProfile/common.module.css
@@ -0,0 +1,39 @@
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+.scrollableCardBody {
+  max-height: min(220px, 50vh);
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardBody {
+  padding: 1.25rem 1rem 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+.cardLabel {
+  font-weight: bold;
+  padding-bottom: 1px;
+  font-size: 14px;
+  color: #707070;
+  margin-bottom: 10px;
+}
+
+.cardControl {
+  margin-bottom: 20px;
+}
+
+.cardButton {
+  width: fit-content;
+}
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.module.css b/src/components/UserPortal/UserSidebar/UserSidebar.module.css
new file mode 100644
index 0000000000..aafeaeff97
--- /dev/null
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.module.css
@@ -0,0 +1,239 @@
+.leftDrawer {
+  width: calc(300px);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 0 1rem;
+  background-color: var(--bs-white);
+  transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
+}
+
+.activeDrawer {
+  width: calc(300px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: comeToRightBigScreen 0.5s ease-in-out;
+}
+
+.inactiveDrawer {
+  position: fixed;
+  top: 0;
+  left: calc(-300px - 2rem);
+  bottom: 0;
+  animation: goToLeftBigScreen 0.5s ease-in-out;
+}
+
+.leftDrawer .talawaLogo {
+  width: 100%;
+  height: 65px;
+}
+
+.leftDrawer .talawaText {
+  font-size: 20px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.leftDrawer .titleHeader {
+  margin: 2rem 0 1rem 0;
+  font-weight: 600;
+}
+
+.leftDrawer .optionList button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: start;
+  margin-bottom: 0.8rem;
+  border-radius: 16px;
+  outline: none;
+  border: none;
+}
+
+.leftDrawer .optionList button .iconWrapper {
+  width: 36px;
+}
+
+.leftDrawer .profileContainer {
+  border: none;
+  width: 100%;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  background-color: var(--bs-white);
+}
+
+.leftDrawer .profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+
+.leftDrawer .imageContainer {
+  width: 68px;
+}
+
+.leftDrawer .profileContainer img {
+  height: 52px;
+  width: 52px;
+  border-radius: 50%;
+}
+
+.leftDrawer .profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+}
+
+.leftDrawer .profileContainer .profileText .primaryText {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.leftDrawer .profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+@media (max-width: 1120px) {
+  .leftDrawer {
+    width: calc(250px + 2rem);
+    padding: 1rem 1rem 0 1rem;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .hideElemByDefault {
+    display: none;
+  }
+
+  .leftDrawer {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .inactiveDrawer {
+    opacity: 0;
+    left: 0;
+    z-index: -1;
+    animation: closeDrawer 0.4s ease-in-out;
+  }
+
+  .activeDrawer {
+    display: flex;
+    z-index: 100;
+    animation: openDrawer 0.6s ease-in-out;
+  }
+
+  .logout {
+    margin-bottom: 2.5rem !important;
+  }
+}
+
+@keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+@keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+@keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
new file mode 100644
index 0000000000..79d603614f
--- /dev/null
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.test.tsx
@@ -0,0 +1,551 @@
+import React, { act } from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import styles from './UserSidebar.module.css';
+import {
+  USER_DETAILS,
+  USER_JOINED_ORGANIZATIONS,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import UserSidebar from './UserSidebar';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const resizeWindow = (width: number): void => {
+  act(() => {
+    window.innerWidth = width;
+    fireEvent(window, new Event('resize'));
+  });
+};
+
+const props = {
+  hideDrawer: true,
+  setHideDrawer: jest.fn(),
+};
+
+const MOCKS = [
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'properId',
+      },
+    },
+    result: {
+      data: {
+        user: {
+          user: {
+            _id: 'properId',
+            image: null,
+            firstName: 'Noble',
+            lastName: 'Mittal',
+            email: 'noble@mittal.com',
+            createdAt: '2023-02-18T09:22:27.969Z',
+            joinedOrganizations: [],
+            membershipRequests: [],
+            registeredEvents: [],
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+          },
+          appUserProfile: {
+            _id: 'properId',
+            adminFor: [],
+            createdOrganizations: [],
+            createdEvents: [],
+            eventAdmin: [],
+            isSuperAdmin: true,
+            pluginCreationAllowed: true,
+            appLanguageCode: 'en',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: 'properId',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'imagePresent',
+      },
+    },
+    result: {
+      data: {
+        user: {
+          user: {
+            _id: '2',
+            image: 'adssda',
+            firstName: 'Noble',
+            lastName: 'Mittal',
+            email: 'noble@mittal.com',
+            createdAt: '2023-02-18T09:22:27.969Z',
+            joinedOrganizations: [],
+            membershipRequests: [],
+            registeredEvents: [],
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+          },
+          appUserProfile: {
+            _id: '2',
+            adminFor: [],
+            createdOrganizations: [],
+            createdEvents: [],
+            eventAdmin: [],
+            isSuperAdmin: true,
+            pluginCreationAllowed: true,
+            appLanguageCode: 'en',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: 'imagePresent',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: 'dadsa',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'orgEmpty',
+      },
+    },
+    result: {
+      data: {
+        user: {
+          user: {
+            _id: 'orgEmpty',
+            image: null,
+            firstName: 'Noble',
+            lastName: 'Mittal',
+            email: 'noble@mittal.com',
+            createdAt: '2023-02-18T09:22:27.969Z',
+            joinedOrganizations: [],
+            membershipRequests: [],
+            registeredEvents: [],
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+          },
+          appUserProfile: {
+            _id: 'orgEmpty',
+            adminFor: [],
+            createdOrganizations: [],
+            createdEvents: [],
+            eventAdmin: [],
+            isSuperAdmin: true,
+            pluginCreationAllowed: true,
+            appLanguageCode: 'en',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: 'orgEmpty',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [],
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const renderUserSidebar = (
+  userId: string,
+  link: StaticMockLink,
+): RenderResult => {
+  setItem('userId', userId);
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <UserSidebar {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('UserSidebar Component Tests in User Portal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('UserSidebar component renders correctly with user data present', async () => {
+    await act(async () => {
+      renderUserSidebar('properId', link);
+      await wait();
+    });
+    expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+  });
+
+  test('Displays the logo and title text of the User Portal', async () => {
+    await act(async () => {
+      renderUserSidebar('properId', link);
+      await wait();
+    });
+    expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+    expect(screen.getByTestId('leftDrawerContainer')).toBeVisible();
+  });
+
+  test('UserSidebar renders correctly when joinedOrganizations list is empty', async () => {
+    await act(async () => {
+      renderUserSidebar('orgEmpty', link);
+      await wait();
+    });
+    expect(screen.getByText('My Organizations')).toBeInTheDocument();
+  });
+
+  test('Renders UserSidebar component with organization image when present', async () => {
+    await act(async () => {
+      renderUserSidebar('imagePresent', link);
+      await wait();
+    });
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  test('User profile data renders with all expected navigation links visible', async () => {
+    await act(async () => {
+      renderUserSidebar('properId', link);
+      await wait();
+    });
+
+    const expectedLinks = ['My Organizations', 'Settings', 'Chat'];
+    expectedLinks.forEach((link) => {
+      expect(screen.getByText(link)).toBeInTheDocument();
+    });
+  });
+
+  test('UserSidebar renders correctly on smaller screens and toggles drawer visibility', async () => {
+    await act(async () => {
+      resizeWindow(800);
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <UserSidebar {...props} />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    const orgsBtn = screen.getByTestId('orgsBtn');
+    act(() => orgsBtn.click());
+    expect(props.setHideDrawer).toHaveBeenCalledWith(true);
+  });
+
+  test('Active route button style changes correctly upon click', async () => {
+    await act(async () => {
+      renderUserSidebar('properId', link);
+      await wait();
+    });
+
+    const orgsBtn = screen.getByTestId('orgsBtn');
+    const settingsBtn = screen.getByTestId('settingsBtn');
+
+    fireEvent.click(orgsBtn);
+    expect(orgsBtn).toHaveClass('text-white btn btn-success');
+    fireEvent.click(settingsBtn);
+    expect(settingsBtn).toHaveClass('text-white btn btn-success');
+  });
+
+  test('Translation hook displays expected text in UserSidebar', async () => {
+    await act(async () => {
+      renderUserSidebar('properId', link);
+      await wait();
+    });
+    expect(
+      screen.getByText(i18nForTest.t('common:settings')),
+    ).toBeInTheDocument();
+  });
+
+  test('handleLinkClick function closes the sidebar on mobile view when a link is clicked', async () => {
+    resizeWindow(800);
+    await act(async () => {
+      renderUserSidebar('properId', link);
+      await wait();
+    });
+    const chatBtn = screen.getByTestId('chatBtn');
+    fireEvent.click(chatBtn);
+    expect(props.setHideDrawer).toHaveBeenCalledWith(true);
+  });
+
+  describe('UserSidebar Drawer Visibility Tests on Smaller Screens', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    test('Clicking a link closes the drawer when window width is 820px or less', () => {
+      act(() => {
+        window.innerWidth = 820;
+        window.dispatchEvent(new Event('resize'));
+      });
+
+      render(
+        <MockedProvider addTypename={false}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <UserSidebar {...props} />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+
+      const linkElement = screen.getByText('My Organizations'); // Adjust text if different
+      fireEvent.click(linkElement);
+
+      expect(props.setHideDrawer).toHaveBeenCalledWith(true);
+    });
+
+    describe('UserSidebar Drawer State Tests', () => {
+      test('Drawer visibility changes based on hideDrawer prop', () => {
+        const { rerender } = render(
+          <MockedProvider addTypename={false}>
+            <BrowserRouter>
+              <Provider store={store}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <UserSidebar {...props} hideDrawer={null} />
+                </I18nextProvider>
+              </Provider>
+            </BrowserRouter>
+          </MockedProvider>,
+        );
+
+        expect(screen.getByTestId('leftDrawerContainer')).toHaveClass(
+          styles.hideElemByDefault,
+        );
+
+        rerender(
+          <MockedProvider addTypename={false}>
+            <BrowserRouter>
+              <Provider store={store}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <UserSidebar {...props} hideDrawer={true} />
+                </I18nextProvider>
+              </Provider>
+            </BrowserRouter>
+          </MockedProvider>,
+        );
+        expect(screen.getByTestId('leftDrawerContainer')).toHaveClass(
+          styles.inactiveDrawer,
+        );
+
+        rerender(
+          <MockedProvider addTypename={false}>
+            <BrowserRouter>
+              <Provider store={store}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <UserSidebar {...props} hideDrawer={false} />
+                </I18nextProvider>
+              </Provider>
+            </BrowserRouter>
+          </MockedProvider>,
+        );
+        expect(screen.getByTestId('leftDrawerContainer')).toHaveClass(
+          styles.activeDrawer,
+        );
+      });
+    });
+  });
+});
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
new file mode 100644
index 0000000000..5e258f8a8e
--- /dev/null
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { NavLink } from 'react-router-dom';
+import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
+import SettingsIcon from 'assets/svgs/settings.svg?react';
+import ChatIcon from 'assets/svgs/chat.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
+import styles from './UserSidebar.module.css';
+
+export interface InterfaceUserSidebarProps {
+  hideDrawer: boolean | null;
+  setHideDrawer: React.Dispatch<React.SetStateAction<boolean | null>>;
+}
+
+/**
+ * Sidebar component for user navigation, including links to organizations and settings.
+ *
+ * Provides:
+ * - A logo and title for the sidebar.
+ * - Navigation buttons for "My Organizations" and "Settings".
+ * - Dynamic styling based on the active route.
+ *
+ * @param hideDrawer - Boolean indicating if the sidebar should be hidden or shown.
+ * @param setHideDrawer - Function to update the `hideDrawer` state.
+ *
+ * @returns JSX.Element - The rendered sidebar component.
+ */
+const userSidebar = ({
+  hideDrawer,
+  setHideDrawer,
+}: InterfaceUserSidebarProps): JSX.Element => {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', { keyPrefix: 'userSidebarOrg' });
+  const { t: tCommon } = useTranslation('common');
+
+  /**
+   * Handles click events on navigation links.
+   * Closes the sidebar if the viewport width is 820px or less.
+   */
+  const handleLinkClick = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(true);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`${styles.leftDrawer} ${
+          hideDrawer === null
+            ? styles.hideElemByDefault
+            : hideDrawer
+              ? styles.inactiveDrawer
+              : styles.activeDrawer
+        }`}
+        data-testid="leftDrawerContainer"
+      >
+        {/* Logo and title */}
+        <TalawaLogo className={styles.talawaLogo} />
+        <p className={styles.talawaText}>{t('talawaUserPortal')}</p>
+        <h5 className={`${styles.titleHeader} text-secondary`}>
+          {tCommon('menu')}
+        </h5>
+        <div className={styles.optionList}>
+          {/* Link to "My Organizations" page */}
+          <NavLink to={'/user/organizations'} onClick={handleLinkClick}>
+            {({ isActive }) => (
+              <Button
+                variant={isActive === true ? 'success' : ''}
+                className={`${
+                  isActive === true ? 'text-white' : 'text-secondary'
+                }`}
+                data-testid="orgsBtn"
+              >
+                <div className={styles.iconWrapper}>
+                  <OrganizationsIcon
+                    stroke={`${
+                      isActive === true
+                        ? 'var(--bs-white)'
+                        : 'var(--bs-secondary)'
+                    }`}
+                  />
+                </div>
+                {t('my organizations')}
+              </Button>
+            )}
+          </NavLink>
+          {/* Link to "Settings" page */}
+          <NavLink to={'/user/settings'} onClick={handleLinkClick}>
+            {({ isActive }) => (
+              <Button
+                variant={isActive === true ? 'success' : ''}
+                className={`${
+                  isActive === true ? 'text-white' : 'text-secondary'
+                }`}
+                data-testid="settingsBtn"
+              >
+                <div className={styles.iconWrapper}>
+                  <SettingsIcon
+                    stroke={`${
+                      isActive === true
+                        ? 'var(--bs-white)'
+                        : 'var(--bs-secondary)'
+                    }`}
+                  />
+                </div>
+                {tCommon('settings')}
+              </Button>
+            )}
+          </NavLink>
+          <NavLink to={'/user/chat'} onClick={handleLinkClick}>
+            {({ isActive }) => (
+              <Button
+                variant={isActive === true ? 'success' : ''}
+                className={`${
+                  isActive === true ? 'text-white' : 'text-secondary'
+                }`}
+                data-testid="chatBtn"
+              >
+                <div className={styles.iconWrapper}>
+                  <ChatIcon
+                    stroke={`${
+                      isActive === true
+                        ? 'var(--bs-white)'
+                        : 'var(--bs-secondary)'
+                    }`}
+                  />
+                </div>
+                {t('chat')}
+              </Button>
+            )}
+          </NavLink>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default userSidebar;
diff --git a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.module.css b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.module.css
new file mode 100644
index 0000000000..b300eb7e89
--- /dev/null
+++ b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.module.css
@@ -0,0 +1,351 @@
+.leftDrawer {
+  width: calc(300px + 2rem);
+  min-height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 0.8rem 1rem 0 1rem;
+  background-color: var(--bs-white);
+  transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
+}
+
+.activeDrawer {
+  width: calc(300px + 2rem);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: comeToRightBigScreen 0.5s ease-in-out;
+}
+
+.inactiveDrawer {
+  position: fixed;
+  top: 0;
+  left: calc(-300px - 2rem);
+  bottom: 0;
+  animation: goToLeftBigScreen 0.5s ease-in-out;
+}
+
+.leftDrawer .brandingContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.leftDrawer .organizationContainer button {
+  position: relative;
+  margin: 0.7rem 0;
+  padding: 2.5rem 0.1rem;
+  border-radius: 16px;
+}
+
+.leftDrawer .talawaLogo {
+  width: 50px;
+  height: 50px;
+  margin-right: 0.3rem;
+}
+
+.leftDrawer .talawaText {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.leftDrawer .titleHeader {
+  font-weight: 600;
+  margin: 0.6rem 0rem;
+}
+
+.leftDrawer .optionList {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.leftDrawer .optionList button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: start;
+  margin-bottom: 0.8rem;
+  border-radius: 16px;
+  font-size: 16px;
+  padding: 0.6rem;
+  padding-left: 0.8rem;
+  outline: none;
+  border: none;
+}
+
+.leftDrawer button .iconWrapper {
+  width: 36px;
+}
+
+.leftDrawer .optionList .collapseBtn {
+  height: 48px;
+  border: none;
+}
+
+.leftDrawer button .iconWrapperSm {
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.leftDrawer .organizationContainer .profileContainer {
+  background-color: #31bb6b33;
+  padding-right: 10px;
+}
+
+.leftDrawer .profileContainer {
+  border: none;
+  width: 100%;
+  height: 52px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  background-color: var(--bs-white);
+}
+
+.leftDrawer .profileContainer:focus {
+  outline: none;
+}
+
+.leftDrawer .imageContainer {
+  width: 68px;
+  margin-right: 8px;
+}
+
+.leftDrawer .profileContainer img {
+  height: 52px;
+  width: 52px;
+  border-radius: 50%;
+}
+
+.leftDrawer .profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+}
+
+.leftDrawer .profileContainer .profileText .primaryText {
+  font-size: 1.1rem;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+.leftDrawer .profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+@media (max-width: 1120px) {
+  .leftDrawer {
+    width: calc(250px + 2rem);
+    padding: 1rem 1rem 0 1rem;
+  }
+}
+
+/* For tablets */
+@media (max-height: 900px) {
+  .leftDrawer {
+    width: calc(300px + 1rem);
+  }
+  .leftDrawer .talawaLogo {
+    width: 38px;
+    height: 38px;
+    margin-right: 0.4rem;
+  }
+  .leftDrawer .talawaText {
+    font-size: 1rem;
+  }
+  .leftDrawer .organizationContainer button {
+    margin: 0.6rem 0;
+    padding: 2.2rem 0.1rem;
+  }
+  .leftDrawer .optionList button {
+    margin-bottom: 0.05rem;
+    font-size: 16px;
+    padding-left: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .primaryText {
+    font-size: 1rem;
+  }
+  .leftDrawer .profileContainer .profileText .secondaryText {
+    font-size: 0.8rem;
+  }
+}
+@media (max-height: 650px) {
+  .leftDrawer {
+    padding: 0.5rem 0.8rem 0 0.8rem;
+    width: calc(250px);
+  }
+  .leftDrawer .talawaText {
+    font-size: 0.8rem;
+  }
+  .leftDrawer .organizationContainer button {
+    margin: 0.2rem 0;
+    padding: 1.6rem 0rem;
+  }
+  .leftDrawer .titleHeader {
+    font-size: 16px;
+  }
+  .leftDrawer .optionList button {
+    margin-bottom: 0.05rem;
+    font-size: 14px;
+    padding: 0.4rem;
+    padding-left: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .primaryText {
+    font-size: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .secondaryText {
+    font-size: 0.6rem;
+  }
+  .leftDrawer .imageContainer {
+    width: 40px;
+    margin-left: 5px;
+    margin-right: 12px;
+  }
+  .leftDrawer .imageContainer img {
+    width: 40px;
+    height: 100%;
+  }
+}
+
+@media (max-width: 820px) {
+  .hideElemByDefault {
+    display: none;
+  }
+
+  .leftDrawer {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .inactiveDrawer {
+    opacity: 0;
+    left: 0;
+    z-index: -1;
+    animation: closeDrawer 0.2s ease-in-out;
+  }
+
+  .activeDrawer {
+    display: flex;
+    z-index: 100;
+    animation: openDrawer 0.4s ease-in-out;
+  }
+
+  .logout {
+    margin-bottom: 2.5rem;
+  }
+}
+
+@keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes goToLeftBigScreen {
+  from {
+    left: 0;
+  }
+
+  to {
+    opacity: 0.1;
+    left: calc(-300px - 2rem);
+  }
+}
+
+@keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes comeToRightBigScreen {
+  from {
+    opacity: 0.4;
+    left: calc(-300px - 2rem);
+  }
+
+  to {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+@keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes closeDrawer {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+
+  to {
+    left: -1000px;
+    opacity: 0;
+  }
+}
+
+@keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+
+/* Webkit prefix for older browser compatibility */
+@-webkit-keyframes openDrawer {
+  from {
+    opacity: 0;
+    left: -1000px;
+  }
+
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
diff --git a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
new file mode 100644
index 0000000000..2f28d9afd1
--- /dev/null
+++ b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.test.tsx
@@ -0,0 +1,418 @@
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { I18nextProvider } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceUserSidebarOrgProps } from './UserSidebarOrg';
+import UserSidebarOrg from './UserSidebarOrg';
+import { Provider } from 'react-redux';
+import { MockedProvider } from '@apollo/react-testing';
+import { store } from 'state/store';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const props: InterfaceUserSidebarOrgProps = {
+  orgId: '123',
+  targets: [
+    {
+      name: 'Posts',
+      url: '/user/organization/123',
+    },
+    {
+      name: 'People',
+      url: '/user/people/123',
+    },
+    {
+      name: 'Events',
+      url: '/user/events/123',
+    },
+    {
+      name: 'Donations',
+      url: '/user/donate/123',
+    },
+    {
+      name: 'Settings',
+      url: '/user/settings',
+    },
+    {
+      name: 'All Organizations',
+      url: '/user/organizations/',
+    },
+  ],
+  hideDrawer: false,
+  setHideDrawer: jest.fn(),
+};
+
+const MOCKS = [
+  {
+    request: {
+      query: REVOKE_REFRESH_TOKEN,
+    },
+    result: {
+      data: {
+        revokeRefreshTokenForUser: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'JohnDoe@example.com',
+            },
+            name: 'Test Organization',
+            description: 'Testing this organization',
+            address: {
+              city: 'Delhi',
+              countryCode: 'IN',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '110001',
+              sortingCode: 'ABC-123',
+              state: 'Delhi',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: true,
+            members: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+                createdAt: '4567890234',
+              },
+              {
+                _id: 'jane123',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                email: 'JaneDoe@example.com',
+                createdAt: '4567890234',
+              },
+            ],
+            admins: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+                createdAt: '4567890234',
+              },
+            ],
+            membershipRequests: [],
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const MOCKS_WITH_IMAGE = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image:
+              'https://api.dicebear.com/5.x/initials/svg?seed=Test%20Organization',
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'JohnDoe@example.com',
+            },
+            name: 'Test Organization',
+            description: 'Testing this organization',
+            address: {
+              city: 'Delhi',
+              countryCode: 'IN',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '110001',
+              sortingCode: 'ABC-123',
+              state: 'Delhi',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: true,
+            members: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+                createdAt: '4567890234',
+              },
+              {
+                _id: 'jane123',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                email: 'JaneDoe@example.com',
+                createdAt: '4567890234',
+              },
+            ],
+            admins: [
+              {
+                _id: 'john123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'JohnDoe@example.com',
+                createdAt: '4567890234',
+              },
+            ],
+            membershipRequests: [],
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const MOCKS_EMPTY = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [],
+      },
+    },
+  },
+];
+
+const defaultScreens = [
+  'People',
+  'Events',
+  'Posts',
+  'Donations',
+  'All Organizations',
+];
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+beforeEach(() => {
+  setItem('FirstName', 'John');
+  setItem('LastName', 'Doe');
+  setItem(
+    'UserImage',
+    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+  );
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+  localStorage.clear();
+});
+
+const link = new StaticMockLink(MOCKS, true);
+const linkImage = new StaticMockLink(MOCKS_WITH_IMAGE, true);
+const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true);
+
+describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
+  test('Component should be rendered properly', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    defaultScreens.map((screenName) => {
+      expect(screen.getByText(screenName)).toBeInTheDocument();
+    });
+  });
+
+  test('Testing Profile Page & Organization Detail Modal', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(screen.getByTestId(/orgBtn/i)).toBeInTheDocument();
+  });
+
+  test('Testing Menu Buttons', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByText('People'));
+    expect(global.window.location.pathname).toContain('/user/people/123');
+  });
+
+  test('Testing when screen size is less than 820px', async () => {
+    setItem('SuperAdmin', true);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    resizeWindow(800);
+    expect(screen.getAllByText(/People/i)[0]).toBeInTheDocument();
+
+    const peopelBtn = screen.getByTestId(/People/i);
+    userEvent.click(peopelBtn);
+    await wait();
+    expect(window.location.pathname).toContain('user/people/123');
+  });
+
+  test('Testing when image is present for Organization', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={linkImage}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('Testing when Organization does not exists', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={linkEmpty}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(
+      screen.getByText(/Error Occured while loading the Organization/i),
+    ).toBeInTheDocument();
+  });
+
+  test('Testing Drawer when hideDrawer is null', () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  });
+
+  test('Testing Drawer when hideDrawer is true', () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserSidebarOrg {...props} hideDrawer={true} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  });
+});
diff --git a/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx
new file mode 100644
index 0000000000..19036b2307
--- /dev/null
+++ b/src/components/UserPortal/UserSidebarOrg/UserSidebarOrg.tsx
@@ -0,0 +1,197 @@
+import { useQuery } from '@apollo/client';
+import { WarningAmberOutlined } from '@mui/icons-material';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown';
+import IconComponent from 'components/IconComponent/IconComponent';
+import React, { useEffect, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { NavLink } from 'react-router-dom';
+import type { TargetsType } from 'state/reducers/routesReducer';
+import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
+import AngleRightIcon from 'assets/svgs/angleRight.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
+import styles from './UserSidebarOrg.module.css';
+import Avatar from 'components/Avatar/Avatar';
+
+export interface InterfaceUserSidebarOrgProps {
+  orgId: string;
+  targets: TargetsType[];
+  hideDrawer: boolean | null;
+  setHideDrawer: React.Dispatch<React.SetStateAction<boolean | null>>;
+}
+
+/**
+ * Sidebar component for user navigation within an organization.
+ *
+ * Provides:
+ * - Branding with the Talawa logo.
+ * - Displays the current organization's details.
+ * - Navigation options with links and collapsible dropdowns.
+ *
+ * @param orgId - ID of the current organization.
+ * @param targets - List of navigation targets.
+ * @param hideDrawer - Boolean indicating if the sidebar should be hidden or shown.
+ * @param setHideDrawer - Function to update the `hideDrawer` state.
+ *
+ * @returns JSX.Element - The rendered sidebar component.
+ */
+const UserSidebarOrg = ({
+  targets,
+  orgId,
+  hideDrawer,
+  setHideDrawer,
+}: InterfaceUserSidebarOrgProps): JSX.Element => {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', { keyPrefix: 'userSidebarOrg' });
+  const { t: tCommon } = useTranslation('common');
+
+  // State for managing dropdown visibility
+  const [showDropdown, setShowDropdown] = React.useState(false);
+
+  // State for organization data
+  const [organization, setOrganization] =
+    useState<InterfaceQueryOrganizationsListObject>();
+
+  // Query to fetch organization data
+  const {
+    data,
+    loading,
+  }: {
+    data:
+      | { organizations: InterfaceQueryOrganizationsListObject[] }
+      | undefined;
+    loading: boolean;
+  } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: orgId },
+  });
+
+  // Set organization data once the query is complete
+  useEffect(() => {
+    let isMounted = true;
+    if (data && isMounted) {
+      setOrganization(data?.organizations[0]);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [data]);
+
+  /**
+   * Handles click events on navigation links.
+   * Closes the sidebar if the viewport width is 820px or less.
+   */
+  const handleLinkClick = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(true);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`${styles.leftDrawer} ${
+          hideDrawer === null
+            ? styles.hideElemByDefault
+            : hideDrawer
+              ? styles.inactiveDrawer
+              : styles.activeDrawer
+        }`}
+        data-testid="leftDrawerContainer"
+      >
+        {/* Branding Section */}
+        <div className={styles.brandingContainer}>
+          <TalawaLogo className={styles.talawaLogo} />
+          <span className={styles.talawaText}>{t('talawaUserPortal')}</span>
+        </div>
+
+        {/* Organization Section */}
+        <div className={styles.organizationContainer}>
+          {loading ? (
+            <>
+              <button
+                className={`${styles.profileContainer} shimmer`}
+                data-testid="orgBtn"
+              />
+            </>
+          ) : organization == undefined ? (
+            <>
+              <button
+                className={`${styles.profileContainer} bg-danger text-start text-white`}
+                disabled
+              >
+                <div className="px-3">
+                  <WarningAmberOutlined />
+                </div>
+                Error Occured while loading the Organization
+              </button>
+            </>
+          ) : (
+            <button className={styles.profileContainer} data-testid="OrgBtn">
+              <div className={styles.imageContainer}>
+                {organization.image ? (
+                  <img src={organization.image} alt={`profile picture`} />
+                ) : (
+                  <Avatar
+                    name={organization.name}
+                    alt={'Dummy Organization Picture'}
+                  />
+                )}
+              </div>
+              <div className={styles.profileText}>
+                <span className={styles.primaryText}>{organization.name}</span>
+                <span className={styles.secondaryText}>
+                  {organization.address.city}
+                </span>
+              </div>
+              <AngleRightIcon fill={'var(--bs-secondary)'} />
+            </button>
+          )}
+        </div>
+
+        {/* Options List */}
+        <div className={styles.optionList}>
+          <h5 className={`${styles.titleHeader} text-secondary`}>
+            {tCommon('menu')}
+          </h5>
+          {targets.map(({ name, url }, index) => {
+            return url ? (
+              <NavLink to={url} key={name} onClick={handleLinkClick}>
+                {({ isActive }) => (
+                  <Button
+                    key={name}
+                    variant={isActive === true ? 'success' : ''}
+                    className={`${
+                      isActive === true ? 'text-white' : 'text-secondary'
+                    }`}
+                  >
+                    <div className={styles.iconWrapper}>
+                      <IconComponent
+                        name={name}
+                        fill={
+                          isActive === true
+                            ? 'var(--bs-white)'
+                            : 'var(--bs-secondary)'
+                        }
+                      />
+                    </div>
+                    {tCommon(name)}
+                  </Button>
+                )}
+              </NavLink>
+            ) : (
+              <CollapsibleDropdown
+                key={name}
+                target={targets[index]}
+                showDropdown={showDropdown}
+                setShowDropdown={setShowDropdown}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default UserSidebarOrg;
diff --git a/src/components/UserProfileSettings/DeleteUser.test.tsx b/src/components/UserProfileSettings/DeleteUser.test.tsx
new file mode 100644
index 0000000000..34ab44fbe5
--- /dev/null
+++ b/src/components/UserProfileSettings/DeleteUser.test.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import DeleteUser from './DeleteUser';
+
+describe('Delete User component', () => {
+  test('renders delete user correctly', () => {
+    const { getByText, getAllByText } = render(
+      <MockedProvider addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <DeleteUser />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(
+      getByText(
+        'By clicking on Delete User button your user will be permanently deleted along with its events, tags and all related data.',
+      ),
+    ).toBeInTheDocument();
+    expect(getAllByText('Delete User')[0]).toBeInTheDocument();
+  });
+});
diff --git a/src/components/UserProfileSettings/DeleteUser.tsx b/src/components/UserProfileSettings/DeleteUser.tsx
new file mode 100644
index 0000000000..90b5f25433
--- /dev/null
+++ b/src/components/UserProfileSettings/DeleteUser.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, Card } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import styles from './UserProfileSettings.module.css';
+
+/**
+ * DeleteUser component displays a card with a button to delete a user.
+ * It includes a message and a button to trigger the delete action.
+ *
+ * @returns The JSX element for the delete user card.
+ */
+const DeleteUser: React.FC = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'settings',
+  });
+  return (
+    <>
+      <Card border="0" className="rounded-4 mb-4">
+        <div className={styles.cardHeader}>
+          <div className={styles.cardTitle}>{t('deleteUser')}</div>
+        </div>
+        <Card.Body className={styles.cardBody}>
+          <p style={{ margin: '1rem 0' }}>{t('deleteUserMessage')}</p>
+          <Button variant="danger">{t('deleteUser')}</Button>
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
+
+export default DeleteUser;
diff --git a/src/components/UserProfileSettings/OtherSettings.test.tsx b/src/components/UserProfileSettings/OtherSettings.test.tsx
new file mode 100644
index 0000000000..990a430931
--- /dev/null
+++ b/src/components/UserProfileSettings/OtherSettings.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import OtherSettings from './OtherSettings';
+
+describe('Delete User component', () => {
+  test('renders delete user correctly', () => {
+    const { getByText } = render(
+      <MockedProvider addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OtherSettings />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(getByText('Other Settings')).toBeInTheDocument();
+    expect(getByText('Change Language')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/UserProfileSettings/OtherSettings.tsx b/src/components/UserProfileSettings/OtherSettings.tsx
new file mode 100644
index 0000000000..e83632c8b1
--- /dev/null
+++ b/src/components/UserProfileSettings/OtherSettings.tsx
@@ -0,0 +1,32 @@
+import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
+import React from 'react';
+import { Card, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import styles from './UserProfileSettings.module.css';
+
+/**
+ * OtherSettings component displays a card with settings options such as changing the language.
+ * It includes a label and a dropdown for selecting a different language.
+ *
+ * @returns The JSX element for the other settings card.
+ */
+const OtherSettings: React.FC = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'settings',
+  });
+  return (
+    <Card border="0" className="rounded-4 mb-4">
+      <div className={styles.cardHeader}>
+        <div className={styles.cardTitle}>{t('otherSettings')}</div>
+      </div>
+      <Card.Body className={styles.cardBody}>
+        <Form.Label className={`text-secondary fw-bold ${styles.cardLabel}`}>
+          {t('changeLanguage')}
+        </Form.Label>
+        <ChangeLanguageDropDown />
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default OtherSettings;
diff --git a/src/components/UserProfileSettings/UserProfile.test.tsx b/src/components/UserProfileSettings/UserProfile.test.tsx
new file mode 100644
index 0000000000..82caad5d81
--- /dev/null
+++ b/src/components/UserProfileSettings/UserProfile.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import UserProfile from './UserProfile';
+import { MockedProvider } from '@apollo/react-testing';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+
+describe('UserProfile component', () => {
+  test('renders user profile details correctly', () => {
+    const userDetails = {
+      firstName: 'Christopher',
+      lastName: 'Doe',
+      createdAt: '2023-04-13T04:53:17.742+00:00',
+      email: 'john.doe@example.com',
+      image: 'profile-image-url',
+    };
+    const { getByText, getByAltText } = render(
+      <MockedProvider addTypename={false}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UserProfile {...userDetails} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(getByText('Chris..')).toBeInTheDocument();
+    expect(getByText('john..@example.com')).toBeInTheDocument();
+
+    const profileImage = getByAltText('profile picture');
+    expect(profileImage).toBeInTheDocument();
+    expect(profileImage).toHaveAttribute('src', 'profile-image-url');
+
+    expect(getByText('Joined 13 April 2023')).toBeInTheDocument();
+
+    expect(getByText('Copy Profile Link')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/UserProfileSettings/UserProfile.tsx b/src/components/UserProfileSettings/UserProfile.tsx
new file mode 100644
index 0000000000..9d24c15480
--- /dev/null
+++ b/src/components/UserProfileSettings/UserProfile.tsx
@@ -0,0 +1,106 @@
+import Avatar from 'components/Avatar/Avatar';
+import React from 'react';
+import { Button, Card } from 'react-bootstrap';
+import CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined';
+import { useTranslation } from 'react-i18next';
+import styles from './UserProfileSettings.module.css';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+
+interface InterfaceUserProfile {
+  firstName: string;
+  lastName: string;
+  createdAt: string;
+  email: string;
+  image: string;
+}
+const joinedDate = (param: string): string => {
+  const date = new Date(param);
+  if (date?.toDateString() === 'Invalid Date') {
+    return 'Unavailable';
+  }
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  return `${day} ${month} ${year}`;
+};
+
+/**
+ * UserProfile component displays user profile details including an avatar or profile image, name, email, and join date.
+ * It also provides a button to copy the profile link.
+ *
+ * @param  props - The properties to be passed into the component.
+ * @param firstName - The first name of the user.
+ * @param lastName - The last name of the user.
+ * @param email - The email address of the user.
+ * @param image - The URL of the user's profile image.
+ * @returns The JSX element for the user profile card.
+ */
+const UserProfile: React.FC<InterfaceUserProfile> = ({
+  firstName,
+  lastName,
+  createdAt,
+  email,
+  image,
+}): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'settings',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  return (
+    <>
+      <Card border="0" className="rounded-4 mb-4">
+        <div className={styles.cardHeader}>
+          <div className={styles.cardTitle}>{t('profileDetails')}</div>
+        </div>
+        <Card.Body className={styles.cardBody}>
+          <div className={`d-flex mb-2 ${styles.profileContainer}`}>
+            <div className={styles.imgContianer}>
+              {image && image !== 'null' ? (
+                <img src={image} alt={`profile picture`} />
+              ) : (
+                <Avatar
+                  name={`${firstName} ${lastName}`}
+                  alt={`dummy picture`}
+                />
+              )}
+            </div>
+            <div className={styles.profileDetails}>
+              <span
+                style={{ fontWeight: '700', fontSize: '28px' }}
+                data-tooltip-id="name"
+                data-tooltip-content={`${firstName} ${lastName}`}
+              >
+                {firstName.length > 10
+                  ? firstName.slice(0, 5) + '..'
+                  : firstName}
+              </span>
+              <ReactTooltip id="name" />
+              <span
+                data-testid="userEmail"
+                data-tooltip-id="email"
+                data-tooltip-content={email}
+              >
+                {email.length > 10
+                  ? email.slice(0, 4) + '..' + email.slice(email.indexOf('@'))
+                  : email}
+              </span>
+              <ReactTooltip id="email" />
+              <span className="d-flex">
+                <CalendarMonthOutlinedIcon />
+                <span className="d-flex align-end">
+                  {tCommon('joined')} {joinedDate(createdAt)}
+                </span>
+              </span>
+            </div>
+          </div>
+          <div className="mt-4 mb-1 d-flex justify-content-center">
+            <Button data-testid="copyProfileLink">{t('copyLink')}</Button>
+          </div>
+        </Card.Body>
+      </Card>
+    </>
+  );
+};
+
+export default UserProfile;
diff --git a/src/components/UserProfileSettings/UserProfileSettings.module.css b/src/components/UserProfileSettings/UserProfileSettings.module.css
new file mode 100644
index 0000000000..2c7cc76f57
--- /dev/null
+++ b/src/components/UserProfileSettings/UserProfileSettings.module.css
@@ -0,0 +1,77 @@
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  padding: 1.25rem 1rem 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.cardLabel {
+  font-weight: bold;
+  padding-bottom: 1px;
+  font-size: 14px;
+  color: #707070;
+  margin-bottom: 10px;
+}
+
+.cardControl {
+  margin-bottom: 20px;
+}
+
+.cardButton {
+  width: fit-content;
+}
+
+.imgContianer {
+  margin: 0 2rem 0 0;
+}
+
+.imgContianer img {
+  height: 120px;
+  width: 120px;
+  border-radius: 50%;
+}
+
+.profileDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-left: 10%;
+}
+
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .imgContianer {
+    margin: 1rem auto;
+  }
+  .profileContainer {
+    flex-direction: column;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .profileContainer {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  .imgContianer {
+    margin: 1rem auto;
+  }
+  .profileContainer {
+    flex-direction: column;
+  }
+}
diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx
new file mode 100644
index 0000000000..687165b78d
--- /dev/null
+++ b/src/components/UsersTableItem/UserTableItem.test.tsx
@@ -0,0 +1,1341 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+import { MOCKS, MOCKS2, MOCKS_UPDATE } from './UserTableItemMocks';
+import UsersTableItem from './UsersTableItem';
+import { BrowserRouter } from 'react-router-dom';
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS2, true);
+const link3 = new StaticMockLink(MOCKS_UPDATE, true);
+import useLocalStorage from 'utils/useLocalstorage';
+import {
+  REMOVE_ADMIN_MUTATION,
+  REMOVE_MEMBER_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import userEvent from '@testing-library/user-event';
+
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+const resetAndRefetchMock = jest.fn();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+    warning: jest.fn(),
+  },
+}));
+
+Object.defineProperty(window, 'location', {
+  value: {
+    replace: jest.fn(),
+  },
+  writable: true,
+});
+
+const mockNavgatePush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavgatePush,
+}));
+
+beforeEach(() => {
+  setItem('SuperAdmin', true);
+  setItem('id', '123');
+});
+
+afterEach(() => {
+  localStorage.clear();
+  jest.clearAllMocks();
+});
+
+describe('Testing User Table Item', () => {
+  console.error = jest.fn((message) => {
+    if (message.includes('validateDOMNesting')) {
+      return;
+    }
+    // Log other console errors
+    console.warn(message);
+  });
+  test('Should render props and text elements test for the page component', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: null,
+          email: 'john@example.com',
+          createdAt: '2023-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'XYZ',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'mno',
+              name: 'MNO',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-06-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'def',
+              name: 'Joined Organization 2',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-07-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UsersTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByText(/1/i)).toBeInTheDocument();
+    expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
+    expect(screen.getByText(/john@example.com/i)).toBeInTheDocument();
+    expect(screen.getByTestId(`showJoinedOrgsBtn${123}`)).toBeInTheDocument();
+    expect(
+      screen.getByTestId(`showBlockedByOrgsBtn${123}`),
+    ).toBeInTheDocument();
+  });
+
+  test('Should render elements correctly when JoinedOrgs and BlockedByOrgs are empty', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: null,
+          email: 'john@example.com',
+          createdAt: '2023-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [],
+          joinedOrganizations: [],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <UsersTableItem {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showJoinedOrgsBtn = screen.getByTestId(`showJoinedOrgsBtn${123}`); // 123 is userId
+    const showBlockedByOrgsBtn = screen.getByTestId(
+      `showBlockedByOrgsBtn${123}`,
+    ); // 123 is userId
+
+    // Open JoinedOrgs Modal -> Expect modal to contain text and no search box -> Close Modal
+    fireEvent.click(showJoinedOrgsBtn);
+    expect(
+      screen.queryByTestId(`searchByNameJoinedOrgs`),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/John Doe has not joined any organization/i),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId(`closeJoinedOrgsBtn${123}`));
+
+    // Open BlockedByOrgs Modal -> Expect modal to contain text and no search box -> Close Modal
+    fireEvent.click(showBlockedByOrgsBtn);
+    expect(
+      screen.queryByTestId(`searchByNameOrgsBlockedBy`),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/John Doe is not blocked by any organization/i),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId(`closeBlockedByOrgsBtn${123}`));
+  });
+
+  test('Should render props and text elements test for the Joined Organizations Modal properly', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: null,
+          email: 'john@example.com',
+          createdAt: '2023-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'XYZ',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'mno',
+              name: 'MNO',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-06-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'def',
+              name: 'Joined Organization 2',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-07-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <UsersTableItem {...props} />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showJoinedOrgsBtn = screen.getByTestId(`showJoinedOrgsBtn${123}`);
+    expect(showJoinedOrgsBtn).toBeInTheDocument();
+    fireEvent.click(showJoinedOrgsBtn);
+    expect(screen.getByTestId('modal-joined-org-123')).toBeInTheDocument();
+
+    // Close using escape key and reopen
+    fireEvent.keyDown(screen.getByTestId('modal-joined-org-123'), {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    });
+    expect(
+      screen.queryByRole('dialog')?.className.includes('show'),
+    ).toBeFalsy();
+    fireEvent.click(showJoinedOrgsBtn);
+    // Close using close button and reopen
+    fireEvent.click(screen.getByTestId(`closeJoinedOrgsBtn${123}`));
+    expect(
+      screen.queryByRole('dialog')?.className.includes('show'),
+    ).toBeFalsy();
+
+    fireEvent.click(showJoinedOrgsBtn);
+
+    // Expect the following to exist in modal
+    const inputBox = screen.getByTestId(`searchByNameJoinedOrgs`);
+    expect(inputBox).toBeInTheDocument();
+    expect(screen.getByText(/Joined Organization 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Joined Organization 2/i)).toBeInTheDocument();
+    const elementsWithKingston = screen.getAllByText(/Kingston/i);
+    elementsWithKingston.forEach((element) => {
+      expect(element).toBeInTheDocument();
+    });
+    expect(screen.getByText(/29-06-2023/i)).toBeInTheDocument();
+    expect(screen.getByText(/29-07-2023/i)).toBeInTheDocument();
+    expect(screen.getByTestId('removeUserFromOrgBtnabc')).toBeInTheDocument();
+    expect(screen.getByTestId('removeUserFromOrgBtndef')).toBeInTheDocument();
+
+    // Search for Joined Organization 1
+    const searchBtn = screen.getByTestId(`searchBtnJoinedOrgs`);
+    fireEvent.keyUp(inputBox, {
+      target: { value: 'Joined Organization 1' },
+    });
+    fireEvent.click(searchBtn);
+    expect(screen.getByText(/Joined Organization 1/i)).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Joined Organization 2/i),
+    ).not.toBeInTheDocument();
+
+    // Search for an Organization which does not exist
+    fireEvent.keyUp(inputBox, {
+      key: 'Enter',
+      target: { value: 'Joined Organization 3' },
+    });
+    expect(
+      screen.getByText(`No results found for "Joined Organization 3"`),
+    ).toBeInTheDocument();
+
+    // Now clear the search box
+    fireEvent.keyUp(inputBox, { key: 'Enter', target: { value: '' } });
+    fireEvent.keyUp(inputBox, { target: { value: '' } });
+    fireEvent.click(searchBtn);
+    // Click on Creator Link
+    fireEvent.click(screen.getByTestId(`creatorabc`));
+    expect(toast.success).toHaveBeenCalledWith('Profile Page Coming Soon !');
+
+    // Click on Organization Link
+    fireEvent.click(screen.getByText(/Joined Organization 1/i));
+    expect(window.location.replace).toHaveBeenCalledWith('/orgdash/abc');
+    expect(mockNavgatePush).toHaveBeenCalledWith('/orgdash/abc');
+    fireEvent.click(screen.getByTestId(`closeJoinedOrgsBtn${123}`));
+  });
+
+  test('Should render props and text elements test for the Blocked By Organizations Modal properly', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: null,
+          email: 'john@example.com',
+          createdAt: '2023-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'XYZ',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'mno',
+              name: 'MNO',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-03-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-06-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'def',
+              name: 'Joined Organization 2',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-07-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'xyz',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UsersTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showBlockedByOrgsBtn = screen.getByTestId(
+      `showBlockedByOrgsBtn${123}`,
+    );
+    expect(showBlockedByOrgsBtn).toBeInTheDocument();
+    fireEvent.click(showBlockedByOrgsBtn);
+    expect(screen.getByTestId('modal-blocked-org-123')).toBeInTheDocument();
+
+    // Close using escape key and reopen
+    fireEvent.keyDown(screen.getByTestId('modal-blocked-org-123'), {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    });
+    expect(
+      screen.queryByRole('dialog')?.className.includes('show'),
+    ).toBeFalsy();
+    fireEvent.click(showBlockedByOrgsBtn);
+    // Close using close button and reopen
+    fireEvent.click(screen.getByTestId(`closeBlockedByOrgsBtn${123}`));
+    expect(
+      screen.queryByRole('dialog')?.className.includes('show'),
+    ).toBeFalsy();
+
+    fireEvent.click(showBlockedByOrgsBtn);
+
+    // Expect the following to exist in modal
+
+    const inputBox = screen.getByTestId(`searchByNameOrgsBlockedBy`);
+    expect(inputBox).toBeInTheDocument();
+    expect(screen.getByText(/XYZ/i)).toBeInTheDocument();
+    expect(screen.getByText(/MNO/i)).toBeInTheDocument();
+    const elementsWithKingston = screen.getAllByText(/Kingston/i);
+    elementsWithKingston.forEach((element) => {
+      expect(element).toBeInTheDocument();
+    });
+    expect(screen.getByText(/29-01-2023/i)).toBeInTheDocument();
+    expect(screen.getByText(/29-03-2023/i)).toBeInTheDocument();
+    expect(screen.getByTestId('removeUserFromOrgBtnxyz')).toBeInTheDocument();
+    expect(screen.getByTestId('removeUserFromOrgBtnmno')).toBeInTheDocument();
+    // Click on Creator Link
+    fireEvent.click(screen.getByTestId(`creatorxyz`));
+    expect(toast.success).toHaveBeenCalledWith('Profile Page Coming Soon !');
+
+    // Search for Blocked Organization 1
+    const searchBtn = screen.getByTestId(`searchBtnOrgsBlockedBy`);
+    fireEvent.keyUp(inputBox, {
+      target: { value: 'XYZ' },
+    });
+    fireEvent.click(searchBtn);
+    expect(screen.getByText(/XYZ/i)).toBeInTheDocument();
+    expect(screen.queryByText(/MNO/i)).not.toBeInTheDocument();
+
+    // Search for an Organization which does not exist
+    fireEvent.keyUp(inputBox, {
+      key: 'Enter',
+      target: { value: 'Blocked Organization 3' },
+    });
+    expect(
+      screen.getByText(`No results found for "Blocked Organization 3"`),
+    ).toBeInTheDocument();
+
+    // Now clear the search box
+    fireEvent.keyUp(inputBox, { key: 'Enter', target: { value: '' } });
+    fireEvent.keyUp(inputBox, { target: { value: '' } });
+    fireEvent.click(searchBtn);
+
+    // Click on Organization Link
+    fireEvent.click(screen.getByText(/XYZ/i));
+    expect(window.location.replace).toHaveBeenCalledWith('/orgdash/xyz');
+    expect(mockNavgatePush).toHaveBeenCalledWith('/orgdash/xyz');
+    fireEvent.click(screen.getByTestId(`closeBlockedByOrgsBtn${123}`));
+  });
+
+  test('Remove user from Organization should function properly in Organizations Joined Modal', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: null,
+          email: 'john@example.com',
+          createdAt: '2023-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'XYZ',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'mno',
+              name: 'MNO',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-01-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-06-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'def',
+              name: 'Joined Organization 2',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-07-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UsersTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showJoinedOrgsBtn = screen.getByTestId(`showJoinedOrgsBtn${123}`);
+    expect(showJoinedOrgsBtn).toBeInTheDocument();
+    fireEvent.click(showJoinedOrgsBtn);
+    expect(screen.getByTestId('modal-joined-org-123')).toBeInTheDocument();
+    fireEvent.click(showJoinedOrgsBtn);
+    fireEvent.click(screen.getByTestId(`removeUserFromOrgBtn${'abc'}`));
+    expect(screen.getByTestId('modal-remove-user-123')).toBeInTheDocument();
+
+    // Close using escape key and reopen
+    fireEvent.keyDown(screen.getByTestId('modal-joined-org-123'), {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    });
+    expect(
+      screen
+        .queryAllByRole('dialog')
+        .some((el) => el.className.includes('show')),
+    ).toBeTruthy();
+    fireEvent.click(showJoinedOrgsBtn);
+    // Close using close button and reopen
+    fireEvent.click(screen.getByTestId('closeRemoveUserModal123'));
+    expect(
+      screen
+        .queryAllByRole('dialog')
+        .some((el) => el.className.includes('show')),
+    ).toBeTruthy();
+
+    fireEvent.click(showJoinedOrgsBtn);
+    fireEvent.click(screen.getByTestId(`removeUserFromOrgBtn${'abc'}`));
+    const confirmRemoveBtn = screen.getByTestId(`confirmRemoveUser123`);
+    expect(confirmRemoveBtn).toBeInTheDocument();
+
+    fireEvent.click(confirmRemoveBtn);
+  });
+
+  test('Remove user from Organization should function properly in Organizations Blocked by Modal', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+          email: 'john@example.com',
+          createdAt: '2022-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'Blocked Organization 1',
+              image:
+                'https://api.dicebear.com/5.x/initials/svg?seed=Blocked%20Organization%201',
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-08-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image:
+                  'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'mno',
+              name: 'Blocked Organization 2',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-09-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-08-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+            {
+              _id: 'def',
+              name: 'Joined Organization 2',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-09-19T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: 'john@example.com',
+              },
+            },
+          ],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+            {
+              _id: 'xyz',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UsersTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showBlockedByOrgsBtn = screen.getByTestId(
+      `showBlockedByOrgsBtn${123}`,
+    );
+    expect(showBlockedByOrgsBtn).toBeInTheDocument();
+    fireEvent.click(showBlockedByOrgsBtn);
+    expect(screen.getByTestId('modal-blocked-org-123')).toBeInTheDocument();
+    fireEvent.click(showBlockedByOrgsBtn);
+    fireEvent.click(screen.getByTestId(`removeUserFromOrgBtn${'xyz'}`));
+    expect(screen.getByTestId('modal-remove-user-123')).toBeInTheDocument();
+
+    // Close using escape key and reopen
+    fireEvent.keyDown(screen.getByTestId('modal-blocked-org-123'), {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27,
+    });
+    expect(
+      screen
+        .queryAllByRole('dialog')
+        .some((el) => el.className.includes('show')),
+    ).toBeTruthy();
+    fireEvent.click(showBlockedByOrgsBtn);
+    // Close using close button and reopen
+    fireEvent.click(screen.getByTestId('closeRemoveUserModal123'));
+    expect(
+      screen
+        .queryAllByRole('dialog')
+        .some((el) => el.className.includes('show')),
+    ).toBeTruthy();
+
+    fireEvent.click(showBlockedByOrgsBtn);
+    fireEvent.click(screen.getByTestId(`removeUserFromOrgBtn${'xyz'}`));
+    const confirmRemoveBtn = screen.getByTestId(`confirmRemoveUser123`);
+    expect(confirmRemoveBtn).toBeInTheDocument();
+
+    fireEvent.click(confirmRemoveBtn);
+  });
+
+  test('handles errors in removeUser mutation', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+          email: '',
+          createdAt: '2022-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'Blocked Organization 1',
+              image:
+                'https://api.dicebear.com/5.x/initials/svg?seed=Blocked%20Organization%201',
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-08-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image:
+                  'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+                email: '',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-08-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: '',
+              },
+            },
+          ],
+          registeredEvents: [],
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+            {
+              _id: 'xyz',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    const mocks = [
+      {
+        request: {
+          query: REMOVE_MEMBER_MUTATION,
+          variables: {
+            userId: '123',
+            orgId: 'xyz',
+          },
+        },
+        result: {
+          errors: [
+            {
+              message: 'User does not exist',
+            },
+          ],
+        },
+      },
+    ];
+
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UsersTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showBlockedByOrgsBtn = screen.getByTestId(
+      `showBlockedByOrgsBtn${123}`,
+    );
+    expect(showBlockedByOrgsBtn).toBeInTheDocument();
+    fireEvent.click(showBlockedByOrgsBtn);
+    expect(screen.getByTestId('modal-blocked-org-123')).toBeInTheDocument();
+  });
+
+  test('change role button should function properly', async () => {
+    const props: {
+      user: InterfaceQueryUserListItem;
+      index: number;
+      loggedInUserId: string;
+      resetAndRefetch: () => void;
+    } = {
+      user: {
+        user: {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+          email: '',
+          createdAt: '2022-09-29T15:39:36.355Z',
+          organizationsBlockedBy: [
+            {
+              _id: 'xyz',
+              name: 'Blocked Organization 1',
+              image:
+                'https://api.dicebear.com/5.x/initials/svg?seed=Blocked%20Organization%201',
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-08-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image:
+                  'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+                email: '',
+              },
+            },
+          ],
+          joinedOrganizations: [
+            {
+              _id: 'abc',
+              name: 'Joined Organization 1',
+              image: null,
+              address: {
+                city: 'Kingston',
+                countryCode: 'JM',
+                dependentLocality: 'Sample Dependent Locality',
+                line1: '123 Jamaica Street',
+                line2: 'Apartment 456',
+                postalCode: 'JM12345',
+                sortingCode: 'ABC-123',
+                state: 'Kingston Parish',
+              },
+              createdAt: '2023-08-29T15:39:36.355Z',
+              creator: {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                email: '',
+              },
+            },
+          ],
+          registeredEvents: [],
+
+          membershipRequests: [],
+        },
+        appUserProfile: {
+          _id: '123',
+          isSuperAdmin: false,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          adminFor: [
+            {
+              _id: 'abc',
+            },
+            {
+              _id: 'xyz',
+            },
+          ],
+        },
+      },
+      index: 0,
+      loggedInUserId: '123',
+      resetAndRefetch: resetAndRefetchMock,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <UsersTableItem {...props} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const showJoinedOrgs = screen.getByTestId(`showJoinedOrgsBtn${123}`);
+    expect(showJoinedOrgs).toBeInTheDocument();
+    fireEvent.click(showJoinedOrgs);
+    const changeRoleBtn = screen.getByTestId(
+      `changeRoleInOrg${'abc'}`,
+    ) as HTMLSelectElement;
+    expect(changeRoleBtn).toBeInTheDocument();
+    userEvent.selectOptions(changeRoleBtn, 'ADMIN');
+    await wait();
+    userEvent.selectOptions(changeRoleBtn, 'USER');
+    await wait();
+    expect(changeRoleBtn.value).toBe(`USER?abc`);
+    await wait();
+  });
+});
diff --git a/src/components/UsersTableItem/UserTableItemMocks.ts b/src/components/UsersTableItem/UserTableItemMocks.ts
new file mode 100644
index 0000000000..3162487f33
--- /dev/null
+++ b/src/components/UsersTableItem/UserTableItemMocks.ts
@@ -0,0 +1,86 @@
+import {
+  REMOVE_MEMBER_MUTATION,
+  UPDATE_USER_ROLE_IN_ORG_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+
+const MOCKS = [
+  {
+    request: {
+      query: REMOVE_MEMBER_MUTATION,
+      variables: {
+        userid: '123',
+        orgid: 'abc',
+      },
+    },
+    result: {
+      data: {
+        removeMember: {
+          _id: '123',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_USER_ROLE_IN_ORG_MUTATION,
+      variables: {
+        userId: '123',
+        organizationId: 'abc',
+        role: 'USER',
+      },
+    },
+    result: {
+      data: {
+        updateUserRoleInOrganization: {
+          _id: '123',
+        },
+      },
+    },
+  },
+];
+
+const MOCKS2 = [
+  {
+    request: {
+      query: REMOVE_MEMBER_MUTATION,
+      variables: {
+        userid: '123',
+        orgid: 'abc',
+      },
+    },
+    error: new Error('Failed to remove member'),
+  },
+];
+
+const MOCKS_UPDATE = [
+  {
+    request: {
+      query: UPDATE_USER_ROLE_IN_ORG_MUTATION,
+      variables: {
+        userId: '123',
+        organizationId: 'abc',
+        role: 'ADMIN',
+      },
+    },
+    error: new Error('Failed to update user role in organization'),
+  },
+  {
+    request: {
+      query: UPDATE_USER_ROLE_IN_ORG_MUTATION,
+      variables: {
+        userId: '123',
+        organizationId: 'abc',
+        role: 'USER',
+      },
+    },
+    result: {
+      data: {
+        updateUserRoleInOrganization: {
+          _id: '123',
+        },
+      },
+    },
+  },
+];
+
+export { MOCKS, MOCKS2, MOCKS_UPDATE };
diff --git a/src/components/UsersTableItem/UsersTableItem.module.css b/src/components/UsersTableItem/UsersTableItem.module.css
new file mode 100644
index 0000000000..d5fad679a7
--- /dev/null
+++ b/src/components/UsersTableItem/UsersTableItem.module.css
@@ -0,0 +1,26 @@
+.input {
+  position: relative;
+}
+
+.notJoined {
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modalTable img[alt='creator'] {
+  height: 24px;
+  width: 24px;
+  object-fit: contain;
+  border-radius: 12px;
+  margin-right: 0.4rem;
+}
+
+.modalTable img[alt='orgImage'] {
+  height: 28px;
+  width: 28px;
+  object-fit: contain;
+  border-radius: 4px;
+  margin-right: 0.4rem;
+}
diff --git a/src/components/UsersTableItem/UsersTableItem.tsx b/src/components/UsersTableItem/UsersTableItem.tsx
new file mode 100644
index 0000000000..9e94b8a9f5
--- /dev/null
+++ b/src/components/UsersTableItem/UsersTableItem.tsx
@@ -0,0 +1,593 @@
+import { useMutation } from '@apollo/client';
+import { Search } from '@mui/icons-material';
+import {
+  REMOVE_MEMBER_MUTATION,
+  UPDATE_USER_ROLE_IN_ORG_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import Avatar from 'components/Avatar/Avatar';
+import dayjs from 'dayjs';
+import React, { useState } from 'react';
+import { Button, Form, Modal, Row, Table } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+import styles from './UsersTableItem.module.css';
+type Props = {
+  user: InterfaceQueryUserListItem;
+  index: number;
+  loggedInUserId: string;
+  resetAndRefetch: () => void;
+};
+const UsersTableItem = (props: Props): JSX.Element => {
+  const { t } = useTranslation('translation', { keyPrefix: 'users' });
+  const { t: tCommon } = useTranslation('common');
+  const { user, index, resetAndRefetch } = props;
+  const [showJoinedOrganizations, setShowJoinedOrganizations] = useState(false);
+  const [showBlockedOrganizations, setShowBlockedOrganizations] =
+    useState(false);
+  const [showRemoveUserModal, setShowRemoveUserModal] = useState(false);
+  const [removeUserProps, setremoveUserProps] = useState<{
+    orgName: string;
+    orgId: string;
+    setShowOnCancel: 'JOINED' | 'BLOCKED' | '';
+  }>({
+    orgName: '',
+    orgId: '',
+    setShowOnCancel: '',
+  });
+  const [joinedOrgs, setJoinedOrgs] = useState(user.user.joinedOrganizations);
+  const [orgsBlockedBy, setOrgsBlockedBy] = useState(
+    user.user.organizationsBlockedBy,
+  );
+  const [searchByNameJoinedOrgs, setSearchByNameJoinedOrgs] = useState('');
+  const [searchByNameOrgsBlockedBy, setSearchByNameOrgsBlockedBy] =
+    useState('');
+  const [removeUser] = useMutation(REMOVE_MEMBER_MUTATION);
+  const [updateUserInOrgType] = useMutation(UPDATE_USER_ROLE_IN_ORG_MUTATION);
+  const navigate = useNavigate();
+  const confirmRemoveUser = async (): Promise<void> => {
+    try {
+      const { data } = await removeUser({
+        variables: {
+          userid: user.user._id,
+          orgid: removeUserProps.orgId,
+        },
+      });
+      if (data) {
+        toast.success(
+          tCommon('removedSuccessfully', { item: 'User' }) as string,
+        );
+        resetAndRefetch();
+      }
+    } catch (error: unknown) {
+      errorHandler(t, error);
+    }
+  };
+  const changeRoleInOrg = async (
+    e: React.ChangeEvent<HTMLSelectElement>,
+  ): Promise<void> => {
+    const { value } = e.target;
+    const inputData = value.split('?');
+    try {
+      const { data } = await updateUserInOrgType({
+        variables: {
+          userId: user.user._id,
+          role: inputData[0],
+          organizationId: inputData[1],
+        },
+      });
+      if (data) {
+        toast.success(t('roleUpdated') as string);
+        resetAndRefetch();
+      }
+    } catch (error: unknown) {
+      errorHandler(t, error);
+    }
+  };
+  function goToOrg(_id: string): void {
+    const url = '/orgdash/' + _id;
+    window.location.replace(url);
+    navigate(url);
+  }
+  function handleCreator(): void {
+    toast.success('Profile Page Coming Soon !');
+  }
+  const searchJoinedOrgs = (value: string): void => {
+    setSearchByNameJoinedOrgs(value);
+    if (value == '') {
+      setJoinedOrgs(user.user.joinedOrganizations);
+    } else {
+      const filteredOrgs = user.user.joinedOrganizations.filter((org) =>
+        org.name.toLowerCase().includes(value.toLowerCase()),
+      );
+      setJoinedOrgs(filteredOrgs);
+    }
+  };
+  const searchOrgsBlockedBy = (value: string): void => {
+    setSearchByNameOrgsBlockedBy(value);
+    if (value == '') {
+      setOrgsBlockedBy(user.user.organizationsBlockedBy);
+    } else {
+      const filteredOrgs = user.user.organizationsBlockedBy.filter((org) =>
+        org.name.toLowerCase().includes(value.toLowerCase()),
+      );
+      setOrgsBlockedBy(filteredOrgs);
+    }
+  };
+  const handleSearchJoinedOrgs = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.currentTarget;
+      searchJoinedOrgs(value);
+    }
+  };
+  const handleSearchByOrgsBlockedBy = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.currentTarget;
+      searchOrgsBlockedBy(value);
+    }
+  };
+  const handleSearchButtonClickJoinedOrgs = (): void => {
+    const inputValue =
+      (document.getElementById('orgname-joined-orgs') as HTMLInputElement)
+        ?.value || '';
+    searchJoinedOrgs(inputValue);
+  };
+  const handleSearchButtonClickOrgsBlockedBy = (): void => {
+    const inputValue =
+      (document.getElementById('orgname-blocked-by') as HTMLInputElement)
+        ?.value || '';
+    searchOrgsBlockedBy(inputValue);
+  };
+  function onHideRemoveUserModal(): void {
+    setShowRemoveUserModal(false);
+    if (removeUserProps.setShowOnCancel == 'JOINED') {
+      setShowJoinedOrganizations(true);
+    } else if (removeUserProps.setShowOnCancel == 'BLOCKED') {
+      setShowBlockedOrganizations(true);
+    }
+  }
+  const isSuperAdmin = user.appUserProfile.isSuperAdmin;
+  return (
+    <>
+      <tr>
+        <th scope="row">{index + 1}</th>
+        <td>{`${user.user.firstName} ${user.user.lastName}`}</td>
+        <td>{user.user.email}</td>
+        <td>
+          <Button
+            onClick={() => setShowJoinedOrganizations(true)}
+            data-testid={`showJoinedOrgsBtn${user.user._id}`}
+          >
+            {t('view')} ({user.user.joinedOrganizations.length})
+          </Button>
+        </td>
+        <td>
+          <Button
+            variant="danger"
+            data-testid={`showBlockedByOrgsBtn${user.user._id}`}
+            onClick={() => setShowBlockedOrganizations(true)}
+          >
+            {t('view')} ({user.user.organizationsBlockedBy.length})
+          </Button>
+        </td>
+      </tr>
+      <Modal
+        show={showJoinedOrganizations}
+        key={`modal-joined-org-${index}`}
+        size="xl"
+        data-testid={`modal-joined-org-${user.user._id}`}
+        onHide={() => setShowJoinedOrganizations(false)}
+      >
+        <Modal.Header className="bg-primary" closeButton>
+          <Modal.Title className="text-white">
+            {t('orgJoinedBy')} {`${user.user.firstName}`}{' '}
+            {`${user.user.lastName}`} ({user.user.joinedOrganizations.length})
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {user.user.joinedOrganizations.length !== 0 && (
+            <div className={'position-relative mb-4 border rounded'}>
+              <Form.Control
+                id="orgname-joined-orgs"
+                className="bg-white"
+                defaultValue={searchByNameJoinedOrgs}
+                placeholder={t('searchByOrgName')}
+                data-testid="searchByNameJoinedOrgs"
+                autoComplete="off"
+                onKeyUp={handleSearchJoinedOrgs}
+              />
+              <Button
+                tabIndex={-1}
+                className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                onClick={handleSearchButtonClickJoinedOrgs}
+                data-testid="searchBtnJoinedOrgs"
+              >
+                <Search />
+              </Button>
+            </div>
+          )}
+          <Row>
+            {user.user.joinedOrganizations.length == 0 ? (
+              <div className={styles.notJoined}>
+                <h4>
+                  {user.user.firstName} {user.user.lastName}{' '}
+                  {t('hasNotJoinedAnyOrg')}
+                </h4>
+              </div>
+            ) : joinedOrgs.length == 0 ? (
+              <div className={styles.notJoined}>
+                <h4>
+                  {tCommon('noResultsFoundFor')} &quot;
+                  {searchByNameJoinedOrgs}
+                  &quot;
+                </h4>
+              </div>
+            ) : (
+              <Table className={styles.modalTable} responsive>
+                <thead>
+                  <tr>
+                    <th>{tCommon('name')}</th>
+                    <th>{tCommon('address')}</th>
+                    <th>{tCommon('createdOn')}</th>
+                    <th>{tCommon('createdBy')}</th>
+                    <th>{tCommon('usersRole')}</th>
+                    <th>{tCommon('changeRole')}</th>
+                    <th>{tCommon('action')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {joinedOrgs.map((org) => {
+                    let isAdmin = false;
+                    user.appUserProfile.adminFor.map((item) => {
+                      if (item._id == org._id) {
+                        isAdmin = true;
+                      }
+                    });
+                    return (
+                      <tr key={`org-joined-${org._id}`}>
+                        <td>
+                          <Button
+                            variant="link"
+                            className="p-0"
+                            onClick={() => goToOrg(org._id)}
+                          >
+                            {org.image ? (
+                              <img src={org.image} alt="orgImage" />
+                            ) : (
+                              <Avatar name={org.name} alt="orgImage" />
+                            )}
+                            {org.name}
+                          </Button>
+                        </td>
+                        {org.address && <td>{org.address.city}</td>}
+                        <td>{dayjs(org.createdAt).format('DD-MM-YYYY')}</td>
+                        <td>
+                          <Button
+                            variant="link"
+                            className="p-0"
+                            onClick={() => handleCreator()}
+                            data-testid={`creator${org._id}`}
+                          >
+                            {org.creator.image ? (
+                              <img src={org.creator.image} alt="creator" />
+                            ) : (
+                              <Avatar
+                                name={`${org.creator.firstName} ${org.creator.lastName}`}
+                                alt="creator"
+                              />
+                            )}
+                            {org.creator.firstName} {org.creator.lastName}
+                          </Button>
+                        </td>
+                        <td>
+                          {isSuperAdmin
+                            ? 'SUPERADMIN'
+                            : isAdmin
+                              ? 'ADMIN'
+                              : 'USER'}
+                        </td>
+                        <td>
+                          <Form.Select
+                            size="sm"
+                            onChange={changeRoleInOrg}
+                            data-testid={`changeRoleInOrg${org._id}`}
+                            disabled={isSuperAdmin}
+                            defaultValue={
+                              isSuperAdmin
+                                ? `SUPERADMIN`
+                                : isAdmin
+                                  ? `ADMIN?${org._id}`
+                                  : `USER?${org._id}`
+                            }
+                          >
+                            {isSuperAdmin ? (
+                              <>
+                                <option value={`SUPERADMIN`}>SUPERADMIN</option>
+                                <option value={`ADMIN?${org._id}`}>
+                                  ADMIN
+                                </option>
+                                <option value={`USER?${org._id}`}>USER</option>
+                              </>
+                            ) : isAdmin ? (
+                              <>
+                                <option value={`ADMIN?${org._id}`}>
+                                  ADMIN
+                                </option>
+                                <option value={`USER?${org._id}`}>USER</option>
+                              </>
+                            ) : (
+                              <>
+                                <option value={`USER?${org._id}`}>USER</option>
+                                <option value={`ADMIN?${org._id}`}>
+                                  ADMIN
+                                </option>
+                              </>
+                            )}
+                          </Form.Select>
+                        </td>
+                        <td colSpan={1.5}>
+                          <Button
+                            className={styles.button}
+                            variant="danger"
+                            size="sm"
+                            data-testid={`removeUserFromOrgBtn${org._id}`}
+                            onClick={() => {
+                              setremoveUserProps({
+                                orgId: org._id,
+                                orgName: org.name,
+                                setShowOnCancel: 'JOINED',
+                              });
+                              setShowJoinedOrganizations(false);
+                              setShowRemoveUserModal(true);
+                            }}
+                          >
+                            {tCommon('removeUser')}
+                          </Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </Table>
+            )}
+          </Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="secondary"
+            onClick={() => setShowJoinedOrganizations(false)}
+            data-testid={`closeJoinedOrgsBtn${user.user._id}`}
+          >
+            {tCommon('close')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+      <Modal
+        show={showBlockedOrganizations}
+        key={`modal-blocked-org-${index}`}
+        size="xl"
+        onHide={() => setShowBlockedOrganizations(false)}
+        data-testid={`modal-blocked-org-${user.user._id}`}
+      >
+        <Modal.Header className="bg-danger" closeButton>
+          <Modal.Title className="text-white">
+            {t('orgThatBlocked')} {`${user.user.firstName}`}{' '}
+            {`${user.user.lastName}`} ({user.user.organizationsBlockedBy.length}
+            )
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {user.user.organizationsBlockedBy.length !== 0 && (
+            <div className={'position-relative mb-4 border rounded'}>
+              <Form.Control
+                id="orgname-blocked-by"
+                className="bg-white"
+                defaultValue={searchByNameOrgsBlockedBy}
+                placeholder={t('searchByOrgName')}
+                data-testid="searchByNameOrgsBlockedBy"
+                autoComplete="off"
+                onKeyUp={handleSearchByOrgsBlockedBy}
+              />
+              <Button
+                tabIndex={-1}
+                variant="danger"
+                className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                onClick={handleSearchButtonClickOrgsBlockedBy}
+                data-testid="searchBtnOrgsBlockedBy"
+              >
+                <Search />
+              </Button>
+            </div>
+          )}
+          <Row>
+            {user.user.organizationsBlockedBy.length == 0 ? (
+              <div className={styles.notJoined}>
+                <h4>
+                  {user.user.firstName} {user.user.lastName}{' '}
+                  {t('isNotBlockedByAnyOrg')}
+                </h4>
+              </div>
+            ) : orgsBlockedBy.length == 0 ? (
+              <div className={styles.notJoined}>
+                <h4>{`${tCommon('noResultsFoundFor')} "${searchByNameOrgsBlockedBy}"`}</h4>
+              </div>
+            ) : (
+              <Table className={styles.modalTable} responsive>
+                <thead>
+                  <tr>
+                    <th>{tCommon('name')}</th>
+                    <th>{tCommon('address')}</th>
+                    <th>{tCommon('createdOn')}</th>
+                    <th>{tCommon('createdBy')}</th>
+                    <th>{tCommon('usersRole')}</th>
+                    <th>{tCommon('changeRole')}</th>
+                    <th>{tCommon('action')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {orgsBlockedBy.map((org) => {
+                    let isAdmin = false;
+                    user.appUserProfile.adminFor.map((item) => {
+                      if (item._id == org._id) {
+                        isAdmin = true;
+                      }
+                    });
+                    return (
+                      <tr key={`org-blocked-${org._id}`}>
+                        <td>
+                          <Button
+                            variant="link"
+                            className="p-0"
+                            onClick={() => goToOrg(org._id)}
+                          >
+                            {org.image ? (
+                              <img src={org.image} alt="orgImage" />
+                            ) : (
+                              <Avatar name={org.name} alt="orgImage" />
+                            )}
+                            {org.name}
+                          </Button>
+                        </td>
+                        {org.address && <td>{org.address.city}</td>}
+                        <td>{dayjs(org.createdAt).format('DD-MM-YYYY')}</td>
+                        <td>
+                          <Button
+                            variant="link"
+                            className="p-0"
+                            onClick={() => handleCreator()}
+                            data-testid={`creator${org._id}`}
+                          >
+                            {org.creator.image ? (
+                              <img src={org.creator.image} alt="creator" />
+                            ) : (
+                              <Avatar
+                                name={`${org.creator.firstName} ${org.creator.lastName}`}
+                                alt="creator"
+                              />
+                            )}
+                            {org.creator.firstName} {org.creator.lastName}
+                          </Button>
+                        </td>
+                        <td>{isAdmin ? 'ADMIN' : 'USER'}</td>
+                        <td>
+                          <Form.Select
+                            size="sm"
+                            onChange={changeRoleInOrg}
+                            data-testid={`changeRoleInOrg${org._id}`}
+                            disabled={isSuperAdmin}
+                            defaultValue={
+                              isSuperAdmin
+                                ? `SUPERADMIN`
+                                : isAdmin
+                                  ? `ADMIN?${org._id}`
+                                  : `USER?${org._id}`
+                            }
+                          >
+                            {isSuperAdmin ? (
+                              <>
+                                <option value={`SUPERADMIN`}>SUPERADMIN</option>
+                                <option value={`ADMIN?${org._id}`}>
+                                  ADMIN
+                                </option>
+                                <option value={`USER?${org._id}`}>USER</option>
+                              </>
+                            ) : isAdmin ? (
+                              <>
+                                <option value={`ADMIN?${org._id}`}>
+                                  ADMIN
+                                </option>
+                                <option value={`USER?${org._id}`}>USER</option>
+                              </>
+                            ) : (
+                              <>
+                                <option value={`USER?${org._id}`}>USER</option>
+                                <option value={`ADMIN?${org._id}`}>
+                                  ADMIN
+                                </option>
+                              </>
+                            )}
+                          </Form.Select>
+                        </td>
+                        <td colSpan={1.5}>
+                          <Button
+                            className={styles.button}
+                            variant="danger"
+                            size="sm"
+                            data-testid={`removeUserFromOrgBtn${org._id}`}
+                            onClick={() => {
+                              setremoveUserProps({
+                                orgId: org._id,
+                                orgName: org.name,
+                                setShowOnCancel: 'JOINED',
+                              });
+                              setShowBlockedOrganizations(false);
+                              setShowRemoveUserModal(true);
+                            }}
+                          >
+                            {tCommon('removeUser')}
+                          </Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </Table>
+            )}
+          </Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="secondary"
+            onClick={() => setShowBlockedOrganizations(false)}
+            data-testid={`closeBlockedByOrgsBtn${user.user._id}`}
+          >
+            {tCommon('close')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+      <Modal
+        show={showRemoveUserModal}
+        key={`modal-remove-org-${index}`}
+        data-testid={`modal-remove-user-${user.user._id}`}
+        onHide={() => onHideRemoveUserModal()}
+      >
+        <Modal.Header className="bg-danger" closeButton>
+          <Modal.Title className="text-white">
+            {t('removeUserFrom', { org: removeUserProps.orgName })}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p>
+            {t('removeConfirmation', {
+              name: `${user.user.firstName} ${user.user.lastName}`,
+              org: removeUserProps.orgName,
+            })}
+          </p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="secondary"
+            onClick={() => onHideRemoveUserModal()}
+            data-testid={`closeRemoveUserModal${user.user._id}`}
+          >
+            {tCommon('close')}
+          </Button>
+          <Button
+            variant="danger"
+            onClick={() => confirmRemoveUser()}
+            data-testid={`confirmRemoveUser${user.user._id}`}
+          >
+            {tCommon('remove')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+export default UsersTableItem;
diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx
new file mode 100644
index 0000000000..752ac95139
--- /dev/null
+++ b/src/components/Venues/VenueCard.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { Card, Button } from 'react-bootstrap';
+import defaultImg from 'assets/images/defaultImg.png';
+import PeopleIcon from 'assets/svgs/people.svg?react';
+import styles from 'screens/OrganizationVenues/OrganizationVenues.module.css';
+import { useTranslation } from 'react-i18next';
+import type { InterfaceQueryVenueListItem } from 'utils/interfaces';
+
+interface InterfaceVenueCardProps {
+  venueItem: InterfaceQueryVenueListItem;
+  index: number;
+  showEditVenueModal: (venueItem: InterfaceQueryVenueListItem) => void;
+  handleDelete: (venueId: string) => void;
+}
+
+/**
+ * Represents a card component displaying venue information.
+ *
+ * This component renders a card with the venue's image, name, capacity, and description.
+ * It also provides buttons to edit or delete the venue.
+ *
+ * @param venueItem - The venue item to be displayed in the card.
+ * @param index - The index of the venue item in the list, used for test IDs.
+ * @param showEditVenueModal - Function to show the edit venue modal, passing the current venue item.
+ * @param handleDelete - Function to handle the deletion of the venue, passing the venue ID.
+ *
+ * @returns JSX.Element - The `VenueCard` component.
+ *
+ * @example
+ * ```tsx
+ * <VenueCard
+ *   venueItem={venue}
+ *   index={0}
+ *   showEditVenueModal={handleShowEditVenueModal}
+ *   handleDelete={handleDeleteVenue}
+ * />
+ * ```
+ */
+const VenueCard = ({
+  venueItem,
+  index,
+  showEditVenueModal,
+  handleDelete,
+}: InterfaceVenueCardProps): JSX.Element => {
+  // Translation hook for internationalization
+  const { t: tCommon } = useTranslation('common');
+
+  return (
+    <div
+      className="col-xl-4 col-lg-4 col-md-6"
+      data-testid={`venue-item${index + 1}`}
+      key={venueItem._id}
+    >
+      <div className={styles.cards} data-testid="cardStructure">
+        <Card className={styles.card}>
+          {/* Venue image or default image if none provided */}
+          <Card.Img
+            variant="top"
+            src={venueItem.image || defaultImg}
+            alt="image not found"
+            className={styles.novenueimage}
+          />
+          <Card.Body className="pb-0">
+            <Card.Title className="d-flex justify-content-between">
+              {/* Venue name with truncation if too long */}
+              <div className={styles.title}>
+                {venueItem.name.length > 25
+                  ? venueItem.name.slice(0, 25) + '...'
+                  : venueItem.name}
+              </div>
+
+              {/* Venue capacity with icon */}
+              <div className={styles.capacityLabel}>
+                Capacity: {venueItem.capacity}
+                <PeopleIcon className="ms-1" width={16} height={16} />
+              </div>
+            </Card.Title>
+            <Card.Text className={styles.text}>
+              {/* Venue description with truncation if too long */}
+              {venueItem.description && venueItem.description.length > 75
+                ? venueItem.description.slice(0, 75) + '...'
+                : venueItem.description}
+            </Card.Text>
+          </Card.Body>
+          <div className="d-flex justify-content-end gap-2 mb-2 me-3">
+            {/* Edit button */}
+            <Button
+              variant="outline-secondary"
+              size="sm"
+              onClick={() => {
+                showEditVenueModal(venueItem);
+              }}
+              data-testid={`updateVenueBtn${index + 1}`}
+            >
+              <i className="fa fa-pen me-1"></i>
+              <span>{tCommon('edit')}</span>
+            </Button>
+            {/* Delete button */}
+            <Button
+              variant="outline-danger"
+              size="sm"
+              data-testid={`deleteVenueBtn${index + 1}`}
+              onClick={() => handleDelete(venueItem._id)}
+            >
+              <i className="fa fa-trash me-2"></i>
+              <span>{tCommon('delete')}</span>
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default VenueCard;
diff --git a/src/components/Venues/VenueModal.module.css b/src/components/Venues/VenueModal.module.css
new file mode 100644
index 0000000000..e88b022187
--- /dev/null
+++ b/src/components/Venues/VenueModal.module.css
@@ -0,0 +1,53 @@
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.preview {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.preview img {
+  width: 400px;
+  height: auto;
+}
+
+.closeButtonP {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
diff --git a/src/components/Venues/VenueModal.test.tsx b/src/components/Venues/VenueModal.test.tsx
new file mode 100644
index 0000000000..b299c8ff20
--- /dev/null
+++ b/src/components/Venues/VenueModal.test.tsx
@@ -0,0 +1,287 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import type { InterfaceVenueModalProps } from './VenueModal';
+import VenueModal from './VenueModal';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import {
+  CREATE_VENUE_MUTATION,
+  UPDATE_VENUE_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import type { ApolloLink } from '@apollo/client';
+
+const MOCKS = [
+  {
+    request: {
+      query: CREATE_VENUE_MUTATION,
+      variables: {
+        name: 'Test Venue',
+        description: 'Test Venue Desc',
+        capacity: 100,
+        organizationId: 'orgId',
+        file: '',
+      },
+    },
+    result: {
+      data: {
+        createVenue: {
+          _id: 'orgId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VENUE_MUTATION,
+      variables: {
+        capacity: 200,
+        description: 'Updated description',
+        file: 'image1',
+        id: 'venue1',
+        name: 'Updated Venue',
+        organizationId: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        editVenue: {
+          _id: 'venue1',
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+const mockId = 'orgId';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockId }),
+}));
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const props: InterfaceVenueModalProps[] = [
+  {
+    show: true,
+    onHide: jest.fn(),
+    edit: false,
+    venueData: null,
+    refetchVenues: jest.fn(),
+    orgId: 'orgId',
+  },
+  {
+    show: true,
+    onHide: jest.fn(),
+    edit: true,
+    venueData: {
+      _id: 'venue1',
+      name: 'Venue 1',
+      description: 'Updated description for venue 1',
+      image: 'image1',
+      capacity: '100',
+    },
+    refetchVenues: jest.fn(),
+    orgId: 'orgId',
+  },
+];
+
+const renderVenueModal = (
+  props: InterfaceVenueModalProps,
+  link: ApolloLink,
+): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <VenueModal {...props} />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('VenueModal', () => {
+  global.alert = jest.fn();
+
+  test('renders correctly when show is true', async () => {
+    renderVenueModal(props[0], link);
+    expect(screen.getByText('Venue Details')).toBeInTheDocument();
+  });
+
+  test('does not render when show is false', () => {
+    const { container } = renderVenueModal({ ...props[0], show: false }, link);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('populates form fields correctly in edit mode', () => {
+    renderVenueModal(props[1], link);
+    expect(screen.getByDisplayValue('Venue 1')).toBeInTheDocument();
+    expect(
+      screen.getByDisplayValue('Updated description for venue 1'),
+    ).toBeInTheDocument();
+    expect(screen.getByDisplayValue('100')).toBeInTheDocument();
+  });
+
+  test('form fields are empty in create mode', () => {
+    renderVenueModal(props[0], link);
+    expect(screen.getByPlaceholderText('Enter Venue Name')).toHaveValue('');
+    expect(screen.getByPlaceholderText('Enter Venue Description')).toHaveValue(
+      '',
+    );
+    expect(screen.getByPlaceholderText('Enter Venue Capacity')).toHaveValue('');
+  });
+
+  test('calls onHide when close button is clicked', () => {
+    renderVenueModal(props[0], link);
+    fireEvent.click(screen.getByTestId('createVenueModalCloseBtn'));
+    expect(props[0].onHide).toHaveBeenCalled();
+  });
+
+  test('displays image preview and clear button when an image is selected', async () => {
+    renderVenueModal(props[0], link);
+
+    const file = new File(['chad'], 'chad.png', { type: 'image/png' });
+    const fileInput = screen.getByTestId('venueImgUrl');
+    userEvent.upload(fileInput, file);
+
+    await wait();
+
+    expect(screen.getByAltText('Venue Image Preview')).toBeInTheDocument();
+    expect(screen.getByTestId('closeimage')).toBeInTheDocument();
+  });
+
+  test('removes image preview when clear button is clicked', async () => {
+    renderVenueModal(props[0], link);
+
+    const file = new File(['chad'], 'chad.png', { type: 'image/png' });
+    const fileInput = screen.getByTestId('venueImgUrl');
+    userEvent.upload(fileInput, file);
+
+    await wait();
+
+    const form = screen.getByTestId('venueForm');
+    form.addEventListener('submit', (e) => e.preventDefault());
+    fireEvent.click(screen.getByTestId('closeimage'));
+
+    expect(
+      screen.queryByAltText('Venue Image Preview'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByTestId('closeimage')).not.toBeInTheDocument();
+  });
+
+  test('shows error when venue name is empty', async () => {
+    renderVenueModal(props[0], link);
+
+    const form = screen.getByTestId('venueForm');
+    form.addEventListener('submit', (e) => e.preventDefault());
+
+    const submitButton = screen.getByTestId('createVenueBtn');
+    fireEvent.click(submitButton);
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith('Venue title cannot be empty!');
+  });
+
+  test('shows error when venue capacity is not a positive number', async () => {
+    renderVenueModal(props[0], link);
+
+    const nameInput = screen.getByPlaceholderText('Enter Venue Name');
+    fireEvent.change(nameInput, { target: { value: 'Test venue' } });
+
+    const capacityInput = screen.getByPlaceholderText('Enter Venue Capacity');
+    fireEvent.change(capacityInput, { target: { value: '-1' } });
+
+    const form = screen.getByTestId('venueForm');
+    form.addEventListener('submit', (e) => e.preventDefault());
+
+    const submitButton = screen.getByTestId('createVenueBtn');
+    fireEvent.click(submitButton);
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Capacity must be a positive number!',
+    );
+  });
+
+  test('shows success toast when a new venue is created', async () => {
+    renderVenueModal(props[0], link);
+
+    const nameInput = screen.getByPlaceholderText('Enter Venue Name');
+    fireEvent.change(nameInput, { target: { value: 'Test Venue' } });
+    const descriptionInput = screen.getByPlaceholderText(
+      'Enter Venue Description',
+    );
+    fireEvent.change(descriptionInput, {
+      target: { value: 'Test Venue Desc' },
+    });
+
+    const capacityInput = screen.getByPlaceholderText('Enter Venue Capacity');
+    fireEvent.change(capacityInput, { target: { value: 100 } });
+    const form = screen.getByTestId('venueForm');
+    form.addEventListener('submit', (e) => e.preventDefault());
+
+    const submitButton = screen.getByTestId('createVenueBtn');
+    fireEvent.click(submitButton);
+
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith('Venue added Successfully');
+  });
+
+  test('shows success toast when an existing venue is updated', async () => {
+    renderVenueModal(props[1], link);
+
+    const nameInput = screen.getByDisplayValue('Venue 1');
+    fireEvent.change(nameInput, { target: { value: 'Updated Venue' } });
+    const descriptionInput = screen.getByDisplayValue(
+      'Updated description for venue 1',
+    );
+    fireEvent.change(descriptionInput, {
+      target: { value: 'Updated description' },
+    });
+
+    const capacityInput = screen.getByDisplayValue('100');
+    fireEvent.change(capacityInput, { target: { value: 200 } });
+    const form = screen.getByTestId('venueForm');
+    form.addEventListener('submit', (e) => e.preventDefault());
+
+    const submitButton = screen.getByTestId('updateVenueBtn');
+    fireEvent.click(submitButton);
+
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith(
+      'Venue details updated successfully',
+    );
+  });
+});
diff --git a/src/components/Venues/VenueModal.tsx b/src/components/Venues/VenueModal.tsx
new file mode 100644
index 0000000000..476964b910
--- /dev/null
+++ b/src/components/Venues/VenueModal.tsx
@@ -0,0 +1,278 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import styles from './VenueModal.module.css';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import {
+  CREATE_VENUE_MUTATION,
+  UPDATE_VENUE_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { errorHandler } from 'utils/errorHandler';
+import convertToBase64 from 'utils/convertToBase64';
+import type { InterfaceQueryVenueListItem } from 'utils/interfaces';
+
+export interface InterfaceVenueModalProps {
+  show: boolean;
+  onHide: () => void;
+  refetchVenues: () => void;
+  orgId: string;
+  venueData?: InterfaceQueryVenueListItem | null;
+  edit: boolean;
+}
+
+/**
+ * A modal component for creating or updating venue information.
+ *
+ * This component displays a modal window where users can enter details for a venue, such as name, description, capacity, and an image.
+ * It also handles submitting the form data to create or update a venue based on whether the `edit` prop is true or false.
+ *
+ * @param show - A flag indicating if the modal should be visible.
+ * @param onHide - A function to call when the modal should be closed.
+ * @param refetchVenues - A function to refetch the list of venues after a successful operation.
+ * @param orgId - The ID of the organization to which the venue belongs.
+ * @param venueData - Optional venue data to prefill the form for editing. If null, the form will be empty.
+ * @param edit - A flag indicating if the modal is in edit mode. If true, the component will update an existing venue; if false, it will create a new one.
+ *
+ * @returns The rendered modal component.
+ */
+const VenueModal = ({
+  show,
+  onHide,
+  refetchVenues,
+  orgId,
+  edit,
+  venueData,
+}: InterfaceVenueModalProps): JSX.Element => {
+  // Translation hooks for different languages
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationVenues',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // State to manage image preview and form data
+  const [venueImage, setVenueImage] = useState<boolean>(false);
+  const [formState, setFormState] = useState({
+    name: venueData?.name || '',
+    description: venueData?.description || '',
+    capacity: venueData?.capacity || '',
+    imageURL: venueData?.image || '',
+  });
+
+  // Reference for the file input element
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  // Mutation function for creating or updating a venue
+  const [mutate, { loading }] = useMutation(
+    edit ? UPDATE_VENUE_MUTATION : CREATE_VENUE_MUTATION,
+  );
+
+  /**
+   * Handles form submission to create or update a venue.
+   *
+   * Validates form inputs and sends a request to the server to create or update the venue.
+   * If the operation is successful, it shows a success message, refetches venues, and resets the form.
+   *
+   * @returns A promise that resolves when the submission is complete.
+   */
+  const handleSubmit = useCallback(async () => {
+    if (formState.name.trim().length === 0) {
+      toast.error(t('venueTitleError') as string);
+      return;
+    }
+
+    const capacityNum = parseInt(formState.capacity);
+    if (isNaN(capacityNum) || capacityNum <= 0) {
+      toast.error(t('venueCapacityError') as string);
+      return;
+    }
+
+    try {
+      const { data } = await mutate({
+        variables: {
+          capacity: capacityNum,
+          file: formState.imageURL,
+          description: formState.description,
+          name: formState.name,
+          organizationId: orgId,
+          ...(edit && { id: venueData?._id }),
+        },
+      });
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(
+          edit ? (t('venueUpdated') as string) : (t('venueAdded') as string),
+        );
+        refetchVenues();
+        onHide();
+        setFormState({
+          name: '',
+          description: '',
+          capacity: '',
+          imageURL: '',
+        });
+        setVenueImage(false);
+      }
+    } catch (error) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  }, [
+    edit,
+    formState,
+    mutate,
+    onHide,
+    orgId,
+    refetchVenues,
+    t,
+    venueData?._id,
+  ]);
+
+  /**
+   * Clears the selected image and resets the image preview.
+   *
+   * This function also clears the file input field.
+   */
+  const clearImageInput = useCallback(() => {
+    setFormState((prevState) => ({ ...prevState, imageURL: '' }));
+    setVenueImage(false);
+    /* istanbul ignore next */
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, []);
+
+  // Update form state when venueData changes
+  useEffect(() => {
+    setFormState({
+      name: venueData?.name || '',
+      description: venueData?.description || '',
+      capacity: venueData?.capacity || '',
+      imageURL: venueData?.image || '',
+    });
+    setVenueImage(venueData?.image ? true : false);
+  }, [venueData]);
+
+  const { name, description, capacity, imageURL } = formState;
+
+  return (
+    <Modal show={show} onHide={onHide}>
+      <Modal.Header className="d-flex align-items-start">
+        <p className={styles.titlemodal}>{t('venueDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={onHide}
+          className="p-3 d-flex justify-content-center align-items-center"
+          style={{ width: '40px', height: '40px' }}
+          data-testid="createVenueModalCloseBtn"
+        >
+          <i className="fa fa-times" />
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form data-testid="venueForm">
+          <label htmlFor="venuetitle">{t('venueName')}</label>
+          <Form.Control
+            type="title"
+            id="venuetitle"
+            placeholder={t('enterVenueName')}
+            autoComplete="off"
+            required
+            value={name}
+            onChange={(e): void => {
+              setFormState({
+                ...formState,
+                name: e.target.value,
+              });
+            }}
+          />
+          <label htmlFor="venuedescrip">{tCommon('description')}</label>
+          <Form.Control
+            type="text"
+            id="venuedescrip"
+            as="textarea"
+            placeholder={t('enterVenueDesc')}
+            autoComplete="off"
+            required
+            maxLength={500}
+            value={description}
+            onChange={(e): void => {
+              setFormState({
+                ...formState,
+                description: e.target.value,
+              });
+            }}
+          />
+          <label htmlFor="venuecapacity">{t('capacity')}</label>
+          <Form.Control
+            type="text"
+            id="venuecapacity"
+            placeholder={t('enterVenueCapacity')}
+            autoComplete="off"
+            required
+            value={capacity}
+            onChange={(e): void => {
+              setFormState({
+                ...formState,
+                capacity: e.target.value,
+              });
+            }}
+          />
+          <Form.Label htmlFor="venueImg">{t('image')}</Form.Label>
+          <Form.Control
+            accept="image/*"
+            id="venueImgUrl"
+            data-testid="venueImgUrl"
+            name="venueImg"
+            type="file"
+            placeholder={t('uploadVenueImage')}
+            multiple={false}
+            ref={fileInputRef}
+            onChange={async (
+              e: React.ChangeEvent<HTMLInputElement>,
+            ): Promise<void> => {
+              setFormState((prevPostFormState) => ({
+                ...prevPostFormState,
+                imageURL: '',
+              }));
+              setVenueImage(true);
+              const file = e.target.files?.[0];
+              /* istanbul ignore next */
+              if (file) {
+                setFormState({
+                  ...formState,
+                  imageURL: await convertToBase64(file),
+                });
+              }
+            }}
+          />
+          {venueImage && (
+            <div className={styles.preview}>
+              <img src={imageURL} alt="Venue Image Preview" />
+              <button
+                className={styles.closeButtonP}
+                onClick={clearImageInput}
+                data-testid="closeimage"
+              >
+                <i className="fa fa-times"></i>
+              </button>
+            </div>
+          )}
+
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            value={edit ? 'editVenue' : 'createVenue'}
+            data-testid={edit ? 'updateVenueBtn' : 'createVenueBtn'}
+            onClick={handleSubmit}
+            disabled={loading}
+          >
+            {edit ? t('editVenue') : t('createVenue')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default VenueModal;
diff --git a/src/components/plugins/DummyPlugin/DummyPlugin.module.css b/src/components/plugins/DummyPlugin/DummyPlugin.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx b/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx
new file mode 100644
index 0000000000..e1abb52a1e
--- /dev/null
+++ b/src/components/plugins/DummyPlugin/DummyPlugin.test.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import { store } from 'state/store';
+import DummyPlugin from './DummyPlugin';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const link = new StaticMockLink([], true);
+
+describe('Testing dummy plugin', () => {
+  test('should render props and text elements test for the page component', () => {
+    const { getByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <DummyPlugin />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(getByText(/Welcome to the Dummy Plugin!/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/plugins/DummyPlugin/DummyPlugin.tsx b/src/components/plugins/DummyPlugin/DummyPlugin.tsx
new file mode 100644
index 0000000000..5b837ea076
--- /dev/null
+++ b/src/components/plugins/DummyPlugin/DummyPlugin.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import AddOn from 'components/AddOn/AddOn';
+
+/**
+ * A dummy plugin component that renders a welcome message inside an `AddOn` component.
+ *
+ * This component is used for demonstration or testing purposes and does not have any
+ * additional functionality or properties.
+ *
+ * @returns JSX.Element - Renders the `AddOn` component containing a welcome message.
+ */
+function DummyPlugin(): JSX.Element {
+  return (
+    <AddOn>
+      <div>Welcome to the Dummy Plugin!</div>
+    </AddOn>
+  );
+}
+
+export default DummyPlugin;
diff --git a/src/components/plugins/DummyPlugin2/DummyPlugin2.module.css b/src/components/plugins/DummyPlugin2/DummyPlugin2.module.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx b/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx
new file mode 100644
index 0000000000..c2cfe03a1e
--- /dev/null
+++ b/src/components/plugins/DummyPlugin2/DummyPlugin2.test.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import DummyPlugin2 from './DummyPlugin2';
+
+describe('Testing DummyPlugin2', () => {
+  test('should render DummyPlugin2 component', () => {
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <DummyPlugin2 />
+        </Provider>
+      </BrowserRouter>,
+    );
+  });
+});
diff --git a/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx b/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx
new file mode 100644
index 0000000000..dca6d63ee3
--- /dev/null
+++ b/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+/**
+ * A placeholder component for demonstration or testing purposes.
+ * It renders an empty `div` element.
+ *
+ * This component currently does not have any additional functionality
+ * or properties.
+ */
+function DummyPlugin2(): JSX.Element {
+  return <div></div>;
+}
+
+export default DummyPlugin2;
diff --git a/src/components/plugins/index.ts b/src/components/plugins/index.ts
new file mode 100644
index 0000000000..db688e0da2
--- /dev/null
+++ b/src/components/plugins/index.ts
@@ -0,0 +1,4 @@
+import DummyPlugin from './DummyPlugin/DummyPlugin';
+import DummyPlugin2 from './DummyPlugin2/DummyPlugin2';
+
+export { DummyPlugin, DummyPlugin2 };
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000000..d405ec5d1f
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,53 @@
+import {
+  FacebookLogo,
+  LinkedInLogo,
+  GithubLogo,
+  InstagramLogo,
+  SlackLogo,
+  XLogo,
+  YoutubeLogo,
+  RedditLogo,
+} from 'assets/svgs/social-icons';
+
+export const socialMediaLinks = [
+  {
+    tag: 'facebook',
+    href: 'https://www.facebook.com/palisadoesproject',
+    logo: FacebookLogo,
+  },
+  {
+    tag: 'X',
+    href: 'https://X.com/palisadoesorg?lang=en',
+    logo: XLogo,
+  },
+  {
+    tag: 'linkedIn',
+    href: 'https://www.linkedin.com/company/palisadoes/',
+    logo: LinkedInLogo,
+  },
+  {
+    tag: 'gitHub',
+    href: 'https://github.com/PalisadoesFoundation',
+    logo: GithubLogo,
+  },
+  {
+    tag: 'youTube',
+    href: 'https://www.youtube.com/@PalisadoesOrganization',
+    logo: YoutubeLogo,
+  },
+  {
+    tag: 'slack',
+    href: 'https://www.palisadoes.org/slack',
+    logo: SlackLogo,
+  },
+  {
+    tag: 'instagram',
+    href: 'https://www.instagram.com/palisadoes/',
+    logo: InstagramLogo,
+  },
+  {
+    tag: 'reddit',
+    href: '',
+    logo: RedditLogo,
+  },
+];
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8c0..0000000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 15d9bd34d8..ec1d45ae69 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,159 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
+import React, { Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import type { NormalizedCacheObject } from '@apollo/client';
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  HttpLink,
+  split,
+} from '@apollo/client';
+import { getMainDefinition } from '@apollo/client/utilities';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { createClient } from 'graphql-ws';
+import { onError } from '@apollo/link-error';
+import './assets/css/app.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import 'react-datepicker/dist/react-datepicker.css';
+import 'flag-icons/css/flag-icons.min.css';
+import { Provider } from 'react-redux';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { store } from './state/store';
+import {
+  BACKEND_URL,
+  REACT_APP_BACKEND_WEBSOCKET_URL,
+} from 'Constant/constant';
+import { refreshToken } from 'utils/getRefreshToken';
+import { ThemeProvider, createTheme } from '@mui/material';
+import { ApolloLink } from '@apollo/client/core';
+import { setContext } from '@apollo/client/link/context';
+import '../src/assets/css/scrollStyles.css';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#31bb6b',
+    },
+  },
+});
+import useLocalStorage from 'utils/useLocalstorage';
+import i18n from './utils/i18n';
+import { requestMiddleware, responseMiddleware } from 'utils/timezoneUtils';
+
+const { getItem } = useLocalStorage();
+const authLink = setContext((_, { headers }) => {
+  const lng = i18n.language;
+  return {
+    headers: {
+      ...headers,
+      authorization: 'Bearer ' + getItem('token') || '',
+      'Accept-Language': lng,
+    },
+  };
+});
+
+const errorLink = onError(
+  ({ graphQLErrors, networkError, operation, forward }) => {
+    if (graphQLErrors) {
+      graphQLErrors.map(({ message }) => {
+        if (message === 'User is not authenticated') {
+          refreshToken().then((success) => {
+            if (success) {
+              const oldHeaders = operation.getContext().headers;
+              operation.setContext({
+                headers: {
+                  ...oldHeaders,
+                  authorization: 'Bearer ' + getItem('token'),
+                },
+              });
+              return forward(operation);
+            } else {
+              localStorage.clear();
+            }
+          });
+        }
+      });
+    } else if (networkError) {
+      console.log(`[Network error]: ${networkError}`);
+      toast.error(
+        'API server unavailable. Check your connection or try again later',
+        {
+          toastId: 'apiServer',
+        },
+      );
+    }
+  },
+);
+
+const httpLink = new HttpLink({
+  uri: BACKEND_URL,
+});
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+// if didnt work use /subscriptions
+const wsLink = new GraphQLWsLink(
+  createClient({
+    url: REACT_APP_BACKEND_WEBSOCKET_URL,
+  }),
 );
 
-reportWebVitals();
+// const wsLink = new GraphQLWsLink(
+//   createClient({
+//     url: 'ws://localhost:4000/subscriptions',
+//   }),
+// );
+// The split function takes three parameters:
+//
+// * A function that's called for each operation to execute
+// * The Link to use for an operation if the function returns a "truthy" value
+// * The Link to use for an operation if the function returns a "falsy" value
+const splitLink = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query);
+    return (
+      definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+    );
+  },
+  wsLink,
+  httpLink,
+);
+
+const combinedLink = ApolloLink.from([
+  errorLink,
+  authLink,
+  requestMiddleware,
+  responseMiddleware,
+  splitLink,
+]);
+
+const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: combinedLink,
+});
+const fallbackLoader = <div className="loader"></div>;
+
+const container = document.getElementById('root');
+const root = createRoot(container!); // Note the use of '!' is to assert the container is not null
+
+root.render(
+  <Suspense fallback={fallbackLoader}>
+    <ApolloProvider client={client}>
+      <BrowserRouter>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <ThemeProvider theme={theme}>
+            <Provider store={store}>
+              <App />
+              <ToastContainer limit={5} />
+            </Provider>
+          </ThemeProvider>
+        </LocalizationProvider>
+      </BrowserRouter>
+    </ApolloProvider>
+  </Suspense>,
+);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc6..0000000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
index eb4be08f20..f49db29f28 100644
--- a/src/reportWebVitals.ts
+++ b/src/reportWebVitals.ts
@@ -1,13 +1,13 @@
-import { ReportHandler } from 'web-vitals';
+import { promises } from 'dns';
+import type { MetricType } from 'web-vitals';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
+const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void): void => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
+    import('web-vitals').then(({ onCLS, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };
diff --git a/src/screens/BlockUser/BlockUser.module.css b/src/screens/BlockUser/BlockUser.module.css
new file mode 100644
index 0000000000..ed93446206
--- /dev/null
+++ b/src/screens/BlockUser/BlockUser.module.css
@@ -0,0 +1,102 @@
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .inputContainer {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer .input {
+  width: 70%;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .inputContainer button {
+  width: 52px;
+}
+
+.largeBtnsWrapper {
+  display: flex;
+}
+
+.listBox {
+  width: 100%;
+  flex: 1;
+}
+
+.notFound {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .input {
+    width: 100%;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .largeBtnsWrapper {
+    flex-direction: column;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
diff --git a/src/screens/BlockUser/BlockUser.test.tsx b/src/screens/BlockUser/BlockUser.test.tsx
new file mode 100644
index 0000000000..c851470d9b
--- /dev/null
+++ b/src/screens/BlockUser/BlockUser.test.tsx
@@ -0,0 +1,668 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  BLOCK_USER_MUTATION,
+  UNBLOCK_USER_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import {
+  BLOCK_PAGE_MEMBER_LIST,
+  ORGANIZATIONS_LIST,
+} from 'GraphQl/Queries/Queries';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+
+import BlockUser from './BlockUser';
+
+let userQueryCalled = false;
+
+const USER_BLOCKED = {
+  _id: '123',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'johndoe@gmail.com',
+  organizationsBlockedBy: [
+    {
+      _id: 'orgid',
+    },
+  ],
+};
+
+const USER_UNBLOCKED = {
+  _id: '456',
+  firstName: 'Sam',
+  lastName: 'Smith',
+  email: 'samsmith@gmail.com',
+  organizationsBlockedBy: [],
+};
+
+const DATA_INITIAL = {
+  data: {
+    organizationsMemberConnection: {
+      edges: [USER_BLOCKED, USER_UNBLOCKED],
+    },
+  },
+};
+
+const DATA_AFTER_MUTATION = {
+  data: {
+    organizationsMemberConnection: {
+      edges: [
+        {
+          _id: '123',
+          firstName: 'John',
+          lastName: 'Doe',
+          email: 'johndoe@gmail.com',
+          organizationsBlockedBy: [],
+        },
+        {
+          _id: '456',
+          firstName: 'Sam',
+          lastName: 'Smith',
+          email: 'samsmith@gmail.com',
+          organizationsBlockedBy: [
+            {
+              _id: 'orgid',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: {
+        id: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgid',
+            image: '',
+            creator: {
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            name: 'name',
+            description: 'description',
+            location: 'location',
+            members: {
+              _id: 'id',
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            admins: {
+              _id: 'id',
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            membershipRequests: {
+              _id: 'id',
+              user: {
+                firstName: 'firstName',
+                lastName: 'lastName',
+                email: 'email',
+              },
+            },
+            blockedUsers: {
+              _id: 'id',
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+          },
+        ],
+      },
+    },
+  },
+
+  {
+    request: {
+      query: BLOCK_USER_MUTATION,
+      variables: {
+        userId: '456',
+        orgId: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        blockUser: {
+          _id: '456',
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: UNBLOCK_USER_MUTATION,
+      variables: {
+        userId: '123',
+        orgId: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        unblockUser: {
+          _id: '123',
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: BLOCK_PAGE_MEMBER_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+        orgId: 'orgid',
+      },
+    },
+    result: DATA_INITIAL,
+    newData: (): typeof DATA_AFTER_MUTATION | typeof DATA_INITIAL => {
+      if (userQueryCalled) {
+        return DATA_AFTER_MUTATION;
+      } else {
+        userQueryCalled = true;
+
+        return DATA_INITIAL;
+      }
+    },
+  },
+
+  {
+    request: {
+      query: BLOCK_PAGE_MEMBER_LIST,
+      variables: {
+        firstName_contains: 'john',
+        lastName_contains: '',
+        orgId: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [USER_BLOCKED],
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: BLOCK_PAGE_MEMBER_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: 'doe',
+        orgId: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [USER_BLOCKED],
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: BLOCK_PAGE_MEMBER_LIST,
+      variables: {
+        firstName_contains: 'Peter',
+        lastName_contains: '',
+        orgId: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [],
+        },
+      },
+    },
+  },
+];
+const MOCKS_EMPTY = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: {
+        id: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgid',
+            image: '',
+            creator: {
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            name: 'name',
+            description: 'description',
+            location: 'location',
+            members: {
+              _id: 'id',
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            admins: {
+              _id: 'id',
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            membershipRequests: {
+              _id: 'id',
+              user: {
+                firstName: 'firstName',
+                lastName: 'lastName',
+                email: 'email',
+              },
+            },
+            blockedUsers: {
+              _id: 'id',
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+          },
+        ],
+      },
+    },
+  },
+
+  {
+    request: {
+      query: BLOCK_PAGE_MEMBER_LIST,
+      variables: {
+        firstName_contains: 'Peter',
+        lastName_contains: '',
+        orgId: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [],
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_EMPTY, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: 'orgid' }),
+}));
+
+describe('Testing Block/Unblock user screen', () => {
+  beforeEach(() => {
+    userQueryCalled = false;
+  });
+
+  test('Components should be rendered properly', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={true} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.getByText('Search By First Name')).toBeInTheDocument();
+
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing block user functionality', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+    userEvent.click(screen.getByTestId('showMembers'));
+    await wait();
+
+    expect(screen.getByTestId('unBlockUser123')).toBeInTheDocument();
+    expect(screen.getByTestId('blockUser456')).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('unBlockUser123'));
+    await wait();
+
+    expect(screen.getByTestId('blockUser123')).toBeInTheDocument();
+    expect(screen.getByTestId('unBlockUser456')).toBeInTheDocument();
+
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing unblock user functionality', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+    userEvent.click(screen.getByTestId('showMembers'));
+
+    await wait();
+
+    expect(screen.getByTestId('unBlockUser123')).toBeInTheDocument();
+    expect(screen.getByTestId('blockUser456')).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('blockUser456'));
+    await wait();
+
+    expect(screen.getByTestId('blockUser123')).toBeInTheDocument();
+    expect(screen.getByTestId('unBlockUser456')).toBeInTheDocument();
+
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing First Name Filter', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+    userEvent.click(screen.getByTestId('showMembers'));
+
+    await wait();
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Sam Smith')).toBeInTheDocument();
+
+    // Open Dropdown
+    await act(async () => {
+      userEvent.click(screen.getByTestId('nameFilter'));
+    });
+    // Select option and enter first name
+    userEvent.click(screen.getByTestId('searchByFirstName'));
+    const firstNameInput = screen.getByPlaceholderText(/Search by First Name/i);
+    userEvent.type(firstNameInput, 'john{enter}');
+
+    await wait(700);
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Sam Smith')).not.toBeInTheDocument();
+
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing Last Name Filter', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+    userEvent.click(screen.getByTestId('showMembers'));
+
+    await wait();
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Sam Smith')).toBeInTheDocument();
+
+    // Open Dropdown
+    await act(async () => {
+      userEvent.click(screen.getByTestId('nameFilter'));
+    });
+    // Select option and enter last name
+    userEvent.click(screen.getByTestId('searchByLastName'));
+    const lastNameInput = screen.getByPlaceholderText(/Search by Last Name/i);
+    userEvent.type(lastNameInput, 'doe{enter}');
+
+    await wait(700);
+
+    expect(lastNameInput).toHaveValue('doe');
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Sam Smith')).not.toBeInTheDocument();
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing No Spammers Present', async () => {
+    window.location.assign('/blockuser/orgid');
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByText(/No spammer found/i)).toBeInTheDocument();
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing All Members', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+              <ToastContainer />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+    userEvent.click(screen.getByTestId('showMembers'));
+
+    await wait(700);
+
+    expect(screen.getByTestId(/userFilter/i)).toHaveTextContent('All Members');
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Sam Smith')).toBeInTheDocument();
+
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing Blocked Users', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+              <ToastContainer />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+
+    userEvent.click(screen.getByTestId('showBlockedMembers'));
+    await wait();
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Sam Smith')).not.toBeInTheDocument();
+
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing table data getting rendered', async () => {
+    window.location.assign('/orglist/orgid');
+    const link = new StaticMockLink(MOCKS, true);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await act(async () => {
+      userEvent.click(screen.getByTestId('userFilter'));
+    });
+    userEvent.click(screen.getByTestId('showMembers'));
+
+    await wait();
+
+    expect(screen.getByTestId(/userList/)).toBeInTheDocument();
+    expect(screen.getAllByText('Block/Unblock')).toHaveLength(1);
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Sam Smith')).toBeInTheDocument();
+  });
+
+  test('Testing No Results Found', async () => {
+    window.location.assign('/blockuser/orgid');
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const input = screen.getByPlaceholderText('Search By First Name');
+    await act(async () => {
+      userEvent.type(input, 'Peter{enter}');
+    });
+    await wait(700);
+    expect(
+      screen.getByText(`No results found for "Peter"`),
+    ).toBeInTheDocument();
+    expect(window.location).toBeAt('/blockuser/orgid');
+  });
+
+  test('Testing Search functionality', async () => {
+    window.location.assign('/blockuser/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <BlockUser />
+              <ToastContainer />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    const searchBar = screen.getByTestId(/searchByName/i);
+    const searchBtn = screen.getByTestId(/searchBtn/i);
+    expect(searchBar).toBeInTheDocument();
+    userEvent.type(searchBar, 'Dummy{enter}');
+    await wait();
+    userEvent.clear(searchBar);
+    userEvent.type(searchBar, 'Dummy');
+    userEvent.click(searchBtn);
+    await wait();
+    userEvent.clear(searchBar);
+    userEvent.type(searchBar, '');
+    userEvent.click(searchBtn);
+  });
+});
diff --git a/src/screens/BlockUser/BlockUser.tsx b/src/screens/BlockUser/BlockUser.tsx
new file mode 100644
index 0000000000..1f36257bb1
--- /dev/null
+++ b/src/screens/BlockUser/BlockUser.tsx
@@ -0,0 +1,351 @@
+import { useMutation, useQuery } from '@apollo/client';
+import React, { useEffect, useState, useCallback } from 'react';
+import { Dropdown, Form, Table } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import { toast } from 'react-toastify';
+
+import { Search } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
+import {
+  BLOCK_USER_MUTATION,
+  UNBLOCK_USER_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { BLOCK_PAGE_MEMBER_LIST } from 'GraphQl/Queries/Queries';
+import TableLoader from 'components/TableLoader/TableLoader';
+import { useTranslation } from 'react-i18next';
+import { errorHandler } from 'utils/errorHandler';
+import styles from './BlockUser.module.css';
+import { useParams } from 'react-router-dom';
+
+interface InterfaceMember {
+  _id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  organizationsBlockedBy: {
+    _id: string;
+    __typename: 'Organization';
+  }[];
+  __typename: 'User';
+}
+
+/**
+ * Requests component displays and manages a list of users that can be blocked or unblocked.
+ *
+ * This component allows users to search for members by their first name or last name,
+ * toggle between viewing blocked and all members, and perform block/unblock operations.
+ *
+ * @returns JSX.Element - The `Requests` component.
+ *
+ * @example
+ * ```tsx
+ * <Requests />
+ * ```
+ */
+const Requests = (): JSX.Element => {
+  // Translation hooks for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'blockUnblockUser',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  document.title = t('title'); // Set document title
+  const { orgId: currentUrl } = useParams(); // Get current organization ID from URL
+
+  // State hooks
+  const [membersData, setMembersData] = useState<InterfaceMember[]>([]);
+  const [searchByFirstName, setSearchByFirstName] = useState<boolean>(true);
+  const [searchByName, setSearchByName] = useState<string>('');
+  const [showBlockedMembers, setShowBlockedMembers] = useState<boolean>(true);
+
+  // Query to fetch members list
+  const {
+    data: memberData,
+    loading: loadingMembers,
+    error: memberError,
+    refetch: memberRefetch,
+  } = useQuery(BLOCK_PAGE_MEMBER_LIST, {
+    variables: {
+      orgId: currentUrl,
+      firstName_contains: '',
+      lastName_contains: '',
+    },
+  });
+
+  // Mutations for blocking and unblocking users
+  const [blockUser] = useMutation(BLOCK_USER_MUTATION);
+  const [unBlockUser] = useMutation(UNBLOCK_USER_MUTATION);
+
+  // Effect to update member data based on filters and data changes
+  useEffect(() => {
+    if (!memberData) {
+      setMembersData([]);
+      return;
+    }
+
+    if (!showBlockedMembers) {
+      setMembersData(memberData?.organizationsMemberConnection.edges || []);
+    } else {
+      const blockUsers = memberData?.organizationsMemberConnection.edges.filter(
+        (user: InterfaceMember) =>
+          user.organizationsBlockedBy.some((org) => org._id === currentUrl),
+      );
+      setMembersData(blockUsers || []);
+    }
+  }, [memberData, showBlockedMembers, currentUrl]);
+
+  // Handler for blocking a user
+  const handleBlockUser = useCallback(
+    async (userId: string): Promise<void> => {
+      try {
+        const { data } = await blockUser({
+          variables: {
+            userId,
+            orgId: currentUrl,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          toast.success(t('blockedSuccessfully') as string);
+          memberRefetch();
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    },
+    [blockUser, currentUrl, memberRefetch, t],
+  );
+
+  // Handler for unblocking a user
+  const handleUnBlockUser = useCallback(
+    async (userId: string): Promise<void> => {
+      try {
+        const { data } = await unBlockUser({
+          variables: {
+            userId,
+            orgId: currentUrl,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          toast.success(t('Un-BlockedSuccessfully') as string);
+          memberRefetch();
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    },
+    [unBlockUser, currentUrl, memberRefetch, t],
+  );
+
+  // Display error if member query fails
+  useEffect(() => {
+    if (memberError) {
+      toast.error(memberError.message);
+    }
+  }, [memberError]);
+
+  // Search handler
+  const handleSearch = useCallback(
+    (value: string): void => {
+      setSearchByName(value);
+      memberRefetch({
+        orgId: currentUrl,
+        firstName_contains: searchByFirstName ? value : '',
+        lastName_contains: searchByFirstName ? '' : value,
+      });
+    },
+    [searchByFirstName, memberRefetch, currentUrl],
+  );
+
+  // Search by Enter key
+  const handleSearchByEnter = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>): void => {
+      if (e.key === 'Enter') {
+        const { value } = e.currentTarget;
+        handleSearch(value);
+      }
+    },
+    [handleSearch],
+  );
+
+  // Search button click handler
+  const handleSearchByBtnClick = useCallback((): void => {
+    const inputValue = searchByName;
+    handleSearch(inputValue);
+  }, [handleSearch, searchByName]);
+
+  // Header titles for the table
+  const headerTitles: string[] = [
+    '#',
+    tCommon('name'),
+    tCommon('email'),
+    t('block_unblock'),
+  ];
+
+  return (
+    <>
+      <div>
+        {/* Buttons Container */}
+        <div className={styles.btnsContainer}>
+          <div className={styles.inputContainer}>
+            <div className={styles.input}>
+              <Form.Control
+                type="name"
+                id="searchBlockedUsers"
+                className="bg-white"
+                placeholder={
+                  searchByFirstName
+                    ? t('searchByFirstName')
+                    : t('searchByLastName')
+                }
+                data-testid="searchByName"
+                autoComplete="off"
+                required
+                value={searchByName}
+                onChange={(e) => setSearchByName(e.target.value)}
+                onKeyUp={handleSearchByEnter}
+              />
+              <Button
+                tabIndex={-1}
+                className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                onClick={handleSearchByBtnClick}
+                data-testid="searchBtn"
+              >
+                <Search />
+              </Button>
+            </div>
+          </div>
+          <div className={styles.btnsBlock}>
+            <div className={styles.largeBtnsWrapper}>
+              {/* Dropdown for filtering members */}
+              <Dropdown aria-expanded="false" title="Sort organizations">
+                <Dropdown.Toggle variant="success" data-testid="userFilter">
+                  <SortIcon className={'me-1'} />
+                  {showBlockedMembers ? t('blockedUsers') : t('allMembers')}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item
+                    active={!showBlockedMembers}
+                    data-testid="showMembers"
+                    onClick={(): void => setShowBlockedMembers(false)}
+                  >
+                    {t('allMembers')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    active={showBlockedMembers}
+                    data-testid="showBlockedMembers"
+                    onClick={(): void => setShowBlockedMembers(true)}
+                  >
+                    {t('blockedUsers')}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              {/* Dropdown for sorting by name */}
+              <Dropdown aria-expanded="false">
+                <Dropdown.Toggle variant="success" data-testid="nameFilter">
+                  <SortIcon className={'me-1'} />
+                  {searchByFirstName
+                    ? t('searchByFirstName')
+                    : t('searchByLastName')}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item
+                    active={searchByFirstName}
+                    data-testid="searchByFirstName"
+                    onClick={(): void => setSearchByFirstName(true)}
+                  >
+                    {t('searchByFirstName')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    active={!searchByFirstName}
+                    data-testid="searchByLastName"
+                    onClick={(): void => setSearchByFirstName(false)}
+                  >
+                    {t('searchByLastName')}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+          </div>
+        </div>
+        {/* Table */}
+        {loadingMembers === false &&
+        membersData.length === 0 &&
+        searchByName.length > 0 ? (
+          <div className={styles.notFound}>
+            <h4>
+              {tCommon('noResultsFoundFor')} &quot;{searchByName}&quot;
+            </h4>
+          </div>
+        ) : loadingMembers === false && membersData.length === 0 ? (
+          <div className={styles.notFound}>
+            <h4>{t('noSpammerFound')}</h4>
+          </div>
+        ) : (
+          <div className={styles.listBox}>
+            {loadingMembers ? (
+              <TableLoader headerTitles={headerTitles} noOfRows={10} />
+            ) : (
+              <Table responsive data-testid="userList">
+                <thead>
+                  <tr>
+                    {headerTitles.map((title: string, index: number) => {
+                      return (
+                        <th key={index} scope="col">
+                          {title}
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+                <tbody>
+                  {membersData.map((user, index: number) => {
+                    return (
+                      <tr key={user._id}>
+                        <th scope="row">{index + 1}</th>
+                        <td>{`${user.firstName} ${user.lastName}`}</td>
+                        <td>{user.email}</td>
+                        <td>
+                          {user.organizationsBlockedBy.some(
+                            (spam) => spam._id === currentUrl,
+                          ) ? (
+                            <Button
+                              variant="danger"
+                              size="sm"
+                              onClick={async (): Promise<void> => {
+                                await handleUnBlockUser(user._id);
+                              }}
+                              data-testid={`unBlockUser${user._id}`}
+                            >
+                              {t('unblock')}
+                            </Button>
+                          ) : (
+                            <Button
+                              variant="success"
+                              size="sm"
+                              onClick={async (): Promise<void> => {
+                                await handleBlockUser(user._id);
+                              }}
+                              data-testid={`blockUser${user._id}`}
+                            >
+                              {t('block')}
+                            </Button>
+                          )}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </Table>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Requests;
diff --git a/src/screens/CommunityProfile/CommunityProfile.module.css b/src/screens/CommunityProfile/CommunityProfile.module.css
new file mode 100644
index 0000000000..1e6eac2bae
--- /dev/null
+++ b/src/screens/CommunityProfile/CommunityProfile.module.css
@@ -0,0 +1,41 @@
+.card {
+  width: fit-content;
+}
+
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.5rem;
+}
+
+.formLabel {
+  font-weight: normal;
+  padding-bottom: 0;
+  font-size: 1rem;
+  color: black;
+}
+.cardBody {
+  min-height: 180px;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--bs-secondary);
+}
+
+.socialInput {
+  height: 2.5rem;
+}
+
+@media (max-width: 520px) {
+  .btn {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
diff --git a/src/screens/CommunityProfile/CommunityProfile.test.tsx b/src/screens/CommunityProfile/CommunityProfile.test.tsx
new file mode 100644
index 0000000000..d7e056caa4
--- /dev/null
+++ b/src/screens/CommunityProfile/CommunityProfile.test.tsx
@@ -0,0 +1,334 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import { StaticMockLink } from 'utils/StaticMockLink';
+import CommunityProfile from './CommunityProfile';
+import i18n from 'utils/i18nForTest';
+import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { RESET_COMMUNITY, UPDATE_COMMUNITY } from 'GraphQl/Mutations/mutations';
+
+const MOCKS1 = [
+  {
+    request: {
+      query: GET_COMMUNITY_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: null,
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_COMMUNITY,
+      variables: {
+        data: {
+          name: 'Name',
+          websiteLink: 'https://website.com',
+          logo: 'data:image/png;base64,bG9nbw==',
+          socialMediaUrls: {
+            facebook: 'https://socialurl.com',
+            instagram: 'https://socialurl.com',
+            X: 'https://socialurl.com',
+            linkedIn: 'https://socialurl.com',
+            gitHub: 'https://socialurl.com',
+            youTube: 'https://socialurl.com',
+            reddit: 'https://socialurl.com',
+            slack: 'https://socialurl.com',
+          },
+        },
+      },
+    },
+    result: {
+      data: {
+        updateCommunity: true,
+      },
+    },
+  },
+];
+
+const MOCKS2 = [
+  {
+    request: {
+      query: GET_COMMUNITY_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          _id: null,
+          name: null,
+          logoUrl: null,
+          websiteLink: null,
+          socialMediaUrls: {
+            facebook: null,
+            gitHub: null,
+            youTube: null,
+            instagram: null,
+            linkedIn: null,
+            reddit: null,
+            slack: null,
+            X: null,
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: RESET_COMMUNITY,
+      variables: {
+        resetPreLoginImageryId: 'communityId',
+      },
+    },
+    result: {
+      data: {
+        resetCommunity: true,
+      },
+    },
+  },
+];
+
+const MOCKS3 = [
+  {
+    request: {
+      query: GET_COMMUNITY_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          _id: 'communityId',
+          name: 'testName',
+          logoUrl: 'image.png',
+          websiteLink: 'http://websitelink.com',
+          socialMediaUrls: {
+            facebook: 'http://sociallink.com',
+            gitHub: 'http://sociallink.com',
+            youTube: 'http://sociallink.com',
+            instagram: 'http://sociallink.com',
+            linkedIn: 'http://sociallink.com',
+            reddit: 'http://sociallink.com',
+            slack: 'http://sociallink.com',
+            X: 'http://sociallink.com',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: RESET_COMMUNITY,
+      variables: {
+        resetPreLoginImageryId: 'communityId',
+      },
+    },
+    result: {
+      data: {
+        resetCommunity: true,
+      },
+    },
+  },
+];
+
+const link1 = new StaticMockLink(MOCKS1, true);
+const link2 = new StaticMockLink(MOCKS2, true);
+const link3 = new StaticMockLink(MOCKS3, true);
+
+const profileVariables = {
+  name: 'Name',
+  websiteLink: 'https://website.com',
+  socialUrl: 'https://socialurl.com',
+  logo: new File(['logo'], 'test.png', {
+    type: 'image/png',
+  }),
+};
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe('Testing Community Profile Screen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Components should render properly', async () => {
+    window.location.assign('/communityProfile');
+
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18n}>
+            <CommunityProfile />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    expect(screen.getByPlaceholderText(/Community Name/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/Website Link/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/facebook/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/instagram/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/X/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/linkedIn/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/github/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/youtube/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/reddit/i)).toBeInTheDocument();
+    expect(screen.getByTestId(/slack/i)).toBeInTheDocument();
+    expect(screen.getByTestId('resetChangesBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('resetChangesBtn')).toBeDisabled();
+    expect(screen.getByTestId('saveChangesBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('saveChangesBtn')).toBeDisabled();
+  });
+
+  test('Testing all the input fields and update community data feature', async () => {
+    window.location.assign('/communityProfile');
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link1}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              <CommunityProfile />
+            </I18nextProvider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    const communityName = screen.getByPlaceholderText(/Community Name/i);
+    const websiteLink = screen.getByPlaceholderText(/Website Link/i);
+    const logo = screen.getByTestId(/fileInput/i);
+    const facebook = screen.getByTestId(/facebook/i);
+    const instagram = screen.getByTestId(/instagram/i);
+    const X = screen.getByTestId(/X/i);
+    const linkedIn = screen.getByTestId(/linkedIn/i);
+    const github = screen.getByTestId(/github/i);
+    const youtube = screen.getByTestId(/youtube/i);
+    const reddit = screen.getByTestId(/reddit/i);
+    const slack = screen.getByTestId(/slack/i);
+    const saveChangesBtn = screen.getByTestId(/saveChangesBtn/i);
+    const resetChangeBtn = screen.getByTestId(/resetChangesBtn/i);
+
+    userEvent.type(communityName, profileVariables.name);
+    userEvent.type(websiteLink, profileVariables.websiteLink);
+    userEvent.type(facebook, profileVariables.socialUrl);
+    userEvent.type(instagram, profileVariables.socialUrl);
+    userEvent.type(X, profileVariables.socialUrl);
+    userEvent.type(linkedIn, profileVariables.socialUrl);
+    userEvent.type(github, profileVariables.socialUrl);
+    userEvent.type(youtube, profileVariables.socialUrl);
+    userEvent.type(reddit, profileVariables.socialUrl);
+    userEvent.type(slack, profileVariables.socialUrl);
+    userEvent.upload(logo, profileVariables.logo);
+    await wait();
+
+    expect(communityName).toHaveValue(profileVariables.name);
+    expect(websiteLink).toHaveValue(profileVariables.websiteLink);
+    // expect(logo).toBeTruthy();
+    expect(facebook).toHaveValue(profileVariables.socialUrl);
+    expect(instagram).toHaveValue(profileVariables.socialUrl);
+    expect(X).toHaveValue(profileVariables.socialUrl);
+    expect(linkedIn).toHaveValue(profileVariables.socialUrl);
+    expect(github).toHaveValue(profileVariables.socialUrl);
+    expect(youtube).toHaveValue(profileVariables.socialUrl);
+    expect(reddit).toHaveValue(profileVariables.socialUrl);
+    expect(slack).toHaveValue(profileVariables.socialUrl);
+    expect(saveChangesBtn).not.toBeDisabled();
+    expect(resetChangeBtn).not.toBeDisabled();
+    await wait();
+
+    userEvent.click(saveChangesBtn);
+    await wait();
+  });
+
+  test('If the queried data has some fields null then the input field should be empty', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <I18nextProvider i18n={i18n}>
+          <CommunityProfile />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+
+    expect(screen.getByPlaceholderText(/Community Name/i)).toHaveValue('');
+    expect(screen.getByPlaceholderText(/Website Link/i)).toHaveValue('');
+    expect(screen.getByTestId(/facebook/i)).toHaveValue('');
+    expect(screen.getByTestId(/instagram/i)).toHaveValue('');
+    expect(screen.getByTestId(/X/i)).toHaveValue('');
+    expect(screen.getByTestId(/linkedIn/i)).toHaveValue('');
+    expect(screen.getByTestId(/github/i)).toHaveValue('');
+    expect(screen.getByTestId(/youtube/i)).toHaveValue('');
+    expect(screen.getByTestId(/reddit/i)).toHaveValue('');
+    expect(screen.getByTestId(/slack/i)).toHaveValue('');
+  });
+
+  test('Should clear out all the input field when click on Reset Changes button', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <I18nextProvider i18n={i18n}>
+          <CommunityProfile />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const resetChangesBtn = screen.getByTestId('resetChangesBtn');
+    userEvent.click(resetChangesBtn);
+    await wait();
+
+    expect(screen.getByPlaceholderText(/Community Name/i)).toHaveValue('');
+    expect(screen.getByPlaceholderText(/Website Link/i)).toHaveValue('');
+    expect(screen.getByTestId(/facebook/i)).toHaveValue('');
+    expect(screen.getByTestId(/instagram/i)).toHaveValue('');
+    expect(screen.getByTestId(/X/i)).toHaveValue('');
+    expect(screen.getByTestId(/linkedIn/i)).toHaveValue('');
+    expect(screen.getByTestId(/github/i)).toHaveValue('');
+    expect(screen.getByTestId(/youtube/i)).toHaveValue('');
+    expect(screen.getByTestId(/reddit/i)).toHaveValue('');
+    expect(screen.getByTestId(/slack/i)).toHaveValue('');
+    expect(toast.success).toHaveBeenCalled();
+  });
+
+  test('Should have empty input fields when queried result is null', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <I18nextProvider i18n={i18n}>
+          <CommunityProfile />
+        </I18nextProvider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByPlaceholderText(/Community Name/i)).toHaveValue('');
+    expect(screen.getByPlaceholderText(/Website Link/i)).toHaveValue('');
+    expect(screen.getByTestId(/facebook/i)).toHaveValue('');
+    expect(screen.getByTestId(/instagram/i)).toHaveValue('');
+    expect(screen.getByTestId(/X/i)).toHaveValue('');
+    expect(screen.getByTestId(/linkedIn/i)).toHaveValue('');
+    expect(screen.getByTestId(/github/i)).toHaveValue('');
+    expect(screen.getByTestId(/youtube/i)).toHaveValue('');
+    expect(screen.getByTestId(/reddit/i)).toHaveValue('');
+    expect(screen.getByTestId(/slack/i)).toHaveValue('');
+  });
+});
diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx
new file mode 100644
index 0000000000..d96c923eb3
--- /dev/null
+++ b/src/screens/CommunityProfile/CommunityProfile.tsx
@@ -0,0 +1,427 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Card, Form } from 'react-bootstrap';
+import { useMutation, useQuery } from '@apollo/client';
+import { toast } from 'react-toastify';
+
+import Loader from 'components/Loader/Loader';
+import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries';
+import { UPDATE_COMMUNITY, RESET_COMMUNITY } from 'GraphQl/Mutations/mutations';
+import {
+  FacebookLogo,
+  InstagramLogo,
+  XLogo,
+  LinkedInLogo,
+  GithubLogo,
+  YoutubeLogo,
+  RedditLogo,
+  SlackLogo,
+} from 'assets/svgs/social-icons';
+import convertToBase64 from 'utils/convertToBase64';
+import styles from './CommunityProfile.module.css';
+import { errorHandler } from 'utils/errorHandler';
+import UpdateSession from '../../components/UpdateSession/UpdateSession';
+
+/**
+ * `CommunityProfile` component allows users to view and update their community profile details.
+ *
+ * It includes functionalities to:
+ * - Display current community profile information
+ * - Update profile details including social media links and logo
+ * - Reset profile changes to the initial state
+ *
+ * @returns JSX.Element - The `CommunityProfile` component.
+ *
+ * @example
+ * ```tsx
+ * <CommunityProfile />
+ * ```
+ */
+const CommunityProfile = (): JSX.Element => {
+  // Translation hooks for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'communityProfile',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  document.title = t('title'); // Set document title
+
+  // Define the type for pre-login imagery data
+  type PreLoginImageryDataType = {
+    _id: string;
+    name: string | undefined;
+    websiteLink: string | undefined;
+    logoUrl: string | undefined;
+    socialMediaUrls: {
+      facebook: string | undefined;
+      instagram: string | undefined;
+      X: string | undefined;
+      linkedIn: string | undefined;
+      gitHub: string | undefined;
+      youTube: string | undefined;
+      reddit: string | undefined;
+      slack: string | undefined;
+    };
+  };
+
+  // State hook for managing profile variables
+  const [profileVariable, setProfileVariable] = React.useState({
+    name: '',
+    websiteLink: '',
+    logoUrl: '',
+    facebook: '',
+    instagram: '',
+    X: '',
+    linkedIn: '',
+    github: '',
+    youtube: '',
+    reddit: '',
+    slack: '',
+  });
+
+  // Query to fetch community data
+  const { data, loading } = useQuery(GET_COMMUNITY_DATA);
+
+  // Mutations for updating and resetting community data
+  const [uploadPreLoginImagery] = useMutation(UPDATE_COMMUNITY);
+  const [resetPreLoginImagery] = useMutation(RESET_COMMUNITY);
+
+  // Effect to set profile data from fetched data
+  React.useEffect(() => {
+    const preLoginData: PreLoginImageryDataType | undefined =
+      data?.getCommunityData;
+    preLoginData &&
+      setProfileVariable({
+        name: preLoginData.name ?? '',
+        websiteLink: preLoginData.websiteLink ?? '',
+        logoUrl: preLoginData.logoUrl ?? '',
+        facebook: preLoginData.socialMediaUrls.facebook ?? '',
+        instagram: preLoginData.socialMediaUrls.instagram ?? '',
+        X: preLoginData.socialMediaUrls.X ?? '',
+        linkedIn: preLoginData.socialMediaUrls.linkedIn ?? '',
+        github: preLoginData.socialMediaUrls.gitHub ?? '',
+        youtube: preLoginData.socialMediaUrls.youTube ?? '',
+        reddit: preLoginData.socialMediaUrls.reddit ?? '',
+        slack: preLoginData.socialMediaUrls.slack ?? '',
+      });
+  }, [data]);
+
+  /**
+   * Handles change events for form inputs.
+   *
+   * @param e - Change event for input elements
+   */
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setProfileVariable({
+      ...profileVariable,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  /**
+   * Handles form submission to update community profile.
+   *
+   * @param e - Form submit event
+   */
+  const handleOnSubmit = async (
+    e: React.FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await uploadPreLoginImagery({
+        variables: {
+          data: {
+            name: profileVariable.name,
+            websiteLink: profileVariable.websiteLink,
+            logo: profileVariable.logoUrl,
+            socialMediaUrls: {
+              facebook: profileVariable.facebook,
+              instagram: profileVariable.instagram,
+              X: profileVariable.X,
+              linkedIn: profileVariable.linkedIn,
+              gitHub: profileVariable.github,
+              youTube: profileVariable.youtube,
+              reddit: profileVariable.reddit,
+              slack: profileVariable.slack,
+            },
+          },
+        },
+      });
+      toast.success(t('profileChangedMsg') as string);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error as Error);
+    }
+  };
+
+  /**
+   * Resets profile data to initial values and performs a reset operation.
+   */
+  const resetData = async (): Promise<void> => {
+    const preLoginData: PreLoginImageryDataType | undefined =
+      data?.getCommunityData;
+    try {
+      setProfileVariable({
+        name: '',
+        websiteLink: '',
+        logoUrl: '',
+        facebook: '',
+        instagram: '',
+        X: '',
+        linkedIn: '',
+        github: '',
+        youtube: '',
+        reddit: '',
+        slack: '',
+      });
+
+      await resetPreLoginImagery({
+        variables: {
+          resetPreLoginImageryId: preLoginData?._id,
+        },
+      });
+      toast.success(t(`resetData`) as string);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error as Error);
+    }
+  };
+
+  /**
+   * Determines whether the save and reset buttons should be disabled.
+   *
+   * @returns boolean - True if buttons should be disabled, otherwise false
+   */
+  const isDisabled = (): boolean => {
+    if (
+      profileVariable.name == '' &&
+      profileVariable.websiteLink == '' &&
+      profileVariable.logoUrl == ''
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  if (loading) {
+    <Loader />;
+  }
+
+  return (
+    <>
+      <Card border="0" className={`${styles.card} "rounded-4 my-4 shadow-sm"`}>
+        <div className={styles.cardHeader}>
+          <div className={styles.cardTitle}>{t('editProfile')}</div>
+        </div>
+        <Card.Body>
+          <div className="mb-3">{t('communityProfileInfo')}</div>
+          <Form onSubmit={handleOnSubmit}>
+            <Form.Group>
+              <Form.Label className={styles.formLabel}>
+                {t('communityName')}
+              </Form.Label>
+              <Form.Control
+                type="text"
+                id="communityName"
+                name="name"
+                value={profileVariable.name}
+                onChange={handleOnChange}
+                className="mb-3"
+                placeholder={t('communityName')}
+                autoComplete="off"
+                required
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label className={styles.formLabel}>
+                {t('wesiteLink')}
+              </Form.Label>
+              <Form.Control
+                type="url"
+                id="websiteLink"
+                name="websiteLink"
+                value={profileVariable.websiteLink}
+                onChange={handleOnChange}
+                className="mb-3"
+                placeholder={t('wesiteLink')}
+                autoComplete="off"
+                required
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label className={styles.formLabel}>{t('logo')}</Form.Label>
+              <Form.Control
+                accept="image/*"
+                multiple={false}
+                type="file"
+                id="logo"
+                name="logo"
+                data-testid="fileInput"
+                onChange={async (
+                  e: React.ChangeEvent<HTMLInputElement>,
+                ): Promise<void> => {
+                  setProfileVariable((prevInput) => ({
+                    ...prevInput,
+                    logo: '',
+                  }));
+                  const target = e.target as HTMLInputElement;
+                  const file = target.files?.[0];
+                  const base64file = file && (await convertToBase64(file));
+                  setProfileVariable({
+                    ...profileVariable,
+                    logoUrl: base64file ?? '',
+                  });
+                }}
+                className="mb-3"
+                autoComplete="off"
+                required
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label className={styles.formLabel}>
+                {t('social')}
+              </Form.Label>
+              {/* Social media inputs */}
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={FacebookLogo} alt="Facebook Logo" />
+                <Form.Control
+                  type="url"
+                  id="facebook"
+                  name="facebook"
+                  data-testid="facebook"
+                  className={styles.socialInput}
+                  value={profileVariable.facebook}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={InstagramLogo} alt="Instagram Logo" />
+                <Form.Control
+                  type="url"
+                  id="instagram"
+                  name="instagram"
+                  data-testid="instagram"
+                  className={styles.socialInput}
+                  value={profileVariable.instagram}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={XLogo} alt="X Logo" />
+                <Form.Control
+                  type="url"
+                  id="X"
+                  name="X"
+                  data-testid="X"
+                  className={styles.socialInput}
+                  value={profileVariable.X}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={LinkedInLogo} alt="LinkedIn Logo" />
+                <Form.Control
+                  type="url"
+                  id="linkedIn"
+                  name="linkedIn"
+                  data-testid="linkedIn"
+                  className={styles.socialInput}
+                  value={profileVariable.linkedIn}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={GithubLogo} alt="Github Logo" />
+                <Form.Control
+                  type="url"
+                  id="github"
+                  name="github"
+                  data-testid="github"
+                  className={styles.socialInput}
+                  value={profileVariable.github}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={YoutubeLogo} alt="Youtube Logo" />
+                <Form.Control
+                  type="url"
+                  id="youtube"
+                  name="youtube"
+                  data-testid="youtube"
+                  className={styles.socialInput}
+                  value={profileVariable.youtube}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={RedditLogo} alt="Reddit Logo" />
+                <Form.Control
+                  type="url"
+                  id="reddit"
+                  name="reddit"
+                  data-testid="reddit"
+                  className={styles.socialInput}
+                  value={profileVariable.reddit}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+              <div className="mb-3 d-flex align-items-center gap-3">
+                <img src={SlackLogo} alt="Slack Logo" />
+                <Form.Control
+                  type="url"
+                  id="slack"
+                  name="slack"
+                  data-testid="slack"
+                  className={styles.socialInput}
+                  value={profileVariable.slack}
+                  onChange={handleOnChange}
+                  placeholder={t('url')}
+                  autoComplete="off"
+                />
+              </div>
+            </Form.Group>
+            <div
+              className={`${styles.btn} d-flex justify-content-end gap-3 my-3`}
+            >
+              <Button
+                variant="outline-success"
+                onClick={resetData}
+                data-testid="resetChangesBtn"
+                disabled={isDisabled()}
+              >
+                {tCommon('resetChanges')}
+              </Button>
+              <Button
+                type="submit"
+                data-testid="saveChangesBtn"
+                disabled={isDisabled()}
+              >
+                {tCommon('saveChanges')}
+              </Button>
+            </div>
+          </Form>
+        </Card.Body>
+      </Card>
+
+      <UpdateSession />
+    </>
+  );
+};
+
+export default CommunityProfile;
diff --git a/src/screens/EventManagement/EventManagement.test.tsx b/src/screens/EventManagement/EventManagement.test.tsx
new file mode 100644
index 0000000000..a119caad42
--- /dev/null
+++ b/src/screens/EventManagement/EventManagement.test.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import EventManagement from './EventManagement';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { MOCKS_WITH_TIME } from 'components/EventManagement/Dashboard/EventDashboard.mocks';
+import useLocalStorage from 'utils/useLocalstorage';
+const { setItem } = useLocalStorage();
+
+const mockWithTime = new StaticMockLink(MOCKS_WITH_TIME, true);
+
+const renderEventManagement = (): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={mockWithTime}>
+      <MemoryRouter initialEntries={['/event/orgId/eventId']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Routes>
+              <Route
+                path="/event/:orgId/:eventId"
+                element={<EventManagement />}
+              />
+              <Route
+                path="/orglist"
+                element={<div data-testid="paramsError">paramsError</div>}
+              />
+              <Route
+                path="/orgevents/:orgId"
+                element={<div data-testid="eventsScreen">eventsScreen</div>}
+              />
+              <Route
+                path="/user/events/:orgId"
+                element={
+                  <div data-testid="userEventsScreen">userEventsScreen</div>
+                }
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Event Management', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Testing back button navigation when userType is SuperAdmin', async () => {
+    setItem('SuperAdmin', true);
+    renderEventManagement();
+
+    const backButton = screen.getByTestId('backBtn');
+    userEvent.click(backButton);
+    await waitFor(() => {
+      const eventsScreen = screen.getByTestId('eventsScreen');
+      expect(eventsScreen).toBeInTheDocument();
+    });
+  });
+
+  test('Testing event management tab switching', async () => {
+    renderEventManagement();
+
+    const registrantsButton = screen.getByTestId('registrantsBtn');
+    userEvent.click(registrantsButton);
+
+    const registrantsTab = screen.getByTestId('eventRegistrantsTab');
+    expect(registrantsTab).toBeInTheDocument();
+    const eventAttendanceButton = screen.getByTestId('attendanceBtn');
+    userEvent.click(eventAttendanceButton);
+    const eventAttendanceTab = screen.getByTestId('eventAttendanceTab');
+    expect(eventAttendanceTab).toBeInTheDocument();
+    const eventActionsButton = screen.getByTestId('actionsBtn');
+    userEvent.click(eventActionsButton);
+
+    const eventActionsTab = screen.getByTestId('eventActionsTab');
+    expect(eventActionsTab).toBeInTheDocument();
+
+    const eventAgendasButton = screen.getByTestId('agendasBtn');
+    userEvent.click(eventAgendasButton);
+
+    const eventAgendasTab = screen.getByTestId('eventAgendasTab');
+    expect(eventAgendasTab).toBeInTheDocument();
+
+    const eventStatsButton = screen.getByTestId('statisticsBtn');
+    userEvent.click(eventStatsButton);
+
+    const eventStatsTab = screen.getByTestId('eventStatsTab');
+    expect(eventStatsTab).toBeInTheDocument();
+
+    const volunteerButton = screen.getByTestId('volunteersBtn');
+    userEvent.click(volunteerButton);
+
+    const eventVolunteersTab = screen.getByTestId('eventVolunteersTab');
+    expect(eventVolunteersTab).toBeInTheDocument();
+  });
+  test('renders nothing when invalid tab is selected', () => {
+    render(
+      <MockedProvider addTypename={false} link={mockWithTime}>
+        <MemoryRouter initialEntries={['/event/orgId/eventId']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route
+                  path="/event/:orgId/:eventId"
+                  element={<EventManagement />}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    // Force an invalid tab state
+    const setTab = jest.fn();
+    React.useState = jest.fn().mockReturnValue(['invalidTab', setTab]);
+
+    // Verify nothing is rendered
+    expect(screen.queryByTestId('eventDashboardTab')).toBeInTheDocument();
+    expect(screen.queryByTestId('eventRegistrantsTab')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('eventAttendanceTab')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('eventActionsTab')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('eventVolunteersTab')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('eventAgendasTab')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('eventStatsTab')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/screens/EventManagement/EventManagement.tsx b/src/screens/EventManagement/EventManagement.tsx
new file mode 100644
index 0000000000..2e5cdbd419
--- /dev/null
+++ b/src/screens/EventManagement/EventManagement.tsx
@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { FaChevronLeft, FaTasks } from 'react-icons/fa';
+import { MdOutlineDashboard } from 'react-icons/md';
+import EventRegistrantsIcon from 'assets/svgs/people.svg?react';
+import { BsPersonCheck } from 'react-icons/bs';
+import { IoMdStats, IoIosHand } from 'react-icons/io';
+import EventAgendaItemsIcon from 'assets/svgs/agenda-items.svg?react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown } from 'react-bootstrap';
+
+import EventDashboard from 'components/EventManagement/Dashboard/EventDashboard';
+import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
+import VolunteerContainer from 'screens/EventVolunteers/VolunteerContainer';
+import EventAgendaItems from 'components/EventManagement/EventAgendaItems/EventAgendaItems';
+import useLocalStorage from 'utils/useLocalstorage';
+import EventAttendance from 'components/EventManagement/EventAttendance/EventAttendance';
+/**
+ * List of tabs for the event dashboard.
+ *
+ * Each tab is associated with an icon and value.
+ */
+const eventDashboardTabs: {
+  value: TabOptions;
+  icon: JSX.Element;
+}[] = [
+  {
+    value: 'dashboard',
+    icon: <MdOutlineDashboard size={18} className="me-1" />,
+  },
+  {
+    value: 'registrants',
+    icon: <EventRegistrantsIcon width={23} height={23} className="me-1" />,
+  },
+  {
+    value: 'attendance',
+    icon: <BsPersonCheck size={20} className="me-1" />,
+  },
+  {
+    value: 'agendas',
+    icon: <EventAgendaItemsIcon width={23} height={23} className="me-1" />,
+  },
+  {
+    value: 'actions',
+    icon: <FaTasks size={16} className="me-1" />,
+  },
+  {
+    value: 'volunteers',
+    icon: <IoIosHand size={20} className="me-1" />,
+  },
+  {
+    value: 'statistics',
+    icon: <IoMdStats size={20} className="me-2" />,
+  },
+];
+
+/**
+ * Tab options for the event management component.
+ */
+type TabOptions =
+  | 'dashboard'
+  | 'registrants'
+  | 'attendance'
+  | 'agendas'
+  | 'actions'
+  | 'volunteers'
+  | 'statistics';
+
+/**
+ * `EventManagement` component handles the display and navigation of different event management sections.
+ *
+ * It provides a tabbed interface for:
+ * - Viewing event dashboard
+ * - Managing event registrants
+ * - Handling event actions
+ * - Reviewing event agendas
+ * - Viewing event statistics
+ * - Managing event volunteers
+ * - Managing event attendance
+ *
+ * @returns JSX.Element - The `EventManagement` component.
+ *
+ * @example
+ * ```tsx
+ * <EventManagement />
+ * ```
+ */
+const EventManagement = (): JSX.Element => {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventManagement',
+  });
+
+  // Custom hook for accessing local storage
+  const { getItem } = useLocalStorage();
+
+  // Determine user role based on local storage
+  const superAdmin = getItem('SuperAdmin');
+  const adminFor = getItem('AdminFor');
+  /*istanbul ignore next*/
+  const userRole = superAdmin
+    ? 'SUPERADMIN'
+    : adminFor?.length > 0
+      ? 'ADMIN'
+      : 'USER';
+
+  // Extract event and organization IDs from URL parameters
+  const { eventId, orgId } = useParams();
+  /*istanbul ignore next*/
+  if (!eventId || !orgId) {
+    // Redirect if event ID or organization ID is missing
+    return <Navigate to={'/orglist'} />;
+  }
+
+  // Hook for navigation
+  const navigate = useNavigate();
+
+  // State hook for managing the currently selected tab
+  const [tab, setTab] = useState<TabOptions>('dashboard');
+
+  /**
+   * Renders a button for each tab with the appropriate icon and label.
+   *
+   * @param value - The tab value
+   * @param icon - The icon to display for the tab
+   * @returns JSX.Element - The rendered button component
+   */
+  const renderButton = ({
+    value,
+    icon,
+  }: {
+    value: TabOptions;
+    icon: React.ReactNode;
+  }): JSX.Element => {
+    const selected = tab === value;
+    const variant = selected ? 'success' : 'light';
+    const translatedText = t(value);
+
+    const className = selected
+      ? 'px-4 d-flex align-items-center rounded-3 shadow-sm'
+      : 'text-secondary bg-white px-4 d-flex align-items-center rounded-3 shadow-sm';
+    const props = {
+      variant,
+      className,
+      style: { height: '2.5rem' },
+      onClick: () => setTab(value),
+      'data-testid': `${value}Btn`,
+    };
+
+    return (
+      <Button key={value} {...props}>
+        {icon}
+        {translatedText}
+      </Button>
+    );
+  };
+
+  const handleBack = (): void => {
+    /*istanbul ignore next*/
+    if (userRole === 'USER') {
+      navigate(`/user/events/${orgId}`);
+    } else {
+      navigate(`/orgevents/${orgId}`);
+    }
+  };
+
+  return (
+    <div className="d-flex flex-column">
+      <Row className="mx-3 mt-4">
+        <Col>
+          <div className="d-none d-md-flex gap-3">
+            <Button
+              size="sm"
+              variant="light"
+              className="d-flex text-secondary bg-white align-items-center px-3 shadow-sm rounded-3"
+            >
+              <FaChevronLeft
+                cursor={'pointer'}
+                data-testid="backBtn"
+                onClick={handleBack}
+              />
+            </Button>
+            {eventDashboardTabs.map(renderButton)}
+          </div>
+
+          <Dropdown
+            className="d-md-none"
+            data-testid="tabsDropdownContainer"
+            drop="down"
+          >
+            <Dropdown.Toggle
+              variant="success"
+              id="dropdown-basic"
+              data-testid="tabsDropdownToggle"
+            >
+              <span className="me-1">{t(tab)}</span>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {/* Render dropdown items for each settings category */}
+              {eventDashboardTabs.map(({ value, icon }, index) => (
+                <Dropdown.Item
+                  key={index}
+                  onClick={
+                    /* istanbul ignore next */
+                    () => setTab(value)
+                  }
+                  className={`d-flex gap-2 ${tab === value ? 'text-secondary' : ''}`}
+                >
+                  {icon} {t(value)}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Col>
+
+        <Row className="mt-3">
+          <hr />
+        </Row>
+      </Row>
+
+      {/* Render content based on the selected settings category */}
+      {(() => {
+        switch (tab) {
+          case 'dashboard':
+            return (
+              <div data-testid="eventDashboardTab">
+                <EventDashboard eventId={eventId} />
+              </div>
+            );
+          case 'registrants':
+            return (
+              <div data-testid="eventRegistrantsTab">Event Registrants</div>
+            );
+          case 'attendance':
+            return (
+              <div data-testid="eventAttendanceTab" className="mx-4">
+                <EventAttendance />
+              </div>
+            );
+          case 'actions':
+            return (
+              <div
+                data-testid="eventActionsTab"
+                className="mx-4 bg-white p-4 pt-2 rounded-4 shadow"
+              >
+                <OrganizationActionItems />
+              </div>
+            );
+          case 'volunteers':
+            return (
+              <div
+                data-testid="eventVolunteersTab"
+                className="mx-4 bg-white p-4 pt-2 rounded-4 shadow"
+              >
+                <VolunteerContainer />
+              </div>
+            );
+          case 'agendas':
+            return (
+              <div data-testid="eventAgendasTab">
+                <EventAgendaItems eventId={eventId} />
+              </div>
+            );
+          case 'statistics':
+            return (
+              <div data-testid="eventStatsTab">
+                <h2>Statistics</h2>
+              </div>
+            );
+          /*istanbul ignore next*/
+          default:
+            /*istanbul ignore next*/
+            return null;
+        }
+      })()}
+    </div>
+  );
+};
+export default EventManagement;
diff --git a/src/screens/EventVolunteers/EventVolunteers.module.css b/src/screens/EventVolunteers/EventVolunteers.module.css
new file mode 100644
index 0000000000..84b19f0a9f
--- /dev/null
+++ b/src/screens/EventVolunteers/EventVolunteers.module.css
@@ -0,0 +1,266 @@
+/* Toggle Btn */
+.toggleGroup {
+  width: 50%;
+  min-width: 20rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtn {
+  padding: 0rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtn:hover {
+  color: #31bb6b !important;
+}
+
+input[type='radio']:checked + label {
+  background-color: #31bb6a50 !important;
+}
+
+input[type='radio']:checked + label:hover {
+  color: black !important;
+}
+
+.actionItemsContainer {
+  height: 90vh;
+}
+
+.actionItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+}
+
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.dropdownToggle {
+  margin-bottom: 0;
+  display: flex;
+}
+
+.dropdownModalToggle {
+  width: 50%;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px var(--bs-gray-300);
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: var(--bs-primary);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--bs-gray-500);
+  margin: 1rem;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 1px;
+}
+
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
+.removeFilterIcon {
+  cursor: pointer;
+}
+
+.searchForm {
+  display: inline;
+}
+
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--bs-gray-600);
+}
+
+/* header (search, filter, dropdown) */
+.btnsContainer {
+  display: flex;
+  margin: 0.5rem 0 1.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.noOutline input:disabled {
+  -webkit-text-fill-color: black !important;
+}
+
+.noOutline textarea:disabled {
+  -webkit-text-fill-color: black !important;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+/* Action Items Data Grid */
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.chipIcon {
+  height: 0.9rem !important;
+}
+
+.chip {
+  height: 1.5rem !important;
+}
+
+.active {
+  background-color: #31bb6a50 !important;
+}
+
+.pending {
+  background-color: #ffd76950 !important;
+  color: #bb952bd0 !important;
+  border-color: #bb952bd0 !important;
+}
+
+/* Modals */
+.itemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+}
+
+.TableImage {
+  object-fit: cover;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 100% !important;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+/* Modal Table (Groups & Assignments) */
+.modalTable {
+  max-height: 220px;
+  overflow-y: auto;
+}
diff --git a/src/screens/EventVolunteers/Requests/Requests.mocks.ts b/src/screens/EventVolunteers/Requests/Requests.mocks.ts
new file mode 100644
index 0000000000..4d2ae14ed0
--- /dev/null
+++ b/src/screens/EventVolunteers/Requests/Requests.mocks.ts
@@ -0,0 +1,221 @@
+import { UPDATE_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Mutations/EventVolunteerMutation';
+import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
+
+const membership1 = {
+  _id: 'membershipId1',
+  status: 'requested',
+  createdAt: '2024-10-29T10:18:05.851Z',
+  event: {
+    _id: 'eventId',
+    title: 'Event 1',
+    startDate: '2044-10-31',
+  },
+  volunteer: {
+    _id: 'volunteerId1',
+    user: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: 'img-url',
+    },
+  },
+  group: null,
+};
+
+const membership2 = {
+  _id: 'membershipId2',
+  status: 'requested',
+  createdAt: '2024-10-30T10:18:05.851Z',
+  event: {
+    _id: 'eventId',
+    title: 'Event 2',
+    startDate: '2044-11-31',
+  },
+  volunteer: {
+    _id: 'volunteerId1',
+    user: {
+      _id: 'userId1',
+      firstName: 'Teresa',
+      lastName: 'Bradley',
+      image: null,
+    },
+  },
+  group: null,
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+        },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership2, membership1],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+        },
+        orderBy: 'createdAt_ASC',
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+          userName: 'T',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    result: {
+      data: {
+        updateVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'rejected',
+      },
+    },
+    result: {
+      data: {
+        updateVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+          userName: undefined,
+        },
+        orderBy: undefined,
+      },
+    },
+    error: new Error('Mock Graphql USER_VOLUNTEER_MEMBERSHIP Error'),
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    error: new Error('Mock Graphql UPDATE_VOLUNTEER_MEMBERSHIP Error'),
+  },
+];
+
+export const UPDATE_ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          status: 'requested',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    error: new Error('Mock Graphql UPDATE_VOLUNTEER_MEMBERSHIP Error'),
+  },
+];
diff --git a/src/screens/EventVolunteers/Requests/Requests.test.tsx b/src/screens/EventVolunteers/Requests/Requests.test.tsx
new file mode 100644
index 0000000000..3b55ea872c
--- /dev/null
+++ b/src/screens/EventVolunteers/Requests/Requests.test.tsx
@@ -0,0 +1,232 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import Requests from './Requests';
+import type { ApolloLink } from '@apollo/client';
+import {
+  MOCKS,
+  EMPTY_MOCKS,
+  ERROR_MOCKS,
+  UPDATE_ERROR_MOCKS,
+} from './Requests.mocks';
+import { toast } from 'react-toastify';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const link4 = new StaticMockLink(UPDATE_ERROR_MOCKS);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const renderRequests = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/event/orgId/eventId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/event/:orgId/:eventId" element={<Requests />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Requests Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/event/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/event/" element={<Requests />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Requests screen', async () => {
+    renderRequests(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderRequests(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    let sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by createdAt_DESC
+    fireEvent.click(sortBtn);
+    const createdAtDESC = await screen.findByTestId('createdAt_DESC');
+    expect(createdAtDESC).toBeInTheDocument();
+    fireEvent.click(createdAtDESC);
+
+    let volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('Teresa Bradley');
+
+    // Sort by createdAt_ASC
+    sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const createdAtASC = await screen.findByTestId('createdAt_ASC');
+    expect(createdAtASC).toBeInTheDocument();
+    fireEvent.click(createdAtASC);
+
+    volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('John Doe');
+  });
+
+  it('Search Requests by volunteer name', async () => {
+    renderRequests(link1);
+
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, 'T');
+    await debounceWait();
+
+    await waitFor(() => {
+      const volunteerName = screen.getAllByTestId('volunteerName');
+      expect(volunteerName[0]).toHaveTextContent('Teresa Bradley');
+    });
+  });
+
+  it('should render screen with No Requests', async () => {
+    renderRequests(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noRequests)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching requests data', async () => {
+    renderRequests(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Accept Request', async () => {
+    renderRequests(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    const acceptBtn = await screen.findAllByTestId('acceptBtn');
+    expect(acceptBtn).toHaveLength(2);
+
+    // Accept Request
+    userEvent.click(acceptBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.requestAccepted);
+    });
+  });
+
+  it('Reject Request', async () => {
+    renderRequests(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    const rejectBtn = await screen.findAllByTestId('rejectBtn');
+    expect(rejectBtn).toHaveLength(2);
+
+    // Reject Request
+    userEvent.click(rejectBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.requestRejected);
+    });
+  });
+
+  it('Error in Update Request Mutation', async () => {
+    renderRequests(link4);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    const acceptBtn = await screen.findAllByTestId('acceptBtn');
+    expect(acceptBtn).toHaveLength(2);
+
+    // Accept Request
+    userEvent.click(acceptBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/EventVolunteers/Requests/Requests.tsx b/src/screens/EventVolunteers/Requests/Requests.tsx
new file mode 100644
index 0000000000..41abcad763
--- /dev/null
+++ b/src/screens/EventVolunteers/Requests/Requests.tsx
@@ -0,0 +1,338 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
+import { FaXmark } from 'react-icons/fa6';
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+
+import { useMutation, useQuery } from '@apollo/client';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import Avatar from 'components/Avatar/Avatar';
+import styles from '../EventVolunteers.module.css';
+import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
+import type { InterfaceVolunteerMembership } from 'utils/interfaces';
+import dayjs from 'dayjs';
+import { UPDATE_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Mutations/EventVolunteerMutation';
+import { toast } from 'react-toastify';
+import { debounce } from '@mui/material';
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Component for managing and displaying Volunteer Membership requests for an event.
+ *
+ * This component allows users to view, filter, sort, and create action items. It also allows users to accept or reject volunteer membership requests.
+ *
+ * @returns The rendered component.
+ */
+function requests(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Get the organization ID from URL parameters
+  const { orgId, eventId } = useParams();
+
+  if (!orgId || !eventId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<
+    'createdAt_ASC' | 'createdAt_DESC' | null
+  >(null);
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const [updateMembership] = useMutation(UPDATE_VOLUNTEER_MEMBERSHIP);
+
+  const updateMembershipStatus = async (
+    id: string,
+    status: 'accepted' | 'rejected',
+  ): Promise<void> => {
+    try {
+      await updateMembership({
+        variables: {
+          id: id,
+          status: status,
+        },
+      });
+      toast.success(
+        t(
+          status === 'accepted' ? 'requestAccepted' : 'requestRejected',
+        ) as string,
+      );
+      refetchRequests();
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  /**
+   * Query to fetch volunteer Membership requests for the event.
+   */
+  const {
+    data: requestsData,
+    loading: requestsLoading,
+    error: requestsError,
+    refetch: refetchRequests,
+  }: {
+    data?: {
+      getVolunteerMembership: InterfaceVolunteerMembership[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(USER_VOLUNTEER_MEMBERSHIP, {
+    variables: {
+      where: {
+        eventId,
+        status: 'requested',
+        userName: searchTerm ? searchTerm : undefined,
+      },
+      orderBy: sortBy ? sortBy : undefined,
+    },
+  });
+
+  const requests = useMemo(() => {
+    if (!requestsData) return [];
+    return requestsData.getVolunteerMembership;
+  }, [requestsData]);
+
+  // loads the requests when the component mounts
+  if (requestsLoading) return <Loader size="xl" />;
+  if (requestsError) {
+    // Displays an error message if there is an issue loading the requests
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {tErrors('errorLoading', { entity: 'Volunteership Requests' })}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'srNo',
+      headerName: 'Sr. No.',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return params.row.id;
+      },
+    },
+    {
+      field: 'volunteer',
+      headerName: 'Volunteer',
+      flex: 3,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { firstName, lastName, image } = params.row.volunteer.user;
+        return (
+          <div
+            className="d-flex fw-bold align-items-center justify-content-center ms-2"
+            data-testid="volunteerName"
+          >
+            {image ? (
+              <img
+                src={image}
+                alt="volunteer"
+                data-testid={`volunteer_image`}
+                className={styles.TableImage}
+              />
+            ) : (
+              <div className={styles.avatarContainer}>
+                <Avatar
+                  key="volunteer_avatar"
+                  containerStyle={styles.imageContainer}
+                  avatarStyle={styles.TableImage}
+                  name={firstName + ' ' + lastName}
+                  alt={firstName + ' ' + lastName}
+                />
+              </div>
+            )}
+            {firstName + ' ' + lastName}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'requestDate',
+      headerName: 'Request Date',
+      flex: 2,
+      minWidth: 150,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return dayjs(params.row.createdAt).format('DD/MM/YYYY');
+      },
+    },
+    {
+      field: 'options',
+      headerName: 'Options',
+      align: 'center',
+      flex: 2,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              style={{ minWidth: '32px' }}
+              className="me-2 rounded"
+              data-testid="acceptBtn"
+              onClick={() => updateMembershipStatus(params.row._id, 'accepted')}
+            >
+              <i className="fa fa-check" />
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              className="rounded"
+              data-testid={`rejectBtn`}
+              onClick={() => updateMembershipStatus(params.row._id, 'rejected')}
+            >
+              <FaXmark size={18} fontWeight={900} />
+            </Button>
+          </>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: 'Name',
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_DESC')}
+                  data-testid="createdAt_DESC"
+                >
+                  {t('latest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_ASC')}
+                  data-testid="createdAt_ASC"
+                >
+                  {t('earliest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Volunteer Membership Requests */}
+
+      {requests.length > 0 ? (
+        <DataGrid
+          disableColumnMenu
+          columnBufferPx={5}
+          hideFooter={true}
+          getRowId={(row) => row._id}
+          sx={dataGridStyle}
+          getRowClassName={() => `${styles.rowBackground}`}
+          autoHeight
+          rowHeight={65}
+          rows={requests.map((request, index) => ({
+            id: index + 1,
+            ...request,
+          }))}
+          columns={columns}
+          isRowSelectable={() => false}
+        />
+      ) : (
+        <div className="d-flex justify-content-center align-items-center mt-5">
+          <h5>{t('noRequests')}</h5>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default requests;
diff --git a/src/screens/EventVolunteers/VolunteerContainer.test.tsx b/src/screens/EventVolunteers/VolunteerContainer.test.tsx
new file mode 100644
index 0000000000..928d04195c
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerContainer.test.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'utils/i18n';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import VolunteerContainer from './VolunteerContainer';
+import userEvent from '@testing-library/user-event';
+import { MOCKS } from './Volunteers/Volunteers.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
+const link1 = new StaticMockLink(MOCKS);
+
+const renderVolunteerContainer = (): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link1}>
+      <MemoryRouter initialEntries={['/event/orgId/eventId']}>
+        <Provider store={store}>
+          <LocalizationProvider>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/event/:orgId/:eventId"
+                  element={<VolunteerContainer />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError">paramsError</div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Volunteer Container', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/event/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/event/" element={<VolunteerContainer />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  test('Testing Volunteer Container Screen -> Toggle screens', async () => {
+    renderVolunteerContainer();
+
+    const groupRadio = await screen.findByTestId('groupsRadio');
+    expect(groupRadio).toBeInTheDocument();
+    userEvent.click(groupRadio);
+
+    const requestsRadio = await screen.findByTestId('requestsRadio');
+    expect(requestsRadio).toBeInTheDocument();
+    userEvent.click(requestsRadio);
+
+    const individualRadio = await screen.findByTestId('individualRadio');
+    expect(individualRadio).toBeInTheDocument();
+    userEvent.click(individualRadio);
+  });
+});
diff --git a/src/screens/EventVolunteers/VolunteerContainer.tsx b/src/screens/EventVolunteers/VolunteerContainer.tsx
new file mode 100644
index 0000000000..1a425a706e
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerContainer.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useParams } from 'react-router-dom';
+import styles from './EventVolunteers.module.css';
+import { HiUserGroup, HiUser } from 'react-icons/hi2';
+import Volunteers from './Volunteers/Volunteers';
+import VolunteerGroups from './VolunteerGroups/VolunteerGroups';
+import { FaRegFile } from 'react-icons/fa6';
+import Requests from './Requests/Requests';
+
+/**
+ * Container Component for Volunteer or VolunteerGroups as per selection.
+ *
+ * This component allows users switch between Volunteers and VolunteerGroups.
+ *
+ * @returns The rendered component.
+ */
+function volunteerContainer(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+
+  // Get the organization ID and event ID from URL parameters
+  const { orgId, eventId } = useParams();
+
+  if (!orgId || !eventId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [dataType, setDataType] = useState<'individual' | 'group' | 'requests'>(
+    'individual',
+  );
+
+  return (
+    <div>
+      <div className="mt-2 mb-4 d-flex justify-content-between">
+        <span className={styles.titlemodal}>
+          {t(
+            `${dataType === 'group' ? 'volunteerGroups' : dataType === 'individual' ? 'volunteers' : 'requests'}`,
+          )}
+        </span>
+        <div className="d-flex justify-content-center">
+          <div
+            className={`btn-group ${styles.toggleGroup}`}
+            role="group"
+            aria-label="Basic radio toggle button group"
+          >
+            <input
+              type="radio"
+              className={`btn-check ${styles.toggleBtn}`}
+              name="btnradio"
+              id="individualRadio"
+              checked={dataType === 'individual'}
+              onChange={() => setDataType('individual')}
+            />
+            <label
+              className={`btn btn-outline-primary ${styles.toggleBtn}`}
+              htmlFor="individualRadio"
+              data-testid="individualRadio"
+            >
+              <HiUser className="me-1" />
+              {t('individuals')}
+            </label>
+
+            <input
+              type="radio"
+              className={`btn-check ${styles.toggleBtn}`}
+              name="btnradio"
+              id="groupsRadio"
+              onChange={() => setDataType('group')}
+              checked={dataType === 'group'}
+            />
+            <label
+              className={`btn btn-outline-primary ${styles.toggleBtn}`}
+              htmlFor="groupsRadio"
+              data-testid="groupsRadio"
+            >
+              <HiUserGroup className="me-1" />
+              {t('groups')}
+            </label>
+
+            <input
+              type="radio"
+              className={`btn-check ${styles.toggleBtn}`}
+              name="btnradio"
+              id="requestsRadio"
+              onChange={() => setDataType('requests')}
+              checked={dataType === 'requests'}
+            />
+            <label
+              className={`btn btn-outline-primary ${styles.toggleBtn}`}
+              htmlFor="requestsRadio"
+              data-testid="requestsRadio"
+            >
+              <FaRegFile className="me-1 mb-1" />
+              {t('requests')}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {dataType === 'individual' ? (
+        <Volunteers />
+      ) : dataType === 'group' ? (
+        <VolunteerGroups />
+      ) : (
+        <Requests />
+      )}
+    </div>
+  );
+}
+
+export default volunteerContainer;
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.test.tsx
new file mode 100644
index 0000000000..05c2dab5ff
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.test.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from 'utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './VolunteerGroups.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceDeleteVolunteerGroupModal } from './VolunteerGroupDeleteModal';
+import VolunteerGroupDeleteModal from './VolunteerGroupDeleteModal';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceDeleteVolunteerGroupModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    refetchGroups: jest.fn(),
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: 'desc',
+      volunteersRequired: null,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: null,
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: 'img-url',
+      },
+      volunteers: [
+        {
+          _id: 'volunteerId1',
+          user: {
+            _id: 'userId',
+            firstName: 'Teresa',
+            lastName: 'Bradley',
+            image: null,
+          },
+        },
+      ],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+];
+
+const renderGroupDeleteModal = (
+  link: ApolloLink,
+  props: InterfaceDeleteVolunteerGroupModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <VolunteerGroupDeleteModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Group Delete Modal', () => {
+  it('Delete Group', async () => {
+    renderGroupDeleteModal(link1, itemProps[0]);
+    expect(screen.getByText(t.deleteGroup)).toBeInTheDocument();
+
+    const yesBtn = screen.getByTestId('deleteyesbtn');
+    expect(yesBtn).toBeInTheDocument();
+    userEvent.click(yesBtn);
+
+    await waitFor(() => {
+      expect(itemProps[0].refetchGroups).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerGroupDeleted);
+    });
+  });
+
+  it('Close Delete Modal', async () => {
+    renderGroupDeleteModal(link1, itemProps[0]);
+    expect(screen.getByText(t.deleteGroup)).toBeInTheDocument();
+
+    const noBtn = screen.getByTestId('deletenobtn');
+    expect(noBtn).toBeInTheDocument();
+    userEvent.click(noBtn);
+
+    await waitFor(() => {
+      expect(itemProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('Delete Group -> Error', async () => {
+    renderGroupDeleteModal(link2, itemProps[0]);
+    expect(screen.getByText(t.deleteGroup)).toBeInTheDocument();
+
+    const yesBtn = screen.getByTestId('deleteyesbtn');
+    expect(yesBtn).toBeInTheDocument();
+    userEvent.click(yesBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.tsx
new file mode 100644
index 0000000000..33132bfd33
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupDeleteModal.tsx
@@ -0,0 +1,100 @@
+import { Button, Modal } from 'react-bootstrap';
+import styles from '../EventVolunteers.module.css';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import type { InterfaceVolunteerGroupInfo } from 'utils/interfaces';
+import { toast } from 'react-toastify';
+import { DELETE_VOLUNTEER_GROUP } from 'GraphQl/Mutations/EventVolunteerMutation';
+
+export interface InterfaceDeleteVolunteerGroupModal {
+  isOpen: boolean;
+  hide: () => void;
+  group: InterfaceVolunteerGroupInfo | null;
+  refetchGroups: () => void;
+}
+
+/**
+ * A modal dialog for confirming the deletion of a volunteer group.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param group - The volunteer group to be deleted.
+ * @param refetchGroups - Function to refetch the volunteer groups after deletion.
+ *
+ * @returns  The rendered modal component.
+ *
+ *
+ * The `VolunteerGroupDeleteModal` component displays a confirmation dialog when a user attempts to delete a volunteer group.
+ * It allows the user to either confirm or cancel the deletion.
+ * On confirmation, the `deleteVolunteerGroup` mutation is called to remove the volunteer group from the database,
+ * and the `refetchGroups` function is invoked to update the list of volunteer groups.
+ * A success or error toast notification is shown based on the result of the deletion operation.
+ *
+ * The modal includes:
+ * - A header with a title and a close button.
+ * - A body with a message asking for confirmation.
+ * - A footer with "Yes" and "No" buttons to confirm or cancel the deletion.
+ *
+ * The `deleteVolunteerGroup` mutation is used to perform the deletion operation.
+ */
+
+const VolunteerGroupDeleteModal: React.FC<
+  InterfaceDeleteVolunteerGroupModal
+> = ({ isOpen, hide, group, refetchGroups }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [deleteVolunteerGroup] = useMutation(DELETE_VOLUNTEER_GROUP);
+
+  const deleteHandler = async (): Promise<void> => {
+    try {
+      await deleteVolunteerGroup({
+        variables: {
+          id: group?._id,
+        },
+      });
+      refetchGroups();
+      hide();
+      toast.success(t('volunteerGroupDeleted'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+  return (
+    <>
+      <Modal className={styles.volunteerModal} onHide={hide} show={isOpen}>
+        <Modal.Header>
+          <p className={styles.titlemodal}> {t('deleteGroup')}</p>
+          <Button
+            variant="danger"
+            onClick={hide}
+            className={styles.modalCloseBtn}
+            data-testid="modalCloseBtn"
+          >
+            {' '}
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <p> {t('deleteVolunteerGroupMsg')}</p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            onClick={deleteHandler}
+            data-testid="deleteyesbtn"
+          >
+            {tCommon('yes')}
+          </Button>
+          <Button variant="secondary" onClick={hide} data-testid="deletenobtn">
+            {tCommon('no')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+export default VolunteerGroupDeleteModal;
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.test.tsx
new file mode 100644
index 0000000000..2fc0b2e348
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.test.tsx
@@ -0,0 +1,349 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from 'utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './VolunteerGroups.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceVolunteerGroupModal } from './VolunteerGroupModal';
+import GroupModal from './VolunteerGroupModal';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceVolunteerGroupModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    eventId: 'eventId',
+    orgId: 'orgId',
+    refetchGroups: jest.fn(),
+    mode: 'create',
+    group: null,
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    eventId: 'eventId',
+    orgId: 'orgId',
+    refetchGroups: jest.fn(),
+    mode: 'edit',
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: 'desc',
+      volunteersRequired: 2,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: null,
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: 'img-url',
+      },
+      volunteers: [
+        {
+          _id: 'volunteerId1',
+          user: {
+            _id: 'userId',
+            firstName: 'Teresa',
+            lastName: 'Bradley',
+            image: null,
+          },
+        },
+      ],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    eventId: 'eventId',
+    orgId: 'orgId',
+    refetchGroups: jest.fn(),
+    mode: 'edit',
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: null,
+      volunteersRequired: null,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: null,
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: 'img-url',
+      },
+      volunteers: [],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+];
+
+const renderGroupModal = (
+  link: ApolloLink,
+  props: InterfaceVolunteerGroupModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <GroupModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing VolunteerGroupModal', () => {
+  it('GroupModal -> Create', async () => {
+    renderGroupModal(link1, itemProps[0]);
+    expect(screen.getAllByText(t.createGroup)).toHaveLength(2);
+
+    const nameInput = screen.getByLabelText(`${t.name} *`);
+    expect(nameInput).toBeInTheDocument();
+    fireEvent.change(nameInput, { target: { value: 'Group 1' } });
+    expect(nameInput).toHaveValue('Group 1');
+
+    const descInput = screen.getByLabelText(t.description);
+    expect(descInput).toBeInTheDocument();
+    fireEvent.change(descInput, { target: { value: 'desc' } });
+    expect(descInput).toHaveValue('desc');
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '10' } });
+    expect(vrInput).toHaveValue('10');
+
+    // Select Leader
+    const memberSelect = await screen.findByTestId('leaderSelect');
+    expect(memberSelect).toBeInTheDocument();
+    const memberInputField = within(memberSelect).getByRole('combobox');
+    fireEvent.mouseDown(memberInputField);
+
+    const memberOption = await screen.findByText('Harve Lance');
+    expect(memberOption).toBeInTheDocument();
+    fireEvent.click(memberOption);
+
+    // Select Volunteers
+    const volunteerSelect = await screen.findByTestId('volunteerSelect');
+    expect(volunteerSelect).toBeInTheDocument();
+    const volunteerInputField = within(volunteerSelect).getByRole('combobox');
+    fireEvent.mouseDown(volunteerInputField);
+
+    const volunteerOption = await screen.findByText('John Doe');
+    expect(volunteerOption).toBeInTheDocument();
+    fireEvent.click(volunteerOption);
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerGroupCreated);
+      expect(itemProps[0].refetchGroups).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('GroupModal -> Create -> Error', async () => {
+    renderGroupModal(link2, itemProps[0]);
+    expect(screen.getAllByText(t.createGroup)).toHaveLength(2);
+
+    const nameInput = screen.getByLabelText(`${t.name} *`);
+    expect(nameInput).toBeInTheDocument();
+    fireEvent.change(nameInput, { target: { value: 'Group 1' } });
+    expect(nameInput).toHaveValue('Group 1');
+
+    const descInput = screen.getByLabelText(t.description);
+    expect(descInput).toBeInTheDocument();
+    fireEvent.change(descInput, { target: { value: 'desc' } });
+    expect(descInput).toHaveValue('desc');
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '10' } });
+    expect(vrInput).toHaveValue('10');
+
+    // Select Leader
+    const memberSelect = await screen.findByTestId('leaderSelect');
+    expect(memberSelect).toBeInTheDocument();
+    const memberInputField = within(memberSelect).getByRole('combobox');
+    fireEvent.mouseDown(memberInputField);
+
+    const memberOption = await screen.findByText('Harve Lance');
+    expect(memberOption).toBeInTheDocument();
+    fireEvent.click(memberOption);
+
+    // Select Volunteers
+    const volunteerSelect = await screen.findByTestId('volunteerSelect');
+    expect(volunteerSelect).toBeInTheDocument();
+    const volunteerInputField = within(volunteerSelect).getByRole('combobox');
+    fireEvent.mouseDown(volunteerInputField);
+
+    const volunteerOption = await screen.findByText('John Doe');
+    expect(volunteerOption).toBeInTheDocument();
+    fireEvent.click(volunteerOption);
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  it('GroupModal -> Update', async () => {
+    renderGroupModal(link1, itemProps[1]);
+    expect(screen.getAllByText(t.updateGroup)).toHaveLength(2);
+
+    const nameInput = screen.getByLabelText(`${t.name} *`);
+    expect(nameInput).toBeInTheDocument();
+    fireEvent.change(nameInput, { target: { value: 'Group 2' } });
+    expect(nameInput).toHaveValue('Group 2');
+
+    const descInput = screen.getByLabelText(t.description);
+    expect(descInput).toBeInTheDocument();
+    fireEvent.change(descInput, { target: { value: 'desc new' } });
+    expect(descInput).toHaveValue('desc new');
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '10' } });
+    expect(vrInput).toHaveValue('10');
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerGroupUpdated);
+      expect(itemProps[1].refetchGroups).toHaveBeenCalled();
+      expect(itemProps[1].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('GroupModal -> Details -> Update -> Error', async () => {
+    renderGroupModal(link2, itemProps[1]);
+    expect(screen.getAllByText(t.updateGroup)).toHaveLength(2);
+
+    const nameInput = screen.getByLabelText(`${t.name} *`);
+    expect(nameInput).toBeInTheDocument();
+    fireEvent.change(nameInput, { target: { value: 'Group 2' } });
+    expect(nameInput).toHaveValue('Group 2');
+
+    const descInput = screen.getByLabelText(t.description);
+    expect(descInput).toBeInTheDocument();
+    fireEvent.change(descInput, { target: { value: 'desc new' } });
+    expect(descInput).toHaveValue('desc new');
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '10' } });
+    expect(vrInput).toHaveValue('10');
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  it('Try adding different values for volunteersRequired', async () => {
+    renderGroupModal(link1, itemProps[2]);
+    expect(screen.getAllByText(t.updateGroup)).toHaveLength(2);
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '-1' } });
+
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('');
+    });
+
+    userEvent.clear(vrInput);
+    userEvent.type(vrInput, '1{backspace}');
+
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('');
+    });
+
+    fireEvent.change(vrInput, { target: { value: '0' } });
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('');
+    });
+
+    fireEvent.change(vrInput, { target: { value: '19' } });
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('19');
+    });
+  });
+
+  it('GroupModal -> Update -> No values updated', async () => {
+    renderGroupModal(link1, itemProps[1]);
+    expect(screen.getAllByText(t.updateGroup)).toHaveLength(2);
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.tsx
new file mode 100644
index 0000000000..5bfb1eff2b
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupModal.tsx
@@ -0,0 +1,341 @@
+import type { ChangeEvent } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import type {
+  InterfaceCreateVolunteerGroup,
+  InterfaceUserInfo,
+  InterfaceVolunteerGroupInfo,
+} from 'utils/interfaces';
+import styles from '../EventVolunteers.module.css';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { Autocomplete, FormControl, TextField } from '@mui/material';
+
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import {
+  CREATE_VOLUNTEER_GROUP,
+  UPDATE_VOLUNTEER_GROUP,
+} from 'GraphQl/Mutations/EventVolunteerMutation';
+
+export interface InterfaceVolunteerGroupModal {
+  isOpen: boolean;
+  hide: () => void;
+  eventId: string;
+  orgId: string;
+  group: InterfaceVolunteerGroupInfo | null;
+  refetchGroups: () => void;
+  mode: 'create' | 'edit';
+}
+
+/**
+ * A modal dialog for creating or editing a volunteer group.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param eventId - The ID of the event associated with volunteer group.
+ * @param orgId - The ID of the organization associated with volunteer group.
+ * @param group - The volunteer group object to be edited.
+ * @param refetchGroups - Function to refetch the volunteer groups after creation or update.
+ * @param mode - The mode of the modal (create or edit).
+ * @returns The rendered modal component.
+ *
+ * The `VolunteerGroupModal` component displays a form within a modal dialog for creating or editing a Volunteer Group.
+ * It includes fields for entering the group name, description, volunteersRequired, and selecting volunteers/leaders.
+ *
+ * The modal includes:
+ * - A header with a title indicating the current mode (create or edit) and a close button.
+ * - A form with:
+ *   - An input field for entering the group name.
+ *   - A textarea for entering the group description.
+ *   - A multi-select dropdown for selecting leader.
+ *   - A multi-select dropdown for selecting volunteers.
+ *   - An input field for entering the number of volunteers required.
+ * - A submit button to create or update the pledge.
+ *
+ * On form submission, the component either:
+ * - Calls `updatePledge` mutation to update an existing pledge, or
+ * - Calls `createPledge` mutation to create a new pledge.
+ *
+ * Success or error messages are displayed using toast notifications based on the result of the mutation.
+ */
+
+const VolunteerGroupModal: React.FC<InterfaceVolunteerGroupModal> = ({
+  isOpen,
+  hide,
+  eventId,
+  orgId,
+  group,
+  refetchGroups,
+  mode,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [formState, setFormState] = useState<InterfaceCreateVolunteerGroup>({
+    name: group?.name ?? '',
+    description: group?.description ?? '',
+    leader: group?.leader ?? null,
+    volunteerUsers: group?.volunteers.map((volunteer) => volunteer.user) ?? [],
+    volunteersRequired: group?.volunteersRequired ?? null,
+  });
+  const [members, setMembers] = useState<InterfaceUserInfo[]>([]);
+
+  const [updateVolunteerGroup] = useMutation(UPDATE_VOLUNTEER_GROUP);
+  const [createVolunteerGroup] = useMutation(CREATE_VOLUNTEER_GROUP);
+
+  const { data: memberData } = useQuery(MEMBERS_LIST, {
+    variables: { id: orgId },
+  });
+
+  useEffect(() => {
+    setFormState({
+      name: group?.name ?? '',
+      description: group?.description ?? '',
+      leader: group?.leader ?? null,
+      volunteerUsers:
+        group?.volunteers.map((volunteer) => volunteer.user) ?? [],
+      volunteersRequired: group?.volunteersRequired ?? null,
+    });
+  }, [group]);
+
+  useEffect(() => {
+    if (memberData) {
+      setMembers(memberData.organizations[0].members);
+    }
+  }, [memberData]);
+
+  const { name, description, leader, volunteerUsers, volunteersRequired } =
+    formState;
+
+  const updateGroupHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      e.preventDefault();
+
+      const updatedFields: {
+        [key: string]: number | string | undefined | null;
+      } = {};
+
+      if (name !== group?.name) {
+        updatedFields.name = name;
+      }
+      if (description !== group?.description) {
+        updatedFields.description = description;
+      }
+      if (volunteersRequired !== group?.volunteersRequired) {
+        updatedFields.volunteersRequired = volunteersRequired;
+      }
+      try {
+        await updateVolunteerGroup({
+          variables: {
+            id: group?._id,
+            data: { ...updatedFields, eventId },
+          },
+        });
+        toast.success(t('volunteerGroupUpdated'));
+        refetchGroups();
+        hide();
+      } catch (error: unknown) {
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, group],
+  );
+
+  // Function to create a new volunteer group
+  const createGroupHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      try {
+        e.preventDefault();
+        await createVolunteerGroup({
+          variables: {
+            data: {
+              eventId,
+              leaderId: leader?._id,
+              name,
+              description,
+              volunteersRequired,
+              volunteerUserIds: volunteerUsers.map((user) => user._id),
+            },
+          },
+        });
+
+        toast.success(t('volunteerGroupCreated'));
+        refetchGroups();
+        setFormState({
+          name: '',
+          description: '',
+          leader: null,
+          volunteerUsers: [],
+          volunteersRequired: null,
+        });
+        hide();
+      } catch (error: unknown) {
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, eventId],
+  );
+
+  return (
+    <Modal className={styles.groupModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>
+          {t(mode === 'edit' ? 'updateGroup' : 'createGroup')}
+        </p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form
+          onSubmitCapture={
+            mode === 'edit' ? updateGroupHandler : createGroupHandler
+          }
+          className="p-3"
+        >
+          {/* Input field to enter the group name */}
+          <Form.Group className="mb-3">
+            <FormControl fullWidth>
+              <TextField
+                required
+                label={tCommon('name')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={name}
+                onChange={(e) =>
+                  setFormState({ ...formState, name: e.target.value })
+                }
+              />
+            </FormControl>
+          </Form.Group>
+          {/* Input field to enter the group description */}
+          <Form.Group className="mb-3">
+            <FormControl fullWidth>
+              <TextField
+                multiline
+                rows={3}
+                label={tCommon('description')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={description}
+                onChange={(e) =>
+                  setFormState({ ...formState, description: e.target.value })
+                }
+              />
+            </FormControl>
+          </Form.Group>
+          {/* A dropdown to select leader for volunteer group */}
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="leaderSelect"
+              options={members}
+              value={leader}
+              disabled={mode === 'edit'}
+              isOptionEqualToValue={(option, value) => option._id === value._id}
+              filterSelectedOptions={true}
+              getOptionLabel={(member: InterfaceUserInfo): string =>
+                `${member.firstName} ${member.lastName}`
+              }
+              onChange={
+                /*istanbul ignore next*/
+                (_, newLeader): void => {
+                  if (newLeader) {
+                    setFormState({
+                      ...formState,
+                      leader: newLeader,
+                      volunteerUsers: [...volunteerUsers, newLeader],
+                    });
+                  } else {
+                    setFormState({
+                      ...formState,
+                      leader: null,
+                      volunteerUsers: volunteerUsers.filter(
+                        (user) => user._id !== leader?._id,
+                      ),
+                    });
+                  }
+                }
+              }
+              renderInput={(params) => (
+                <TextField {...params} label="Leader *" />
+              )}
+            />
+          </Form.Group>
+
+          {/* A Multi-select dropdown to select more than one volunteer */}
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              multiple
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="volunteerSelect"
+              options={members}
+              value={volunteerUsers}
+              isOptionEqualToValue={(option, value) => option._id === value._id}
+              filterSelectedOptions={true}
+              getOptionLabel={(member: InterfaceUserInfo): string =>
+                `${member.firstName} ${member.lastName}`
+              }
+              disabled={mode === 'edit'}
+              onChange={
+                /*istanbul ignore next*/
+                (_, newUsers): void => {
+                  setFormState({
+                    ...formState,
+                    volunteerUsers: newUsers,
+                  });
+                }
+              }
+              renderInput={(params) => (
+                <TextField {...params} label="Invite Volunteers *" />
+              )}
+            />
+          </Form.Group>
+          <Form.Group className="mb-3">
+            <FormControl fullWidth>
+              <TextField
+                label={t('volunteersRequired')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={volunteersRequired ?? ''}
+                onChange={(e) => {
+                  if (parseInt(e.target.value) > 0) {
+                    setFormState({
+                      ...formState,
+                      volunteersRequired: parseInt(e.target.value),
+                    });
+                  } else if (e.target.value === '') {
+                    setFormState({
+                      ...formState,
+                      volunteersRequired: null,
+                    });
+                  }
+                }}
+              />
+            </FormControl>
+          </Form.Group>
+
+          {/* Button to submit the volunteer group form */}
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            data-testid="submitBtn"
+          >
+            {t(mode === 'edit' ? 'updateGroup' : 'createGroup')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default VolunteerGroupModal;
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.test.tsx
new file mode 100644
index 0000000000..94c34923a2
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.test.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from 'utils/i18nForTest';
+import type { InterfaceVolunteerGroupViewModal } from './VolunteerGroupViewModal';
+import VolunteerGroupViewModal from './VolunteerGroupViewModal';
+
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceVolunteerGroupViewModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: 'desc',
+      volunteersRequired: null,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: null,
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+      volunteers: [
+        {
+          _id: 'volunteerId1',
+          user: {
+            _id: 'userId',
+            firstName: 'Teresa',
+            lastName: 'Bradley',
+            image: null,
+          },
+        },
+      ],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: null,
+      volunteersRequired: 10,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: 'img--url',
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: 'img-url',
+      },
+      volunteers: [],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+];
+
+const renderGroupViewModal = (
+  props: InterfaceVolunteerGroupViewModal,
+): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <VolunteerGroupViewModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing VolunteerGroupViewModal', () => {
+  it('Render VolunteerGroupViewModal (variation 1)', async () => {
+    renderGroupViewModal(itemProps[0]);
+    expect(screen.getByText(t.groupDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('leader_avatar')).toBeInTheDocument();
+    expect(screen.getByTestId('creator_avatar')).toBeInTheDocument();
+  });
+
+  it('Render VolunteerGroupViewModal (variation 2)', async () => {
+    renderGroupViewModal(itemProps[1]);
+    expect(screen.getByText(t.groupDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('leader_image')).toBeInTheDocument();
+    expect(screen.getByTestId('creator_image')).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx
new file mode 100644
index 0000000000..70994bd4e5
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal.tsx
@@ -0,0 +1,235 @@
+import { Button, Form, Modal } from 'react-bootstrap';
+import type { InterfaceVolunteerGroupInfo } from 'utils/interfaces';
+import styles from '../EventVolunteers.module.css';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  FormControl,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+} from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+
+export interface InterfaceVolunteerGroupViewModal {
+  isOpen: boolean;
+  hide: () => void;
+  group: InterfaceVolunteerGroupInfo;
+}
+
+/**
+ * A modal dialog for viewing volunteer group information for an event.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param group - The volunteer group to display in the modal.
+ *
+ * @returns The rendered modal component.
+ *
+ * The `VolunteerGroupViewModal` component displays all the fields of a volunteer group in a modal dialog.
+ *
+ * The modal includes:
+ * - A header with a title and a close button.
+ * - fields for volunteer name, status, hours volunteered, groups, and assignments.
+ */
+
+const VolunteerGroupViewModal: React.FC<InterfaceVolunteerGroupViewModal> = ({
+  isOpen,
+  hide,
+  group,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const { leader, creator, name, volunteersRequired, description, volunteers } =
+    group;
+
+  return (
+    <Modal className={styles.volunteerCreateModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('groupDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="volunteerViewModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form className="p-3">
+          {/* Group name & Volunteers Required */}
+          <Form.Group className="d-flex gap-3 mb-3">
+            <FormControl fullWidth>
+              <TextField
+                required
+                label={tCommon('name')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={name}
+                disabled
+              />
+            </FormControl>
+            {description && (
+              <FormControl fullWidth>
+                <TextField
+                  required
+                  label={tCommon('volunteersRequired')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={volunteersRequired ?? '-'}
+                  disabled
+                />
+              </FormControl>
+            )}
+          </Form.Group>
+          {/* Input field to enter the group description */}
+          {description && (
+            <Form.Group className="mb-3">
+              <FormControl fullWidth>
+                <TextField
+                  multiline
+                  rows={2}
+                  label={tCommon('description')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={description}
+                  disabled
+                />
+              </FormControl>
+            </Form.Group>
+          )}
+          <Form.Group className="mb-3 d-flex gap-3">
+            <FormControl fullWidth>
+              <TextField
+                label={t('leader')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={leader.firstName + ' ' + leader.lastName}
+                disabled
+                InputProps={{
+                  startAdornment: (
+                    <>
+                      {leader.image ? (
+                        <img
+                          src={leader.image}
+                          alt="Volunteer"
+                          data-testid="leader_image"
+                          className={styles.TableImage}
+                        />
+                      ) : (
+                        <div className={styles.avatarContainer}>
+                          <Avatar
+                            key={leader._id + '1'}
+                            containerStyle={styles.imageContainer}
+                            avatarStyle={styles.TableImage}
+                            dataTestId="leader_avatar"
+                            name={leader.firstName + ' ' + leader.lastName}
+                            alt={leader.firstName + ' ' + leader.lastName}
+                          />
+                        </div>
+                      )}
+                    </>
+                  ),
+                }}
+              />
+            </FormControl>
+
+            <FormControl fullWidth>
+              <TextField
+                label={t('creator')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={creator.firstName + ' ' + creator.lastName}
+                disabled
+                InputProps={{
+                  startAdornment: (
+                    <>
+                      {creator.image ? (
+                        <img
+                          src={creator.image}
+                          alt="Volunteer"
+                          data-testid="creator_image"
+                          className={styles.TableImage}
+                        />
+                      ) : (
+                        <div className={styles.avatarContainer}>
+                          <Avatar
+                            key={creator._id + '1'}
+                            containerStyle={styles.imageContainer}
+                            avatarStyle={styles.TableImage}
+                            dataTestId="creator_avatar"
+                            name={creator.firstName + ' ' + creator.lastName}
+                            alt={creator.firstName + ' ' + creator.lastName}
+                          />
+                        </div>
+                      )}
+                    </>
+                  ),
+                }}
+              />
+            </FormControl>
+          </Form.Group>
+          {/* Table for Associated Volunteers */}
+          {volunteers && volunteers.length > 0 && (
+            <Form.Group>
+              <Form.Label
+                className="fw-lighter ms-2 mb-0"
+                style={{
+                  fontSize: '0.8rem',
+                  color: 'grey',
+                }}
+              >
+                Volunteers
+              </Form.Label>
+
+              <TableContainer
+                component={Paper}
+                variant="outlined"
+                className={styles.modalTable}
+              >
+                <Table aria-label="group table">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell className="fw-bold">Sr. No.</TableCell>
+                      <TableCell className="fw-bold">Name</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {volunteers.map((volunteer, index) => {
+                      const { firstName, lastName } = volunteer.user;
+                      return (
+                        <TableRow
+                          key={index + 1}
+                          sx={{
+                            '&:last-child td, &:last-child th': { border: 0 },
+                          }}
+                        >
+                          <TableCell component="th" scope="row">
+                            {index + 1}
+                          </TableCell>
+                          <TableCell component="th" scope="row">
+                            {firstName + ' ' + lastName}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Form.Group>
+          )}
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default VolunteerGroupViewModal;
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.mocks.ts b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.mocks.ts
new file mode 100644
index 0000000000..b8cc52e875
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.mocks.ts
@@ -0,0 +1,452 @@
+import {
+  CREATE_VOLUNTEER_GROUP,
+  DELETE_VOLUNTEER_GROUP,
+  UPDATE_VOLUNTEER_GROUP,
+} from 'GraphQl/Mutations/EventVolunteerMutation';
+import { EVENT_VOLUNTEER_GROUP_LIST } from 'GraphQl/Queries/EventVolunteerQueries';
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+
+const group1 = {
+  _id: 'groupId1',
+  name: 'Group 1',
+  description: 'desc',
+  volunteersRequired: null,
+  createdAt: '2024-10-25T16:16:32.978Z',
+  creator: {
+    _id: 'creatorId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  leader: {
+    _id: 'userId',
+    firstName: 'Teresa',
+    lastName: 'Bradley',
+    image: 'img-url',
+  },
+  volunteers: [
+    {
+      _id: 'volunteerId1',
+      user: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+    },
+  ],
+  assignments: [],
+  event: {
+    _id: 'eventId',
+  },
+};
+
+const group2 = {
+  _id: 'groupId2',
+  name: 'Group 2',
+  description: 'desc',
+  volunteersRequired: null,
+  createdAt: '2024-10-27T15:25:13.044Z',
+  creator: {
+    _id: 'creatorId2',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  leader: {
+    _id: 'userId',
+    firstName: 'Teresa',
+    lastName: 'Bradley',
+    image: null,
+  },
+  volunteers: [
+    {
+      _id: 'volunteerId2',
+      user: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+    },
+  ],
+  assignments: [],
+  event: {
+    _id: 'eventId',
+  },
+};
+
+const group3 = {
+  _id: 'groupId3',
+  name: 'Group 3',
+  description: 'desc',
+  volunteersRequired: null,
+  createdAt: '2024-10-27T15:34:15.889Z',
+  creator: {
+    _id: 'creatorId3',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  leader: {
+    _id: 'userId1',
+    firstName: 'Bruce',
+    lastName: 'Garza',
+    image: null,
+  },
+  volunteers: [
+    {
+      _id: 'volunteerId3',
+      user: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+    },
+  ],
+  assignments: [],
+  event: {
+    _id: 'eventId',
+  },
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1, group2, group3],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: 'volunteers_DESC',
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1, group2],
+      },
+    },
+  },
+
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: 'volunteers_ASC',
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group2, group1],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: null,
+          name_contains: '1',
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: '',
+          name_contains: null,
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1, group2, group3],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: 'Bruce',
+          name_contains: null,
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group3],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: {
+        id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            members: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                email: 'harve@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+              {
+                _id: 'userId2',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_VOLUNTEER_GROUP,
+      variables: {
+        data: {
+          eventId: 'eventId',
+          leaderId: 'userId',
+          name: 'Group 1',
+          description: 'desc',
+          volunteerUserIds: ['userId', 'userId2'],
+          volunteersRequired: 10,
+        },
+      },
+    },
+    result: {
+      data: {
+        createEventVolunteerGroup: {
+          _id: 'groupId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+      },
+    },
+    result: {
+      data: {
+        removeEventVolunteerGroup: {
+          _id: 'groupId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+        data: {
+          eventId: 'eventId',
+          name: 'Group 2',
+          description: 'desc new',
+          volunteersRequired: 10,
+        },
+      },
+    },
+    result: {
+      data: {
+        updateEventVolunteerGroup: {
+          _id: 'groupId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+        data: {
+          eventId: 'eventId',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateEventVolunteerGroup: {
+          _id: 'groupId',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_EMPTY = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [],
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: null,
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: DELETE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: {
+        id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            members: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                email: 'harve@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+              {
+                _id: 'userId2',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_VOLUNTEER_GROUP,
+      variables: {
+        data: {
+          eventId: 'eventId',
+          leaderId: 'userId',
+          name: 'Group 1',
+          description: 'desc',
+          volunteerUserIds: ['userId', 'userId2'],
+          volunteersRequired: 10,
+        },
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+        data: {
+          eventId: 'eventId',
+          name: 'Group 2',
+          description: 'desc new',
+          volunteersRequired: 10,
+        },
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+];
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.test.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.test.tsx
new file mode 100644
index 0000000000..0dcba34a3a
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.test.tsx
@@ -0,0 +1,232 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import VolunteerGroups from './VolunteerGroups';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './VolunteerGroups.mocks';
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const link3 = new StaticMockLink(MOCKS_EMPTY);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderVolunteerGroups = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/event/orgId/eventId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/event/:orgId/:eventId"
+                  element={<VolunteerGroups />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing VolunteerGroups Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/event/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/event/" element={<VolunteerGroups />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Groups screen', async () => {
+    renderVolunteerGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderVolunteerGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    let sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by members_DESC
+    fireEvent.click(sortBtn);
+    const volunteersDESC = await screen.findByTestId('volunteers_DESC');
+    expect(volunteersDESC).toBeInTheDocument();
+    fireEvent.click(volunteersDESC);
+
+    let groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 1');
+
+    // Sort by members_ASC
+    sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const volunteersASC = await screen.findByTestId('volunteers_ASC');
+    expect(volunteersASC).toBeInTheDocument();
+    fireEvent.click(volunteersASC);
+
+    groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 2');
+  });
+
+  it('Search by Groups', async () => {
+    renderVolunteerGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByGroup = await screen.findByTestId('group');
+    expect(searchByGroup).toBeInTheDocument();
+    userEvent.click(searchByGroup);
+
+    userEvent.type(searchInput, '1');
+    await debounceWait();
+
+    const groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 1');
+  });
+
+  it('Search by Leader', async () => {
+    renderVolunteerGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByLeader = await screen.findByTestId('leader');
+    expect(searchByLeader).toBeInTheDocument();
+    userEvent.click(searchByLeader);
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, 'Bruce');
+    await debounceWait();
+
+    const groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 1');
+  });
+
+  it('should render screen with No Groups', async () => {
+    renderVolunteerGroups(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noVolunteerGroups)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching groups data', async () => {
+    renderVolunteerGroups(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Open and close ViewModal', async () => {
+    renderVolunteerGroups(link1);
+
+    const viewGroupBtn = await screen.findAllByTestId('viewGroupBtn');
+    userEvent.click(viewGroupBtn[0]);
+
+    expect(await screen.findByText(t.groupDetails)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('volunteerViewModalCloseBtn'));
+  });
+
+  it('Open and Close Delete Modal', async () => {
+    renderVolunteerGroups(link1);
+
+    const deleteGroupBtn = await screen.findAllByTestId('deleteGroupBtn');
+    userEvent.click(deleteGroupBtn[0]);
+
+    expect(await screen.findByText(t.deleteGroup)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+
+  it('Open and close GroupModal (Edit)', async () => {
+    renderVolunteerGroups(link1);
+
+    const editGroupBtn = await screen.findAllByTestId('editGroupBtn');
+    userEvent.click(editGroupBtn[0]);
+
+    expect(await screen.findAllByText(t.updateGroup)).toHaveLength(2);
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+
+  it('Open and close GroupModal (Create)', async () => {
+    renderVolunteerGroups(link1);
+
+    const createGroupBtn = await screen.findByTestId('createGroupBtn');
+    userEvent.click(createGroupBtn);
+
+    expect(await screen.findAllByText(t.createGroup)).toHaveLength(2);
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+});
diff --git a/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx
new file mode 100644
index 0000000000..fa98abc9f2
--- /dev/null
+++ b/src/screens/EventVolunteers/VolunteerGroups/VolunteerGroups.tsx
@@ -0,0 +1,444 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
+
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+
+import { useQuery } from '@apollo/client';
+
+import type { InterfaceVolunteerGroupInfo } from 'utils/interfaces';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { debounce, Stack } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+import styles from '../EventVolunteers.module.css';
+import { EVENT_VOLUNTEER_GROUP_LIST } from 'GraphQl/Queries/EventVolunteerQueries';
+import VolunteerGroupModal from './VolunteerGroupModal';
+import VolunteerGroupDeleteModal from './VolunteerGroupDeleteModal';
+import VolunteerGroupViewModal from './VolunteerGroupViewModal';
+
+enum ModalState {
+  SAME = 'same',
+  DELETE = 'delete',
+  VIEW = 'view',
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Component for managing volunteer groups for an event.
+ * This component allows users to view, filter, sort, and create action items. It also provides a modal for creating and editing action items.
+ * @returns The rendered component.
+ */
+function volunteerGroups(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Get the organization ID from URL parameters
+  const { orgId, eventId } = useParams();
+
+  if (!orgId || !eventId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [group, setGroup] = useState<InterfaceVolunteerGroupInfo | null>(null);
+  const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<
+    'volunteers_ASC' | 'volunteers_DESC' | null
+  >(null);
+  const [searchBy, setSearchBy] = useState<'leader' | 'group'>('group');
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.SAME]: false,
+    [ModalState.DELETE]: false,
+    [ModalState.VIEW]: false,
+  });
+
+  /**
+   * Query to fetch the list of volunteer groups for the event.
+   */
+  const {
+    data: groupsData,
+    loading: groupsLoading,
+    error: groupsError,
+    refetch: refetchGroups,
+  }: {
+    data?: {
+      getEventVolunteerGroups: InterfaceVolunteerGroupInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(EVENT_VOLUNTEER_GROUP_LIST, {
+    variables: {
+      where: {
+        eventId: eventId,
+        leaderName: searchBy === 'leader' ? searchTerm : null,
+        name_contains: searchBy === 'group' ? searchTerm : null,
+      },
+      orderBy: sortBy,
+    },
+  });
+
+  const openModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+
+  const closeModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+  const handleModalClick = useCallback(
+    (group: InterfaceVolunteerGroupInfo | null, modal: ModalState): void => {
+      if (modal === ModalState.SAME) {
+        setModalMode(group ? 'edit' : 'create');
+      }
+      setGroup(group);
+      openModal(modal);
+    },
+    [openModal],
+  );
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const groups = useMemo(
+    () => groupsData?.getEventVolunteerGroups || [],
+    [groupsData],
+  );
+
+  if (groupsLoading) {
+    return <Loader size="xl" />;
+  }
+
+  if (groupsError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Volunteer Groups' })}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'group',
+      headerName: 'Group',
+      flex: 1,
+      align: 'left',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="groupName"
+          >
+            {params.row.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'leader',
+      headerName: 'Leader',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { _id, firstName, lastName, image } = params.row.leader;
+        return (
+          <div
+            className="d-flex fw-bold align-items-center ms-2"
+            data-testid="assigneeName"
+          >
+            {image ? (
+              <img
+                src={image}
+                alt="Assignee"
+                data-testid={`image${_id + 1}`}
+                className={styles.TableImage}
+              />
+            ) : (
+              <div className={styles.avatarContainer}>
+                <Avatar
+                  key={_id + '1'}
+                  containerStyle={styles.imageContainer}
+                  avatarStyle={styles.TableImage}
+                  name={firstName + ' ' + lastName}
+                  alt={firstName + ' ' + lastName}
+                />
+              </div>
+            )}
+            {firstName + ' ' + lastName}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions Completed',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex justify-content-center fw-bold">
+            {params.row.assignments.length}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'volunteers',
+      headerName: 'No. of Volunteers',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex justify-content-center fw-bold">
+            {params.row.volunteers.length}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'options',
+      headerName: 'Options',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              style={{ minWidth: '32px' }}
+              className="me-2 rounded"
+              data-testid="viewGroupBtn"
+              onClick={() => handleModalClick(params.row, ModalState.VIEW)}
+            >
+              <i className="fa fa-info" />
+            </Button>
+            <Button
+              variant="success"
+              size="sm"
+              className="me-2 rounded"
+              data-testid="editGroupBtn"
+              onClick={() => handleModalClick(params.row, ModalState.SAME)}
+            >
+              <i className="fa fa-edit" />
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              className="rounded"
+              data-testid="deleteGroupBtn"
+              onClick={() => handleModalClick(params.row, ModalState.DELETE)}
+            >
+              <i className="fa fa-trash" />
+            </Button>
+          </>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: searchBy.charAt(0).toUpperCase() + searchBy.slice(1),
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="searchByToggle"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('searchBy', { item: '' })}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('leader')}
+                  data-testid="leader"
+                >
+                  {t('leader')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('group')}
+                  data-testid="group"
+                >
+                  {t('group')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('volunteers_DESC')}
+                  data-testid="volunteers_DESC"
+                >
+                  {t('mostVolunteers')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('volunteers_ASC')}
+                  data-testid="volunteers_ASC"
+                >
+                  {t('leastVolunteers')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              onClick={() => handleModalClick(null, ModalState.SAME)}
+              style={{ marginTop: '11px' }}
+              data-testid="createGroupBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {tCommon('create')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Volunteer Groups */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noVolunteerGroups')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={groups.map((group, index) => ({
+          id: index + 1,
+          ...group,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      <VolunteerGroupModal
+        isOpen={modalState[ModalState.SAME]}
+        hide={() => closeModal(ModalState.SAME)}
+        refetchGroups={refetchGroups}
+        eventId={eventId}
+        orgId={orgId}
+        group={group}
+        mode={modalMode}
+      />
+
+      {group && (
+        <>
+          <VolunteerGroupViewModal
+            isOpen={modalState[ModalState.VIEW]}
+            hide={() => closeModal(ModalState.VIEW)}
+            group={group}
+          />
+
+          <VolunteerGroupDeleteModal
+            isOpen={modalState[ModalState.DELETE]}
+            hide={() => closeModal(ModalState.DELETE)}
+            refetchGroups={refetchGroups}
+            group={group}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default volunteerGroups;
diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.test.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.test.tsx
new file mode 100644
index 0000000000..cac8fe94f0
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.test.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from 'utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './Volunteers.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceVolunteerCreateModal } from './VolunteerCreateModal';
+import VolunteerCreateModal from './VolunteerCreateModal';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceVolunteerCreateModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    eventId: 'eventId',
+    orgId: 'orgId',
+    refetchVolunteers: jest.fn(),
+  },
+];
+
+const renderCreateModal = (
+  link: ApolloLink,
+  props: InterfaceVolunteerCreateModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <VolunteerCreateModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing VolunteerCreateModal', () => {
+  it('VolunteerCreateModal -> Create', async () => {
+    renderCreateModal(link1, itemProps[0]);
+    expect(screen.getAllByText(t.addVolunteer)).toHaveLength(2);
+
+    // Select Volunteers
+    const membersSelect = await screen.findByTestId('membersSelect');
+    expect(membersSelect).toBeInTheDocument();
+    const volunteerInputField = within(membersSelect).getByRole('combobox');
+    fireEvent.mouseDown(volunteerInputField);
+
+    const volunteerOption = await screen.findByText('John Doe');
+    expect(volunteerOption).toBeInTheDocument();
+    fireEvent.click(volunteerOption);
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerAdded);
+      expect(itemProps[0].refetchVolunteers).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('VolunteerCreateModal -> Create -> Error', async () => {
+    renderCreateModal(link2, itemProps[0]);
+    expect(screen.getAllByText(t.addVolunteer)).toHaveLength(2);
+
+    // Select Volunteers
+    const membersSelect = await screen.findByTestId('membersSelect');
+    expect(membersSelect).toBeInTheDocument();
+    const volunteerInputField = within(membersSelect).getByRole('combobox');
+    fireEvent.mouseDown(volunteerInputField);
+
+    const volunteerOption = await screen.findByText('John Doe');
+    expect(volunteerOption).toBeInTheDocument();
+    fireEvent.click(volunteerOption);
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.tsx
new file mode 100644
index 0000000000..6b4a1e3f0c
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerCreateModal.tsx
@@ -0,0 +1,152 @@
+import type { ChangeEvent } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import type { InterfaceUserInfo } from 'utils/interfaces';
+import styles from '../EventVolunteers.module.css';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { Autocomplete, TextField } from '@mui/material';
+
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import { ADD_VOLUNTEER } from 'GraphQl/Mutations/EventVolunteerMutation';
+
+export interface InterfaceVolunteerCreateModal {
+  isOpen: boolean;
+  hide: () => void;
+  eventId: string;
+  orgId: string;
+  refetchVolunteers: () => void;
+}
+
+/**
+ * A modal dialog for add a volunteer for an event.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param eventId - The ID of the event associated with volunteer.
+ * @param orgId - The ID of the organization associated with volunteer.
+ * @param refetchVolunteers - Function to refetch the volunteers after adding a volunteer.
+ *
+ * @returns The rendered modal component.
+ *
+ * The `VolunteerCreateModal` component displays a form within a modal dialog for adding a volunteer.
+ * It includes fields for selecting user.
+ *
+ * The modal includes:
+ * - A header with a title and a close button.
+ * - A form with:
+ * - A multi-select dropdown for selecting user be added as volunteer.
+ * - A submit button to create or update the pledge.
+ *
+ * On form submission, the component:
+ * - Calls `addVolunteer` mutation to add a new Volunteer.
+ *
+ * Success or error messages are displayed using toast notifications based on the result of the mutation.
+ */
+
+const VolunteerCreateModal: React.FC<InterfaceVolunteerCreateModal> = ({
+  isOpen,
+  hide,
+  eventId,
+  orgId,
+  refetchVolunteers,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+
+  const [userId, setUserId] = useState<string>('');
+  const [members, setMembers] = useState<InterfaceUserInfo[]>([]);
+  const [addVolunteer] = useMutation(ADD_VOLUNTEER);
+
+  const { data: memberData } = useQuery(MEMBERS_LIST, {
+    variables: { id: orgId },
+  });
+
+  useEffect(() => {
+    if (memberData) {
+      setMembers(memberData.organizations[0].members);
+    }
+  }, [memberData]);
+
+  // Function to add a volunteer for an event
+  const addVolunteerHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      try {
+        e.preventDefault();
+        await addVolunteer({
+          variables: {
+            data: {
+              eventId,
+              userId,
+            },
+          },
+        });
+
+        toast.success(t('volunteerAdded'));
+        refetchVolunteers();
+        setUserId('');
+        hide();
+      } catch (error: unknown) {
+        toast.error((error as Error).message);
+      }
+    },
+    [userId, eventId],
+  );
+
+  return (
+    <Modal className={styles.volunteerCreateModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('addVolunteer')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form
+          data-testid="volunteerForm"
+          onSubmitCapture={addVolunteerHandler}
+          className="p-3"
+        >
+          {/* A Multi-select dropdown enables admin to invite a member as volunteer  */}
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="membersSelect"
+              options={members}
+              isOptionEqualToValue={(option, value) => option._id === value._id}
+              filterSelectedOptions={true}
+              getOptionLabel={(member: InterfaceUserInfo): string =>
+                `${member.firstName} ${member.lastName}`
+              }
+              onChange={
+                /*istanbul ignore next*/
+                (_, newVolunteer): void => {
+                  setUserId(newVolunteer?._id ?? '');
+                }
+              }
+              renderInput={(params) => <TextField {...params} label="Member" />}
+            />
+          </Form.Group>
+
+          {/* Button to submit the volunteer form */}
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            data-testid="submitBtn"
+          >
+            {t('addVolunteer')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default VolunteerCreateModal;
diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.test.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.test.tsx
new file mode 100644
index 0000000000..dd9d6d5985
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.test.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18n from 'utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './Volunteers.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceDeleteVolunteerModal } from './VolunteerDeleteModal';
+import VolunteerDeleteModal from './VolunteerDeleteModal';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceDeleteVolunteerModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    refetchVolunteers: jest.fn(),
+    volunteer: {
+      _id: 'volunteerId1',
+      hasAccepted: true,
+      hoursVolunteered: 10,
+      user: {
+        _id: 'userId1',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+      assignments: [],
+      groups: [
+        {
+          _id: 'groupId1',
+          name: 'group1',
+          volunteers: [
+            {
+              _id: 'volunteerId1',
+            },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+const renderVolunteerDeleteModal = (
+  link: ApolloLink,
+  props: InterfaceDeleteVolunteerModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider>
+            <I18nextProvider i18n={i18n}>
+              <VolunteerDeleteModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Volunteer Delete Modal', () => {
+  it('Delete Volunteer', async () => {
+    renderVolunteerDeleteModal(link1, itemProps[0]);
+    expect(screen.getByText(t.removeVolunteer)).toBeInTheDocument();
+
+    const yesBtn = screen.getByTestId('deleteyesbtn');
+    expect(yesBtn).toBeInTheDocument();
+    userEvent.click(yesBtn);
+
+    await waitFor(() => {
+      expect(itemProps[0].refetchVolunteers).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerRemoved);
+    });
+  });
+
+  it('Close Delete Modal', async () => {
+    renderVolunteerDeleteModal(link1, itemProps[0]);
+    expect(screen.getByText(t.removeVolunteer)).toBeInTheDocument();
+
+    const noBtn = screen.getByTestId('deletenobtn');
+    expect(noBtn).toBeInTheDocument();
+    userEvent.click(noBtn);
+
+    await waitFor(() => {
+      expect(itemProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('Delete Volunteer -> Error', async () => {
+    renderVolunteerDeleteModal(link2, itemProps[0]);
+    expect(screen.getByText(t.removeVolunteer)).toBeInTheDocument();
+
+    const yesBtn = screen.getByTestId('deleteyesbtn');
+    expect(yesBtn).toBeInTheDocument();
+    userEvent.click(yesBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.tsx
new file mode 100644
index 0000000000..8f253fdf50
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerDeleteModal.tsx
@@ -0,0 +1,103 @@
+import { Button, Modal } from 'react-bootstrap';
+import styles from '../EventVolunteers.module.css';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import type { InterfaceEventVolunteerInfo } from 'utils/interfaces';
+import { toast } from 'react-toastify';
+import { DELETE_VOLUNTEER } from 'GraphQl/Mutations/EventVolunteerMutation';
+
+export interface InterfaceDeleteVolunteerModal {
+  isOpen: boolean;
+  hide: () => void;
+  volunteer: InterfaceEventVolunteerInfo;
+  refetchVolunteers: () => void;
+}
+
+/**
+ * A modal dialog for confirming the deletion of a volunteer.
+ *
+ * @param  isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param  volunteer - The volunteer object to be deleted.
+ * @param refetchVolunteers - Function to refetch the volunteers after deletion.
+ *
+ * @returns  The rendered modal component.
+ *
+ *
+ * The `VolunteerDeleteModal` component displays a confirmation dialog when a user attempts to delete a volunteer.
+ * It allows the user to either confirm or cancel the deletion.
+ * On confirmation, the `deleteVolunteer` mutation is called to remove the pledge from the database,
+ * and the `refetchVolunteers` function is invoked to update the list of volunteers.
+ * A success or error toast notification is shown based on the result of the deletion operation.
+ *
+ * The modal includes:
+ * - A header with a title and a close button.
+ * - A body with a message asking for confirmation.
+ * - A footer with "Yes" and "No" buttons to confirm or cancel the deletion.
+ *
+ * The `deleteVolunteer` mutation is used to perform the deletion operation.
+ */
+
+const VolunteerDeleteModal: React.FC<InterfaceDeleteVolunteerModal> = ({
+  isOpen,
+  hide,
+  volunteer,
+  refetchVolunteers,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [deleteVolunteer] = useMutation(DELETE_VOLUNTEER);
+
+  const deleteHandler = async (): Promise<void> => {
+    try {
+      await deleteVolunteer({
+        variables: {
+          id: volunteer._id,
+        },
+      });
+      refetchVolunteers();
+      hide();
+      toast.success(t('volunteerRemoved'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+  return (
+    <>
+      <Modal className={styles.volunteerModal} onHide={hide} show={isOpen}>
+        <Modal.Header>
+          <p className={styles.titlemodal}> {t('removeVolunteer')}</p>
+          <Button
+            variant="danger"
+            onClick={hide}
+            className={styles.modalCloseBtn}
+            data-testid="modalCloseBtn"
+          >
+            {' '}
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <p> {t('removeVolunteerMsg')}</p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            onClick={deleteHandler}
+            data-testid="deleteyesbtn"
+          >
+            {tCommon('yes')}
+          </Button>
+          <Button variant="secondary" onClick={hide} data-testid="deletenobtn">
+            {tCommon('no')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+export default VolunteerDeleteModal;
diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.test.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.test.tsx
new file mode 100644
index 0000000000..155dba8464
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.test.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18n from 'utils/i18nForTest';
+import type { InterfaceVolunteerViewModal } from './VolunteerViewModal';
+import VolunteerViewModal from './VolunteerViewModal';
+
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceVolunteerViewModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    volunteer: {
+      _id: 'volunteerId1',
+      hasAccepted: true,
+      hoursVolunteered: 10,
+      user: {
+        _id: 'userId1',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+      assignments: [],
+      groups: [
+        {
+          _id: 'groupId1',
+          name: 'group1',
+          volunteers: [
+            {
+              _id: 'volunteerId1',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    volunteer: {
+      _id: 'volunteerId2',
+      hasAccepted: false,
+      hoursVolunteered: null,
+      user: {
+        _id: 'userId3',
+        firstName: 'Bruce',
+        lastName: 'Graza',
+        image: 'img-url',
+      },
+      assignments: [],
+      groups: [],
+    },
+  },
+];
+
+const renderVolunteerViewModal = (
+  props: InterfaceVolunteerViewModal,
+): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider>
+            <I18nextProvider i18n={i18n}>
+              <VolunteerViewModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing VolunteerViewModal', () => {
+  it('Render VolunteerViewModal (variation 1)', async () => {
+    renderVolunteerViewModal(itemProps[0]);
+    expect(screen.getByText(t.volunteerDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('volunteer_avatar')).toBeInTheDocument();
+  });
+
+  it('Render VolunteerViewModal (variation 2)', async () => {
+    renderVolunteerViewModal(itemProps[1]);
+    expect(screen.getByText(t.volunteerDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('volunteer_image')).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
new file mode 100644
index 0000000000..0904d34b9c
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
@@ -0,0 +1,202 @@
+import { Button, Form, Modal } from 'react-bootstrap';
+import type { InterfaceEventVolunteerInfo } from 'utils/interfaces';
+import styles from '../EventVolunteers.module.css';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  FormControl,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+} from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+import { HistoryToggleOff, TaskAlt } from '@mui/icons-material';
+
+export interface InterfaceVolunteerViewModal {
+  isOpen: boolean;
+  hide: () => void;
+  volunteer: InterfaceEventVolunteerInfo;
+}
+
+/**
+ * A modal dialog for viewing volunteer information for an event.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param volunteer - The volunteer object to be displayed.
+ *
+ * @returns The rendered modal component.
+ *
+ * The `VolunteerViewModal` component displays all the fields of a volunteer in a modal dialog.
+ *
+ * The modal includes:
+ * - A header with a title and a close button.
+ * - fields for volunteer name, status, hours volunteered, groups, and assignments.
+ */
+
+const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
+  isOpen,
+  hide,
+  volunteer,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const { user, hasAccepted, hoursVolunteered, groups } = volunteer;
+
+  return (
+    <Modal className={styles.volunteerCreateModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('volunteerDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form className="p-3">
+          {/* Volunteer Name & Avatar */}
+          <Form.Group className="mb-3">
+            <FormControl fullWidth>
+              <TextField
+                label={t('volunteer')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={user.firstName + ' ' + user.lastName}
+                disabled
+                InputProps={{
+                  startAdornment: (
+                    <>
+                      {user.image ? (
+                        <img
+                          src={user.image}
+                          alt="Volunteer"
+                          data-testid="volunteer_image"
+                          className={styles.TableImage}
+                        />
+                      ) : (
+                        <div className={styles.avatarContainer}>
+                          <Avatar
+                            key={user._id + '1'}
+                            containerStyle={styles.imageContainer}
+                            avatarStyle={styles.TableImage}
+                            dataTestId="volunteer_avatar"
+                            name={user.firstName + ' ' + user.lastName}
+                            alt={user.firstName + ' ' + user.lastName}
+                          />
+                        </div>
+                      )}
+                    </>
+                  ),
+                }}
+              />
+            </FormControl>
+          </Form.Group>
+          {/* Status and hours volunteered */}
+          <Form.Group className="d-flex gap-3 mx-auto mb-2">
+            <TextField
+              label={t('status')}
+              fullWidth
+              value={hasAccepted ? t('accepted') : tCommon('pending')}
+              InputProps={{
+                startAdornment: (
+                  <>
+                    {hasAccepted ? (
+                      <TaskAlt color="success" className="me-2" />
+                    ) : (
+                      <HistoryToggleOff color="warning" className="me-2" />
+                    )}
+                  </>
+                ),
+                style: {
+                  color: hasAccepted ? 'green' : '#ed6c02',
+                },
+              }}
+              inputProps={{
+                style: {
+                  WebkitTextFillColor: hasAccepted ? 'green' : '#ed6c02',
+                },
+              }}
+              disabled
+            />
+
+            <TextField
+              label={t('hoursVolunteered')}
+              variant="outlined"
+              className={`${styles.noOutline} w-100`}
+              value={hoursVolunteered ?? '-'}
+              disabled
+            />
+          </Form.Group>
+          {/* Table for Associated Volunteer Groups */}
+          {groups && groups.length > 0 && (
+            <Form.Group>
+              <Form.Label
+                className="fw-lighter ms-2 mb-0"
+                style={{
+                  fontSize: '0.8rem',
+                  color: 'grey',
+                }}
+              >
+                Volunteer Groups Joined
+              </Form.Label>
+
+              <TableContainer
+                component={Paper}
+                variant="outlined"
+                className={styles.modalTable}
+              >
+                <Table aria-label="group table">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell className="fw-bold">Sr. No.</TableCell>
+                      <TableCell className="fw-bold">Group Name</TableCell>
+                      <TableCell className="fw-bold" align="center">
+                        No. of Members
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {groups.map((group, index) => {
+                      const { _id, name, volunteers } = group;
+                      return (
+                        <TableRow
+                          key={_id}
+                          sx={{
+                            '&:last-child td, &:last-child th': { border: 0 },
+                          }}
+                        >
+                          <TableCell component="th" scope="row">
+                            {index + 1}
+                          </TableCell>
+                          <TableCell component="th" scope="row">
+                            {name}
+                          </TableCell>
+                          <TableCell align="center">
+                            {volunteers.length}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Form.Group>
+          )}
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default VolunteerViewModal;
diff --git a/src/screens/EventVolunteers/Volunteers/Volunteers.mocks.ts b/src/screens/EventVolunteers/Volunteers/Volunteers.mocks.ts
new file mode 100644
index 0000000000..72c927b8ff
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/Volunteers.mocks.ts
@@ -0,0 +1,303 @@
+import {
+  ADD_VOLUNTEER,
+  DELETE_VOLUNTEER,
+} from 'GraphQl/Mutations/EventVolunteerMutation';
+import { EVENT_VOLUNTEER_LIST } from 'GraphQl/Queries/EventVolunteerQueries';
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+
+const volunteer1 = {
+  _id: 'volunteerId1',
+  hasAccepted: true,
+  hoursVolunteered: 10,
+  user: {
+    _id: 'userId1',
+    firstName: 'Teresa',
+    lastName: 'Bradley',
+    image: null,
+  },
+  assignments: [],
+  groups: [
+    {
+      _id: 'groupId1',
+      name: 'group1',
+      volunteers: [
+        {
+          _id: 'volunteerId1',
+        },
+      ],
+    },
+  ],
+};
+
+const volunteer2 = {
+  _id: 'volunteerId2',
+  hasAccepted: false,
+  hoursVolunteered: null,
+  user: {
+    _id: 'userId3',
+    firstName: 'Bruce',
+    lastName: 'Graza',
+    image: 'img-url',
+  },
+  assignments: [],
+  groups: [],
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '' },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer1, volunteer2],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '' },
+        orderBy: 'hoursVolunteered_ASC',
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer2, volunteer1],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '' },
+        orderBy: 'hoursVolunteered_DESC',
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer1, volunteer2],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: 'T' },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer1],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '', hasAccepted: false },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer2],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '', hasAccepted: false },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer2],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '', hasAccepted: true },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [volunteer1],
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_VOLUNTEER,
+      variables: {
+        id: 'volunteerId1',
+      },
+    },
+    result: {
+      data: {
+        removeEventVolunteer: {
+          _id: 'volunteerId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: {
+        id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            members: [
+              {
+                _id: 'userId2',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                email: 'harve@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+              {
+                _id: 'userId3',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ADD_VOLUNTEER,
+      variables: {
+        data: {
+          eventId: 'eventId',
+          userId: 'userId3',
+        },
+      },
+    },
+    result: {
+      data: {
+        createEventVolunteer: {
+          _id: 'volunteerId1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '' },
+        orderBy: null,
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: DELETE_VOLUNTEER,
+      variables: {
+        id: 'volunteerId1',
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: MEMBERS_LIST,
+      variables: {
+        id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            members: [
+              {
+                _id: 'userId2',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                email: 'harve@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+              {
+                _id: 'userId3',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@example.com',
+                image: '',
+                organizationsBlockedBy: [],
+                createdAt: '2024-02-14',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ADD_VOLUNTEER,
+      variables: {
+        data: {
+          eventId: 'eventId',
+          userId: 'userId3',
+        },
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+];
+
+export const MOCKS_EMPTY = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: {
+        where: { eventId: 'eventId', name_contains: '' },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [],
+      },
+    },
+  },
+];
diff --git a/src/screens/EventVolunteers/Volunteers/Volunteers.test.tsx b/src/screens/EventVolunteers/Volunteers/Volunteers.test.tsx
new file mode 100644
index 0000000000..2af25b0b84
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/Volunteers.test.tsx
@@ -0,0 +1,245 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import Volunteers from './Volunteers';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, MOCKS_EMPTY, MOCKS_ERROR } from './Volunteers.mocks';
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const link3 = new StaticMockLink(MOCKS_EMPTY);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderVolunteers = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/event/orgId/eventId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/event/:orgId/:eventId" element={<Volunteers />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Volunteers Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/event/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/event/" element={<Volunteers />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Volunteers screen', async () => {
+    renderVolunteers(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderVolunteers(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    let sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by hoursVolunteered_DESC
+    fireEvent.click(sortBtn);
+    const hoursVolunteeredDESC = await screen.findByTestId(
+      'hoursVolunteered_DESC',
+    );
+    expect(hoursVolunteeredDESC).toBeInTheDocument();
+    fireEvent.click(hoursVolunteeredDESC);
+
+    let volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('Teresa Bradley');
+
+    // Sort by hoursVolunteered_ASC
+    sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const hoursVolunteeredASC = await screen.findByTestId(
+      'hoursVolunteered_ASC',
+    );
+    expect(hoursVolunteeredASC).toBeInTheDocument();
+    fireEvent.click(hoursVolunteeredASC);
+
+    volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('Bruce Graza');
+  });
+
+  it('Filter Volunteers by status (All)', async () => {
+    renderVolunteers(link1);
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    // Filter by All
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusAll')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusAll'));
+
+    const volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName).toHaveLength(2);
+  });
+
+  it('Filter Volunteers by status (Pending)', async () => {
+    renderVolunteers(link1);
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    // Filter by Pending
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusPending')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusPending'));
+
+    const volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('Bruce Graza');
+  });
+
+  it('Filter Volunteers by status (Accepted)', async () => {
+    renderVolunteers(link1);
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    // Filter by Accepted
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusAccepted')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusAccepted'));
+
+    const volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('Teresa Bradley');
+  });
+
+  it('Search', async () => {
+    renderVolunteers(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'T');
+    await debounceWait();
+
+    const volunteerName = await screen.findAllByTestId('volunteerName');
+    expect(volunteerName[0]).toHaveTextContent('Teresa Bradley');
+  });
+
+  it('should render screen with No Volunteers', async () => {
+    renderVolunteers(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noVolunteers)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching volunteers data', async () => {
+    renderVolunteers(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Open and close Volunteer Modal (View)', async () => {
+    renderVolunteers(link1);
+
+    const viewItemBtn = await screen.findAllByTestId('viewItemBtn');
+    userEvent.click(viewItemBtn[0]);
+
+    expect(await screen.findByText(t.volunteerDetails)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+
+  it('Open and Close Volunteer Modal (Delete)', async () => {
+    renderVolunteers(link1);
+
+    const deleteItemBtn = await screen.findAllByTestId('deleteItemBtn');
+    userEvent.click(deleteItemBtn[0]);
+
+    expect(await screen.findByText(t.removeVolunteer)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+
+  it('Open and close Volunteer Modal (Create)', async () => {
+    renderVolunteers(link1);
+
+    const addVolunteerBtn = await screen.findByTestId('addVolunteerBtn');
+    userEvent.click(addVolunteerBtn);
+
+    expect(await screen.findAllByText(t.addVolunteer)).toHaveLength(2);
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+});
diff --git a/src/screens/EventVolunteers/Volunteers/Volunteers.tsx b/src/screens/EventVolunteers/Volunteers/Volunteers.tsx
new file mode 100644
index 0000000000..770bd35ef4
--- /dev/null
+++ b/src/screens/EventVolunteers/Volunteers/Volunteers.tsx
@@ -0,0 +1,462 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
+
+import {
+  Circle,
+  FilterAltOutlined,
+  Search,
+  Sort,
+  WarningAmberRounded,
+} from '@mui/icons-material';
+
+import { useQuery } from '@apollo/client';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { Chip, debounce, Stack } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+import styles from '../EventVolunteers.module.css';
+import { EVENT_VOLUNTEER_LIST } from 'GraphQl/Queries/EventVolunteerQueries';
+import type { InterfaceEventVolunteerInfo } from 'utils/interfaces';
+import VolunteerCreateModal from './VolunteerCreateModal';
+import VolunteerDeleteModal from './VolunteerDeleteModal';
+import VolunteerViewModal from './VolunteerViewModal';
+
+enum VolunteerStatus {
+  All = 'all',
+  Pending = 'pending',
+  Accepted = 'accepted',
+}
+
+enum ModalState {
+  ADD = 'add',
+  DELETE = 'delete',
+  VIEW = 'view',
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Component for managing and displaying event volunteers realted to an event.
+ *
+ * This component allows users to view, filter, sort, and create volunteers. It also handles fetching and displaying related data such as volunteer acceptance status, etc.
+ *
+ * @returns The rendered component.
+ */
+function volunteers(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Get the organization ID from URL parameters
+  const { orgId, eventId } = useParams();
+
+  if (!orgId || !eventId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [volunteer, setVolunteer] =
+    useState<InterfaceEventVolunteerInfo | null>(null);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<
+    'hoursVolunteered_ASC' | 'hoursVolunteered_DESC' | null
+  >(null);
+  const [status, setStatus] = useState<VolunteerStatus>(VolunteerStatus.All);
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.ADD]: false,
+    [ModalState.DELETE]: false,
+    [ModalState.VIEW]: false,
+  });
+
+  const openModal = (modal: ModalState): void => {
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+  };
+
+  const closeModal = (modal: ModalState): void => {
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+  };
+
+  const handleOpenModal = useCallback(
+    (
+      volunteer: InterfaceEventVolunteerInfo | null,
+      modalType: ModalState,
+    ): void => {
+      setVolunteer(volunteer);
+      openModal(modalType);
+    },
+    [openModal],
+  );
+
+  /**
+   * Query to fetch event volunteers for the event.
+   */
+  const {
+    data: volunteersData,
+    loading: volunteersLoading,
+    error: volunteersError,
+    refetch: refetchVolunteers,
+  }: {
+    data?: {
+      getEventVolunteers: InterfaceEventVolunteerInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(EVENT_VOLUNTEER_LIST, {
+    variables: {
+      where: {
+        eventId: eventId,
+        hasAccepted:
+          status === VolunteerStatus.All
+            ? undefined
+            : status === VolunteerStatus.Accepted,
+        name_contains: searchTerm,
+      },
+      orderBy: sortBy,
+    },
+  });
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const volunteers = useMemo(
+    () => volunteersData?.getEventVolunteers || [],
+    [volunteersData],
+  );
+
+  if (volunteersLoading) {
+    return <Loader size="xl" />;
+  }
+
+  if (volunteersError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Volunteers' })}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'volunteer',
+      headerName: 'Volunteer',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { _id, firstName, lastName, image } = params.row.user;
+        return (
+          <div
+            className="d-flex fw-bold align-items-center justify-content-center ms-2"
+            data-testid="volunteerName"
+          >
+            {image ? (
+              <img
+                src={image}
+                alt="volunteer"
+                data-testid="volunteer_image"
+                className={styles.TableImage}
+              />
+            ) : (
+              <div className={styles.avatarContainer}>
+                <Avatar
+                  key={_id + '1'}
+                  dataTestId="volunteer_avatar"
+                  containerStyle={styles.imageContainer}
+                  avatarStyle={styles.TableImage}
+                  name={firstName + ' ' + lastName}
+                  alt={firstName + ' ' + lastName}
+                />
+              </div>
+            )}
+            {firstName + ' ' + lastName}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'status',
+      headerName: 'Status',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Chip
+            icon={<Circle className={styles.chipIcon} />}
+            label={params.row.hasAccepted ? 'Accepted' : 'Pending'}
+            variant="outlined"
+            color="primary"
+            className={`${styles.chip} ${params.row.hasAccepted ? styles.active : styles.pending}`}
+          />
+        );
+      },
+    },
+    {
+      field: 'hours',
+      headerName: 'Hours Volunteered',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="categoryName"
+          >
+            {params.row.hoursVolunteered ?? '-'}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'actionItem',
+      headerName: 'Actions Completed',
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="actionNos"
+          >
+            {params.row.assignments.length}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'options',
+      headerName: 'Options',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              style={{ minWidth: '32px' }}
+              className="me-2 rounded"
+              data-testid="viewItemBtn"
+              onClick={() => handleOpenModal(params.row, ModalState.VIEW)}
+            >
+              <i className="fa fa-info" />
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              className="rounded"
+              data-testid="deleteItemBtn"
+              onClick={() => handleOpenModal(params.row, ModalState.DELETE)}
+            >
+              <i className="fa fa-trash" />
+            </Button>
+          </>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: 'Name',
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('hoursVolunteered_DESC')}
+                  data-testid="hoursVolunteered_DESC"
+                >
+                  {t('mostHoursVolunteered')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('hoursVolunteered_ASC')}
+                  data-testid="hoursVolunteered_ASC"
+                >
+                  {t('leastHoursVolunteered')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <FilterAltOutlined className={'me-1'} />
+                {t('status')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setStatus(VolunteerStatus.All)}
+                  data-testid="statusAll"
+                >
+                  {tCommon('all')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setStatus(VolunteerStatus.Pending)}
+                  data-testid="statusPending"
+                >
+                  {tCommon('pending')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setStatus(VolunteerStatus.Accepted)}
+                  data-testid="statusAccepted"
+                >
+                  {t('accepted')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              onClick={() => handleOpenModal(null, ModalState.ADD)}
+              style={{ marginTop: '11px' }}
+              data-testid="addVolunteerBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('add')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Volunteers */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noVolunteers')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={volunteers.map((volunteer, index) => ({
+          id: index + 1,
+          ...volunteer,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      <VolunteerCreateModal
+        isOpen={modalState[ModalState.ADD]}
+        hide={() => closeModal(ModalState.ADD)}
+        eventId={eventId}
+        orgId={orgId}
+        refetchVolunteers={refetchVolunteers}
+      />
+
+      {volunteer && (
+        <>
+          <VolunteerViewModal
+            isOpen={modalState[ModalState.VIEW]}
+            hide={() => closeModal(ModalState.VIEW)}
+            volunteer={volunteer}
+          />
+          <VolunteerDeleteModal
+            isOpen={modalState[ModalState.DELETE]}
+            hide={() => closeModal(ModalState.DELETE)}
+            volunteer={volunteer}
+            refetchVolunteers={refetchVolunteers}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default volunteers;
diff --git a/src/screens/ForgotPassword/ForgotPassword.module.css b/src/screens/ForgotPassword/ForgotPassword.module.css
new file mode 100644
index 0000000000..74e09aecc6
--- /dev/null
+++ b/src/screens/ForgotPassword/ForgotPassword.module.css
@@ -0,0 +1,71 @@
+.pageWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.cardBody {
+  padding: 2rem;
+  background-color: #fff;
+  border-radius: 0.8rem;
+  border: 1px solid var(--bs-gray-200);
+}
+
+.keyWrapper {
+  height: 72px;
+  width: 72px;
+  transform: rotate(180deg);
+  position: relative;
+  overflow: hidden;
+  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  margin: 1rem auto;
+}
+
+.keyWrapper .themeOverlay {
+  position: absolute;
+  background-color: var(--bs-primary);
+  height: 100%;
+  width: 100%;
+  opacity: 0.15;
+}
+
+.keyWrapper .keyLogo {
+  height: 42px;
+  width: 42px;
+  -webkit-animation: zoomIn 0.3s ease-in-out;
+  animation: zoomIn 0.3s ease-in-out;
+}
+
+@-webkit-keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
diff --git a/src/screens/ForgotPassword/ForgotPassword.test.tsx b/src/screens/ForgotPassword/ForgotPassword.test.tsx
new file mode 100644
index 0000000000..be1b1706f8
--- /dev/null
+++ b/src/screens/ForgotPassword/ForgotPassword.test.tsx
@@ -0,0 +1,415 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { toast, ToastContainer } from 'react-toastify';
+
+import { GENERATE_OTP_MUTATION } from 'GraphQl/Mutations/mutations';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+// import i18nForTest from 'utils/i18nForTest';
+import ForgotPassword from './ForgotPassword';
+import i18n from 'utils/i18nForTest';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem, removeItem } = useLocalStorage();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+    warn: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: GENERATE_OTP_MUTATION,
+      variables: {
+        email: 'johndoe@gmail.com',
+      },
+    },
+    result: {
+      data: {
+        otp: {
+          otpToken: 'otpToken',
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: GENERATE_OTP_MUTATION,
+      variables: {
+        email: 'notexists@gmail.com',
+      },
+    },
+    error: new Error('User not found'),
+  },
+];
+
+const MOCKS_INTERNET_UNAVAILABLE = [
+  {
+    request: {
+      query: GENERATE_OTP_MUTATION,
+      variables: {
+        email: 'johndoe@gmail.com',
+      },
+    },
+    error: new Error('Failed to fetch'),
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const notWorkingLink = new StaticMockLink([], true);
+const talawaApiUnavailableLink = new StaticMockLink(
+  MOCKS_INTERNET_UNAVAILABLE,
+  true,
+);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.forgotPassword ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+beforeEach(() => {
+  setItem('IsLoggedIn', 'FALSE');
+});
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('Testing Forgot Password screen', () => {
+  test('Component should be rendered properly', async () => {
+    window.location.assign('/orglist');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.getByText(/Forgot Password/i)).toBeInTheDocument();
+    expect(screen.getByText(/Registered Email/i)).toBeInTheDocument();
+    expect(screen.getByText(/Get Otp/i)).toBeInTheDocument();
+    expect(screen.getByText(/Back to Login/i)).toBeInTheDocument();
+    expect(window.location).toBeAt('/orglist');
+  });
+
+  test('Testing, If user is already loggedIn', async () => {
+    setItem('IsLoggedIn', 'TRUE');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Testing get OTP functionality', async () => {
+    const formData = {
+      email: 'johndoe@gmail.com',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalled();
+    });
+  });
+
+  test('Testing forgot password functionality', async () => {
+    const formData = {
+      userOtp: '12345',
+      newPassword: 'johnDoe',
+      confirmNewPassword: 'johnDoe',
+      email: 'johndoe@gmail.com',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
+    userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
+    userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
+    userEvent.type(
+      screen.getByTestId('confirmNewPassword'),
+      formData.confirmNewPassword,
+    );
+    setItem('otpToken', 'lorem ipsum');
+    userEvent.click(screen.getByText('Change Password'));
+    await wait();
+  });
+
+  test('Testing forgot password functionality, if the otp got deleted from the local storage', async () => {
+    const formData = {
+      userOtp: '12345',
+      newPassword: 'johnDoe',
+      confirmNewPassword: 'johnDoe',
+      email: 'johndoe@gmail.com',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
+    userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
+    userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
+    userEvent.type(
+      screen.getByTestId('confirmNewPassword'),
+      formData.confirmNewPassword,
+    );
+    removeItem('otpToken');
+    userEvent.click(screen.getByText('Change Password'));
+    await wait();
+  });
+
+  test('Testing forgot password functionality, when new password and confirm password is not same', async () => {
+    const formData = {
+      email: 'johndoe@gmail.com',
+      userOtp: '12345',
+      newPassword: 'johnDoe',
+      confirmNewPassword: 'doeJohn',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
+    userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
+    userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
+    userEvent.type(
+      screen.getByTestId('confirmNewPassword'),
+      formData.confirmNewPassword,
+    );
+
+    userEvent.click(screen.getByText('Change Password'));
+  });
+
+  test('Testing forgot password functionality, when the user is not found', async () => {
+    const formData = {
+      email: 'notexists@gmail.com',
+    };
+    // setItem('otpToken', '');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await waitFor(() => {
+      expect(toast.warn).toHaveBeenCalledWith(translations.emailNotRegistered);
+    });
+  });
+
+  test('Testing forgot password functionality, when there is an error except unregistered email and api failure', async () => {
+    render(
+      <MockedProvider addTypename={false} link={notWorkingLink}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    userEvent.click(screen.getByText('Get OTP'));
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(translations.errorSendingMail);
+    });
+  });
+
+  test('Testing forgot password functionality, when talawa api failed', async () => {
+    const formData = {
+      email: 'johndoe@gmail.com',
+    };
+    render(
+      <MockedProvider addTypename={false} link={talawaApiUnavailableLink}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+    userEvent.click(screen.getByText('Get OTP'));
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(
+        translations.talawaApiUnavailable,
+      );
+    });
+  });
+
+  test('Testing forgot password functionality, when otp token is not present', async () => {
+    const formData = {
+      userOtp: '12345',
+      newPassword: 'johnDoe',
+      confirmNewPassword: 'johnDoe',
+      email: 'johndoe@gmail.com',
+    };
+
+    setItem('otpToken', '');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <ForgotPassword />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Registered email/i),
+      formData.email,
+    );
+
+    userEvent.click(screen.getByText('Get OTP'));
+    await wait();
+
+    userEvent.type(screen.getByPlaceholderText('e.g. 12345'), formData.userOtp);
+    userEvent.type(screen.getByTestId('newPassword'), formData.newPassword);
+    userEvent.type(
+      screen.getByTestId('confirmNewPassword'),
+      formData.confirmNewPassword,
+    );
+    userEvent.click(screen.getByText('Change Password'));
+  });
+});
diff --git a/src/screens/ForgotPassword/ForgotPassword.tsx b/src/screens/ForgotPassword/ForgotPassword.tsx
new file mode 100644
index 0000000000..663960572b
--- /dev/null
+++ b/src/screens/ForgotPassword/ForgotPassword.tsx
@@ -0,0 +1,285 @@
+import { useMutation } from '@apollo/client';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import {
+  FORGOT_PASSWORD_MUTATION,
+  GENERATE_OTP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import KeyLogo from 'assets/svgs/key.svg?react';
+
+import ArrowRightAlt from '@mui/icons-material/ArrowRightAlt';
+import Loader from 'components/Loader/Loader';
+import { Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { errorHandler } from 'utils/errorHandler';
+import styles from './ForgotPassword.module.css';
+import useLocalStorage from 'utils/useLocalstorage';
+
+/**
+ * `ForgotPassword` component allows users to reset their password.
+ *
+ * It provides two stages:
+ * 1. Entering the registered email to receive an OTP.
+ * 2. Entering the OTP and new password to reset the password.
+ *
+ * @returns JSX.Element - The `ForgotPassword` component.
+ *
+ * @example
+ * ```tsx
+ * <ForgotPassword />
+ * ```
+ */
+const ForgotPassword = (): JSX.Element => {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'forgotPassword',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Set the page title
+  document.title = t('title');
+
+  // Custom hook for accessing local storage
+  const { getItem, removeItem, setItem } = useLocalStorage();
+
+  // State hooks for form data and UI
+  const [showEnterEmail, setShowEnterEmail] = useState(true);
+
+  const [registeredEmail, setregisteredEmail] = useState('');
+
+  const [forgotPassFormData, setForgotPassFormData] = useState({
+    userOtp: '',
+    newPassword: '',
+    confirmNewPassword: '',
+  });
+
+  // GraphQL mutations
+  const [otp, { loading: otpLoading }] = useMutation(GENERATE_OTP_MUTATION);
+  const [forgotPassword, { loading: forgotPasswordLoading }] = useMutation(
+    FORGOT_PASSWORD_MUTATION,
+  );
+
+  // Check if the user is already logged in
+  const isLoggedIn = getItem('IsLoggedIn');
+  useEffect(() => {
+    if (isLoggedIn == 'TRUE') {
+      window.location.replace('/orglist');
+    }
+    return () => {
+      removeItem('otpToken');
+    };
+  }, []);
+
+  /**
+   * Handles the form submission for generating OTP.
+   *
+   * @param e - The form submit event
+   */
+  const getOTP = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    try {
+      const { data } = await otp({
+        variables: {
+          email: registeredEmail,
+        },
+      });
+
+      setItem('otpToken', data.otp.otpToken);
+      toast.success(t('OTPsent'));
+      setShowEnterEmail(false);
+    } catch (error: unknown) {
+      if ((error as Error).message === 'User not found') {
+        toast.warn(tErrors('emailNotRegistered'));
+      } else if ((error as Error).message === 'Failed to fetch') {
+        toast.error(tErrors('talawaApiUnavailable'));
+      } else {
+        toast.error(tErrors('errorSendingMail'));
+      }
+    }
+  };
+
+  /**
+   * Handles the form submission for resetting the password.
+   *
+   * @param e - The form submit event
+   */
+  const submitForgotPassword = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    const { userOtp, newPassword, confirmNewPassword } = forgotPassFormData;
+
+    if (newPassword !== confirmNewPassword) {
+      toast.error(t('passwordMismatches') as string);
+      return;
+    }
+
+    const otpToken = getItem('otpToken');
+
+    if (!otpToken) {
+      return;
+    }
+
+    try {
+      const { data } = await forgotPassword({
+        variables: {
+          userOtp,
+          newPassword,
+          otpToken,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('passwordChanges') as string);
+        setShowEnterEmail(true);
+        setForgotPassFormData({
+          userOtp: '',
+          newPassword: '',
+          confirmNewPassword: '',
+        });
+      }
+    } catch (error: unknown) {
+      setShowEnterEmail(true);
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  // Show loader while performing OTP or password reset operations
+  if (otpLoading || forgotPasswordLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <div className={styles.pageWrapper}>
+        <div className="row container-fluid d-flex justify-content-center items-center">
+          <div className="col-12 col-lg-4 px-0">
+            <div className={styles.cardBody}>
+              <div className={styles.keyWrapper}>
+                <div className={styles.themeOverlay} />
+                <KeyLogo className={styles.keyLogo} fill="var(--bs-primary)" />
+              </div>
+              <h3 className="text-center fw-bold">
+                {tCommon('forgotPassword')}
+              </h3>
+              {showEnterEmail ? (
+                <div className="mt-4">
+                  <Form onSubmit={getOTP}>
+                    <Form.Label htmlFor="registeredEmail">
+                      {t('registeredEmail')}:
+                    </Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        type="email"
+                        className="form-control"
+                        id="registeredEmail"
+                        placeholder={t('registeredEmail')}
+                        value={registeredEmail}
+                        name="registeredEmail"
+                        required
+                        onChange={(e): void =>
+                          setregisteredEmail(e.target.value)
+                        }
+                      />
+                    </div>
+                    <Button
+                      type="submit"
+                      className="mt-4 w-100"
+                      data-testid="getOtpBtn"
+                    >
+                      {t('getOtp')}
+                    </Button>
+                  </Form>
+                </div>
+              ) : (
+                <div className="mt-4">
+                  <Form onSubmit={submitForgotPassword}>
+                    <Form.Label htmlFor="userOtp">{t('enterOtp')}:</Form.Label>
+                    <Form.Control
+                      type="number"
+                      className="form-control"
+                      id="userOtp"
+                      placeholder={t('userOtp')}
+                      name="userOtp"
+                      value={forgotPassFormData.userOtp}
+                      required
+                      onChange={(e): void =>
+                        setForgotPassFormData({
+                          ...forgotPassFormData,
+                          userOtp: e.target.value,
+                        })
+                      }
+                    />
+                    <Form.Label htmlFor="newPassword">
+                      {t('enterNewPassword')}:
+                    </Form.Label>
+                    <Form.Control
+                      type="password"
+                      className="form-control"
+                      id="newPassword"
+                      placeholder={tCommon('password')}
+                      data-testid="newPassword"
+                      name="newPassword"
+                      value={forgotPassFormData.newPassword}
+                      required
+                      onChange={(e): void =>
+                        setForgotPassFormData({
+                          ...forgotPassFormData,
+                          newPassword: e.target.value,
+                        })
+                      }
+                    />
+                    <Form.Label htmlFor="confirmNewPassword">
+                      {t('cofirmNewPassword')}:
+                    </Form.Label>
+                    <Form.Control
+                      type="password"
+                      className="form-control"
+                      id="confirmNewPassword"
+                      placeholder={t('cofirmNewPassword')}
+                      data-testid="confirmNewPassword"
+                      name="confirmNewPassword"
+                      value={forgotPassFormData.confirmNewPassword}
+                      required
+                      onChange={(e): void =>
+                        setForgotPassFormData({
+                          ...forgotPassFormData,
+                          confirmNewPassword: e.target.value,
+                        })
+                      }
+                    />
+                    <Button type="submit" className="mt-2 w-100">
+                      {t('changePassword')}
+                    </Button>
+                  </Form>
+                </div>
+              )}
+              <div className="d-flex justify-content-between items-center mt-4">
+                <Link
+                  to={'/'}
+                  className="mx-auto d-flex items-center text-secondary"
+                >
+                  <ArrowRightAlt
+                    fontSize="medium"
+                    style={{ transform: 'rotate(180deg)' }}
+                  />
+                  {t('backToLogin')}
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
new file mode 100644
index 0000000000..cdf4476267
--- /dev/null
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
@@ -0,0 +1,273 @@
+.pledgeContainer {
+  margin: 0.6rem 0;
+}
+
+.container {
+  min-height: 100vh;
+}
+
+.pledgeModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.btnsContainer {
+  display: flex;
+  gap: 0.8rem;
+  margin: 2.2rem 0 0.8rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.inputField {
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.TableImage {
+  object-fit: cover;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 100% !important;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pledgerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.1rem 0.25rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.45rem;
+  border-radius: 0.35rem;
+  background-color: #31bb6b33;
+  height: 2.2rem;
+  margin-top: 0.75rem;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.overviewContainer {
+  display: flex;
+  gap: 7rem;
+  width: 100%;
+  justify-content: space-between;
+  margin: 1.5rem 0 0 0;
+  padding: 1.25rem 2rem;
+  background-color: rgba(255, 255, 255, 0.591);
+
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  border-radius: 0.5rem;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.75rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.titleContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.raisedAmount {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+}
+
+.progressContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.progress {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.endpoints {
+  display: flex;
+  position: relative;
+  font-size: 0.85rem;
+}
+
+.start {
+  position: absolute;
+  top: 0px;
+}
+
+.end {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+.moreContainer {
+  display: flex;
+  align-items: center;
+}
+
+.moreContainer:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.popup {
+  z-index: 50;
+  border-radius: 0.5rem;
+  font-family: sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #e2e8f0;
+  background-color: white;
+  color: #1e293b;
+  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.popupExtra {
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.toggleGroup {
+  width: 50%;
+  min-width: 27.75rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtn {
+  padding: 0rem;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtn:hover {
+  color: #31bb6b !important;
+}
+
+input[type='radio']:checked + label {
+  background-color: #31bb6a50 !important;
+}
+
+input[type='radio']:checked + label:hover {
+  color: black !important;
+}
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx
new file mode 100644
index 0000000000..3fb5993775
--- /dev/null
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.test.tsx
@@ -0,0 +1,364 @@
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from '../../utils/i18nForTest';
+import FundCampaignPledge from './FundCampaignPledge';
+import {
+  EMPTY_MOCKS,
+  MOCKS,
+  MOCKS_FUND_CAMPAIGN_PLEDGE_ERROR,
+} from './PledgesMocks';
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_FUND_CAMPAIGN_PLEDGE_ERROR);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges),
+);
+
+const renderFundCampaignPledge = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter
+        initialEntries={['/fundCampaignPledge/orgId/fundCampaignId']}
+      >
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route
+                  path="/fundCampaignPledge/:orgId/:fundCampaignId"
+                  element={<FundCampaignPledge />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Campaign Pledge Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', fundCampaignId: 'fundCampaignId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/fundCampaignPledge/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route
+                  path="/fundCampaignPledge/"
+                  element={<FundCampaignPledge />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render the Campaign Pledge screen', async () => {
+    renderFundCampaignPledge(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
+    });
+  });
+
+  it('open and closes Create Pledge modal', async () => {
+    renderFundCampaignPledge(link1);
+
+    const addPledgeBtn = await screen.findByTestId('addPledgeBtn');
+    expect(addPledgeBtn).toBeInTheDocument();
+    userEvent.click(addPledgeBtn);
+
+    await waitFor(() =>
+      expect(screen.getAllByText(translations.createPledge)).toHaveLength(2),
+    );
+    userEvent.click(screen.getByTestId('pledgeModalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('pledgeModalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and closes update pledge modal', async () => {
+    renderFundCampaignPledge(link1);
+
+    const editPledgeBtn = await screen.findAllByTestId('editPledgeBtn');
+    await waitFor(() => expect(editPledgeBtn[0]).toBeInTheDocument());
+    userEvent.click(editPledgeBtn[0]);
+
+    await waitFor(() =>
+      expect(screen.getByText(translations.editPledge)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('pledgeModalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('pledgeModalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and closes delete pledge modal', async () => {
+    renderFundCampaignPledge(link1);
+
+    const deletePledgeBtn = await screen.findAllByTestId('deletePledgeBtn');
+    await waitFor(() => expect(deletePledgeBtn[0]).toBeInTheDocument());
+    userEvent.click(deletePledgeBtn[0]);
+
+    await waitFor(() =>
+      expect(screen.getByText(translations.deletePledge)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('deletePledgeCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('deletePledgeCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('Search the Pledges list by Users', async () => {
+    renderFundCampaignPledge(link1);
+    const searchPledger = await screen.findByTestId('searchPledger');
+    fireEvent.change(searchPledger, {
+      target: { value: 'John' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).toBeNull();
+    });
+  });
+
+  it('should render the Campaign Pledge screen with error', async () => {
+    renderFundCampaignPledge(link2);
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the empty pledge component', async () => {
+    renderFundCampaignPledge(link3);
+    await waitFor(() =>
+      expect(screen.getByText(translations.noPledges)).toBeInTheDocument(),
+    );
+  });
+
+  it('check if user image renders', async () => {
+    renderFundCampaignPledge(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
+    });
+
+    const image = await screen.findByTestId('image1');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'img-url');
+  });
+
+  it('should render extraUserDetails in Popup', async () => {
+    renderFundCampaignPledge(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
+    });
+    const searchPledger = await screen.findByTestId('searchPledger');
+    expect(searchPledger).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('amount_DESC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('amount_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('John Doe2')).toBeInTheDocument();
+    expect(screen.queryByText('John Doe3')).toBeNull();
+    expect(screen.queryByText('John Doe4')).toBeNull();
+
+    const moreContainer = await screen.findAllByTestId('moreContainer');
+    userEvent.click(moreContainer[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe3')).toBeInTheDocument();
+      expect(screen.getByText('John Doe4')).toBeInTheDocument();
+      expect(screen.getByTestId('extra1')).toBeInTheDocument();
+      expect(screen.getByTestId('extra2')).toBeInTheDocument();
+      expect(screen.getByTestId('extraAvatar8')).toBeInTheDocument();
+      const image = screen.getByTestId('extraImage1');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', 'img-url3');
+    });
+
+    userEvent.click(moreContainer[0]);
+    await waitFor(() => {
+      expect(screen.queryByText('John Doe3')).toBeNull();
+      expect(screen.queryByText('John Doe4')).toBeNull();
+    });
+  });
+
+  it('should render Progress Bar with Raised amount (CONSTANT) & Pledged Amount', async () => {
+    renderFundCampaignPledge(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledger')).toBeInTheDocument();
+    });
+    const raised = screen.getByText('Raised amount');
+    const pledged = screen.getByText('Pledged amount');
+    expect(pledged).toBeInTheDocument();
+    expect(raised).toBeInTheDocument();
+
+    userEvent.click(raised);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progressBar')).toBeInTheDocument();
+      expect(screen.getByTestId('progressBar')).toHaveTextContent('$0');
+    });
+
+    userEvent.click(pledged);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progressBar')).toBeInTheDocument();
+      expect(screen.getByTestId('progressBar')).toHaveTextContent('$300');
+    });
+  });
+
+  it('Sort the Pledges list by Lowest Amount', async () => {
+    renderFundCampaignPledge(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledger');
+    expect(searchPledger).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('amount_ASC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('amount_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('100');
+    });
+  });
+
+  it('Sort the Pledges list by Highest Amount', async () => {
+    renderFundCampaignPledge(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledger');
+    expect(searchPledger).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('amount_DESC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('amount_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('200');
+    });
+  });
+
+  it('Sort the Pledges list by latest endDate', async () => {
+    renderFundCampaignPledge(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledger');
+    expect(searchPledger).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('endDate_DESC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('endDate_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('100');
+    });
+  });
+
+  it('Sort the Pledges list by earliest endDate', async () => {
+    renderFundCampaignPledge(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledger');
+    expect(searchPledger).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('endDate_ASC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('endDate_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('200');
+    });
+  });
+});
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
new file mode 100644
index 0000000000..d14ee9de06
--- /dev/null
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -0,0 +1,633 @@
+import { useQuery, type ApolloQueryResult } from '@apollo/client';
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+import { FUND_CAMPAIGN_PLEDGE } from 'GraphQl/Queries/fundQueries';
+import Loader from 'components/Loader/Loader';
+import { Unstable_Popup as BasePopup } from '@mui/base/Unstable_Popup';
+import dayjs from 'dayjs';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useParams } from 'react-router-dom';
+import { currencySymbols } from 'utils/currency';
+import styles from './FundCampaignPledge.module.css';
+import PledgeDeleteModal from './PledgeDeleteModal';
+import PledgeModal from './PledgeModal';
+import { Breadcrumbs, Link, Stack, Typography } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import Avatar from 'components/Avatar/Avatar';
+import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
+import type {
+  InterfacePledgeInfo,
+  InterfaceUserInfo,
+  InterfaceQueryFundCampaignsPledges,
+} from 'utils/interfaces';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+
+interface InterfaceCampaignInfo {
+  name: string;
+  goal: number;
+  startDate: Date;
+  endDate: Date;
+  currency: string;
+}
+
+enum ModalState {
+  SAME = 'same',
+  DELETE = 'delete',
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+const fundCampaignPledge = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'pledges',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  const { fundCampaignId, orgId } = useParams();
+  if (!fundCampaignId || !orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [campaignInfo, setCampaignInfo] = useState<InterfaceCampaignInfo>({
+    name: '',
+    goal: 0,
+    startDate: new Date(),
+    endDate: new Date(),
+    currency: '',
+  });
+
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.SAME]: false,
+    [ModalState.DELETE]: false,
+  });
+
+  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
+  const [extraUsers, setExtraUsers] = useState<InterfaceUserInfo[]>([]);
+  const [progressIndicator, setProgressIndicator] = useState<
+    'raised' | 'pledged'
+  >('pledged');
+  const open = Boolean(anchor);
+  const id = open ? 'simple-popup' : undefined;
+  const [pledgeModalMode, setPledgeModalMode] = useState<'edit' | 'create'>(
+    'create',
+  );
+  const [pledge, setPledge] = useState<InterfacePledgeInfo | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const [sortBy, setSortBy] = useState<
+    'amount_ASC' | 'amount_DESC' | 'endDate_ASC' | 'endDate_DESC'
+  >('endDate_DESC');
+
+  const {
+    data: pledgeData,
+    loading: pledgeLoading,
+    error: pledgeError,
+    refetch: refetchPledge,
+  }: {
+    data?: {
+      getFundraisingCampaigns: InterfaceQueryFundCampaignsPledges[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => Promise<
+      ApolloQueryResult<{
+        getFundraisingCampaigns: InterfaceQueryFundCampaignsPledges[];
+      }>
+    >;
+  } = useQuery(FUND_CAMPAIGN_PLEDGE, {
+    variables: {
+      where: {
+        id: fundCampaignId,
+      },
+      pledgeOrderBy: sortBy,
+    },
+  });
+
+  const endDate = dayjs(
+    pledgeData?.getFundraisingCampaigns[0]?.endDate,
+    'YYYY-MM-DD',
+  ).toDate();
+
+  const { pledges, totalPledged, fundName } = useMemo(() => {
+    let totalPledged = 0;
+    const pledges =
+      pledgeData?.getFundraisingCampaigns[0].pledges.filter((pledge) => {
+        totalPledged += pledge.amount;
+        const search = searchTerm.toLowerCase();
+        return pledge.users.some((user) => {
+          const fullName = `${user.firstName} ${user.lastName}`;
+          return fullName.toLowerCase().includes(search);
+        });
+      }) ?? [];
+    const fundName =
+      pledgeData?.getFundraisingCampaigns[0].fundId.name ?? tCommon('Funds');
+    return { pledges, totalPledged, fundName };
+  }, [pledgeData, searchTerm]);
+
+  useEffect(() => {
+    if (pledgeData) {
+      setCampaignInfo({
+        name: pledgeData.getFundraisingCampaigns[0].name,
+        goal: pledgeData.getFundraisingCampaigns[0].fundingGoal,
+        startDate: pledgeData.getFundraisingCampaigns[0].startDate,
+        endDate: pledgeData.getFundraisingCampaigns[0].endDate,
+        currency: pledgeData.getFundraisingCampaigns[0].currency,
+      });
+    }
+  }, [pledgeData]);
+
+  useEffect(() => {
+    refetchPledge();
+  }, [sortBy, refetchPledge]);
+
+  const openModal = (modal: ModalState): void => {
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+  };
+
+  const closeModal = (modal: ModalState): void => {
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+  };
+
+  const handleOpenModal = useCallback(
+    (pledge: InterfacePledgeInfo | null, mode: 'edit' | 'create'): void => {
+      setPledge(pledge);
+      setPledgeModalMode(mode);
+      openModal(ModalState.SAME);
+    },
+    [openModal],
+  );
+
+  const handleDeleteClick = useCallback(
+    (pledge: InterfacePledgeInfo): void => {
+      setPledge(pledge);
+      openModal(ModalState.DELETE);
+    },
+    [openModal],
+  );
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLElement>,
+    users: InterfaceUserInfo[],
+  ): void => {
+    setExtraUsers(users);
+    setAnchor(anchor ? null : event.currentTarget);
+  };
+
+  if (pledgeLoading) return <Loader size="xl" />;
+  if (pledgeError) {
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {tErrors('errorLoading', { entity: 'Pledges' })}
+            <br />
+            {pledgeError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'pledgers',
+      headerName: 'Pledgers',
+      flex: 3,
+      minWidth: 50,
+      align: 'left',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex flex-wrap gap-1" style={{ maxHeight: 120 }}>
+            {params.row.users
+              .slice(0, 2)
+              .map((user: InterfaceUserInfo, index: number) => (
+                <div className={styles.pledgerContainer} key={index}>
+                  {user.image ? (
+                    <img
+                      src={user.image}
+                      alt="pledge"
+                      data-testid={`image${index + 1}`}
+                      className={styles.TableImage}
+                    />
+                  ) : (
+                    <div className={styles.avatarContainer}>
+                      <Avatar
+                        key={user._id + '1'}
+                        containerStyle={styles.imageContainer}
+                        avatarStyle={styles.TableImage}
+                        name={user.firstName + ' ' + user.lastName}
+                        alt={user.firstName + ' ' + user.lastName}
+                      />
+                    </div>
+                  )}
+                  <span key={user._id + '2'}>
+                    {user.firstName + ' ' + user.lastName}
+                  </span>
+                </div>
+              ))}
+            {params.row.users.length > 2 && (
+              <div
+                className={styles.moreContainer}
+                aria-describedby={id}
+                data-testid="moreContainer"
+                onClick={(e) => handleClick(e, params.row.users.slice(2))}
+              >
+                <span>+{params.row.users.length - 2} more...</span>
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'startDate',
+      headerName: 'Start Date',
+      flex: 1,
+      minWidth: 150,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return dayjs(params.row.startDate).format('DD/MM/YYYY');
+      },
+    },
+    {
+      field: 'endDate',
+      headerName: 'End Date',
+      minWidth: 150,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return dayjs(params.row.endDate).format('DD/MM/YYYY');
+      },
+    },
+    {
+      field: 'amount',
+      headerName: 'Pledged',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="amountCell"
+          >
+            {
+              currencySymbols[
+                params.row.currency as keyof typeof currencySymbols
+              ]
+            }
+            {params.row.amount}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'donated',
+      headerName: 'Donated',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="paidCell"
+          >
+            {
+              currencySymbols[
+                params.row.currency as keyof typeof currencySymbols
+              ]
+            }
+            0
+          </div>
+        );
+      },
+    },
+    {
+      field: 'action',
+      headerName: 'Action',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              className="me-2 rounded"
+              data-testid="editPledgeBtn"
+              onClick={() =>
+                handleOpenModal(params.row as InterfacePledgeInfo, 'edit')
+              }
+            >
+              {' '}
+              <i className="fa fa-edit" />
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              className="rounded"
+              data-testid="deletePledgeBtn"
+              onClick={() =>
+                handleDeleteClick(params.row as InterfacePledgeInfo)
+              }
+            >
+              <i className="fa fa-trash" />
+            </Button>
+          </>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <Breadcrumbs aria-label="breadcrumb" className="ms-1">
+        <Link
+          underline="hover"
+          color="inherit"
+          component="button"
+          onClick={
+            /* istanbul ignore next */
+            () => history.go(-2)
+          }
+        >
+          {fundName}
+        </Link>
+        <Link
+          underline="hover"
+          color="inherit"
+          component="button"
+          onClick={
+            /* istanbul ignore next */
+            () => history.back()
+          }
+        >
+          {campaignInfo?.name}
+        </Link>
+        <Typography color="text.primary">{t('pledges')}</Typography>
+      </Breadcrumbs>
+      <div className={styles.overviewContainer}>
+        <div className={styles.titleContainer}>
+          <h3>{campaignInfo?.name}</h3>
+          <span>
+            {t('endsOn')} {campaignInfo?.endDate.toString()}
+          </span>
+        </div>
+        <div className={styles.progressContainer}>
+          <div className="d-flex justify-content-center">
+            <div
+              className={`btn-group ${styles.toggleGroup}`}
+              role="group"
+              aria-label="Toggle between Pledged and Raised amounts"
+            >
+              <input
+                type="radio"
+                className={`btn-check ${styles.toggleBtn}`}
+                name="btnradio"
+                id="pledgedRadio"
+                checked={progressIndicator === 'pledged'}
+                onChange={() => setProgressIndicator('pledged')}
+              />
+              <label
+                className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                htmlFor="pledgedRadio"
+              >
+                {t('pledgedAmount')}
+              </label>
+
+              <input
+                type="radio"
+                className={`btn-check`}
+                name="btnradio"
+                id="raisedRadio"
+                onChange={() => setProgressIndicator('raised')}
+                checked={progressIndicator === 'raised'}
+              />
+              <label
+                className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                htmlFor="raisedRadio"
+              >
+                {t('raisedAmount')}
+              </label>
+            </div>
+          </div>
+
+          <div className={styles.progress}>
+            <ProgressBar
+              now={progressIndicator === 'pledged' ? totalPledged : 0}
+              label={`$${progressIndicator === 'pledged' ? totalPledged : 0}`}
+              max={campaignInfo?.goal}
+              style={{ height: '1.5rem', fontSize: '0.9rem' }}
+              data-testid="progressBar"
+            />
+            <div className={styles.endpoints}>
+              <div className={styles.start}>$0</div>
+              <div className={styles.end}>${campaignInfo?.goal}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={t('searchPledger')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-testid="searchPledger"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center`}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <div className="d-flex justify-space-between">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('amount_ASC')}
+                  data-testid="amount_ASC"
+                >
+                  {t('lowestAmount')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('amount_DESC')}
+                  data-testid="amount_DESC"
+                >
+                  {t('highestAmount')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('endDate_DESC')}
+                  data-testid="endDate_DESC"
+                >
+                  {t('latestEndDate')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('endDate_ASC')}
+                  data-testid="endDate_ASC"
+                >
+                  {t('earliestEndDate')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              className={styles.orgFundCampaignButton}
+              disabled={endDate < new Date()}
+              onClick={() => handleOpenModal(null, 'create')}
+              data-testid="addPledgeBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('addPledge')}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noPledges')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={pledges.map((pledge) => ({
+          _id: pledge._id,
+          users: pledge.users,
+          startDate: pledge.startDate,
+          endDate: pledge.endDate,
+          amount: pledge.amount,
+          currency: pledge.currency,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+      {/* Update Pledge ModalState */}
+      <PledgeModal
+        isOpen={modalState[ModalState.SAME]}
+        hide={() => closeModal(ModalState.SAME)}
+        campaignId={fundCampaignId}
+        orgId={orgId}
+        pledge={pledge}
+        refetchPledge={refetchPledge}
+        endDate={pledgeData?.getFundraisingCampaigns[0].endDate as Date}
+        mode={pledgeModalMode}
+      />
+      {/* Delete Pledge ModalState */}
+      <PledgeDeleteModal
+        isOpen={modalState[ModalState.DELETE]}
+        hide={() => closeModal(ModalState.DELETE)}
+        pledge={pledge}
+        refetchPledge={refetchPledge}
+      />
+      <BasePopup
+        id={id}
+        open={open}
+        anchor={anchor}
+        disablePortal
+        className={`${styles.popup} ${extraUsers.length > 4 ? styles.popupExtra : ''}`}
+      >
+        {extraUsers.map((user: InterfaceUserInfo, index: number) => (
+          <div
+            className={styles.pledgerContainer}
+            key={index}
+            data-testid={`extra${index + 1}`}
+          >
+            {user.image ? (
+              <img
+                src={user.image}
+                alt="pledger"
+                data-testid={`extraImage${index + 1}`}
+                className={styles.TableImage}
+              />
+            ) : (
+              <div className={styles.avatarContainer}>
+                <Avatar
+                  key={user._id + '1'}
+                  containerStyle={styles.imageContainer}
+                  avatarStyle={styles.TableImage}
+                  name={user.firstName + ' ' + user.lastName}
+                  alt={user.firstName + ' ' + user.lastName}
+                  dataTestId={`extraAvatar${index + 1}`}
+                />
+              </div>
+            )}
+            <span key={user._id + '2'}>
+              {user.firstName + ' ' + user.lastName}
+            </span>
+          </div>
+        ))}
+      </BasePopup>
+    </div>
+  );
+};
+export default fundCampaignPledge;
diff --git a/src/screens/FundCampaignPledge/PledgeDeleteModal.test.tsx b/src/screens/FundCampaignPledge/PledgeDeleteModal.test.tsx
new file mode 100644
index 0000000000..dbaae76504
--- /dev/null
+++ b/src/screens/FundCampaignPledge/PledgeDeleteModal.test.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import type { InterfaceDeletePledgeModal } from './PledgeDeleteModal';
+import PledgeDeleteModal from './PledgeDeleteModal';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS_DELETE_PLEDGE_ERROR, MOCKS } from './PledgesMocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_DELETE_PLEDGE_ERROR);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges),
+);
+
+const pledgeProps: InterfaceDeletePledgeModal = {
+  isOpen: true,
+  hide: jest.fn(),
+  pledge: {
+    _id: '1',
+    amount: 100,
+    currency: 'USD',
+    startDate: '2024-01-01',
+    endDate: '2024-01-10',
+    users: [
+      {
+        _id: '1',
+        firstName: 'John',
+        lastName: 'Doe',
+        image: 'img-url',
+      },
+    ],
+  },
+  refetchPledge: jest.fn(),
+};
+
+const renderPledgeDeleteModal = (
+  link: ApolloLink,
+  props: InterfaceDeletePledgeModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PledgeDeleteModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('PledgeDeleteModal', () => {
+  it('should render PledgeDeleteModal', () => {
+    renderPledgeDeleteModal(link, pledgeProps);
+    expect(screen.getByTestId('deletePledgeCloseBtn')).toBeInTheDocument();
+  });
+
+  it('should successfully Delete pledge', async () => {
+    renderPledgeDeleteModal(link, pledgeProps);
+    expect(screen.getByTestId('deletePledgeCloseBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('deleteyesbtn'));
+
+    await waitFor(() => {
+      expect(pledgeProps.refetchPledge).toHaveBeenCalled();
+      expect(pledgeProps.hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(translations.pledgeDeleted);
+    });
+  });
+
+  it('should fail to Delete pledge', async () => {
+    renderPledgeDeleteModal(link2, pledgeProps);
+    expect(screen.getByTestId('deletePledgeCloseBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('deleteyesbtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Error deleting pledge');
+    });
+  });
+});
diff --git a/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx b/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
new file mode 100644
index 0000000000..288baa16ef
--- /dev/null
+++ b/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
@@ -0,0 +1,103 @@
+import { Button, Modal } from 'react-bootstrap';
+import styles from './FundCampaignPledge.module.css';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import { DELETE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
+import type { InterfacePledgeInfo } from 'utils/interfaces';
+import { toast } from 'react-toastify';
+
+export interface InterfaceDeletePledgeModal {
+  isOpen: boolean;
+  hide: () => void;
+  pledge: InterfacePledgeInfo | null;
+  refetchPledge: () => void;
+}
+
+/**
+ * A modal dialog for confirming the deletion of a pledge.
+ *
+ * @param  isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param  pledge - The pledge object to be deleted.
+ * @param refetchPledge - Function to refetch the pledges after deletion.
+ *
+ * @returns  The rendered modal component.
+ *
+ *
+ * The `PledgeDeleteModal` component displays a confirmation dialog when a user attempts to delete a pledge.
+ * It allows the user to either confirm or cancel the deletion.
+ * On confirmation, the `deletePledge` mutation is called to remove the pledge from the database,
+ * and the `refetchPledge` function is invoked to update the list of pledges.
+ * A success or error toast notification is shown based on the result of the deletion operation.
+ *
+ * The modal includes:
+ * - A header with a title and a close button.
+ * - A body with a message asking for confirmation.
+ * - A footer with "Yes" and "No" buttons to confirm or cancel the deletion.
+ *
+ * The `deletePledge` mutation is used to perform the deletion operation.
+ */
+
+const PledgeDeleteModal: React.FC<InterfaceDeletePledgeModal> = ({
+  isOpen,
+  hide,
+  pledge,
+  refetchPledge,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'pledges',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [deletePledge] = useMutation(DELETE_PLEDGE);
+
+  const deleteHandler = async (): Promise<void> => {
+    try {
+      await deletePledge({
+        variables: {
+          id: pledge?._id,
+        },
+      });
+      refetchPledge();
+      hide();
+      toast.success(t('pledgeDeleted') as string);
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+  return (
+    <>
+      <Modal className={styles.pledgeModal} onHide={hide} show={isOpen}>
+        <Modal.Header>
+          <p className={styles.titlemodal}> {t('deletePledge')}</p>
+          <Button
+            variant="danger"
+            onClick={hide}
+            className={styles.modalCloseBtn}
+            data-testid="deletePledgeCloseBtn"
+          >
+            {' '}
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <p> {t('deletePledgeMsg')}</p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            onClick={deleteHandler}
+            data-testid="deleteyesbtn"
+          >
+            {tCommon('yes')}
+          </Button>
+          <Button variant="secondary" onClick={hide} data-testid="deletenobtn">
+            {tCommon('no')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+export default PledgeDeleteModal;
diff --git a/src/screens/FundCampaignPledge/PledgeModal.test.tsx b/src/screens/FundCampaignPledge/PledgeModal.test.tsx
new file mode 100644
index 0000000000..50d6c94624
--- /dev/null
+++ b/src/screens/FundCampaignPledge/PledgeModal.test.tsx
@@ -0,0 +1,213 @@
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { PLEDGE_MODAL_MOCKS } from './PledgesMocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfacePledgeModal } from './PledgeModal';
+import PledgeModal from './PledgeModal';
+import React from 'react';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const link1 = new StaticMockLink(PLEDGE_MODAL_MOCKS);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges),
+);
+
+const pledgeProps: InterfacePledgeModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    pledge: {
+      _id: '1',
+      amount: 100,
+      currency: 'USD',
+      startDate: '2024-01-01',
+      endDate: '2024-01-10',
+      users: [
+        {
+          _id: '1',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: undefined,
+        },
+      ],
+    },
+    refetchPledge: jest.fn(),
+    campaignId: 'campaignId',
+    orgId: 'orgId',
+    endDate: new Date(),
+    mode: 'create',
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    pledge: {
+      _id: '1',
+      amount: 100,
+      currency: 'USD',
+      startDate: '2024-01-01',
+      endDate: '2024-01-10',
+      users: [
+        {
+          _id: '1',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: undefined,
+        },
+      ],
+    },
+    refetchPledge: jest.fn(),
+    campaignId: 'campaignId',
+    orgId: 'orgId',
+    endDate: new Date(),
+    mode: 'edit',
+  },
+];
+const renderPledgeModal = (
+  link: ApolloLink,
+  props: InterfacePledgeModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PledgeModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('PledgeModal', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', fundCampaignId: 'fundCampaignId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+  it('should populate form fields with correct values in edit mode', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    await waitFor(() =>
+      expect(screen.getByText(translations.editPledge)).toBeInTheDocument(),
+    );
+    expect(screen.getByTestId('pledgerSelect')).toHaveTextContent('John Doe');
+    expect(screen.getByLabelText('Start Date')).toHaveValue('01/01/2024');
+    expect(screen.getByLabelText('End Date')).toHaveValue('10/01/2024');
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD ($)');
+    expect(screen.getByLabelText('Amount')).toHaveValue('100');
+  });
+
+  it('should update pledgeAmount when input value changes', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const amountInput = screen.getByLabelText('Amount');
+    expect(amountInput).toHaveValue('100');
+    fireEvent.change(amountInput, { target: { value: '200' } });
+    expect(amountInput).toHaveValue('200');
+  });
+
+  it('should not update pledgeAmount when input value is less than or equal to 0', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const amountInput = screen.getByLabelText('Amount');
+    expect(amountInput).toHaveValue('100');
+    fireEvent.change(amountInput, { target: { value: '-10' } });
+    expect(amountInput).toHaveValue('100');
+  });
+
+  it('should update pledgeStartDate when a new date is selected', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const startDateInput = screen.getByLabelText('Start Date');
+    fireEvent.change(startDateInput, { target: { value: '02/01/2024' } });
+    expect(startDateInput).toHaveValue('02/01/2024');
+    expect(pledgeProps[1].pledge?.startDate).toEqual('2024-01-01');
+  });
+
+  it('pledgeStartDate onChange when its null', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const startDateInput = screen.getByLabelText('Start Date');
+    fireEvent.change(startDateInput, { target: { value: null } });
+    expect(pledgeProps[1].pledge?.startDate).toEqual('2024-01-01');
+  });
+
+  it('should update pledgeEndDate when a new date is selected', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const startDateInput = screen.getByLabelText('End Date');
+    fireEvent.change(startDateInput, { target: { value: '02/01/2024' } });
+    expect(startDateInput).toHaveValue('02/01/2024');
+    expect(pledgeProps[1].pledge?.endDate).toEqual('2024-01-10');
+  });
+
+  it('pledgeEndDate onChange when its null', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const endDateInput = screen.getByLabelText('End Date');
+    fireEvent.change(endDateInput, { target: { value: null } });
+    expect(pledgeProps[1].pledge?.endDate).toEqual('2024-01-10');
+  });
+
+  it('should create pledge', async () => {
+    renderPledgeModal(link1, pledgeProps[0]);
+
+    fireEvent.change(screen.getByLabelText('Amount'), {
+      target: { value: '200' },
+    });
+    fireEvent.change(screen.getByLabelText('Start Date'), {
+      target: { value: '02/01/2024' },
+    });
+    fireEvent.change(screen.getByLabelText('End Date'), {
+      target: { value: '02/01/2024' },
+    });
+
+    expect(screen.getByLabelText('Amount')).toHaveValue('200');
+    expect(screen.getByLabelText('Start Date')).toHaveValue('02/01/2024');
+    expect(screen.getByLabelText('End Date')).toHaveValue('02/01/2024');
+    expect(screen.getByTestId('submitPledgeBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('submitPledgeBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalled();
+      expect(pledgeProps[0].refetchPledge).toHaveBeenCalled();
+      expect(pledgeProps[0].hide).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/FundCampaignPledge/PledgeModal.tsx b/src/screens/FundCampaignPledge/PledgeModal.tsx
new file mode 100644
index 0000000000..911d90e77e
--- /dev/null
+++ b/src/screens/FundCampaignPledge/PledgeModal.tsx
@@ -0,0 +1,356 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import dayjs, { type Dayjs } from 'dayjs';
+import type { ChangeEvent } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { currencyOptions, currencySymbols } from 'utils/currency';
+import type {
+  InterfaceCreatePledge,
+  InterfacePledgeInfo,
+  InterfaceUserInfo,
+} from 'utils/interfaces';
+import styles from './FundCampaignPledge.module.css';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
+import { CREATE_PlEDGE, UPDATE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
+import { toast } from 'react-toastify';
+import {
+  Autocomplete,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
+
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+
+export interface InterfacePledgeModal {
+  isOpen: boolean;
+  hide: () => void;
+  campaignId: string;
+  orgId: string;
+  pledge: InterfacePledgeInfo | null;
+  refetchPledge: () => void;
+  endDate: Date;
+  mode: 'create' | 'edit';
+}
+
+/**
+ * A modal dialog for creating or editing a pledge.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param campaignId - The ID of the campaign associated with the pledge.
+ * @param orgId - The ID of the organization associated with the pledge.
+ * @param pledge - The pledge object to be edited, or `null` if creating a new pledge.
+ * @param refetchPledge - Function to refetch the list of pledges after creation or update.
+ * @param endDate - The end date of the campaign to ensure pledge dates are within this range.
+ * @param mode - The mode indicating whether the modal is for creating a new pledge or editing an existing one.
+ *
+ * @returns The rendered modal component.
+ *
+ * The `PledgeModal` component displays a form within a modal dialog for creating or editing a pledge.
+ * It includes fields for selecting users, entering an amount, choosing a currency, and setting start and end dates for the pledge.
+ *
+ * The modal includes:
+ * - A header with a title indicating the current mode (create or edit) and a close button.
+ * - A form with:
+ *   - A multi-select dropdown for selecting users to participate in the pledge.
+ *   - Date pickers for selecting the start and end dates of the pledge.
+ *   - A dropdown for selecting the currency of the pledge amount.
+ *   - An input field for entering the pledge amount.
+ * - A submit button to create or update the pledge.
+ *
+ * On form submission, the component either:
+ * - Calls `updatePledge` mutation to update an existing pledge, or
+ * - Calls `createPledge` mutation to create a new pledge.
+ *
+ * Success or error messages are displayed using toast notifications based on the result of the mutation.
+ */
+
+const PledgeModal: React.FC<InterfacePledgeModal> = ({
+  isOpen,
+  hide,
+  campaignId,
+  orgId,
+  pledge,
+  refetchPledge,
+  endDate,
+  mode,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'pledges',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [formState, setFormState] = useState<InterfaceCreatePledge>({
+    pledgeUsers: [],
+    pledgeAmount: pledge?.amount ?? 0,
+    pledgeCurrency: pledge?.currency ?? 'USD',
+    pledgeEndDate: new Date(pledge?.endDate ?? new Date()),
+    pledgeStartDate: new Date(pledge?.startDate ?? new Date()),
+  });
+  const [pledgers, setPledgers] = useState<InterfaceUserInfo[]>([]);
+  const [updatePledge] = useMutation(UPDATE_PLEDGE);
+  const [createPledge] = useMutation(CREATE_PlEDGE);
+
+  const { data: memberData } = useQuery(MEMBERS_LIST, {
+    variables: { id: orgId },
+  });
+
+  useEffect(() => {
+    setFormState({
+      pledgeUsers: pledge?.users ?? [],
+      pledgeAmount: pledge?.amount ?? 0,
+      pledgeCurrency: pledge?.currency ?? 'USD',
+      pledgeEndDate: new Date(pledge?.endDate ?? new Date()),
+      pledgeStartDate: new Date(pledge?.startDate ?? new Date()),
+    });
+  }, [pledge]);
+
+  useEffect(() => {
+    if (memberData) {
+      /*istanbul ignore next*/
+      setPledgers(memberData.organizations[0].members);
+    }
+  }, [memberData]);
+
+  const {
+    pledgeUsers,
+    pledgeAmount,
+    pledgeCurrency,
+    pledgeStartDate,
+    pledgeEndDate,
+  } = formState;
+
+  /*istanbul ignore next*/
+  const updatePledgeHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      e.preventDefault();
+      const startDate = dayjs(pledgeStartDate).format('YYYY-MM-DD');
+      const endDate = dayjs(pledgeEndDate).format('YYYY-MM-DD');
+
+      const updatedFields: {
+        [key: string]: number | string | string[] | undefined;
+      } = {};
+      // checks if there are changes to the pledge and adds them to the updatedFields object
+      if (pledgeAmount !== pledge?.amount) {
+        updatedFields.amount = pledgeAmount;
+      }
+      if (pledgeCurrency !== pledge?.currency) {
+        updatedFields.currency = pledgeCurrency;
+      }
+      if (startDate !== dayjs(pledge?.startDate).format('YYYY-MM-DD')) {
+        updatedFields.startDate = startDate;
+      }
+      if (endDate !== dayjs(pledge?.endDate).format('YYYY-MM-DD')) {
+        updatedFields.endDate = endDate;
+      }
+      if (pledgeUsers !== pledge?.users) {
+        updatedFields.users = pledgeUsers.map((user) => user._id);
+      }
+      try {
+        await updatePledge({
+          variables: {
+            id: pledge?._id,
+            ...updatedFields,
+          },
+        });
+        toast.success(t('pledgeUpdated') as string);
+        refetchPledge();
+        hide();
+      } catch (error: unknown) {
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, pledge],
+  );
+
+  // Function to create a new pledge
+  const createPledgeHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      try {
+        e.preventDefault();
+        await createPledge({
+          variables: {
+            campaignId,
+            amount: pledgeAmount,
+            currency: pledgeCurrency,
+            startDate: dayjs(pledgeStartDate).format('YYYY-MM-DD'),
+            endDate: dayjs(pledgeEndDate).format('YYYY-MM-DD'),
+            userIds: pledgeUsers.map((user) => user._id),
+          },
+        });
+
+        toast.success(t('pledgeCreated') as string);
+        refetchPledge();
+        setFormState({
+          pledgeUsers: [],
+          pledgeAmount: 0,
+          pledgeCurrency: 'USD',
+          pledgeEndDate: new Date(),
+          pledgeStartDate: new Date(),
+        });
+        hide();
+      } catch (error: unknown) {
+        /*istanbul ignore next*/
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, campaignId],
+  );
+
+  return (
+    <Modal className={styles.pledgeModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>
+          {t(mode === 'edit' ? 'editPledge' : 'createPledge')}
+        </p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="pledgeModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form
+          data-testid="pledgeForm"
+          onSubmitCapture={
+            mode === 'edit' ? updatePledgeHandler : createPledgeHandler
+          }
+          className="p-3"
+        >
+          {/* A Multi-select dropdown enables admin to select more than one pledger for participating in a pledge */}
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              multiple
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="pledgerSelect"
+              options={pledgers}
+              value={pledgeUsers}
+              isOptionEqualToValue={(option, value) => option._id === value._id}
+              filterSelectedOptions={true}
+              getOptionLabel={(member: InterfaceUserInfo): string =>
+                `${member.firstName} ${member.lastName}`
+              }
+              onChange={
+                /*istanbul ignore next*/
+                (_, newPledgers): void => {
+                  setFormState({
+                    ...formState,
+                    pledgeUsers: newPledgers,
+                  });
+                }
+              }
+              renderInput={(params) => (
+                <TextField {...params} label="Pledgers" />
+              )}
+            />
+          </Form.Group>
+          <Form.Group className="d-flex gap-3 mx-auto  mb-3">
+            {/* Date Calendar Component to select start date of an event */}
+            <DatePicker
+              format="DD/MM/YYYY"
+              label={tCommon('startDate')}
+              value={dayjs(pledgeStartDate)}
+              className={styles.noOutline}
+              onChange={(date: Dayjs | null): void => {
+                if (date) {
+                  setFormState({
+                    ...formState,
+                    pledgeStartDate: date.toDate(),
+                    pledgeEndDate:
+                      pledgeEndDate &&
+                      /*istanbul ignore next*/
+                      (pledgeEndDate < date?.toDate()
+                        ? date.toDate()
+                        : pledgeEndDate),
+                  });
+                }
+              }}
+              minDate={dayjs(pledgeStartDate)}
+              maxDate={dayjs(endDate)}
+            />
+            {/* Date Calendar Component to select end Date of an event */}
+            <DatePicker
+              format="DD/MM/YYYY"
+              label={tCommon('endDate')}
+              className={styles.noOutline}
+              value={dayjs(pledgeEndDate)}
+              onChange={(date: Dayjs | null): void => {
+                if (date) {
+                  setFormState({
+                    ...formState,
+                    pledgeEndDate: date.toDate(),
+                  });
+                }
+              }}
+              minDate={dayjs(pledgeStartDate)}
+              maxDate={dayjs(endDate)}
+            />
+          </Form.Group>
+          <Form.Group className="d-flex gap-3 mb-4">
+            {/* Dropdown to select the currency in which amount is to be pledged */}
+            <FormControl fullWidth>
+              <InputLabel id="demo-simple-select-label">
+                {t('currency')}
+              </InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                value={pledgeCurrency}
+                label={t('currency')}
+                data-testid="currencySelect"
+                onChange={
+                  /*istanbul ignore next*/
+                  (e) => {
+                    setFormState({
+                      ...formState,
+                      pledgeCurrency: e.target.value,
+                    });
+                  }
+                }
+              >
+                {currencyOptions.map((currency) => (
+                  <MenuItem key={currency.label} value={currency.value}>
+                    {currency.label} ({currencySymbols[currency.value]})
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            {/* Input field to enter amount to be pledged */}
+            <FormControl fullWidth>
+              <TextField
+                label={t('amount')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={pledgeAmount}
+                onChange={(e) => {
+                  if (parseInt(e.target.value) > 0) {
+                    setFormState({
+                      ...formState,
+                      pledgeAmount: parseInt(e.target.value),
+                    });
+                  }
+                }}
+              />
+            </FormControl>
+          </Form.Group>
+          {/* Button to submit the pledge form */}
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            data-testid="submitPledgeBtn"
+          >
+            {t(mode === 'edit' ? 'updatePledge' : 'createPledge')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default PledgeModal;
diff --git a/src/screens/FundCampaignPledge/PledgesMocks.ts b/src/screens/FundCampaignPledge/PledgesMocks.ts
new file mode 100644
index 0000000000..2a583fa887
--- /dev/null
+++ b/src/screens/FundCampaignPledge/PledgesMocks.ts
@@ -0,0 +1,457 @@
+import {
+  CREATE_PlEDGE,
+  DELETE_PLEDGE,
+  UPDATE_PLEDGE,
+} from 'GraphQl/Mutations/PledgeMutation';
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+import { FUND_CAMPAIGN_PLEDGE } from 'GraphQl/Queries/fundQueries';
+
+const memberList = {
+  request: {
+    query: MEMBERS_LIST,
+    variables: {
+      id: 'orgId',
+    },
+  },
+  result: {
+    data: {
+      organizations: [
+        {
+          _id: 'orgId',
+          members: [
+            {
+              createdAt: '2023-04-13T04:53:17.742Z',
+              email: 'testuser4@example.com',
+              firstName: 'John',
+              image: 'img-url',
+              lastName: 'Doe',
+              organizationsBlockedBy: [],
+              __typename: 'User',
+              _id: '1',
+            },
+            {
+              createdAt: '2024-04-13T04:53:17.742Z',
+              email: 'testuser2@example.com',
+              firstName: 'Anna',
+              image: null,
+              lastName: 'Bradley',
+              organizationsBlockedBy: [],
+              __typename: 'User',
+              _id: '2',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export const MOCKS = [
+  memberList,
+  {
+    request: {
+      query: FUND_CAMPAIGN_PLEDGE,
+      variables: {
+        where: {
+          id: 'fundCampaignId',
+        },
+        pledgeOrderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            fundId: {
+              name: 'Fund 1',
+            },
+            name: 'Campaign Name',
+            fundingGoal: 1000,
+            currency: 'USD',
+            startDate: '2024-01-01',
+            endDate: '2034-08-08',
+            pledges: [
+              {
+                _id: '1',
+                amount: 100,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-10',
+                users: [
+                  {
+                    _id: '1',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: 'img-url',
+                  },
+                ],
+              },
+              {
+                _id: '2',
+                amount: 200,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-09',
+                users: [
+                  {
+                    _id: '2',
+                    firstName: 'Jane',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN_PLEDGE,
+      variables: {
+        where: {
+          id: 'fundCampaignId',
+        },
+        pledgeOrderBy: 'endDate_ASC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            fundId: {
+              name: 'Fund 1',
+            },
+            name: 'Campaign Name',
+            fundingGoal: 1000,
+            currency: 'USD',
+            startDate: '2024-01-01',
+            endDate: '2024-08-08',
+            pledges: [
+              {
+                _id: '2',
+                amount: 200,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-09',
+                users: [
+                  {
+                    _id: '2',
+                    firstName: 'Jane',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                ],
+              },
+              {
+                _id: '1',
+                amount: 100,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-10',
+                users: [
+                  {
+                    _id: '1',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN_PLEDGE,
+      variables: {
+        where: {
+          id: 'fundCampaignId',
+        },
+        pledgeOrderBy: 'amount_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            fundId: {
+              name: 'Fund 1',
+            },
+            name: 'Campaign Name',
+            fundingGoal: 1000,
+            currency: 'USD',
+            startDate: '2024-01-01',
+            endDate: '2024-08-08',
+            pledges: [
+              {
+                _id: '2',
+                amount: 200,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-09',
+                users: [
+                  {
+                    _id: '2',
+                    firstName: 'Jane',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                  {
+                    _id: '2',
+                    firstName: 'John',
+                    lastName: 'Doe2',
+                    image: 'img-url2',
+                  },
+                  {
+                    _id: '3',
+                    firstName: 'John',
+                    lastName: 'Doe3',
+                    image: 'img-url3',
+                  },
+                  {
+                    _id: '4',
+                    firstName: 'John',
+                    lastName: 'Doe4',
+                    image: 'img-url4',
+                  },
+                  {
+                    _id: '5',
+                    firstName: 'John',
+                    lastName: 'Doe5',
+                    image: 'img-url5',
+                  },
+                  {
+                    _id: '6',
+                    firstName: 'John',
+                    lastName: 'Doe6',
+                    image: 'img-url6',
+                  },
+                  {
+                    _id: '7',
+                    firstName: 'John',
+                    lastName: 'Doe7',
+                    image: 'img-url7',
+                  },
+                  {
+                    _id: '8',
+                    firstName: 'John',
+                    lastName: 'Doe8',
+                    image: 'img-url8',
+                  },
+                  {
+                    _id: '9',
+                    firstName: 'John',
+                    lastName: 'Doe9',
+                    image: 'img-url9',
+                  },
+                  {
+                    _id: '10',
+                    firstName: 'John',
+                    lastName: 'Doe10',
+                    image: null,
+                  },
+                ],
+              },
+              {
+                _id: '1',
+                amount: 100,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-10',
+                users: [
+                  {
+                    _id: '1',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN_PLEDGE,
+      variables: {
+        where: {
+          id: 'fundCampaignId',
+        },
+        pledgeOrderBy: 'amount_ASC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            fundId: {
+              name: 'Fund 1',
+            },
+            name: 'Campaign Name',
+            fundingGoal: 1000,
+            currency: 'USD',
+            startDate: '2024-01-01',
+            endDate: '2024-08-08',
+            pledges: [
+              {
+                _id: '1',
+                amount: 100,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-10',
+                users: [
+                  {
+                    _id: '1',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                ],
+              },
+              {
+                _id: '2',
+                amount: 200,
+                currency: 'USD',
+                startDate: '2024-01-01',
+                endDate: '2024-01-09',
+                users: [
+                  {
+                    _id: '2',
+                    firstName: 'Jane',
+                    lastName: 'Doe',
+                    image: null,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_PLEDGE,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        removeFundraisingCampaignPledge: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_FUND_CAMPAIGN_PLEDGE_ERROR = [
+  memberList,
+  {
+    request: {
+      query: FUND_CAMPAIGN_PLEDGE,
+      variables: {
+        where: {
+          id: 'fundCampaignId',
+        },
+        pledgeOrderBy: 'endDate_DESC',
+      },
+    },
+    error: new Error('Error fetching pledges'),
+  },
+];
+
+export const MOCKS_DELETE_PLEDGE_ERROR = [
+  memberList,
+  {
+    request: {
+      query: DELETE_PLEDGE,
+      variables: {
+        id: '1',
+      },
+    },
+    error: new Error('Error deleting pledge'),
+  },
+];
+
+export const EMPTY_MOCKS = [
+  memberList,
+  {
+    request: {
+      query: FUND_CAMPAIGN_PLEDGE,
+      variables: {
+        where: {
+          id: 'fundCampaignId',
+        },
+        pledgeOrderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            fundId: {
+              name: 'Fund 1',
+            },
+            name: 'Campaign Name',
+            fundingGoal: 1000,
+            currency: 'USD',
+            startDate: '2024-01-01',
+            endDate: '2024-01-01',
+            pledges: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const PLEDGE_MODAL_MOCKS = [
+  memberList,
+  {
+    request: {
+      query: UPDATE_PLEDGE,
+      variables: {
+        id: '1',
+        amount: 200,
+      },
+    },
+    result: {
+      data: {
+        updateFundraisingCampaignPledge: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_PlEDGE,
+      variables: {
+        campaignId: 'campaignId',
+        amount: 200,
+        currency: 'USD',
+        startDate: '2024-01-02',
+        endDate: '2024-01-02',
+        userIds: ['1'],
+      },
+    },
+    result: {
+      data: {
+        createFundraisingCampaignPledge: {
+          _id: '3',
+        },
+      },
+    },
+  },
+];
diff --git a/src/screens/Leaderboard/Leaderboard.mocks.ts b/src/screens/Leaderboard/Leaderboard.mocks.ts
new file mode 100644
index 0000000000..b6b22c832a
--- /dev/null
+++ b/src/screens/Leaderboard/Leaderboard.mocks.ts
@@ -0,0 +1,198 @@
+import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
+
+const rank1 = {
+  rank: 1,
+  hoursVolunteered: 5,
+  user: {
+    _id: 'userId1',
+    lastName: 'Bradley',
+    firstName: 'Teresa',
+    image: 'image-url',
+    email: 'testuser4@example.com',
+  },
+};
+
+const rank2 = {
+  rank: 2,
+  hoursVolunteered: 4,
+  user: {
+    _id: 'userId2',
+    lastName: 'Garza',
+    firstName: 'Bruce',
+    image: null,
+    email: 'testuser5@example.com',
+  },
+};
+
+const rank3 = {
+  rank: 3,
+  hoursVolunteered: 3,
+  user: {
+    _id: 'userId3',
+    lastName: 'Doe',
+    firstName: 'John',
+    image: null,
+    email: 'testuser6@example.com',
+  },
+};
+
+const rank4 = {
+  rank: 4,
+  hoursVolunteered: 2,
+  user: {
+    _id: 'userId4',
+    lastName: 'Doe',
+    firstName: 'Jane',
+    image: null,
+    email: 'testuser7@example.com',
+  },
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          nameContains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [rank1, rank2, rank3, rank4],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_ASC',
+          timeFrame: 'allTime',
+          nameContains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [rank4, rank3, rank2, rank1],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'weekly',
+          nameContains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [rank1],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'monthly',
+          nameContains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [rank1, rank2],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'yearly',
+          nameContains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [rank1, rank2, rank3],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          nameContains: 'T',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [rank1],
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          nameContains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          nameContains: '',
+        },
+      },
+    },
+    error: new Error('Mock Graphql VOLUNTEER_RANKING Error'),
+  },
+];
diff --git a/src/screens/Leaderboard/Leaderboard.test.tsx b/src/screens/Leaderboard/Leaderboard.test.tsx
new file mode 100644
index 0000000000..d2f12a9052
--- /dev/null
+++ b/src/screens/Leaderboard/Leaderboard.test.tsx
@@ -0,0 +1,264 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import Leaderboard from './Leaderboard';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, EMPTY_MOCKS, ERROR_MOCKS } from './Leaderboard.mocks';
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(i18n.getDataByLanguage('en')?.translation.leaderboard ?? {}),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderLeaderboard = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/leaderboard/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/leaderboard/:orgId" element={<Leaderboard />} />
+                <Route
+                  path="/member/:orgId"
+                  element={<div data-testid="memberScreen" />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Leaderboard Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/leaderboard/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/leaderboard/" element={<Leaderboard />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Leaderboard screen', async () => {
+    renderLeaderboard(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderLeaderboard(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    const sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by hours_DESC
+    fireEvent.click(sortBtn);
+    const hoursDesc = await screen.findByTestId('hours_DESC');
+    expect(hoursDesc).toBeInTheDocument();
+    fireEvent.click(hoursDesc);
+
+    let userName = await screen.findAllByTestId('userName');
+    expect(userName[0]).toHaveTextContent('Teresa Bradley');
+
+    // Sort by hours_ASC
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const hoursAsc = await screen.findByTestId('hours_ASC');
+    expect(hoursAsc).toBeInTheDocument();
+    fireEvent.click(hoursAsc);
+
+    userName = await screen.findAllByTestId('userName');
+    expect(userName[0]).toHaveTextContent('Jane Doe');
+  });
+
+  it('Check Timeframe filter Functionality (All Time)', async () => {
+    renderLeaderboard(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    // Filter by allTime
+    const filter = await screen.findByTestId('timeFrame');
+    expect(filter).toBeInTheDocument();
+
+    fireEvent.click(filter);
+    const timeFrameAll = await screen.findByTestId('timeFrameAll');
+    expect(timeFrameAll).toBeInTheDocument();
+
+    fireEvent.click(timeFrameAll);
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(4);
+  });
+
+  it('Check Timeframe filter Functionality (Weekly)', async () => {
+    renderLeaderboard(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    const filter = await screen.findByTestId('timeFrame');
+    expect(filter).toBeInTheDocument();
+
+    // Filter by weekly
+    expect(filter).toBeInTheDocument();
+    fireEvent.click(filter);
+
+    const timeFrameWeekly = await screen.findByTestId('timeFrameWeekly');
+    expect(timeFrameWeekly).toBeInTheDocument();
+    fireEvent.click(timeFrameWeekly);
+
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(1);
+  });
+
+  it('Check Timeframe filter Functionality (Monthly)', async () => {
+    renderLeaderboard(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    // Filter by monthly
+    const filter = await screen.findByTestId('timeFrame');
+    expect(filter).toBeInTheDocument();
+    fireEvent.click(filter);
+
+    const timeFrameMonthly = await screen.findByTestId('timeFrameMonthly');
+    expect(timeFrameMonthly).toBeInTheDocument();
+    fireEvent.click(timeFrameMonthly);
+
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(2);
+  });
+
+  it('Check Timeframe filter Functionality (Yearly)', async () => {
+    renderLeaderboard(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+    });
+
+    // Filter by yearly
+    const filter = await screen.findByTestId('timeFrame');
+    expect(filter).toBeInTheDocument();
+    fireEvent.click(filter);
+
+    const timeFrameYearly = await screen.findByTestId('timeFrameYearly');
+    expect(timeFrameYearly).toBeInTheDocument();
+    fireEvent.click(timeFrameYearly);
+
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(3);
+  });
+
+  it('Search Volunteers', async () => {
+    renderLeaderboard(link1);
+
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, 'T');
+    await debounceWait();
+
+    await waitFor(() => {
+      const userName = screen.getAllByTestId('userName');
+      expect(userName).toHaveLength(1);
+    });
+  });
+
+  it('OnClick of Member navigate to Member Screen', async () => {
+    renderLeaderboard(link1);
+
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const userName = screen.getAllByTestId('userName');
+    userEvent.click(userName[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('memberScreen')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Leaderboard screen with No Volunteers', async () => {
+    renderLeaderboard(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noVolunteers)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching volunteer data', async () => {
+    renderLeaderboard(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/Leaderboard/Leaderboard.tsx b/src/screens/Leaderboard/Leaderboard.tsx
new file mode 100644
index 0000000000..c5ad7a2efe
--- /dev/null
+++ b/src/screens/Leaderboard/Leaderboard.tsx
@@ -0,0 +1,372 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+
+import {
+  FilterAltOutlined,
+  Search,
+  Sort,
+  WarningAmberRounded,
+} from '@mui/icons-material';
+import gold from 'assets/images/gold.png';
+import silver from 'assets/images/silver.png';
+import bronze from 'assets/images/bronze.png';
+
+import type { InterfaceVolunteerRank } from 'utils/interfaces';
+import styles from '../OrganizationActionItems/OrganizationActionItems.module.css';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { debounce, Stack } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
+import { useQuery } from '@apollo/client';
+
+enum TimeFrame {
+  All = 'allTime',
+  Weekly = 'weekly',
+  Monthly = 'monthly',
+  Yearly = 'yearly',
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Component to display the leaderboard of volunteers.
+ *
+ * This component shows a leaderboard of volunteers ranked by hours contributed,
+ * with features for filtering by time frame and sorting by hours. It displays
+ * volunteer details including rank, name, email, and hours volunteered.
+ *
+ * @returns The rendered component.
+ */
+function leaderboard(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'leaderboard',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Get the organization ID from URL parameters
+  const { orgId } = useParams();
+
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const navigate = useNavigate();
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<'hours_ASC' | 'hours_DESC'>(
+    'hours_DESC',
+  );
+  const [timeFrame, setTimeFrame] = useState<TimeFrame>(TimeFrame.All);
+
+  /**
+   * Query to fetch volunteer rankings.
+   */
+  const {
+    data: rankingsData,
+    loading: rankingsLoading,
+    error: rankingsError,
+  }: {
+    data?: {
+      getVolunteerRanks: InterfaceVolunteerRank[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+  } = useQuery(VOLUNTEER_RANKING, {
+    variables: {
+      orgId,
+      where: {
+        orderBy: sortBy,
+        timeFrame: timeFrame,
+        nameContains: searchTerm,
+      },
+    },
+  });
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const rankings = useMemo(
+    () => rankingsData?.getVolunteerRanks || [],
+    [rankingsData],
+  );
+
+  if (rankingsLoading) {
+    return <Loader size="xl" />;
+  }
+
+  if (rankingsError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Volunteer Rankings' })}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'rank',
+      headerName: 'Rank',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        if (params.row.rank === 1) {
+          return (
+            <>
+              <img src={gold} alt="gold" className={styles.rankings} />
+            </>
+          );
+        } else if (params.row.rank === 2) {
+          return (
+            <>
+              <img src={silver} alt="silver" className={styles.rankings} />
+            </>
+          );
+        } else if (params.row.rank === 3) {
+          return (
+            <>
+              <img src={bronze} alt="bronze" className={styles.rankings} />
+            </>
+          );
+        } else return <>{params.row.rank}</>;
+      },
+    },
+    {
+      field: 'volunteer',
+      headerName: 'Volunteer',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { _id, firstName, lastName, image } = params.row.user;
+
+        return (
+          <>
+            <div
+              className="d-flex fw-bold align-items-center ms-5 "
+              style={{ cursor: 'pointer' }}
+              onClick={() =>
+                navigate(`/member/${orgId}`, { state: { id: _id } })
+              }
+              data-testid="userName"
+            >
+              {image ? (
+                <img
+                  src={image}
+                  alt="User"
+                  data-testid={`image${_id + 1}`}
+                  className={styles.TableImage}
+                />
+              ) : (
+                <div className={styles.avatarContainer}>
+                  <Avatar
+                    key={_id + '1'}
+                    containerStyle={styles.imageContainer}
+                    avatarStyle={styles.TableImage}
+                    name={firstName + ' ' + lastName}
+                    alt={firstName + ' ' + lastName}
+                  />
+                </div>
+              )}
+              {firstName + ' ' + lastName}
+            </div>
+          </>
+        );
+      },
+    },
+    {
+      field: 'email',
+      headerName: 'Email',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center"
+            data-testid="userEmail"
+          >
+            {params.row.user.email}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'hoursVolunteered',
+      headerName: 'Hours Volunteered',
+      flex: 2,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return <div className="fw-bold">{params.row.hoursVolunteered}</div>;
+      },
+    },
+  ];
+
+  return (
+    <div className="mt-4 mx-2 bg-white p-4 pt-2 rounded-4 shadow">
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={t('searchByVolunteer')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-sort"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('hours_DESC')}
+                  data-testid="hours_DESC"
+                >
+                  {t('mostHours')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('hours_ASC')}
+                  data-testid="hours_ASC"
+                >
+                  {t('leastHours')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-timeFrame"
+                className={styles.dropdown}
+                data-testid="timeFrame"
+              >
+                <FilterAltOutlined className={'me-1'} />
+                {t('timeFrame')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setTimeFrame(TimeFrame.All)}
+                  data-testid="timeFrameAll"
+                >
+                  {t('allTime')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setTimeFrame(TimeFrame.Weekly)}
+                  data-testid="timeFrameWeekly"
+                >
+                  {t('weekly')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setTimeFrame(TimeFrame.Monthly)}
+                  data-testid="timeFrameMonthly"
+                >
+                  {t('monthly')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setTimeFrame(TimeFrame.Yearly)}
+                  data-testid="timeFrameYearly"
+                >
+                  {t('yearly')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Action Items */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row.user._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noVolunteers')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={rankings.map((ranking, index) => ({
+          id: index + 1,
+          ...ranking,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+    </div>
+  );
+}
+
+export default leaderboard;
diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css
new file mode 100644
index 0000000000..e7ce0eca7e
--- /dev/null
+++ b/src/screens/LoginPage/LoginPage.module.css
@@ -0,0 +1,235 @@
+.login_background {
+  min-height: 100vh;
+}
+
+.communityLogo {
+  object-fit: contain;
+}
+
+.row .left_portion {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.selectOrgText input {
+  outline: none !important;
+}
+
+.row .left_portion .inner .palisadoes_logo {
+  width: 600px;
+  height: auto;
+}
+
+.row .right_portion {
+  min-height: 100vh;
+  position: relative;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem 2.5rem;
+  background: var(--bs-white);
+}
+
+.row .right_portion::-webkit-scrollbar {
+  display: none;
+}
+
+.row .right_portion .langChangeBtn {
+  margin: 0;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+}
+
+.langChangeBtnStyle {
+  width: 7.5rem;
+  height: 2.2rem;
+  padding: 0;
+}
+
+.row .right_portion .talawa_logo {
+  height: 5rem;
+  width: 5rem;
+  display: block;
+  margin: 1.5rem auto 1rem;
+  -webkit-animation: zoomIn 0.3s ease-in-out;
+  animation: zoomIn 0.3s ease-in-out;
+}
+
+.row .orText {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: calc(50% - 2.6rem);
+  margin: 0 auto;
+  padding: 0.35rem 2rem;
+  z-index: 100;
+  background: var(--bs-white);
+  color: var(--bs-secondary);
+}
+
+@media (max-width: 992px) {
+  .row .left_portion {
+    padding: 0 2rem;
+  }
+
+  .row .left_portion .inner .palisadoes_logo {
+    width: 100%;
+  }
+}
+
+@media (max-width: 769px) {
+  .row {
+    flex-direction: column-reverse;
+  }
+
+  .row .right_portion,
+  .row .left_portion {
+    height: unset;
+  }
+
+  .row .right_portion {
+    min-height: 100vh;
+    overflow-y: unset;
+  }
+
+  .row .left_portion .inner {
+    display: flex;
+    justify-content: center;
+  }
+
+  .row .left_portion .inner .palisadoes_logo {
+    height: 70px;
+    width: unset;
+    position: absolute;
+    margin: 0.5rem;
+    top: 0;
+    right: 0;
+    z-index: 100;
+  }
+
+  .row .left_portion .inner p {
+    margin-bottom: 0;
+    padding: 1rem;
+  }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 577px) {
+  .row .right_portion {
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  .row .right_portion .langChangeBtn {
+    position: absolute;
+    margin: 1rem;
+    left: 0;
+    top: 0;
+  }
+
+  .marginTopForReg {
+    margin-top: 4rem !important;
+  }
+
+  .row .right_portion .talawa_logo {
+    height: 120px;
+    margin: 0 auto 2rem auto;
+  }
+
+  .socialIcons {
+    margin-bottom: 1rem;
+  }
+}
+
+.active_tab {
+  -webkit-animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@-webkit-keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2rem);
+    transform: translateY(2rem);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2rem);
+    transform: translateY(2rem);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.socialIcons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.password_checks {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.password_check_element {
+  margin-top: -10px;
+}
+
+.password_check_element_top {
+  margin-top: 18px;
+}
+
+.password_check_element_bottom {
+  margin-bottom: -20px;
+}
diff --git a/src/screens/LoginPage/LoginPage.test.tsx b/src/screens/LoginPage/LoginPage.test.tsx
new file mode 100644
index 0000000000..698c83d42e
--- /dev/null
+++ b/src/screens/LoginPage/LoginPage.test.tsx
@@ -0,0 +1,1003 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import LoginPage from './LoginPage';
+import {
+  LOGIN_MUTATION,
+  RECAPTCHA_MUTATION,
+  SIGNUP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { BACKEND_URL } from 'Constant/constant';
+import useLocalStorage from 'utils/useLocalstorage';
+import { GET_COMMUNITY_DATA, ORGANIZATION_LIST } from 'GraphQl/Queries/Queries';
+import { debug } from 'jest-preview';
+
+const MOCKS = [
+  {
+    request: {
+      query: LOGIN_MUTATION,
+      variables: {
+        email: 'johndoe@gmail.com',
+        password: 'johndoe',
+      },
+    },
+    result: {
+      data: {
+        login: {
+          user: {
+            _id: '1',
+          },
+          appUserProfile: {
+            isSuperAdmin: false,
+            adminFor: ['123', '456'],
+          },
+          accessToken: 'accessToken',
+          refreshToken: 'refreshToken',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: SIGNUP_MUTATION,
+      variables: {
+        firstName: 'John Patrick ',
+        lastName: 'Doe ',
+        email: 'johndoe@gmail.com',
+        password: 'johnDoe',
+      },
+    },
+    result: {
+      data: {
+        register: {
+          user: {
+            _id: '1',
+          },
+          accessToken: 'accessToken',
+          refreshToken: 'refreshToken',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: RECAPTCHA_MUTATION,
+      variables: {
+        recaptchaToken: null,
+      },
+    },
+    result: {
+      data: {
+        recaptcha: true,
+      },
+    },
+  },
+  {
+    request: {
+      query: GET_COMMUNITY_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: null,
+      },
+    },
+  },
+];
+
+const MOCKS2 = [
+  {
+    request: {
+      query: GET_COMMUNITY_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          _id: 'communitId',
+          websiteLink: 'http://link.com',
+          name: 'testName',
+          logoUrl: 'image.png',
+          __typename: 'Community',
+          socialMediaUrls: {
+            facebook: 'http://url.com',
+            gitHub: 'http://url.com',
+            youTube: 'http://url.com',
+            instagram: 'http://url.com',
+            linkedIn: 'http://url.com',
+            reddit: 'http://url.com',
+            slack: 'http://url.com',
+            X: null,
+            __typename: 'SocialMediaUrls',
+          },
+        },
+      },
+    },
+  },
+];
+const MOCKS3 = [
+  {
+    request: {
+      query: ORGANIZATION_LIST,
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '6437904485008f171cf29924',
+            image: null,
+            creator: {
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+            },
+            name: 'Unity Foundation',
+            members: [
+              {
+                _id: '64378abd85008f171cf2990d',
+              },
+            ],
+            admins: [
+              {
+                _id: '64378abd85008f171cf2990d',
+              },
+            ],
+            createdAt: '2023-04-13T05:16:52.827Z',
+            address: {
+              city: 'Bronx',
+              countryCode: 'US',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '10451',
+              sortingCode: 'ABC-123',
+              state: 'NYC',
+            },
+          },
+          {
+            _id: 'db1d5caad2ade57ab811e681',
+            image: null,
+            creator: {
+              firstName: 'Sonya',
+              lastName: 'Jones',
+            },
+            name: 'Mills Group',
+            members: [
+              {
+                _id: '661b8410bd25a325da05e67c',
+              },
+            ],
+            admins: [
+              {
+                _id: '661b8410bd25a325da05e67c',
+              },
+            ],
+            createdAt: '2024-04-14T07:21:52.940Z',
+            address: {
+              city: 'Lake Martineside',
+              countryCode: 'SL',
+              dependentLocality: 'Apt. 544',
+              line1: '5112 Dare Centers',
+              line2: 'Suite 163',
+              postalCode: '10452',
+              sortingCode: '46565-3458',
+              state: 'New Hampshire',
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS2, true);
+const link3 = new StaticMockLink(MOCKS3, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('Constant/constant.ts', () => ({
+  ...jest.requireActual('Constant/constant.ts'),
+  REACT_APP_USE_RECAPTCHA: 'yes',
+  RECAPTCHA_SITE_KEY: 'xxx',
+}));
+
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('react-google-recaptcha', () => {
+  const react = jest.requireActual('react');
+  const recaptcha = react.forwardRef(
+    (
+      props: {
+        onChange: (value: string) => void;
+      } & React.InputHTMLAttributes<HTMLInputElement>,
+      ref: React.LegacyRef<HTMLInputElement> | undefined,
+    ): JSX.Element => {
+      const { onChange, ...otherProps } = props;
+
+      const handleChange = (
+        event: React.ChangeEvent<HTMLInputElement>,
+      ): void => {
+        if (onChange) {
+          onChange(event.target.value);
+        }
+      };
+
+      return (
+        <>
+          <input
+            type="text"
+            data-testid="mock-recaptcha"
+            {...otherProps}
+            onChange={handleChange}
+            ref={ref}
+          />
+        </>
+      );
+    },
+  );
+  return recaptcha;
+});
+
+describe('Testing Login Page Screen', () => {
+  test('Component Should be rendered properly', async () => {
+    window.location.assign('/orglist');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const adminLink = screen.getByText(/Admin/i);
+    userEvent.click(adminLink);
+    await wait();
+    expect(screen.getByText(/Admin/i)).toBeInTheDocument();
+    expect(window.location).toBeAt('/orglist');
+  });
+
+  test('There should be default values of pre-login data when queried result is null', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    expect(screen.getByTestId('PalisadoesLogo')).toBeInTheDocument();
+    expect(
+      screen.getAllByTestId('PalisadoesSocialMedia')[0],
+    ).toBeInTheDocument();
+
+    await wait();
+    expect(screen.queryByTestId('preLoginLogo')).not.toBeInTheDocument();
+    expect(screen.queryAllByTestId('preLoginSocialMedia')[0]).toBeUndefined();
+  });
+
+  test('There should be a different values of pre-login data if the queried result is not null', async () => {
+    render(
+      <MockedProvider addTypename={true} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(screen.getByTestId('preLoginLogo')).toBeInTheDocument();
+    expect(screen.getAllByTestId('preLoginSocialMedia')[0]).toBeInTheDocument();
+
+    await wait();
+    expect(screen.queryByTestId('PalisadoesLogo')).not.toBeInTheDocument();
+    expect(screen.queryAllByTestId('PalisadoesSocialMedia')[0]).toBeUndefined();
+  });
+
+  test('Testing registration functionality', async () => {
+    const formData = {
+      firstName: 'John',
+      lastName: 'Doe',
+      email: 'johndoe@gmail.com',
+      password: 'John@123',
+      confirmPassword: 'John@123',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/First Name/i),
+      formData.firstName,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Last name/i),
+      formData.lastName,
+    );
+    userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+    userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+    userEvent.type(
+      screen.getByPlaceholderText('Confirm Password'),
+      formData.confirmPassword,
+    );
+
+    userEvent.click(screen.getByTestId('registrationBtn'));
+  });
+
+  test('Testing registration functionality when all inputs are invalid', async () => {
+    const formData = {
+      firstName: '1234',
+      lastName: '8890',
+      email: 'j@l.co',
+      password: 'john@123',
+      confirmPassword: 'john@123',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+
+    await wait();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/First Name/i),
+      formData.firstName,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Last name/i),
+      formData.lastName,
+    );
+    userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+    userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+    userEvent.type(
+      screen.getByPlaceholderText('Confirm Password'),
+      formData.confirmPassword,
+    );
+    userEvent.click(screen.getByTestId('registrationBtn'));
+  });
+
+  test('Testing registration functionality, when password and confirm password is not same', async () => {
+    const formData = {
+      firstName: 'John',
+      lastName: 'Doe',
+      email: 'johndoe@gmail.com',
+      password: 'johnDoe@1',
+      confirmPassword: 'doeJohn@2',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+
+    userEvent.type(
+      screen.getByPlaceholderText(/First Name/i),
+      formData.firstName,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Last Name/i),
+      formData.lastName,
+    );
+    userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+    userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+    userEvent.type(
+      screen.getByPlaceholderText('Confirm Password'),
+      formData.confirmPassword,
+    );
+
+    userEvent.click(screen.getByTestId('registrationBtn'));
+  });
+
+  test('Testing registration functionality, when input is not filled correctly', async () => {
+    const formData = {
+      firstName: 'J',
+      lastName: 'D',
+      email: 'johndoe@gmail.com',
+      password: 'joe',
+      confirmPassword: 'joe',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+
+    userEvent.type(
+      screen.getByPlaceholderText(/First Name/i),
+      formData.firstName,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Last Name/i),
+      formData.lastName,
+    );
+    userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+    userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+    userEvent.type(
+      screen.getByPlaceholderText('Confirm Password'),
+      formData.confirmPassword,
+    );
+
+    userEvent.click(screen.getByTestId('registrationBtn'));
+  });
+
+  test('switches to login tab on successful registration', async () => {
+    const formData = {
+      firstName: 'John',
+      lastName: 'Doe',
+      email: 'johndoe@gmail.com',
+      password: 'johndoe',
+      confirmPassword: 'johndoe',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+    userEvent.type(
+      screen.getByPlaceholderText(/First Name/i),
+      formData.firstName,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Last name/i),
+      formData.lastName,
+    );
+    userEvent.type(screen.getByTestId(/signInEmail/i), formData.email);
+    userEvent.type(screen.getByPlaceholderText('Password'), formData.password);
+    userEvent.type(
+      screen.getByPlaceholderText('Confirm Password'),
+      formData.confirmPassword,
+    );
+
+    userEvent.click(screen.getByTestId('registrationBtn'));
+
+    await wait();
+
+    // Check if the login tab is now active by checking for elements that only appear in the login tab
+    expect(screen.getByTestId('loginBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('goToRegisterPortion')).toBeInTheDocument();
+  });
+
+  test('Testing toggle login register portion', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    userEvent.click(screen.getByTestId('goToLoginPortion'));
+
+    await wait();
+  });
+
+  test('Testing login functionality', async () => {
+    const formData = {
+      email: 'johndoe@gmail.com',
+      password: 'johndoe',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId(/loginEmail/i), formData.email);
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Password/i),
+      formData.password,
+    );
+
+    userEvent.click(screen.getByTestId('loginBtn'));
+
+    await wait();
+  });
+
+  test('Testing password preview feature for login', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const input = screen.getByTestId('password') as HTMLInputElement;
+    const toggleText = screen.getByTestId('showLoginPassword');
+    // password should be hidden
+    expect(input.type).toBe('password');
+    // click the toggle button to show password
+    userEvent.click(toggleText);
+    expect(input.type).toBe('text');
+    // click the toggle button to hide password
+    userEvent.click(toggleText);
+    expect(input.type).toBe('password');
+
+    await wait();
+  });
+
+  test('Testing password preview feature for register', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    const input = screen.getByTestId('passwordField') as HTMLInputElement;
+    const toggleText = screen.getByTestId('showPassword');
+    // password should be hidden
+    expect(input.type).toBe('password');
+    // click the toggle button to show password
+    userEvent.click(toggleText);
+    expect(input.type).toBe('text');
+    // click the toggle button to hide password
+    userEvent.click(toggleText);
+    expect(input.type).toBe('password');
+
+    await wait();
+  });
+
+  test('Testing confirm password preview feature', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    const input = screen.getByTestId('cpassword') as HTMLInputElement;
+    const toggleText = screen.getByTestId('showPasswordCon');
+    // password should be hidden
+    expect(input.type).toBe('password');
+    // click the toggle button to show password
+    userEvent.click(toggleText);
+    expect(input.type).toBe('text');
+    // click the toggle button to hide password
+    userEvent.click(toggleText);
+    expect(input.type).toBe('password');
+
+    await wait();
+  });
+
+  test('Testing for the password error warning when user firsts lands on a page', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    expect(screen.queryByTestId('passwordCheck')).toBeNull();
+  });
+
+  test('Testing for the password error warning when user clicks on password field and password is less than 8 character', async () => {
+    const password = {
+      password: '7',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    userEvent.type(screen.getByPlaceholderText('Password'), password.password);
+
+    expect(screen.getByTestId('passwordField')).toHaveFocus();
+
+    expect(password.password.length).toBeLessThan(8);
+
+    expect(screen.queryByTestId('passwordCheck')).toBeInTheDocument();
+  });
+
+  test('Testing for the password error warning when user clicks on password field and password is greater than or equal to 8 character', async () => {
+    const password = {
+      password: '12345678',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    userEvent.type(screen.getByPlaceholderText('Password'), password.password);
+
+    expect(screen.getByTestId('passwordField')).toHaveFocus();
+
+    expect(password.password.length).toBeGreaterThanOrEqual(8);
+
+    expect(screen.queryByTestId('passwordCheck')).toBeNull();
+  });
+
+  test('Testing for the password error warning when user clicks on fields except password field and password is less than 8 character', async () => {
+    const password = {
+      password: '7',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    expect(screen.getByPlaceholderText('Password')).not.toHaveFocus();
+
+    userEvent.type(screen.getByPlaceholderText('Password'), password.password);
+
+    expect(password.password.length).toBeLessThan(8);
+
+    expect(screen.queryByTestId('passwordCheck')).toBeInTheDocument();
+  });
+
+  test('Testing for the password error warning when user clicks on fields except password field and password is greater than or equal to 8 character', async () => {
+    const password = {
+      password: '12345678',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('goToRegisterPortion'));
+
+    await wait();
+
+    expect(screen.getByPlaceholderText('Password')).not.toHaveFocus();
+
+    userEvent.type(screen.getByPlaceholderText('Password'), password.password);
+
+    expect(password.password.length).toBeGreaterThanOrEqual(8);
+
+    expect(screen.queryByTestId('passwordCheck')).toBeNull();
+  });
+
+  test('Component Should be rendered properly for user login', async () => {
+    window.location.assign('/user/organizations');
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const userLink = screen.getByText(/User/i);
+    userEvent.click(userLink);
+    await wait();
+    expect(screen.getByText(/User Login/i)).toBeInTheDocument();
+    expect(window.location).toBeAt('/user/organizations');
+  });
+
+  test('on value change of ReCAPTCHA onChange event should be triggered in both the captcha', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const recaptchaElements = screen.getAllByTestId('mock-recaptcha');
+
+    for (const recaptchaElement of recaptchaElements) {
+      const inputElement = recaptchaElement as HTMLInputElement;
+
+      fireEvent.input(inputElement, {
+        target: { value: 'test-token' },
+      });
+
+      fireEvent.change(inputElement, {
+        target: { value: 'test-token2' },
+      });
+
+      expect(recaptchaElement).toHaveValue('test-token2');
+    }
+  });
+});
+
+describe('Testing redirect if already logged in', () => {
+  test('Logged in as USER', async () => {
+    const { setItem } = useLocalStorage();
+    setItem('IsLoggedIn', 'TRUE');
+    setItem('userId', 'id');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(mockNavigate).toHaveBeenCalledWith('/user/organizations');
+  });
+  test('Logged in as Admin or SuperAdmin', async () => {
+    const { setItem } = useLocalStorage();
+    setItem('IsLoggedIn', 'TRUE');
+    setItem('userId', null);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LoginPage />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(mockNavigate).toHaveBeenCalledWith('/orglist');
+  });
+});
+test('Render the Select Organization list and change the option', async () => {
+  render(
+    <MockedProvider addTypename={false} link={link3}>
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <LoginPage />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+
+  await wait();
+  userEvent.click(screen.getByTestId(/goToRegisterPortion/i));
+  await wait();
+  const autocomplete = screen.getByTestId('selectOrg');
+  const input = within(autocomplete).getByRole('combobox');
+  autocomplete.focus();
+  // the value here can be any string you want, so you may also consider to
+  // wrapper it as a function and pass in inputValue as parameter
+  fireEvent.change(input, { target: { value: 'a' } });
+  fireEvent.keyDown(autocomplete, { key: 'ArrowDown' });
+  fireEvent.keyDown(autocomplete, { key: 'Enter' });
+
+  debug();
+});
+
+describe('Talawa-API server fetch check', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Checks if Talawa-API resource is loaded successfully', async () => {
+    global.fetch = jest.fn(() => Promise.resolve({} as unknown as Response));
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <LoginPage />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    expect(fetch).toHaveBeenCalledWith(BACKEND_URL);
+  });
+
+  test('displays warning message when resource loading fails', async () => {
+    const mockError = new Error('Network error');
+    global.fetch = jest.fn(() => Promise.reject(mockError));
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <LoginPage />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    expect(fetch).toHaveBeenCalledWith(BACKEND_URL);
+  });
+});
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
new file mode 100644
index 0000000000..7703266afa
--- /dev/null
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -0,0 +1,888 @@
+import { useQuery, useMutation } from '@apollo/client';
+import { Check, Clear } from '@mui/icons-material';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import {
+  BACKEND_URL,
+  REACT_APP_USE_RECAPTCHA,
+  RECAPTCHA_SITE_KEY,
+} from 'Constant/constant';
+import {
+  LOGIN_MUTATION,
+  RECAPTCHA_MUTATION,
+  SIGNUP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import { GET_COMMUNITY_DATA, ORGANIZATION_LIST } from 'GraphQl/Queries/Queries';
+import PalisadoesLogo from 'assets/svgs/palisadoes.svg?react';
+import TalawaLogo from 'assets/svgs/talawa.svg?react';
+import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
+import LoginPortalToggle from 'components/LoginPortalToggle/LoginPortalToggle';
+import { errorHandler } from 'utils/errorHandler';
+import useLocalStorage from 'utils/useLocalstorage';
+import { socialMediaLinks } from '../../constants';
+import styles from './LoginPage.module.css';
+import type { InterfaceQueryOrganizationListObject } from 'utils/interfaces';
+import { Autocomplete, TextField } from '@mui/material';
+import useSession from 'utils/useSession';
+import i18n from 'utils/i18n';
+
+/**
+ * LoginPage component is used to render the login page of the application where user can login or register
+ * to the application using email and password. The component also provides the functionality to switch between login and
+ * register form.
+ *
+ */
+
+const loginPage = (): JSX.Element => {
+  const { t } = useTranslation('translation', { keyPrefix: 'loginPage' });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  const navigate = useNavigate();
+
+  const { getItem, setItem } = useLocalStorage();
+
+  document.title = t('title');
+
+  type PasswordValidation = {
+    lowercaseChar: boolean;
+    uppercaseChar: boolean;
+    numericValue: boolean;
+    specialChar: boolean;
+  };
+
+  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
+  const [showTab, setShowTab] = useState<'LOGIN' | 'REGISTER'>('LOGIN');
+  const [role, setRole] = useState<'admin' | 'user'>('admin');
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [signformState, setSignFormState] = useState({
+    signfirstName: '',
+    signlastName: '',
+    signEmail: '',
+    signPassword: '',
+    cPassword: '',
+    signOrg: '',
+  });
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState<boolean>(false);
+  const [showAlert, setShowAlert] = useState<PasswordValidation>({
+    lowercaseChar: true,
+    uppercaseChar: true,
+    numericValue: true,
+    specialChar: true,
+  });
+  const [organizations, setOrganizations] = useState([]);
+
+  const passwordValidationRegExp = {
+    lowercaseCharRegExp: new RegExp('[a-z]'),
+    uppercaseCharRegExp: new RegExp('[A-Z]'),
+    numericalValueRegExp: new RegExp('\\d'),
+    specialCharRegExp: new RegExp('[!@#$%^&*()_+{}\\[\\]:;<>,.?~\\\\/-]'),
+  };
+
+  const handlePasswordCheck = (pass: string): void => {
+    setShowAlert({
+      lowercaseChar: !passwordValidationRegExp.lowercaseCharRegExp.test(pass),
+      uppercaseChar: !passwordValidationRegExp.uppercaseCharRegExp.test(pass),
+      numericValue: !passwordValidationRegExp.numericalValueRegExp.test(pass),
+      specialChar: !passwordValidationRegExp.specialCharRegExp.test(pass),
+    });
+  };
+
+  const handleRoleToggle = (role: 'admin' | 'user'): void => {
+    setRole(role);
+  };
+
+  useEffect(() => {
+    const isLoggedIn = getItem('IsLoggedIn');
+    if (isLoggedIn == 'TRUE') {
+      navigate(getItem('userId') !== null ? '/user/organizations' : '/orglist');
+      extendSession();
+    }
+  }, []);
+
+  const togglePassword = (): void => setShowPassword(!showPassword);
+  const toggleConfirmPassword = (): void =>
+    setShowConfirmPassword(!showConfirmPassword);
+
+  const { data, refetch } = useQuery(GET_COMMUNITY_DATA);
+  useEffect(() => {
+    // refetching the data if the pre-login data updates
+    refetch();
+  }, [data]);
+  const [login, { loading: loginLoading }] = useMutation(LOGIN_MUTATION);
+  const [signup, { loading: signinLoading }] = useMutation(SIGNUP_MUTATION);
+  const [recaptcha] = useMutation(RECAPTCHA_MUTATION);
+  const { data: orgData } = useQuery(ORGANIZATION_LIST);
+  const { startSession, extendSession } = useSession();
+  useEffect(() => {
+    if (orgData) {
+      const options = orgData.organizations.map(
+        (org: InterfaceQueryOrganizationListObject) => {
+          const tempObj: { label: string; id: string } | null = {} as {
+            label: string;
+            id: string;
+          };
+          tempObj['label'] =
+            `${org.name}(${org.address?.city},${org.address?.state},${org.address?.countryCode})`;
+          tempObj['id'] = org._id;
+          return tempObj;
+        },
+      );
+      setOrganizations(options);
+    }
+  }, [orgData]);
+
+  useEffect(() => {
+    async function loadResource(): Promise<void> {
+      try {
+        await fetch(BACKEND_URL as string);
+      } catch (error) {
+        /* istanbul ignore next */
+        errorHandler(t, error);
+      }
+    }
+
+    loadResource();
+  }, []);
+
+  const verifyRecaptcha = async (
+    recaptchaToken: string | null,
+  ): Promise<boolean | void> => {
+    try {
+      /* istanbul ignore next */
+      if (REACT_APP_USE_RECAPTCHA !== 'yes') {
+        return true;
+      }
+      const { data } = await recaptcha({
+        variables: {
+          recaptchaToken,
+        },
+      });
+
+      return data.recaptcha;
+    } catch {
+      /* istanbul ignore next */
+      toast.error(t('captchaError') as string);
+    }
+  };
+
+  const handleCaptcha = (token: string | null): void => {
+    setRecaptchaToken(token);
+  };
+
+  const signupLink = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    const {
+      signfirstName,
+      signlastName,
+      signEmail,
+      signPassword,
+      cPassword,
+      signOrg,
+    } = signformState;
+
+    const isVerified = await verifyRecaptcha(recaptchaToken);
+    /* istanbul ignore next */
+    if (!isVerified) {
+      toast.error(t('Please_check_the_captcha') as string);
+      return;
+    }
+
+    const isValidName = (value: string): boolean => {
+      // Allow letters, spaces, and hyphens, but not consecutive spaces or hyphens
+      return /^[a-zA-Z]+(?:[-\s][a-zA-Z]+)*$/.test(value.trim());
+    };
+
+    const validatePassword = (password: string): boolean => {
+      const lengthCheck = new RegExp('^.{6,}$');
+      return (
+        lengthCheck.test(password) &&
+        passwordValidationRegExp.lowercaseCharRegExp.test(password) &&
+        passwordValidationRegExp.uppercaseCharRegExp.test(password) &&
+        passwordValidationRegExp.numericalValueRegExp.test(password) &&
+        passwordValidationRegExp.specialCharRegExp.test(password)
+      );
+    };
+
+    if (
+      isValidName(signfirstName) &&
+      isValidName(signlastName) &&
+      signfirstName.trim().length > 1 &&
+      signlastName.trim().length > 1 &&
+      signEmail.length >= 8 &&
+      signPassword.length > 1 &&
+      validatePassword(signPassword)
+    ) {
+      if (cPassword == signPassword) {
+        try {
+          const { data: signUpData } = await signup({
+            variables: {
+              firstName: signfirstName,
+              lastName: signlastName,
+              email: signEmail,
+              password: signPassword,
+              orgId: signOrg,
+            },
+          });
+
+          /* istanbul ignore next */
+          if (signUpData) {
+            toast.success(
+              t(
+                role === 'admin' ? 'successfullyRegistered' : 'afterRegister',
+              ) as string,
+            );
+            setShowTab('LOGIN');
+            setSignFormState({
+              signfirstName: '',
+              signlastName: '',
+              signEmail: '',
+              signPassword: '',
+              cPassword: '',
+              signOrg: '',
+            });
+          }
+        } catch (error) {
+          /* istanbul ignore next */
+          errorHandler(t, error);
+        }
+      } else {
+        toast.warn(t('passwordMismatches') as string);
+      }
+    } else {
+      if (!isValidName(signfirstName)) {
+        toast.warn(t('firstName_invalid') as string);
+      }
+      if (!isValidName(signlastName)) {
+        toast.warn(t('lastName_invalid') as string);
+      }
+      if (!validatePassword(signPassword)) {
+        toast.warn(t('password_invalid') as string);
+      }
+      if (signEmail.length < 8) {
+        toast.warn(t('email_invalid') as string);
+      }
+    }
+  };
+
+  const loginLink = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+    const isVerified = await verifyRecaptcha(recaptchaToken);
+    /* istanbul ignore next */
+    if (!isVerified) {
+      toast.error(t('Please_check_the_captcha') as string);
+      return;
+    }
+
+    try {
+      const { data: loginData } = await login({
+        variables: {
+          email: formState.email,
+          password: formState.password,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (loginData) {
+        i18n.changeLanguage(loginData.login.appUserProfile.appLanguageCode);
+        const { login } = loginData;
+        const { user, appUserProfile } = login;
+        const isAdmin: boolean =
+          appUserProfile.isSuperAdmin || appUserProfile.adminFor.length !== 0;
+
+        if (role === 'admin' && !isAdmin) {
+          toast.warn(tErrors('notAuthorised') as string);
+          return;
+        }
+        const loggedInUserId = user._id;
+
+        setItem('token', login.accessToken);
+        setItem('refreshToken', login.refreshToken);
+        setItem('IsLoggedIn', 'TRUE');
+        setItem('name', `${user.firstName} ${user.lastName}`);
+        setItem('email', user.email);
+        setItem('FirstName', user.firstName);
+        setItem('LastName', user.lastName);
+        setItem('UserImage', user.image);
+
+        if (role === 'admin') {
+          setItem('id', loggedInUserId);
+          setItem('SuperAdmin', appUserProfile.isSuperAdmin);
+          setItem('AdminFor', appUserProfile.adminFor);
+        } else {
+          setItem('userId', loggedInUserId);
+        }
+
+        navigate(role === 'admin' ? '/orglist' : '/user/organizations');
+        startSession();
+      } else {
+        toast.warn(tErrors('notFound') as string);
+      }
+    } catch (error) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  const socialIconsList = socialMediaLinks.map(({ href, logo, tag }, index) =>
+    data?.getCommunityData ? (
+      data.getCommunityData?.socialMediaUrls?.[tag] && (
+        <a
+          key={index}
+          href={data.getCommunityData?.socialMediaUrls?.[tag]}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-testid="preLoginSocialMedia"
+        >
+          <img src={logo} />
+        </a>
+      )
+    ) : (
+      <a
+        key={index}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-testid="PalisadoesSocialMedia"
+      >
+        <img src={logo} />
+      </a>
+    ),
+  );
+
+  return (
+    <>
+      <section className={styles.login_background}>
+        <Row className={styles.row}>
+          <Col sm={0} md={6} lg={7} className={styles.left_portion}>
+            <div className={styles.inner}>
+              {data?.getCommunityData ? (
+                <a
+                  href={data.getCommunityData.websiteLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`${styles.communityLogo}`}
+                >
+                  <img
+                    src={data.getCommunityData.logoUrl}
+                    alt="Community Logo"
+                    data-testid="preLoginLogo"
+                  />
+                  <p className="text-center">{data.getCommunityData.name}</p>
+                </a>
+              ) : (
+                <a
+                  href="https://www.palisadoes.org/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <PalisadoesLogo
+                    className={styles.palisadoes_logo}
+                    data-testid="PalisadoesLogo"
+                  />
+                  <p className="text-center">{t('fromPalisadoes')}</p>
+                </a>
+              )}
+            </div>
+            <div className={styles.socialIcons}>{socialIconsList}</div>
+          </Col>
+          <Col sm={12} md={6} lg={5}>
+            <div className={styles.right_portion}>
+              <ChangeLanguageDropDown
+                parentContainerStyle={styles.langChangeBtn}
+                btnStyle={styles.langChangeBtnStyle}
+              />
+              <TalawaLogo
+                className={`${styles.talawa_logo}  ${
+                  showTab === 'REGISTER' && styles.marginTopForReg
+                }`}
+              />
+
+              <LoginPortalToggle onToggle={handleRoleToggle} />
+
+              {/* LOGIN FORM */}
+              <div
+                className={`${
+                  showTab === 'LOGIN' ? styles.active_tab : 'd-none'
+                }`}
+              >
+                <form onSubmit={loginLink}>
+                  <h1 className="fs-2 fw-bold text-dark mb-3">
+                    {role === 'admin' ? tCommon('login') : t('userLogin')}
+                  </h1>
+                  <Form.Label>{tCommon('email')}</Form.Label>
+                  <div className="position-relative">
+                    <Form.Control
+                      type="email"
+                      disabled={loginLoading}
+                      placeholder={tCommon('enterEmail')}
+                      required
+                      value={formState.email}
+                      onChange={(e): void => {
+                        setFormState({
+                          ...formState,
+                          email: e.target.value,
+                        });
+                      }}
+                      autoComplete="username"
+                      data-testid="loginEmail"
+                    />
+                    <Button
+                      tabIndex={-1}
+                      className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                    >
+                      <EmailOutlinedIcon />
+                    </Button>
+                  </div>
+                  <Form.Label className="mt-3">
+                    {tCommon('password')}
+                  </Form.Label>
+                  <div className="position-relative">
+                    <Form.Control
+                      type={showPassword ? 'text' : 'password'}
+                      className="input_box_second lh-1"
+                      placeholder={tCommon('enterPassword')}
+                      required
+                      value={formState.password}
+                      data-testid="password"
+                      onChange={(e): void => {
+                        setFormState({
+                          ...formState,
+                          password: e.target.value,
+                        });
+                      }}
+                      disabled={loginLoading}
+                      autoComplete="current-password"
+                    />
+                    <Button
+                      onClick={togglePassword}
+                      data-testid="showLoginPassword"
+                      className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                    >
+                      {showPassword ? (
+                        <i className="fas fa-eye"></i>
+                      ) : (
+                        <i className="fas fa-eye-slash"></i>
+                      )}
+                    </Button>
+                  </div>
+                  <div className="text-end mt-3">
+                    <Link
+                      to="/forgotPassword"
+                      className="text-secondary"
+                      tabIndex={-1}
+                    >
+                      {tCommon('forgotPassword')}
+                    </Link>
+                  </div>
+                  {REACT_APP_USE_RECAPTCHA === 'yes' ? (
+                    <div className="googleRecaptcha">
+                      <ReCAPTCHA
+                        className="mt-2"
+                        sitekey={
+                          /* istanbul ignore next */
+                          RECAPTCHA_SITE_KEY ? RECAPTCHA_SITE_KEY : 'XXX'
+                        }
+                        onChange={handleCaptcha}
+                      />
+                    </div>
+                  ) : (
+                    /* istanbul ignore next */
+                    <></>
+                  )}
+                  <Button
+                    disabled={loginLoading}
+                    type="submit"
+                    className="mt-3 mb-3 w-100"
+                    value="Login"
+                    data-testid="loginBtn"
+                  >
+                    {tCommon('login')}
+                  </Button>
+                  <div className="position-relative my-2">
+                    <hr />
+                    <span className={styles.orText}>{tCommon('OR')}</span>
+                  </div>
+                  <Button
+                    variant="outline-secondary"
+                    value="Register"
+                    className="mt-3 mb-3 w-100"
+                    data-testid="goToRegisterPortion"
+                    onClick={(): void => {
+                      setShowTab('REGISTER');
+                      setShowPassword(false);
+                    }}
+                  >
+                    {tCommon('register')}
+                  </Button>
+                </form>
+              </div>
+              {/* REGISTER FORM */}
+              <div
+                className={`${
+                  showTab === 'REGISTER' ? styles.active_tab : 'd-none'
+                }`}
+              >
+                <Form onSubmit={signupLink}>
+                  <h1 className="fs-2 fw-bold text-dark mb-3">
+                    {tCommon('register')}
+                  </h1>
+                  <Row>
+                    <Col sm={6}>
+                      <div>
+                        <Form.Label>{tCommon('firstName')}</Form.Label>
+                        <Form.Control
+                          disabled={signinLoading}
+                          type="text"
+                          id="signfirstname"
+                          className="mb-3"
+                          placeholder={tCommon('firstName')}
+                          required
+                          value={signformState.signfirstName}
+                          onChange={(e): void => {
+                            setSignFormState({
+                              ...signformState,
+                              signfirstName: e.target.value,
+                            });
+                          }}
+                        />
+                      </div>
+                    </Col>
+                    <Col sm={6}>
+                      <div>
+                        <Form.Label>{tCommon('lastName')}</Form.Label>
+                        <Form.Control
+                          disabled={signinLoading}
+                          type="text"
+                          id="signlastname"
+                          className="mb-3"
+                          placeholder={tCommon('lastName')}
+                          required
+                          value={signformState.signlastName}
+                          onChange={(e): void => {
+                            setSignFormState({
+                              ...signformState,
+                              signlastName: e.target.value,
+                            });
+                          }}
+                        />
+                      </div>
+                    </Col>
+                  </Row>
+                  <div className="position-relative">
+                    <Form.Label>{tCommon('email')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        disabled={signinLoading}
+                        type="email"
+                        data-testid="signInEmail"
+                        className="mb-3"
+                        placeholder={tCommon('email')}
+                        autoComplete="username"
+                        required
+                        value={signformState.signEmail}
+                        onChange={(e): void => {
+                          setSignFormState({
+                            ...signformState,
+                            signEmail: e.target.value.toLowerCase(),
+                          });
+                        }}
+                      />
+                      <Button
+                        tabIndex={-1}
+                        className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                      >
+                        <EmailOutlinedIcon />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="position-relative mb-3">
+                    <Form.Label>{tCommon('password')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        disabled={signinLoading}
+                        type={showPassword ? 'text' : 'password'}
+                        data-testid="passwordField"
+                        placeholder={tCommon('password')}
+                        autoComplete="new-password"
+                        onFocus={(): void => setIsInputFocused(true)}
+                        onBlur={(): void => setIsInputFocused(false)}
+                        required
+                        value={signformState.signPassword}
+                        onChange={(e): void => {
+                          setSignFormState({
+                            ...signformState,
+                            signPassword: e.target.value,
+                          });
+                          handlePasswordCheck(e.target.value);
+                        }}
+                      />
+                      <Button
+                        onClick={togglePassword}
+                        data-testid="showPassword"
+                        className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                      >
+                        {showPassword ? (
+                          <i className="fas fa-eye"></i>
+                        ) : (
+                          <i className="fas fa-eye-slash"></i>
+                        )}
+                      </Button>
+                    </div>
+                    <div className={styles.password_checks}>
+                      {isInputFocused ? (
+                        signformState.signPassword.length < 6 ? (
+                          <div data-testid="passwordCheck">
+                            <p
+                              className={`form-text text-danger ${styles.password_check_element_top}`}
+                            >
+                              <span>
+                                <Clear className="" />
+                              </span>
+                              {t('atleast_6_char_long')}
+                            </p>
+                          </div>
+                        ) : (
+                          <p
+                            className={`form-text text-success ${styles.password_check_element_top}`}
+                          >
+                            <span>
+                              <Check />
+                            </span>
+                            {t('atleast_6_char_long')}
+                          </p>
+                        )
+                      ) : null}
+
+                      {!isInputFocused &&
+                        signformState.signPassword.length > 0 &&
+                        signformState.signPassword.length < 6 && (
+                          <div
+                            className={`form-text text-danger ${styles.password_check_element}`}
+                            data-testid="passwordCheck"
+                          >
+                            <span>
+                              <Check className="size-sm" />
+                            </span>
+                            {t('atleast_6_char_long')}
+                          </div>
+                        )}
+                      {isInputFocused && (
+                        <p
+                          className={`form-text ${
+                            showAlert.lowercaseChar
+                              ? 'text-danger'
+                              : 'text-success'
+                          } ${styles.password_check_element}`}
+                        >
+                          {showAlert.lowercaseChar ? (
+                            <span>
+                              <Clear />
+                            </span>
+                          ) : (
+                            <span>
+                              <Check />
+                            </span>
+                          )}
+                          {t('lowercase_check')}
+                        </p>
+                      )}
+                      {isInputFocused && (
+                        <p
+                          className={`form-text ${
+                            showAlert.uppercaseChar
+                              ? 'text-danger'
+                              : 'text-success'
+                          } ${styles.password_check_element}`}
+                        >
+                          {showAlert.uppercaseChar ? (
+                            <span>
+                              <Clear />
+                            </span>
+                          ) : (
+                            <span>
+                              <Check />
+                            </span>
+                          )}
+                          {t('uppercase_check')}
+                        </p>
+                      )}
+                      {isInputFocused && (
+                        <p
+                          className={`form-text ${
+                            showAlert.numericValue
+                              ? 'text-danger'
+                              : 'text-success'
+                          } ${styles.password_check_element}`}
+                        >
+                          {showAlert.numericValue ? (
+                            <span>
+                              <Clear />
+                            </span>
+                          ) : (
+                            <span>
+                              <Check />
+                            </span>
+                          )}
+                          {t('numeric_value_check')}
+                        </p>
+                      )}
+                      {isInputFocused && (
+                        <p
+                          className={`form-text ${
+                            showAlert.specialChar
+                              ? 'text-danger'
+                              : 'text-success'
+                          } ${styles.password_check_element} ${
+                            styles.password_check_element_bottom
+                          }`}
+                        >
+                          {showAlert.specialChar ? (
+                            <span>
+                              <Clear />
+                            </span>
+                          ) : (
+                            <span>
+                              <Check />
+                            </span>
+                          )}
+                          {t('special_char_check')}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="position-relative">
+                    <Form.Label>{tCommon('confirmPassword')}</Form.Label>
+                    <div className="position-relative">
+                      <Form.Control
+                        disabled={signinLoading}
+                        type={showConfirmPassword ? 'text' : 'password'}
+                        placeholder={tCommon('confirmPassword')}
+                        required
+                        value={signformState.cPassword}
+                        onChange={(e): void => {
+                          setSignFormState({
+                            ...signformState,
+                            cPassword: e.target.value,
+                          });
+                        }}
+                        data-testid="cpassword"
+                        autoComplete="new-password"
+                      />
+                      <Button
+                        data-testid="showPasswordCon"
+                        onClick={toggleConfirmPassword}
+                        className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                      >
+                        {showConfirmPassword ? (
+                          <i className="fas fa-eye"></i>
+                        ) : (
+                          <i className="fas fa-eye-slash"></i>
+                        )}
+                      </Button>
+                    </div>
+                    {signformState.cPassword.length > 0 &&
+                      signformState.signPassword !==
+                        signformState.cPassword && (
+                        <div
+                          className="form-text text-danger"
+                          data-testid="passwordCheck"
+                        >
+                          {t('Password_and_Confirm_password_mismatches.')}
+                        </div>
+                      )}
+                  </div>
+                  <div className="position-relative  my-2">
+                    <Form.Label>{t('selectOrg')}</Form.Label>
+                    <div className="position-relative">
+                      <Autocomplete
+                        disablePortal
+                        data-testid="selectOrg"
+                        onChange={(
+                          event,
+                          value: { label: string; id: string } | null,
+                        ) => {
+                          setSignFormState({
+                            ...signformState,
+                            signOrg: value?.id ?? '',
+                          });
+                        }}
+                        options={organizations}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            label="Organizations"
+                            className={styles.selectOrgText}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                  {REACT_APP_USE_RECAPTCHA === 'yes' ? (
+                    <div className="mt-3">
+                      <ReCAPTCHA
+                        sitekey={
+                          /* istanbul ignore next */
+                          RECAPTCHA_SITE_KEY ? RECAPTCHA_SITE_KEY : 'XXX'
+                        }
+                        onChange={handleCaptcha}
+                      />
+                    </div>
+                  ) : (
+                    /* istanbul ignore next */
+                    <></>
+                  )}
+                  <Button
+                    type="submit"
+                    className="mt-4 w-100 mb-3"
+                    value="Register"
+                    data-testid="registrationBtn"
+                    disabled={signinLoading}
+                  >
+                    {tCommon('register')}
+                  </Button>
+                  <div className="position-relative">
+                    <hr />
+                    <span className={styles.orText}>{tCommon('OR')}</span>
+                  </div>
+                  <Button
+                    variant="outline-secondary"
+                    value="Register"
+                    className="mt-3 mb-5 w-100"
+                    data-testid="goToLoginPortion"
+                    onClick={(): void => {
+                      setShowTab('LOGIN');
+                      setShowPassword(false);
+                    }}
+                  >
+                    {tCommon('login')}
+                  </Button>
+                </Form>
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </section>
+    </>
+  );
+};
+
+export default loginPage;
diff --git a/src/screens/ManageTag/EditUserTagModal.tsx b/src/screens/ManageTag/EditUserTagModal.tsx
new file mode 100644
index 0000000000..5fa8ae2771
--- /dev/null
+++ b/src/screens/ManageTag/EditUserTagModal.tsx
@@ -0,0 +1,89 @@
+import type { TFunction } from 'i18next';
+import type { FormEvent } from 'react';
+import React from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+
+/**
+ * Edit UserTag Modal component for the Manage Tag screen.
+ */
+
+export interface InterfaceEditUserTagModalProps {
+  editUserTagModalIsOpen: boolean;
+  hideEditUserTagModal: () => void;
+  newTagName: string;
+  setNewTagName: (state: React.SetStateAction<string>) => void;
+  handleEditUserTag: (e: FormEvent<HTMLFormElement>) => Promise<void>;
+  t: TFunction<'translation', 'manageTag'>;
+  tCommon: TFunction<'common', undefined>;
+}
+
+const EditUserTagModal: React.FC<InterfaceEditUserTagModalProps> = ({
+  editUserTagModalIsOpen,
+  hideEditUserTagModal,
+  newTagName,
+  handleEditUserTag,
+  setNewTagName,
+  t,
+  tCommon,
+}) => {
+  return (
+    <>
+      <Modal
+        show={editUserTagModalIsOpen}
+        onHide={hideEditUserTagModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        aria-describedby="tag-edit-modal-description"
+        centered
+      >
+        <Modal.Header
+          className="bg-primary"
+          data-testid="modalOrganizationHeader"
+          closeButton
+        >
+          <Modal.Title className="text-white">{t('tagDetails')}</Modal.Title>
+        </Modal.Header>
+        <Form
+          onSubmitCapture={(e: FormEvent<HTMLFormElement>): void => {
+            e.preventDefault();
+            if (newTagName.trim()) {
+              handleEditUserTag(e);
+            }
+          }}
+        >
+          <Modal.Body>
+            <Form.Label htmlFor="tagName">{t('tagName')}</Form.Label>
+            <Form.Control
+              type="text"
+              id="tagName"
+              className="mb-3"
+              placeholder={t('tagNamePlaceholder')}
+              data-testid="tagNameInput"
+              autoComplete="off"
+              required
+              value={newTagName}
+              onChange={(e): void => {
+                setNewTagName(e.target.value);
+              }}
+            />
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={(): void => hideEditUserTagModal()}
+              data-testid="closeEditTagModalBtn"
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button type="submit" value="invite" data-testid="editTagSubmitBtn">
+              {tCommon('edit')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default EditUserTagModal;
diff --git a/src/screens/ManageTag/ManageTag.module.css b/src/screens/ManageTag/ManageTag.module.css
new file mode 100644
index 0000000000..deecd4a9b7
--- /dev/null
+++ b/src/screens/ManageTag/ManageTag.module.css
@@ -0,0 +1,127 @@
+.btnsContainer {
+  display: flex;
+  margin: 2rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  width: max-content;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+  max-width: 60%;
+  justify-content: space-between;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
+
+.tagsBreadCrumbs:hover {
+  color: var(--bs-blue);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.manageTagScrollableDiv {
+  scrollbar-width: thin;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+}
diff --git a/src/screens/ManageTag/ManageTag.test.tsx b/src/screens/ManageTag/ManageTag.test.tsx
new file mode 100644
index 0000000000..598a15cc9a
--- /dev/null
+++ b/src/screens/ManageTag/ManageTag.test.tsx
@@ -0,0 +1,507 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import ManageTag from './ManageTag';
+import { MOCKS, MOCKS_ERROR_ASSIGNED_MEMBERS } from './ManageTagMocks';
+import { type ApolloLink } from '@apollo/client';
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(i18n.getDataByLanguage('en')?.translation.manageTag ?? {}),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_ASSIGNED_MEMBERS, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    info: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
+jest.mock('../../components/AddPeopleToTag/AddPeopleToTag', () => {
+  return require('./ManageTagMockComponents/MockAddPeopleToTag').default;
+});
+
+jest.mock('../../components/TagActions/TagActions', () => {
+  return require('./ManageTagMockComponents/MockTagActions').default;
+});
+/* eslint-enable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
+
+const renderManageTag = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgtags/123/manageTag/1']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <Routes>
+              <Route
+                path="/orgtags/:orgId"
+                element={<div data-testid="organizationTagsScreen"></div>}
+              />
+              <Route
+                path="/orgtags/:orgId/manageTag/:tagId"
+                element={<ManageTag />}
+              />
+              <Route
+                path="/orgtags/:orgId/subTags/:tagId"
+                element={<div data-testid="subTagsScreen"></div>}
+              />
+              <Route
+                path="/member/:orgId"
+                element={<div data-testid="memberProfileScreen"></div>}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Manage Tag Page', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('Component loads correctly', async () => {
+    const { getByText } = renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.addPeopleToTag)).toBeInTheDocument();
+    });
+  });
+
+  test('renders error component on unsuccessful userTag assigned members query', async () => {
+    const { queryByText } = renderManageTag(link2);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(queryByText(translations.addPeopleToTag)).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the add people to tag modal', async () => {
+    renderManageTag(link);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addPeopleToTagBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('addPeopleToTagBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addPeopleToTagModal')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('closeAddPeopleToTagModal'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('addPeopleToTagModal'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the unassign tag modal', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('unassignTagBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('unassignTagBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('unassignTagModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('unassignTagModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('unassignTagModalCloseBtn'),
+    );
+  });
+
+  test('opens and closes the assignToTags modal', async () => {
+    renderManageTag(link);
+
+    // Wait for the assignToTags button to be present
+    await waitFor(() => {
+      expect(screen.getByTestId('assignToTags')).toBeInTheDocument();
+    });
+
+    // Click the assignToTags button to open the modal
+    userEvent.click(screen.getByTestId('assignToTags'));
+
+    // Wait for the close button in the modal to be present
+    await waitFor(() => {
+      expect(screen.getByTestId('closeTagActionsModalBtn')).toBeInTheDocument();
+    });
+
+    // Click the close button to close the modal
+    userEvent.click(screen.getByTestId('closeTagActionsModalBtn'));
+
+    // Wait for the modal to be removed from the document
+    await waitFor(() => {
+      expect(screen.queryByTestId('tagActionsModal')).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the removeFromTags modal', async () => {
+    renderManageTag(link);
+
+    // Wait for the removeFromTags button to be present
+    await waitFor(() => {
+      expect(screen.getByTestId('removeFromTags')).toBeInTheDocument();
+    });
+
+    // Click the removeFromTags button to open the modal
+    userEvent.click(screen.getByTestId('removeFromTags'));
+
+    // Wait for the close button in the modal to be present
+    await waitFor(() => {
+      expect(screen.getByTestId('closeTagActionsModalBtn')).toBeInTheDocument();
+    });
+
+    // Click the close button to close the modal
+    userEvent.click(screen.getByTestId('closeTagActionsModalBtn'));
+
+    // Wait for the modal to be removed from the document
+    await waitFor(() => {
+      expect(screen.queryByTestId('tagActionsModal')).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the edit tag modal', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('editUserTag')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('editUserTag'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('closeEditTagModalBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('closeEditTagModalBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('closeEditTagModalBtn'),
+    );
+  });
+
+  test('opens and closes the remove tag modal', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('removeTag')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('removeTag'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('removeUserTagModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('removeUserTagModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('removeUserTagModalCloseBtn'),
+    );
+  });
+
+  test("navigates to the member's profile after clicking the view option", async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('viewProfileBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('viewProfileBtn')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('memberProfileScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to the subTags screen after clicking the subTags option', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('subTagsBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('subTagsBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('subTagsScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to the manageTag screen after clicking a tag in the breadcrumbs', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('redirectToManageTag')[0],
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('redirectToManageTag')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addPeopleToTagBtn')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to organization tags screen screen after clicking tha all tags option in the breadcrumbs', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('allTagsBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('allTagsBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('organizationTagsScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('searchs for tags where the name matches the provided search input', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'assigned user' } });
+
+    // should render the two users from the mock data
+    // where firstName starts with "assigned" and lastName starts with "user"
+    await waitFor(() => {
+      const buttons = screen.getAllByTestId('viewProfileBtn');
+      expect(buttons.length).toEqual(2);
+    });
+  });
+
+  test('fetches the tags by the sort order, i.e. latest or oldest first', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'assigned user' } });
+
+    // should render the two searched tags from the mock data
+    // where name starts with "searchUserTag"
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'assigned user1',
+      );
+    });
+
+    // now change the sorting order
+    await waitFor(() => {
+      expect(screen.getByTestId('sortPeople')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortPeople'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('oldest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('oldest'));
+
+    // returns the tags in reverse order
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'assigned user2',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sortPeople')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortPeople'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('latest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('latest'));
+
+    // reverse the order again
+    await waitFor(() => {
+      expect(screen.getAllByTestId('memberName')[0]).toHaveTextContent(
+        'assigned user1',
+      );
+    });
+  });
+
+  test('Fetches more assigned members with infinite scroll', async () => {
+    const { getByText } = renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.addPeopleToTag)).toBeInTheDocument();
+    });
+
+    const manageTagScrollableDiv = screen.getByTestId('manageTagScrollableDiv');
+
+    // Get the initial number of tags loaded
+    const initialAssignedMembersDataLength =
+      screen.getAllByTestId('viewProfileBtn').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(manageTagScrollableDiv, {
+      target: { scrollY: manageTagScrollableDiv.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalAssignedMembersDataLength =
+        screen.getAllByTestId('viewProfileBtn').length;
+      expect(finalAssignedMembersDataLength).toBeGreaterThan(
+        initialAssignedMembersDataLength,
+      );
+
+      expect(getByText(translations.addPeopleToTag)).toBeInTheDocument();
+    });
+  });
+
+  test('unassigns a tag from a member', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('unassignTagBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('unassignTagBtn')[0]);
+
+    userEvent.click(screen.getByTestId('unassignTagModalSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfullyUnassigned,
+      );
+    });
+  });
+
+  test('successfully edits the tag name', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('editUserTag')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('editUserTag'));
+
+    userEvent.click(screen.getByTestId('editTagSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.info).toHaveBeenCalledWith(translations.changeNameToEdit);
+    });
+
+    const tagNameInput = screen.getByTestId('tagNameInput');
+    await userEvent.clear(tagNameInput);
+    await userEvent.type(tagNameInput, 'tag 1 edited');
+    expect(tagNameInput).toHaveValue('tag 1 edited');
+
+    userEvent.click(screen.getByTestId('editTagSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.tagUpdationSuccess,
+      );
+    });
+  });
+
+  test('successfully removes the tag and redirects to orgTags page', async () => {
+    renderManageTag(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('removeTag')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('removeTag'));
+
+    userEvent.click(screen.getByTestId('removeUserTagSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.tagRemovalSuccess,
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('organizationTagsScreen')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
new file mode 100644
index 0000000000..428dad7981
--- /dev/null
+++ b/src/screens/ManageTag/ManageTag.tsx
@@ -0,0 +1,607 @@
+import type { FormEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import { Search, WarningAmberRounded } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
+import Loader from 'components/Loader/Loader';
+import IconComponent from 'components/IconComponent/IconComponent';
+import { useNavigate, useParams, Link } from 'react-router-dom';
+import { Col, Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import type { InterfaceQueryUserTagsAssignedMembers } from 'utils/interfaces';
+import styles from '../../style/app.module.css';
+import { DataGrid } from '@mui/x-data-grid';
+import type {
+  InterfaceTagAssignedMembersQuery,
+  SortedByType,
+  TagActionType,
+} from 'utils/organizationTagsUtils';
+import {
+  TAGS_QUERY_DATA_CHUNK_SIZE,
+  dataGridStyle,
+} from 'utils/organizationTagsUtils';
+import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
+import { Stack } from '@mui/material';
+import {
+  REMOVE_USER_TAG,
+  UNASSIGN_USER_TAG,
+  UPDATE_USER_TAG,
+} from 'GraphQl/Mutations/TagMutations';
+import { USER_TAGS_ASSIGNED_MEMBERS } from 'GraphQl/Queries/userTagQueries';
+import AddPeopleToTag from 'components/AddPeopleToTag/AddPeopleToTag';
+import TagActions from 'components/TagActions/TagActions';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+import EditUserTagModal from './EditUserTagModal';
+import RemoveUserTagModal from './RemoveUserTagModal';
+import UnassignUserTagModal from './UnassignUserTagModal';
+
+/**
+ * Component that renders the Manage Tag screen when the app navigates to '/orgtags/:orgId/manageTag/:tagId'.
+ */
+
+function ManageTag(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'manageTag',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { orgId, tagId: currentTagId } = useParams();
+  const navigate = useNavigate();
+
+  const [unassignUserTagModalIsOpen, setUnassignUserTagModalIsOpen] =
+    useState(false);
+  const [addPeopleToTagModalIsOpen, setAddPeopleToTagModalIsOpen] =
+    useState(false);
+  const [tagActionsModalIsOpen, setTagActionsModalIsOpen] = useState(false);
+  const [editUserTagModalIsOpen, setEditUserTagModalIsOpen] = useState(false);
+  const [removeUserTagModalIsOpen, setRemoveUserTagModalIsOpen] =
+    useState(false);
+  const [unassignUserId, setUnassignUserId] = useState(null);
+  const [assignedMemberSearchInput, setAssignedMemberSearchInput] =
+    useState('');
+  const [assignedMemberSearchFirstName, setAssignedMemberSearchFirstName] =
+    useState('');
+  const [assignedMemberSearchLastName, setAssignedMemberSearchLastName] =
+    useState('');
+  const [assignedMemberSortOrder, setAssignedMemberSortOrder] =
+    useState<SortedByType>('DESCENDING');
+  // a state to specify whether we're assigning to tags or removing from tags
+  const [tagActionType, setTagActionType] =
+    useState<TagActionType>('assignToTags');
+
+  const toggleRemoveUserTagModal = (): void => {
+    setRemoveUserTagModalIsOpen(!removeUserTagModalIsOpen);
+  };
+  const showAddPeopleToTagModal = (): void => {
+    setAddPeopleToTagModalIsOpen(true);
+  };
+  const hideAddPeopleToTagModal = (): void => {
+    setAddPeopleToTagModalIsOpen(false);
+  };
+  const showTagActionsModal = (): void => {
+    setTagActionsModalIsOpen(true);
+  };
+  const hideTagActionsModal = (): void => {
+    setTagActionsModalIsOpen(false);
+  };
+  const showEditUserTagModal = (): void => {
+    setEditUserTagModalIsOpen(true);
+  };
+  const hideEditUserTagModal = (): void => {
+    setEditUserTagModalIsOpen(false);
+  };
+
+  const {
+    data: userTagAssignedMembersData,
+    loading: userTagAssignedMembersLoading,
+    error: userTagAssignedMembersError,
+    refetch: userTagAssignedMembersRefetch,
+    fetchMore: fetchMoreAssignedMembers,
+  }: InterfaceTagAssignedMembersQuery = useQuery(USER_TAGS_ASSIGNED_MEMBERS, {
+    variables: {
+      id: currentTagId,
+      first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      where: {
+        firstName: { starts_with: assignedMemberSearchFirstName },
+        lastName: { starts_with: assignedMemberSearchLastName },
+      },
+      sortedBy: { id: assignedMemberSortOrder },
+    },
+    fetchPolicy: 'no-cache',
+  });
+
+  const loadMoreAssignedMembers = (): void => {
+    fetchMoreAssignedMembers({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after:
+          userTagAssignedMembersData?.getAssignedUsers.usersAssignedTo.pageInfo
+            .endCursor,
+      },
+      updateQuery: (
+        prevResult: { getAssignedUsers: InterfaceQueryUserTagsAssignedMembers },
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult: {
+            getAssignedUsers: InterfaceQueryUserTagsAssignedMembers;
+          };
+        },
+      ) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          getAssignedUsers: {
+            ...fetchMoreResult.getAssignedUsers,
+            usersAssignedTo: {
+              ...fetchMoreResult.getAssignedUsers.usersAssignedTo,
+              edges: [
+                ...prevResult.getAssignedUsers.usersAssignedTo.edges,
+                ...fetchMoreResult.getAssignedUsers.usersAssignedTo.edges,
+              ],
+            },
+          },
+        };
+      },
+    });
+  };
+
+  useEffect(() => {
+    const [firstName, ...lastNameParts] = assignedMemberSearchInput
+      .trim()
+      .split(/\s+/);
+    const lastName = lastNameParts.join(' '); // Joins everything after the first word
+    setAssignedMemberSearchFirstName(firstName);
+    setAssignedMemberSearchLastName(lastName);
+  }, [assignedMemberSearchInput]);
+
+  const [unassignUserTag] = useMutation(UNASSIGN_USER_TAG);
+
+  const handleUnassignUserTag = async (): Promise<void> => {
+    try {
+      await unassignUserTag({
+        variables: {
+          tagId: currentTagId,
+          userId: unassignUserId,
+        },
+      });
+
+      userTagAssignedMembersRefetch();
+      toggleUnassignUserTagModal();
+      toast.success(t('successfullyUnassigned') as string);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  const [edit] = useMutation(UPDATE_USER_TAG);
+
+  const [newTagName, setNewTagName] = useState<string>('');
+  const currentTagName =
+    userTagAssignedMembersData?.getAssignedUsers.name ?? '';
+
+  useEffect(() => {
+    setNewTagName(userTagAssignedMembersData?.getAssignedUsers.name ?? '');
+  }, [userTagAssignedMembersData]);
+
+  const handleEditUserTag = async (
+    e: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+
+    if (newTagName === currentTagName) {
+      toast.info(t('changeNameToEdit'));
+      return;
+    }
+
+    try {
+      const { data } = await edit({
+        variables: {
+          tagId: currentTagId,
+          name: newTagName,
+        },
+      });
+
+      if (data) {
+        toast.success(t('tagUpdationSuccess'));
+        userTagAssignedMembersRefetch();
+        setEditUserTagModalIsOpen(false);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  const [removeUserTag] = useMutation(REMOVE_USER_TAG);
+  const handleRemoveUserTag = async (): Promise<void> => {
+    try {
+      await removeUserTag({
+        variables: {
+          id: currentTagId,
+        },
+      });
+
+      navigate(`/orgtags/${orgId}`);
+      toggleRemoveUserTagModal();
+      toast.success(t('tagRemovalSuccess') as string);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  if (userTagAssignedMembersError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occured while loading assigned users
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const userTagAssignedMembers =
+    userTagAssignedMembersData?.getAssignedUsers.usersAssignedTo.edges.map(
+      (edge) => edge.node,
+    ) ?? /* istanbul ignore next */ [];
+
+  // get the ancestorTags array and push the current tag in it
+  // used for the tag breadcrumbs
+  const orgUserTagAncestors = [
+    ...(userTagAssignedMembersData?.getAssignedUsers.ancestorTags ?? []),
+    {
+      _id: currentTagId,
+      name: currentTagName,
+    },
+  ];
+
+  const redirectToSubTags = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/subTags/${tagId}`);
+  };
+  const redirectToManageTag = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/manageTag/${tagId}`);
+  };
+  const toggleUnassignUserTagModal = (): void => {
+    if (unassignUserTagModalIsOpen) {
+      setUnassignUserId(null);
+    }
+    setUnassignUserTagModalIsOpen(!unassignUserTagModalIsOpen);
+  };
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: '#',
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'userName',
+      headerName: 'User Name',
+      flex: 2,
+      minWidth: 100,
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="memberName">
+            {params.row.firstName + ' ' + params.row.lastName}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div>
+            <Link
+              to={`/member/${orgId}`}
+              state={{ id: params.row._id }}
+              data-testid="viewProfileBtn"
+            >
+              <div className="btn btn-sm btn-primary me-3">
+                {t('viewProfile')}
+              </div>
+            </Link>
+
+            <Button
+              size="sm"
+              variant="danger"
+              onClick={() => {
+                setUnassignUserId(params.row._id);
+                toggleUnassignUserTagModal();
+              }}
+              data-testid="unassignTagBtn"
+            >
+              {'Unassign'}
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Row className={styles.head}>
+        <div className={styles.mainpageright}>
+          <div className={styles.btnsContainer}>
+            <div className={styles.input}>
+              <Form.Control
+                type="text"
+                id="userName"
+                className={`${styles.inputField} `}
+                placeholder={tCommon('searchByName')}
+                onChange={(e) =>
+                  setAssignedMemberSearchInput(e.target.value.trim())
+                }
+                data-testid="searchByName"
+                autoComplete="off"
+              />
+              <Button
+                tabIndex={-1}
+                className={styles.searchButton}
+                data-testid="searchBtn"
+              >
+                <Search />
+              </Button>
+            </div>
+            <div className={styles.btnsBlock}>
+              <Dropdown
+                aria-expanded="false"
+                title="Sort People"
+                data-testid="sort"
+              >
+                <Dropdown.Toggle
+                  variant="outline-success"
+                  data-testid="sortPeople"
+                  className={styles.dropdown}
+                >
+                  <SortIcon className={'me-1'} />
+                  {assignedMemberSortOrder === 'DESCENDING'
+                    ? tCommon('Latest')
+                    : tCommon('Oldest')}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item
+                    data-testid="latest"
+                    onClick={() => setAssignedMemberSortOrder('DESCENDING')}
+                  >
+                    {tCommon('Latest')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    data-testid="oldest"
+                    onClick={() => setAssignedMemberSortOrder('ASCENDING')}
+                  >
+                    {tCommon('Oldest')}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              <Button
+                variant="success"
+                onClick={() => redirectToSubTags(currentTagId as string)}
+                className={`${styles.createButton} mb-2`}
+                data-testid="subTagsBtn"
+              >
+                {t('subTags')}
+              </Button>
+            </div>
+            <Button
+              variant="success"
+              onClick={showAddPeopleToTagModal}
+              data-testid="addPeopleToTagBtn"
+              className={`${styles.createButton} mb-2 ms-3`}
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('addPeopleToTag')}
+            </Button>
+          </div>
+
+          {userTagAssignedMembersLoading ? (
+            <Loader />
+          ) : (
+            <Row className="mb-4">
+              <Col xs={9}>
+                <div className="bg-white light border rounded-top mb-0 py-2 d-flex align-items-center">
+                  <div className="ms-3 my-1">
+                    <IconComponent name="Tag" />
+                  </div>
+                  <div
+                    onClick={() => navigate(`/orgtags/${orgId}`)}
+                    className={`fs-6 ms-3 my-1 ${styles.tagsBreadCrumbs}`}
+                    data-testid="allTagsBtn"
+                  >
+                    {'Tags'}
+                    <i className={'mx-2 fa fa-caret-right'} />
+                  </div>
+                  {orgUserTagAncestors?.map((tag, index) => (
+                    <div
+                      key={index}
+                      className={`ms-2 my-1 ${tag._id === currentTagId ? `fs-4 fw-semibold text-secondary` : `${styles.tagsBreadCrumbs} fs-6`}`}
+                      onClick={() => redirectToManageTag(tag._id as string)}
+                      data-testid="redirectToManageTag"
+                    >
+                      {tag.name}
+                      {orgUserTagAncestors.length - 1 !== index && (
+                        /* istanbul ignore next */
+                        <i className={'mx-2 fa fa-caret-right'} />
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <div
+                  id="manageTagScrollableDiv"
+                  data-testid="manageTagScrollableDiv"
+                  className={styles.manageTagScrollableDiv}
+                >
+                  <InfiniteScroll
+                    dataLength={userTagAssignedMembers?.length ?? 0}
+                    next={loadMoreAssignedMembers}
+                    hasMore={
+                      userTagAssignedMembersData?.getAssignedUsers
+                        .usersAssignedTo.pageInfo.hasNextPage ??
+                      /* istanbul ignore next */ false
+                    }
+                    loader={<InfiniteScrollLoader />}
+                    scrollableTarget="manageTagScrollableDiv"
+                  >
+                    <DataGrid
+                      disableColumnMenu
+                      columnBufferPx={7}
+                      hideFooter={true}
+                      getRowId={(row) => row.id}
+                      slots={{
+                        noRowsOverlay: /* istanbul ignore next */ () => (
+                          <Stack
+                            height="100%"
+                            alignItems="center"
+                            justifyContent="center"
+                          >
+                            {t('noAssignedMembersFound')}
+                          </Stack>
+                        ),
+                      }}
+                      sx={dataGridStyle}
+                      getRowClassName={() => `${styles.rowBackground}`}
+                      autoHeight
+                      rowHeight={65}
+                      rows={userTagAssignedMembers?.map(
+                        (assignedMembers, index) => ({
+                          id: index + 1,
+                          ...assignedMembers,
+                        }),
+                      )}
+                      columns={columns}
+                      isRowSelectable={() => false}
+                    />
+                  </InfiniteScroll>
+                </div>
+              </Col>
+              <Col className="ms-auto" xs={3}>
+                <div className="bg-secondary text-white rounded-top mb-0 py-2 fw-semibold ms-2">
+                  <div className="ms-3 fs-5">{'Actions'}</div>
+                </div>
+                <div className="d-flex flex-column align-items-center bg-white rounded-bottom mb-0 py-2 fw-semibold ms-2">
+                  <div
+                    onClick={() => {
+                      setTagActionType('assignToTags');
+                      showTagActionsModal();
+                    }}
+                    className="my-2 btn btn-primary btn-sm w-75"
+                    data-testid="assignToTags"
+                  >
+                    {t('assignToTags')}
+                  </div>
+                  <div
+                    onClick={() => {
+                      setTagActionType('removeFromTags');
+                      showTagActionsModal();
+                    }}
+                    className="mb-1 btn btn-danger btn-sm w-75"
+                    data-testid="removeFromTags"
+                  >
+                    {t('removeFromTags')}
+                  </div>
+                  <hr
+                    style={{
+                      borderColor: 'lightgray',
+                      borderWidth: '2px',
+                      width: '85%',
+                    }}
+                  />
+                  <div
+                    onClick={showEditUserTagModal}
+                    className="mt-1 mb-2 btn btn-primary btn-sm w-75"
+                    data-testid="editUserTag"
+                  >
+                    {tCommon('edit')}
+                  </div>
+                  <div
+                    onClick={toggleRemoveUserTagModal}
+                    className="mb-2 btn btn-danger btn-sm w-75"
+                    data-testid="removeTag"
+                  >
+                    {tCommon('remove')}
+                  </div>
+                </div>
+              </Col>
+            </Row>
+          )}
+        </div>
+      </Row>
+
+      {/* Add People To Tag Modal */}
+      <AddPeopleToTag
+        addPeopleToTagModalIsOpen={addPeopleToTagModalIsOpen}
+        hideAddPeopleToTagModal={hideAddPeopleToTagModal}
+        refetchAssignedMembersData={userTagAssignedMembersRefetch}
+        t={t}
+        tCommon={tCommon}
+      />
+      {/* Assign People To Tags Modal */}
+      <TagActions
+        tagActionsModalIsOpen={tagActionsModalIsOpen}
+        hideTagActionsModal={hideTagActionsModal}
+        tagActionType={tagActionType}
+        t={t}
+        tCommon={tCommon}
+      />
+      {/* Unassign User Tag Modal */}
+      <UnassignUserTagModal
+        unassignUserTagModalIsOpen={unassignUserTagModalIsOpen}
+        toggleUnassignUserTagModal={toggleUnassignUserTagModal}
+        handleUnassignUserTag={handleUnassignUserTag}
+        t={t}
+        tCommon={tCommon}
+      />
+      {/* Edit User Tag Modal */}
+      <EditUserTagModal
+        editUserTagModalIsOpen={editUserTagModalIsOpen}
+        hideEditUserTagModal={hideEditUserTagModal}
+        newTagName={newTagName}
+        setNewTagName={setNewTagName}
+        handleEditUserTag={handleEditUserTag}
+        t={t}
+        tCommon={tCommon}
+      />
+      {/* Remove User Tag Modal */}
+      <RemoveUserTagModal
+        removeUserTagModalIsOpen={removeUserTagModalIsOpen}
+        toggleRemoveUserTagModal={toggleRemoveUserTagModal}
+        handleRemoveUserTag={handleRemoveUserTag}
+        t={t}
+        tCommon={tCommon}
+      />
+    </>
+  );
+}
+export default ManageTag;
diff --git a/src/screens/ManageTag/ManageTagMockComponents/MockAddPeopleToTag.tsx b/src/screens/ManageTag/ManageTagMockComponents/MockAddPeopleToTag.tsx
new file mode 100644
index 0000000000..7e62c47f86
--- /dev/null
+++ b/src/screens/ManageTag/ManageTagMockComponents/MockAddPeopleToTag.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import type { InterfaceAddPeopleToTagProps } from '../../../components/AddPeopleToTag/AddPeopleToTag';
+
+/**
+ * Component that mocks the AddPeopleToTag component for the Manage Tag screen.
+ */
+
+const TEST_IDS = {
+  MODAL: 'addPeopleToTagModal',
+  CLOSE_BUTTON: 'closeAddPeopleToTagModal',
+} as const;
+const MockAddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
+  addPeopleToTagModalIsOpen,
+  hideAddPeopleToTagModal,
+}) => {
+  return (
+    <>
+      {addPeopleToTagModalIsOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+          data-testid={TEST_IDS.MODAL}
+        >
+          <h2 id="modal-title" className="sr-only">
+            Add People to Tag
+          </h2>
+          <button
+            type="button"
+            data-testid={TEST_IDS.CLOSE_BUTTON}
+            onClick={hideAddPeopleToTagModal}
+            aria-label="Close modal"
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MockAddPeopleToTag;
diff --git a/src/screens/ManageTag/ManageTagMockComponents/MockTagActions.tsx b/src/screens/ManageTag/ManageTagMockComponents/MockTagActions.tsx
new file mode 100644
index 0000000000..3d2d6cc880
--- /dev/null
+++ b/src/screens/ManageTag/ManageTagMockComponents/MockTagActions.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { InterfaceTagActionsProps } from '../../../components/TagActions/TagActions';
+
+/**
+ * Component that mocks the TagActions component for the Manage Tag screen.
+ */
+
+const MockTagActions: React.FC<InterfaceTagActionsProps> = ({
+  tagActionsModalIsOpen,
+  hideTagActionsModal,
+}) => {
+  return (
+    <>
+      {tagActionsModalIsOpen && (
+        <div
+          data-testid="tagActionsModal"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modalTitle"
+        >
+          <h2 id="modalTitle" className="sr-only">
+            Tag Actions
+          </h2>
+          <button
+            data-testid="closeTagActionsModalBtn"
+            aria-label="Close modal"
+            onClick={hideTagActionsModal}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MockTagActions;
diff --git a/src/screens/ManageTag/ManageTagMocks.ts b/src/screens/ManageTag/ManageTagMocks.ts
new file mode 100644
index 0000000000..5ce1e62595
--- /dev/null
+++ b/src/screens/ManageTag/ManageTagMocks.ts
@@ -0,0 +1,336 @@
+import {
+  REMOVE_USER_TAG,
+  UNASSIGN_USER_TAG,
+  UPDATE_USER_TAG,
+} from 'GraphQl/Mutations/TagMutations';
+import { USER_TAGS_ASSIGNED_MEMBERS } from 'GraphQl/Queries/userTagQueries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_TAGS_ASSIGNED_MEMBERS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: '' },
+        },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getAssignedUsers: {
+          name: 'tag1',
+          usersAssignedTo: {
+            edges: [
+              {
+                node: {
+                  _id: '1',
+                  firstName: 'member',
+                  lastName: '1',
+                },
+                cursor: '1',
+              },
+              {
+                node: {
+                  _id: '2',
+                  firstName: 'member',
+                  lastName: '2',
+                },
+                cursor: '2',
+              },
+              {
+                node: {
+                  _id: '3',
+                  firstName: 'member',
+                  lastName: '3',
+                },
+                cursor: '3',
+              },
+              {
+                node: {
+                  _id: '4',
+                  firstName: 'member',
+                  lastName: '4',
+                },
+                cursor: '4',
+              },
+              {
+                node: {
+                  _id: '5',
+                  firstName: 'member',
+                  lastName: '5',
+                },
+                cursor: '5',
+              },
+              {
+                node: {
+                  _id: '6',
+                  firstName: 'member',
+                  lastName: '6',
+                },
+                cursor: '6',
+              },
+              {
+                node: {
+                  _id: '7',
+                  firstName: 'member',
+                  lastName: '7',
+                },
+                cursor: '7',
+              },
+              {
+                node: {
+                  _id: '8',
+                  firstName: 'member',
+                  lastName: '8',
+                },
+                cursor: '8',
+              },
+              {
+                node: {
+                  _id: '9',
+                  firstName: 'member',
+                  lastName: '9',
+                },
+                cursor: '9',
+              },
+              {
+                node: {
+                  _id: '10',
+                  firstName: 'member',
+                  lastName: '10',
+                },
+                cursor: '10',
+              },
+            ],
+            pageInfo: {
+              startCursor: '1',
+              endCursor: '10',
+              hasNextPage: true,
+              hasPreviousPage: false,
+            },
+            totalCount: 12,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAGS_ASSIGNED_MEMBERS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: '10',
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: '' },
+        },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getAssignedUsers: {
+          name: 'tag1',
+          usersAssignedTo: {
+            edges: [
+              {
+                node: {
+                  _id: '11',
+                  firstName: 'member',
+                  lastName: '11',
+                },
+                cursor: '11',
+              },
+              {
+                node: {
+                  _id: '12',
+                  firstName: 'member',
+                  lastName: '12',
+                },
+                cursor: '12',
+              },
+            ],
+            pageInfo: {
+              startCursor: '11',
+              endCursor: '12',
+              hasNextPage: false,
+              hasPreviousPage: true,
+            },
+            totalCount: 12,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAGS_ASSIGNED_MEMBERS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: 'assigned' },
+          lastName: { starts_with: 'user' },
+        },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getAssignedUsers: {
+          name: 'tag1',
+          usersAssignedTo: {
+            edges: [
+              {
+                node: {
+                  _id: '1',
+                  firstName: 'assigned',
+                  lastName: 'user1',
+                },
+                cursor: '1',
+              },
+              {
+                node: {
+                  _id: '2',
+                  firstName: 'assigned',
+                  lastName: 'user2',
+                },
+                cursor: '2',
+              },
+            ],
+            pageInfo: {
+              startCursor: '1',
+              endCursor: '2',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 2,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAGS_ASSIGNED_MEMBERS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: 'assigned' },
+          lastName: { starts_with: 'user' },
+        },
+        sortedBy: { id: 'ASCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getAssignedUsers: {
+          name: 'tag1',
+          usersAssignedTo: {
+            edges: [
+              {
+                node: {
+                  _id: '2',
+                  firstName: 'assigned',
+                  lastName: 'user2',
+                },
+                cursor: '2',
+              },
+              {
+                node: {
+                  _id: '1',
+                  firstName: 'assigned',
+                  lastName: 'user1',
+                },
+                cursor: '1',
+              },
+            ],
+            pageInfo: {
+              startCursor: '2',
+              endCursor: '1',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 2,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UNASSIGN_USER_TAG,
+      variables: {
+        tagId: '1',
+        userId: '1',
+      },
+    },
+    result: {
+      data: {
+        unassignUserTag: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_USER_TAG,
+      variables: {
+        tagId: '1',
+        name: 'tag 1 edited',
+      },
+    },
+    result: {
+      data: {
+        updateUserTag: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: REMOVE_USER_TAG,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        removeUserTag: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR_ASSIGNED_MEMBERS = [
+  {
+    request: {
+      query: USER_TAGS_ASSIGNED_MEMBERS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: {
+          firstName: { starts_with: '' },
+          lastName: { starts_with: '' },
+        },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/screens/ManageTag/RemoveUserTagModal.tsx b/src/screens/ManageTag/RemoveUserTagModal.tsx
new file mode 100644
index 0000000000..dc000f443c
--- /dev/null
+++ b/src/screens/ManageTag/RemoveUserTagModal.tsx
@@ -0,0 +1,72 @@
+import type { TFunction } from 'i18next';
+import React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+/**
+ * Remove UserTag Modal component for the Manage Tag screen.
+ */
+
+export interface InterfaceRemoveUserTagModalProps {
+  removeUserTagModalIsOpen: boolean;
+  toggleRemoveUserTagModal: () => void;
+  handleRemoveUserTag: () => Promise<void>;
+  t: TFunction<'translation', 'manageTag'>;
+  tCommon: TFunction<'common', undefined>;
+}
+
+const RemoveUserTagModal: React.FC<InterfaceRemoveUserTagModalProps> = ({
+  removeUserTagModalIsOpen,
+  toggleRemoveUserTagModal,
+  handleRemoveUserTag,
+  t,
+  tCommon,
+}) => {
+  return (
+    <>
+      <Modal
+        size="sm"
+        id="removeUserTagModal"
+        aria-describedby="removeUserTagMessage"
+        show={removeUserTagModalIsOpen}
+        onHide={toggleRemoveUserTagModal}
+        backdrop="static"
+        keyboard={false}
+        centered
+      >
+        <Modal.Header closeButton className="bg-primary">
+          <Modal.Title className="text-white" id="removeUserTag">
+            {t('removeUserTag')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body id="removeUserTagMessage">
+          {t('removeUserTagMessage')}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            type="button"
+            className="btn btn-danger"
+            data-dismiss="modal"
+            role="button"
+            aria-label={tCommon('no')}
+            onClick={toggleRemoveUserTagModal}
+            data-testid="removeUserTagModalCloseBtn"
+          >
+            {tCommon('no')}
+          </Button>
+          <Button
+            type="button"
+            className="btn btn-success"
+            role="button"
+            aria-label={tCommon('yes')}
+            onClick={handleRemoveUserTag}
+            data-testid="removeUserTagSubmitBtn"
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+
+export default RemoveUserTagModal;
diff --git a/src/screens/ManageTag/UnassignUserTagModal.tsx b/src/screens/ManageTag/UnassignUserTagModal.tsx
new file mode 100644
index 0000000000..9d926790c3
--- /dev/null
+++ b/src/screens/ManageTag/UnassignUserTagModal.tsx
@@ -0,0 +1,80 @@
+import type { TFunction } from 'i18next';
+import React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+/**
+ * Unassign UserTag Modal component for the Manage Tag screen.
+ */
+
+export interface InterfaceUnassignUserTagModalProps {
+  unassignUserTagModalIsOpen: boolean;
+  toggleUnassignUserTagModal: () => void;
+  handleUnassignUserTag: () => Promise<void>;
+  t: TFunction<'translation', 'manageTag' | 'memberDetail'>;
+  tCommon: TFunction<'common', undefined>;
+}
+
+const UnassignUserTagModal: React.FC<InterfaceUnassignUserTagModalProps> = ({
+  unassignUserTagModalIsOpen,
+  toggleUnassignUserTagModal,
+  handleUnassignUserTag,
+  t,
+  tCommon,
+}) => {
+  return (
+    <>
+      <Modal
+        size="sm"
+        id="unassignTagModal"
+        show={unassignUserTagModalIsOpen}
+        onHide={toggleUnassignUserTagModal}
+        backdrop="static"
+        keyboard={false}
+        centered
+        aria-labelledby="unassignTagModalTitle"
+      >
+        <Modal.Header
+          closeButton
+          className="bg-primary"
+          aria-label={t('closeModal')}
+        >
+          <Modal.Title className="text-white" id={`unassignTag`}>
+            {t('unassignUserTag')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>{t('unassignUserTagMessage')}</Modal.Body>
+        <Modal.Footer>
+          <Button
+            type="button"
+            className="btn btn-danger"
+            data-dismiss="modal"
+            onClick={toggleUnassignUserTagModal}
+            data-testid="unassignTagModalCloseBtn"
+            aria-label={tCommon('no')}
+          >
+            {tCommon('no')}
+          </Button>
+          <Button
+            type="button"
+            className="btn btn-success"
+            onClick={async (e) => {
+              const btn = e.currentTarget;
+              btn.disabled = true;
+              try {
+                await handleUnassignUserTag();
+              } finally {
+                btn.disabled = false;
+              }
+            }}
+            data-testid="unassignTagModalSubmitBtn"
+            aria-label={tCommon('yes')}
+          >
+            {tCommon('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+
+export default UnassignUserTagModal;
diff --git a/src/screens/MemberDetail/MemberDetail.module.css b/src/screens/MemberDetail/MemberDetail.module.css
new file mode 100644
index 0000000000..7b421adcf8
--- /dev/null
+++ b/src/screens/MemberDetail/MemberDetail.module.css
@@ -0,0 +1,686 @@
+.mainpage {
+  display: flex;
+  flex-direction: row;
+}
+
+.sidebar {
+  z-index: 0;
+  padding-top: 5px;
+  margin: 0;
+  height: 100%;
+}
+
+.editIcon {
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  cursor: pointer;
+}
+.selectWrapper {
+  position: relative;
+}
+
+.selectWithChevron {
+  appearance: none;
+  padding-right: 30px;
+}
+
+.selectWrapper::after {
+  content: '\25BC';
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.sidebar:after {
+  content: '';
+  background-color: #f7f7f7;
+  position: absolute;
+  width: 2px;
+  height: 600px;
+  top: 10px;
+  left: 94%;
+  display: block;
+}
+
+.sidebarsticky {
+  padding: 0 2rem;
+  text-overflow: ellipsis;
+  /* overflow-x: hidden; */
+}
+
+/* .sidebarsticky:hover{
+  overflow-x:visible;
+  transition: all 0.4s ease;
+  background-color: #707070;
+
+} */
+.sidebarsticky > p {
+  margin-top: -10px;
+}
+
+.navitem {
+  padding-left: 27%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+
+.searchtitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 60px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 60%;
+}
+
+.contact {
+  width: 100%;
+}
+
+.sidebarsticky > input {
+  text-decoration: none;
+  margin-bottom: 50px;
+  border-color: #e8e5e5;
+  width: 80%;
+  border-radius: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  box-shadow: none;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 30%;
+}
+
+.logintitleadmin {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 60%;
+}
+.cardBody {
+  height: 35vh;
+  overflow-y: scroll;
+}
+
+.admindetails {
+  display: flex;
+  justify-content: space-between;
+}
+
+.admindetails > p {
+  margin-top: -12px;
+  margin-right: 30px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+.justifysp {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  /* gap : 2px; */
+}
+
+.flexclm {
+  display: flex;
+  flex-direction: column;
+}
+
+.btngroup {
+  display: flex;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+@media screen and (max-width: 1200px) {
+  .justifysp {
+    padding-left: 55px;
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .mainpageright {
+    width: 100%;
+  }
+
+  .invitebtn {
+    position: relative;
+    right: 15px;
+  }
+}
+
+.invitebtn {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60%;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  background-color: #31bb6b;
+  margin-right: 13px;
+}
+
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  padding: 40px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+  max-height: 86vh;
+  overflow: auto;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 65%;
+}
+
+.checkboxdiv > label {
+  margin-right: 50px;
+}
+
+.checkboxdiv > label > input {
+  margin-left: 10px;
+}
+
+.orgphoto {
+  margin-top: 5px;
+}
+
+.orgphoto > input {
+  margin-top: 10px;
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+
+.modalbody {
+  width: 50px;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.whiteregbtn {
+  margin: 1rem 0 0;
+  margin-right: 2px;
+  margin-top: 10px;
+  border: 1px solid #31bb6b;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: white;
+  font-size: 16px;
+  color: #31bb6b;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.list_box {
+  height: 70vh;
+  overflow-y: auto;
+  width: auto;
+  padding-right: 50px;
+}
+
+.dispflex {
+  display: flex;
+}
+
+.dispflex > input {
+  width: 20%;
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+
+.checkboxdiv {
+  display: flex;
+}
+
+.checkboxdiv > div {
+  width: 50%;
+}
+
+@media only screen and (max-width: 600px) {
+  .sidebar {
+    position: relative;
+    bottom: 18px;
+  }
+
+  .invitebtn {
+    width: 135px;
+    position: relative;
+    right: 10px;
+  }
+
+  .form_wrapper {
+    width: 90%;
+  }
+
+  .searchtitle {
+    margin-top: 30px;
+  }
+}
+
+/* User page */
+
+.memberfontcreatedbtn {
+  border-radius: 7px;
+  border-color: #31bb6b;
+  background-color: #31bb6b;
+  color: white;
+  box-shadow: none;
+  height: 2.5rem;
+  width: max-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.userImage {
+  width: 180px;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+@media only screen and (max-width: 1200px) {
+  .userImage {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+.activeBtn {
+  width: 100%;
+  display: flex;
+  color: #fff;
+  border: 1px solid #000;
+  background-color: #31bb6b;
+  transition: 0.5s;
+}
+
+.activeBtn:hover {
+  color: #fff;
+  background: #23864c;
+  transition: 0.5s;
+}
+
+.inactiveBtn {
+  width: 100%;
+  display: flex;
+  color: #31bb6b;
+  border: 1px solid #31bb6a60;
+  background-color: #fff;
+  transition: 0.5s;
+}
+
+.inactiveBtn:hover {
+  color: #fff;
+  background: #31bb6b;
+  transition: 0.5s;
+}
+
+.sidebarsticky > button {
+  display: flex;
+  align-items: center;
+  text-align: start;
+  padding: 0 1.5rem;
+  height: 3.25rem;
+  margin: 0 0 1.5rem 0;
+  font-weight: bold;
+  border-radius: 50px;
+}
+
+.bgFill {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  margin-right: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.activeBtn .bgFill {
+  background-color: #fff;
+}
+
+.activeBtn i {
+  color: #31bb6b;
+}
+
+.inactiveBtn .bgFill {
+  background-color: #31bb6b;
+}
+
+.inactiveBtn:hover .bgFill {
+  background-color: #fff;
+}
+
+.inactiveBtn i {
+  color: #fff;
+}
+
+.inactiveBtn:hover i {
+  color: #31bb6b;
+}
+
+.topRadius {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+.eventContainer {
+  display: flex;
+  align-items: start;
+}
+
+.eventDetailsBox {
+  position: relative;
+  box-sizing: border-box;
+  background: #ffffff;
+  width: 66%;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  margin-bottom: 0;
+  margin-top: 20px;
+}
+.ctacards {
+  padding: 20px;
+  width: 100%;
+  display: flex;
+  margin: 0 4px;
+  justify-content: space-between;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  border-radius: 20px;
+}
+.ctacards span {
+  color: rgb(181, 181, 181);
+  font-size: small;
+}
+/* .eventDetailsBox::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 6px;
+  background-color: #31bb6b;
+  border-radius: 20px;
+} */
+
+.time {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  padding-bottom: 0px;
+  width: 33%;
+
+  box-sizing: border-box;
+  background: #ffffff;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  margin-bottom: 0;
+  margin-top: 20px;
+  margin-left: 10px;
+}
+
+.startTime,
+.endTime {
+  display: flex;
+  font-size: 20px;
+}
+
+.to {
+  padding-right: 10px;
+}
+
+.startDate,
+.endDate {
+  color: #808080;
+  font-size: 14px;
+}
+
+.titlename {
+  font-weight: 600;
+  font-size: 25px;
+  padding: 15px;
+  padding-bottom: 0px;
+  width: 50%;
+}
+
+.description {
+  color: #737373;
+  font-weight: 300;
+  font-size: 14px;
+  word-wrap: break-word;
+  padding: 15px;
+  padding-bottom: 0px;
+}
+
+.toporgloc {
+  font-size: 16px;
+  padding: 15px;
+  padding-bottom: 0px;
+}
+
+.toporgloc span {
+  color: #737373;
+}
+
+.inputColor {
+  background: #f1f3f6;
+}
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.width60 {
+  width: 60%;
+}
+
+.maxWidth40 {
+  max-width: 40%;
+}
+.maxWidth50 {
+  max-width: 50%;
+}
+
+.allRound {
+  border-radius: 16px;
+}
+
+.WidthFit {
+  width: fit-content;
+}
+
+.datebox {
+  border-radius: 7px;
+  border-color: #e8e5e5;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.datebox > div > input {
+  padding: 0.5rem 0 0.5rem 0.5rem !important; /* top, right, bottom, left */
+  background-color: #f1f3f6;
+  border-radius: var(--bs-border-radius) !important;
+  border: none !important;
+}
+
+.datebox > div > div {
+  margin-left: 0px !important;
+}
+
+.datebox > div > fieldset {
+  border: none !important;
+  /* background-color: #f1f3f6; */
+  border-radius: var(--bs-border-radius) !important;
+}
+
+.datebox > div {
+  margin: 0.5rem !important;
+  background-color: #f1f3f6;
+}
+
+input::file-selector-button {
+  background-color: black;
+  color: white;
+}
+
+.noOutline {
+  outline: none;
+}
+
+.Outline {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.tagLink {
+  font-weight: 600;
+  color: var(--bs-gray-700);
+  cursor: pointer;
+}
+
+.tagLink:hover {
+  font-weight: 800;
+  color: var(--bs-blue);
+  text-decoration: underline;
+}
diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
new file mode 100644
index 0000000000..b0514701f5
--- /dev/null
+++ b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -0,0 +1,400 @@
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter, MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import MemberDetail, { getLanguageName, prettyDate } from './MemberDetail';
+import { MOCKS1, MOCKS2, MOCKS3 } from './MemberDetailMocks';
+import type { ApolloLink } from '@apollo/client';
+import { toast } from 'react-toastify';
+
+const link1 = new StaticMockLink(MOCKS1, true);
+const link2 = new StaticMockLink(MOCKS2, true);
+const link3 = new StaticMockLink(MOCKS3, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+}
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18nForTest.getDataByLanguage('en')?.translation.memberDetail ?? {},
+    ),
+  ),
+  ...JSON.parse(
+    JSON.stringify(i18nForTest.getDataByLanguage('en')?.common ?? {}),
+  ),
+  ...JSON.parse(
+    JSON.stringify(i18nForTest.getDataByLanguage('en')?.errors ?? {}),
+  ),
+};
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const props = {
+  id: 'rishav-jha-mech',
+};
+
+const renderMemberDetailScreen = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgtags/123']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Routes>
+              <Route
+                path="/orgtags/:orgId"
+                element={<MemberDetail {...props} />}
+              />
+              <Route
+                path="/orgtags/:orgId/manageTag/:tagId"
+                element={<div data-testid="manageTagScreen"></div>}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('MemberDetail', () => {
+  global.alert = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('should render the elements', async () => {
+    renderMemberDetailScreen(link1);
+
+    await wait();
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    expect(screen.getAllByText(/Email/i)).toBeTruthy();
+    expect(screen.getAllByText(/First name/i)).toBeTruthy();
+    expect(screen.getAllByText(/Last name/i)).toBeTruthy();
+    // expect(screen.getAllByText(/Language/i)).toBeTruthy();
+    // expect(screen.getByText(/Plugin creation allowed/i)).toBeInTheDocument();
+    // expect(screen.getAllByText(/Joined on/i)).toBeTruthy();
+    // expect(screen.getAllByText(/Joined On/i)).toHaveLength(1);
+    expect(screen.getAllByText(/Profile Details/i)).toHaveLength(1);
+    // expect(screen.getAllByText(/Actions/i)).toHaveLength(1);
+    expect(screen.getAllByText(/Contact Information/i)).toHaveLength(1);
+    expect(screen.getAllByText(/Events Attended/i)).toHaveLength(2);
+  });
+
+  test('prettyDate function should work properly', () => {
+    // If the date is provided
+    const datePretty = jest.fn(prettyDate);
+    expect(datePretty('2023-02-18T09:22:27.969Z')).toBe(
+      prettyDate('2023-02-18T09:22:27.969Z'),
+    );
+    // If there's some error in formatting the date
+    expect(datePretty('')).toBe('Unavailable');
+  });
+
+  test('getLanguageName function should work properly', () => {
+    const getLangName = jest.fn(getLanguageName);
+    // If the language code is provided
+    expect(getLangName('en')).toBe('English');
+    // If the language code is not provided
+    expect(getLangName('')).toBe('Unavailable');
+  });
+
+  test('should render props and text elements test for the page component', async () => {
+    const formData = {
+      firstName: 'Ansh',
+      lastName: 'Goyal',
+      email: 'ansh@gmail.com',
+      image: new File(['hello'], 'hello.png', { type: 'image/png' }),
+      address: 'abc',
+      countryCode: 'IN',
+      state: 'abc',
+      city: 'abc',
+      phoneNumber: '1234567890',
+      birthDate: '03/28/2022',
+    };
+    renderMemberDetailScreen(link2);
+
+    await wait();
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    expect(screen.getAllByText(/Email/i)).toBeTruthy();
+    expect(screen.getByText('User')).toBeInTheDocument();
+    const birthDateDatePicker = screen.getByTestId('birthDate');
+    fireEvent.change(birthDateDatePicker, {
+      target: { value: formData.birthDate },
+    });
+
+    userEvent.clear(screen.getByPlaceholderText(/First Name/i));
+    userEvent.type(
+      screen.getByPlaceholderText(/First Name/i),
+      formData.firstName,
+    );
+
+    userEvent.clear(screen.getByPlaceholderText(/Last Name/i));
+    userEvent.type(
+      screen.getByPlaceholderText(/Last Name/i),
+      formData.lastName,
+    );
+
+    userEvent.clear(screen.getByPlaceholderText(/Address/i));
+    userEvent.type(screen.getByPlaceholderText(/Address/i), formData.address);
+
+    userEvent.clear(screen.getByPlaceholderText(/Country Code/i));
+    userEvent.type(
+      screen.getByPlaceholderText(/Country Code/i),
+      formData.countryCode,
+    );
+
+    userEvent.clear(screen.getByPlaceholderText(/State/i));
+    userEvent.type(screen.getByPlaceholderText(/State/i), formData.state);
+
+    userEvent.clear(screen.getByPlaceholderText(/City/i));
+    userEvent.type(screen.getByPlaceholderText(/City/i), formData.city);
+
+    userEvent.clear(screen.getByPlaceholderText(/Email/i));
+    userEvent.type(screen.getByPlaceholderText(/Email/i), formData.email);
+
+    userEvent.clear(screen.getByPlaceholderText(/Phone/i));
+    userEvent.type(screen.getByPlaceholderText(/Phone/i), formData.phoneNumber);
+
+    // userEvent.click(screen.getByPlaceholderText(/pluginCreationAllowed/i));
+    // userEvent.selectOptions(screen.getByTestId('applangcode'), 'Français');
+    // userEvent.upload(screen.getByLabelText(/Display Image:/i), formData.image);
+    await wait();
+
+    userEvent.click(screen.getByText(/Save Changes/i));
+
+    expect(screen.getByPlaceholderText(/First Name/i)).toHaveValue(
+      formData.firstName,
+    );
+    expect(screen.getByPlaceholderText(/Last Name/i)).toHaveValue(
+      formData.lastName,
+    );
+    expect(birthDateDatePicker).toHaveValue(formData.birthDate);
+    expect(screen.getByPlaceholderText(/Email/i)).toHaveValue(formData.email);
+    expect(screen.getByPlaceholderText(/First Name/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/Last Name/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/Email/i)).toBeInTheDocument();
+    // expect(screen.getByText(/Display Image/i)).toBeInTheDocument();
+  });
+
+  test('display admin', async () => {
+    renderMemberDetailScreen(link1);
+    await wait();
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  test('display super admin', async () => {
+    renderMemberDetailScreen(link3);
+    await wait();
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    expect(screen.getByText('Super Admin')).toBeInTheDocument();
+  });
+
+  test('Should display dicebear image if image is null', async () => {
+    renderMemberDetailScreen(link1);
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+
+    const dicebearUrl = `mocked-data-uri`;
+
+    const userImage = await screen.findByTestId('userImageAbsent');
+    expect(userImage).toBeInTheDocument();
+    expect(userImage.getAttribute('src')).toBe(dicebearUrl);
+  });
+
+  test('Should display image if image is present', async () => {
+    renderMemberDetailScreen(link2);
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+
+    const user = MOCKS2[0].result?.data?.user?.user;
+    const userImage = await screen.findByTestId('userImagePresent');
+    expect(userImage).toBeInTheDocument();
+    expect(userImage.getAttribute('src')).toBe(user?.image);
+  });
+
+  test('resetChangesBtn works properly', async () => {
+    renderMemberDetailScreen(link1);
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Address/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Address/i), 'random');
+    userEvent.type(screen.getByPlaceholderText(/State/i), 'random');
+
+    userEvent.click(screen.getByTestId('resetChangesBtn'));
+    await wait();
+    expect(screen.getByPlaceholderText(/First Name/i)).toHaveValue('Aditya');
+    expect(screen.getByPlaceholderText(/Last Name/i)).toHaveValue('Agarwal');
+    expect(screen.getByPlaceholderText(/Phone/i)).toHaveValue('');
+    expect(screen.getByPlaceholderText(/Address/i)).toHaveValue('');
+    expect(screen.getByPlaceholderText(/State/i)).toHaveValue('');
+    expect(screen.getByPlaceholderText(/Country Code/i)).toHaveValue('');
+    expect(screen.getByTestId('birthDate')).toHaveValue('03/14/2024');
+  });
+
+  test('should be redirected to / if member id is undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <MemberDetail />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(window.location.pathname).toEqual('/');
+  });
+
+  test('renders events attended card correctly and show a message', async () => {
+    renderMemberDetailScreen(link3);
+    await waitFor(() => {
+      expect(screen.getByText('Events Attended')).toBeInTheDocument();
+    });
+    // Check for empty state immediately
+    expect(screen.getByText('No Events Attended')).toBeInTheDocument();
+  });
+
+  test('opens "Events Attended List" modal when View All button is clicked', async () => {
+    renderMemberDetailScreen(link2);
+
+    await wait();
+
+    // Find and click the "View All" button
+    const viewAllButton = screen.getByText('View All');
+    userEvent.click(viewAllButton);
+
+    // Check if the modal with the title "Events Attended List" is now visible
+    const modalTitle = await screen.findByText('Events Attended List');
+    expect(modalTitle).toBeInTheDocument();
+  });
+
+  test('lists all the tags assigned to the user', async () => {
+    renderMemberDetailScreen(link1);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')).toHaveLength(10);
+    });
+  });
+
+  test('navigates to manage tag screen after clicking manage tag option', async () => {
+    renderMemberDetailScreen(link1);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('tagName')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('manageTagScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('loads more assigned tags with infinite scroll', async () => {
+    renderMemberDetailScreen(link1);
+
+    await wait();
+
+    // now scroll to the bottom of the div
+    const tagsAssignedScrollableDiv = screen.getByTestId(
+      'tagsAssignedScrollableDiv',
+    );
+
+    // Get the initial number of tags loaded
+    const initialTagsAssignedLength = screen.getAllByTestId('tagName').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(tagsAssignedScrollableDiv, {
+      target: { scrollY: tagsAssignedScrollableDiv.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalTagsAssignedLength = screen.getAllByTestId('tagName').length;
+      expect(finalTagsAssignedLength).toBeGreaterThan(
+        initialTagsAssignedLength,
+      );
+    });
+  });
+
+  test('opens and closes the unassign tag modal', async () => {
+    renderMemberDetailScreen(link1);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('unassignTagBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('unassignTagBtn')[0]);
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('unassignTagModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('unassignTagModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('unassignTagModalCloseBtn'),
+    );
+  });
+
+  test('unassigns a tag from a member', async () => {
+    renderMemberDetailScreen(link1);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('unassignTagBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('unassignTagBtn')[0]);
+
+    userEvent.click(screen.getByTestId('unassignTagModalSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.successfullyUnassigned,
+      );
+    });
+  });
+});
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
new file mode 100644
index 0000000000..cd552c80a0
--- /dev/null
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -0,0 +1,762 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import styles from './MemberDetail.module.css';
+import { languages } from 'utils/languages';
+import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import { Card, Row, Col } from 'react-bootstrap';
+import Loader from 'components/Loader/Loader';
+import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
+import EventsAttendedByMember from '../../components/MemberDetail/EventsAttendedByMember';
+import MemberAttendedEventsModal from '../../components/MemberDetail/EventsAttendedMemberModal';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import convertToBase64 from 'utils/convertToBase64';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import {
+  educationGradeEnum,
+  maritalStatusEnum,
+  genderEnum,
+  employmentStatusEnum,
+} from 'utils/formEnumFields';
+import DynamicDropDown from 'components/DynamicDropDown/DynamicDropDown';
+import type { InterfaceEvent } from 'components/EventManagement/EventAttendance/InterfaceEvents';
+import type { InterfaceTagData } from 'utils/interfaces';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+import UnassignUserTagModal from 'screens/ManageTag/UnassignUserTagModal';
+import { UNASSIGN_USER_TAG } from 'GraphQl/Mutations/TagMutations';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+type MemberDetailProps = {
+  id?: string;
+};
+
+/**
+ * MemberDetail component is used to display the details of a user.
+ * It also allows the user to update the details. It uses the UPDATE_USER_MUTATION to update the user details.
+ * It uses the USER_DETAILS query to get the user details. It uses the useLocalStorage hook to store the user
+ *  details in the local storage.
+ * @param id - The id of the user whose details are to be displayed.
+ * @returns  React component
+ *
+ */
+const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'memberDetail',
+  });
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { t: tCommon } = useTranslation('common');
+  const location = useLocation();
+  const isMounted = useRef(true);
+  const { getItem, setItem } = useLocalStorage();
+  const [show, setShow] = useState(false);
+  const currentUrl = location.state?.id || getItem('id') || id;
+
+  const { orgId } = useParams();
+  const navigate = useNavigate();
+
+  const [unassignUserTagModalIsOpen, setUnassignUserTagModalIsOpen] =
+    useState(false);
+
+  document.title = t('title');
+  const [formState, setFormState] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    appLanguageCode: '',
+    image: '',
+    gender: '',
+    birthDate: '2024-03-14',
+    grade: '',
+    empStatus: '',
+    maritalStatus: '',
+    phoneNumber: '',
+    address: '',
+    state: '',
+    city: '',
+    country: '',
+    pluginCreationAllowed: false,
+  });
+  const handleDateChange = (date: Dayjs | null): void => {
+    if (date) {
+      setisUpdated(true);
+      setFormState((prevState) => ({
+        ...prevState,
+        birthDate: dayjs(date).format('YYYY-MM-DD'),
+      }));
+    }
+  };
+
+  /*istanbul ignore next*/
+  const handleEditIconClick = (): void => {
+    fileInputRef.current?.click();
+  };
+  const [updateUser] = useMutation(UPDATE_USER_MUTATION);
+  const {
+    data: user,
+    loading,
+    refetch: refetchUserDetails,
+    fetchMore: fetchMoreAssignedTags,
+  } = useQuery(USER_DETAILS, {
+    variables: { id: currentUrl, first: TAGS_QUERY_DATA_CHUNK_SIZE },
+  });
+  const userData = user?.user;
+  const [isUpdated, setisUpdated] = useState(false);
+  useEffect(() => {
+    if (userData && isMounted.current) {
+      setFormState({
+        ...formState,
+        firstName: userData?.user?.firstName,
+        lastName: userData?.user?.lastName,
+        email: userData?.user?.email,
+        appLanguageCode: userData?.appUserProfile?.appLanguageCode,
+        gender: userData?.user?.gender,
+        birthDate: userData?.user?.birthDate || ' ',
+        grade: userData?.user?.educationGrade,
+        empStatus: userData?.user?.employmentStatus,
+        maritalStatus: userData?.user?.maritalStatus,
+        phoneNumber: userData?.user?.phone?.mobile,
+        address: userData.user?.address?.line1,
+        state: userData?.user?.address?.state,
+        city: userData?.user?.address?.city,
+        country: userData?.user?.address?.countryCode,
+        pluginCreationAllowed: userData?.appUserProfile?.pluginCreationAllowed,
+        image: userData?.user?.image || '',
+      });
+    }
+  }, [userData, user]);
+  useEffect(() => {
+    // check component is mounted or not
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  const tagsAssigned =
+    userData?.user?.tagsAssignedWith.edges.map(
+      (edge: { node: InterfaceTagData; cursor: string }) => edge.node,
+    ) ?? /* istanbul ignore next */ [];
+
+  const loadMoreAssignedTags = (): void => {
+    fetchMoreAssignedTags({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after:
+          user?.user?.user?.tagsAssignedWith?.pageInfo?.endCursor ??
+          /* istanbul ignore next */
+          null,
+      },
+      updateQuery: (prevResult, { fetchMoreResult }) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          user: {
+            ...prevResult.user,
+            user: {
+              ...prevResult.user.user,
+              tagsAssignedWith: {
+                edges: [
+                  ...prevResult.user.user.tagsAssignedWith.edges,
+                  ...fetchMoreResult.user.user.tagsAssignedWith.edges,
+                ],
+                pageInfo: fetchMoreResult.user.user.tagsAssignedWith.pageInfo,
+                totalCount: fetchMoreResult.user.user.tagsAssignedWith.pageInfo,
+              },
+            },
+          },
+        };
+      },
+    });
+  };
+
+  const [unassignUserTag] = useMutation(UNASSIGN_USER_TAG);
+  const [unassignTagId, setUnassignTagId] = useState<string | null>(null);
+
+  const handleUnassignUserTag = async (): Promise<void> => {
+    try {
+      await unassignUserTag({
+        variables: {
+          tagId: unassignTagId,
+          userId: currentUrl,
+        },
+      });
+
+      refetchUserDetails();
+      toggleUnassignUserTagModal();
+      toast.success(t('successfullyUnassigned'));
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  const toggleUnassignUserTagModal = (): void => {
+    if (unassignUserTagModalIsOpen) {
+      setUnassignTagId(null);
+    }
+    setUnassignUserTagModalIsOpen(!unassignUserTagModalIsOpen);
+  };
+
+  const handleChange = async (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ): Promise<void> => {
+    const { name, value } = e.target;
+    /*istanbul ignore next*/
+    if (
+      name === 'photo' &&
+      'files' in e.target &&
+      e.target.files &&
+      e.target.files[0]
+    ) {
+      const file = e.target.files[0];
+      const base64 = await convertToBase64(file);
+      setFormState((prevState) => ({
+        ...prevState,
+        image: base64 as string,
+      }));
+    } else {
+      setFormState((prevState) => ({
+        ...prevState,
+        [name]: value,
+      }));
+    }
+    setisUpdated(true);
+  };
+  const handleEventsAttendedModal = (): void => {
+    setShow(!show);
+  };
+
+  const loginLink = async (): Promise<void> => {
+    try {
+      const firstName = formState.firstName;
+      const lastName = formState.lastName;
+      const email = formState.email;
+      // const appLanguageCode = formState.appLanguageCode;
+      const image = formState.image;
+      // const gender = formState.gender;
+      try {
+        const { data } = await updateUser({
+          variables: {
+            id: currentUrl,
+            ...formState,
+          },
+        });
+        /* istanbul ignore next */
+        if (data) {
+          setisUpdated(false);
+          if (getItem('id') === currentUrl) {
+            setItem('FirstName', firstName);
+            setItem('LastName', lastName);
+            setItem('Email', email);
+            setItem('UserImage', image);
+          }
+          toast.success(tCommon('successfullyUpdated') as string);
+        }
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          errorHandler(t, error);
+        }
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        errorHandler(t, error);
+      }
+    }
+  };
+  const resetChanges = (): void => {
+    /*istanbul ignore next*/
+    setFormState({
+      firstName: userData?.user?.firstName || '',
+      lastName: userData?.user?.lastName || '',
+      email: userData?.user?.email || '',
+      appLanguageCode: userData?.appUserProfile?.appLanguageCode || '',
+      image: userData?.user?.image || '',
+      gender: userData?.user?.gender || '',
+      empStatus: userData?.user?.employmentStatus || '',
+      maritalStatus: userData?.user?.maritalStatus || '',
+      phoneNumber: userData?.user?.phone?.mobile || '',
+      address: userData?.user?.address?.line1 || '',
+      country: userData?.user?.address?.countryCode || '',
+      city: userData?.user?.address?.city || '',
+      state: userData?.user?.address?.state || '',
+      birthDate: userData?.user?.birthDate || '',
+      grade: userData?.user?.educationGrade || '',
+      pluginCreationAllowed:
+        userData?.appUserProfile?.pluginCreationAllowed || false,
+    });
+    setisUpdated(false);
+  };
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      {show && (
+        <MemberAttendedEventsModal
+          eventsAttended={userData?.user?.eventsAttended}
+          show={show}
+          setShow={setShow}
+        />
+      )}
+      <Row className="g-4 mt-1">
+        <Col md={6}>
+          <Card className={`${styles.allRound}`}>
+            <Card.Header
+              className={`bg-success text-white py-3 px-4 d-flex justify-content-between align-items-center ${styles.topRadius}`}
+            >
+              <h3 className="m-0">{t('personalDetailsHeading')}</h3>
+              <Button
+                variant="light"
+                size="sm"
+                disabled
+                className="rounded-pill fw-bolder"
+              >
+                {userData?.appUserProfile?.isSuperAdmin
+                  ? 'Super Admin'
+                  : userData?.appUserProfile?.adminFor.length > 0
+                    ? 'Admin'
+                    : 'User'}
+              </Button>
+            </Card.Header>
+            <Card.Body className="py-3 px-3">
+              <div className="text-center mb-3">
+                {formState?.image ? (
+                  <div className="position-relative d-inline-block">
+                    <img
+                      className="rounded-circle"
+                      style={{ width: '55px', aspectRatio: '1/1' }}
+                      src={formState.image}
+                      alt="User"
+                      data-testid="userImagePresent"
+                    />
+                    <i
+                      className="fas fa-edit position-absolute bottom-0 right-0 p-1 bg-white rounded-circle"
+                      onClick={handleEditIconClick}
+                      style={{ cursor: 'pointer' }}
+                      data-testid="editImage"
+                      title="Edit profile picture"
+                      role="button"
+                      aria-label="Edit profile picture"
+                      tabIndex={0}
+                      onKeyDown={
+                        /*istanbul ignore next*/
+                        (e) => e.key === 'Enter' && handleEditIconClick()
+                      }
+                    />
+                  </div>
+                ) : (
+                  <div className="position-relative d-inline-block">
+                    <Avatar
+                      name={`${formState.firstName} ${formState.lastName}`}
+                      alt="User Image"
+                      size={55}
+                      dataTestId="userImageAbsent"
+                      radius={150}
+                    />
+                    <i
+                      className="fas fa-edit position-absolute bottom-0 right-0 p-1 bg-white rounded-circle"
+                      onClick={handleEditIconClick}
+                      data-testid="editImage"
+                      style={{ cursor: 'pointer' }}
+                    />
+                  </div>
+                )}
+                <input
+                  type="file"
+                  id="orgphoto"
+                  name="photo"
+                  accept="image/*"
+                  onChange={handleChange}
+                  data-testid="organisationImage"
+                  ref={fileInputRef}
+                  style={{ display: 'none' }}
+                />
+              </div>
+              <Row className="g-3">
+                <Col md={6}>
+                  <label htmlFor="firstName" className="form-label">
+                    {tCommon('firstName')}
+                  </label>
+                  <input
+                    id="firstName"
+                    value={formState.firstName}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="firstName"
+                    onChange={handleChange}
+                    required
+                    placeholder={tCommon('firstName')}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="lastName" className="form-label">
+                    {tCommon('lastName')}
+                  </label>
+                  <input
+                    id="lastName"
+                    value={formState.lastName}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="lastName"
+                    onChange={handleChange}
+                    required
+                    placeholder={tCommon('lastName')}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="gender" className="form-label">
+                    {t('gender')}
+                  </label>
+                  <DynamicDropDown
+                    formState={formState}
+                    setFormState={setFormState}
+                    fieldOptions={genderEnum}
+                    fieldName="gender"
+                    handleChange={handleChange}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="birthDate" className="form-label">
+                    {t('birthDate')}
+                  </label>
+                  <DatePicker
+                    className={`${styles.datebox} w-100`}
+                    value={dayjs(formState.birthDate)}
+                    onChange={handleDateChange}
+                    data-testid="birthDate"
+                    slotProps={{
+                      textField: {
+                        inputProps: {
+                          'data-testid': 'birthDate',
+                          'aria-label': t('birthDate'),
+                        },
+                      },
+                    }}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="grade" className="form-label">
+                    {t('educationGrade')}
+                  </label>
+                  <DynamicDropDown
+                    formState={formState}
+                    setFormState={setFormState}
+                    fieldOptions={educationGradeEnum}
+                    fieldName="grade"
+                    handleChange={handleChange}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="empStatus" className="form-label">
+                    {t('employmentStatus')}
+                  </label>
+                  <DynamicDropDown
+                    formState={formState}
+                    setFormState={setFormState}
+                    fieldOptions={employmentStatusEnum}
+                    fieldName="empStatus"
+                    handleChange={handleChange}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="maritalStatus" className="form-label">
+                    {t('maritalStatus')}
+                  </label>
+                  <DynamicDropDown
+                    formState={formState}
+                    setFormState={setFormState}
+                    fieldOptions={maritalStatusEnum}
+                    fieldName="maritalStatus"
+                    handleChange={handleChange}
+                  />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+        <Col md={6}>
+          <Card className={`${styles.allRound}`}>
+            <Card.Header
+              className={`bg-success text-white py-3 px-4 ${styles.topRadius}`}
+            >
+              <h3 className="m-0">{t('contactInfoHeading')}</h3>
+            </Card.Header>
+            <Card.Body className="py-3 px-3">
+              <Row className="g-3">
+                <Col md={12}>
+                  <label htmlFor="email" className="form-label">
+                    {tCommon('email')}
+                  </label>
+                  <input
+                    id="email"
+                    value={formState.email}
+                    className={`form-control ${styles.inputColor}`}
+                    type="email"
+                    name="email"
+                    onChange={handleChange}
+                    required
+                    placeholder={tCommon('email')}
+                  />
+                </Col>
+                <Col md={12}>
+                  <label htmlFor="phoneNumber" className="form-label">
+                    {t('phone')}
+                  </label>
+                  <input
+                    id="phoneNumber"
+                    value={formState.phoneNumber}
+                    className={`form-control ${styles.inputColor}`}
+                    type="tel"
+                    name="phoneNumber"
+                    onChange={handleChange}
+                    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+                    placeholder={t('phone')}
+                  />
+                </Col>
+                <Col md={12}>
+                  <label htmlFor="address" className="form-label">
+                    {tCommon('address')}
+                  </label>
+                  <input
+                    id="address"
+                    value={formState.address}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="address"
+                    onChange={handleChange}
+                    placeholder={tCommon('address')}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="city" className="form-label">
+                    {t('city')}
+                  </label>
+                  <input
+                    id="city"
+                    value={formState.city}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="city"
+                    onChange={handleChange}
+                    placeholder={t('city')}
+                  />
+                </Col>
+                <Col md={6}>
+                  <label htmlFor="state" className="form-label">
+                    {t('state')}
+                  </label>
+                  <input
+                    id="state"
+                    value={formState.state}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="state"
+                    onChange={handleChange}
+                    placeholder={tCommon('state')}
+                  />
+                </Col>
+                <Col md={12}>
+                  <label htmlFor="country" className="form-label">
+                    {t('countryCode')}
+                  </label>
+                  <input
+                    id="country"
+                    value={formState.country}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="country"
+                    onChange={handleChange}
+                    placeholder={t('countryCode')}
+                  />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+        {isUpdated && (
+          <Col md={12}>
+            <Card.Footer className="bg-white border-top-0 d-flex justify-content-end gap-2 py-3 px-2">
+              <Button
+                variant="outline-secondary"
+                onClick={resetChanges}
+                data-testid="resetChangesBtn"
+              >
+                {tCommon('resetChanges')}
+              </Button>
+              <Button
+                variant="success"
+                onClick={loginLink}
+                data-testid="saveChangesBtn"
+              >
+                {tCommon('saveChanges')}
+              </Button>
+            </Card.Footer>
+          </Col>
+        )}
+      </Row>
+
+      <Row className="mb-4">
+        <Col xs={12} lg={6}>
+          <Card className={`${styles.contact} ${styles.allRound} mt-3`}>
+            <Card.Header
+              className={`bg-primary d-flex justify-content-between align-items-center py-3 px-4 ${styles.topRadius}`}
+            >
+              <h3 className="text-white m-0" data-testid="eventsAttended-title">
+                {t('tagsAssigned')}
+              </h3>
+            </Card.Header>
+            <Card.Body
+              id="tagsAssignedScrollableDiv"
+              data-testid="tagsAssignedScrollableDiv"
+              className={`${styles.cardBody} pe-0`}
+            >
+              {!tagsAssigned.length ? (
+                <div className="w-100 h-100 d-flex justify-content-center align-items-center fw-semibold text-secondary">
+                  {t('noTagsAssigned')}
+                </div>
+              ) : (
+                <InfiniteScroll
+                  dataLength={tagsAssigned?.length ?? 0}
+                  next={loadMoreAssignedTags}
+                  hasMore={
+                    userData?.user?.tagsAssignedWith.pageInfo.hasNextPage ??
+                    /* istanbul ignore next */
+                    false
+                  }
+                  loader={<InfiniteScrollLoader />}
+                  scrollableTarget="tagsAssignedScrollableDiv"
+                >
+                  {tagsAssigned.map((tag: InterfaceTagData, index: number) => (
+                    <div key={tag._id}>
+                      <div className="d-flex justify-content-between my-2 ms-2">
+                        <div
+                          className={styles.tagLink}
+                          data-testid="tagName"
+                          onClick={() =>
+                            navigate(`/orgtags/${orgId}/manageTag/${tag._id}`)
+                          }
+                        >
+                          {tag.parentTag ? (
+                            <>
+                              <i className={'fa fa-angle-double-right'} />
+                              <span className="me-2">...</span>
+                            </>
+                          ) : (
+                            <i className={'me-2 fa fa-angle-right'} />
+                          )}
+                          {tag.name}
+                        </div>
+                        <Button
+                          size="sm"
+                          variant="danger"
+                          onClick={() => {
+                            setUnassignTagId(tag._id);
+                            toggleUnassignUserTagModal();
+                          }}
+                          className="me-2"
+                          data-testid="unassignTagBtn"
+                        >
+                          {'Unassign'}
+                        </Button>
+                      </div>
+                      {index + 1 !== tagsAssigned.length && (
+                        <hr className="mx-0" />
+                      )}
+                    </div>
+                  ))}
+                </InfiniteScroll>
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+
+        <Col>
+          <Card className={`${styles.contact} ${styles.allRound} mt-3`}>
+            <Card.Header
+              className={`bg-primary d-flex justify-content-between align-items-center py-3 px-4 ${styles.topRadius}`}
+            >
+              <h3 className="text-white m-0" data-testid="eventsAttended-title">
+                {t('eventsAttended')}
+              </h3>
+              <Button
+                style={{ borderRadius: '20px' }}
+                size="sm"
+                variant="light"
+                data-testid="viewAllEvents"
+                onClick={handleEventsAttendedModal}
+              >
+                {t('viewAll')}
+              </Button>
+            </Card.Header>
+            <Card.Body
+              className={`${styles.cardBody} ${styles.scrollableCardBody}`}
+            >
+              {!userData?.user.eventsAttended?.length ? (
+                <div
+                  className={`${styles.emptyContainer} w-100 h-100 d-flex justify-content-center align-items-center fw-semibold text-secondary`}
+                >
+                  {t('noeventsAttended')}
+                </div>
+              ) : (
+                userData.user.eventsAttended.map(
+                  (event: InterfaceEvent, index: number) => (
+                    <span data-testid="membereventsCard" key={index}>
+                      <EventsAttendedByMember
+                        eventsId={event._id}
+                        key={index}
+                      />
+                    </span>
+                  ),
+                )
+              )}
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+
+      {/* Unassign User Tag Modal */}
+      <UnassignUserTagModal
+        unassignUserTagModalIsOpen={unassignUserTagModalIsOpen}
+        toggleUnassignUserTagModal={toggleUnassignUserTagModal}
+        handleUnassignUserTag={handleUnassignUserTag}
+        t={t}
+        tCommon={tCommon}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export const prettyDate = (param: string): string => {
+  const date = new Date(param);
+  if (date?.toDateString() === 'Invalid Date') {
+    return 'Unavailable';
+  }
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  return `${day} ${month} ${year}`;
+};
+export const getLanguageName = (code: string): string => {
+  let language = 'Unavailable';
+  languages.map((data) => {
+    if (data.code == code) {
+      language = data.name;
+    }
+  });
+  return language;
+};
+
+export default MemberDetail;
diff --git a/src/screens/MemberDetail/MemberDetailMocks.ts b/src/screens/MemberDetail/MemberDetailMocks.ts
new file mode 100644
index 0000000000..df72ee703c
--- /dev/null
+++ b/src/screens/MemberDetail/MemberDetailMocks.ts
@@ -0,0 +1,536 @@
+import { UNASSIGN_USER_TAG } from 'GraphQl/Mutations/TagMutations';
+import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+export const MOCKS1 = [
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'rishav-jha-mech',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+    },
+    result: {
+      data: {
+        user: {
+          __typename: 'UserData',
+          appUserProfile: {
+            _id: '1',
+            __typename: 'AppUserProfile',
+            adminFor: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            isSuperAdmin: false,
+            appLanguageCode: 'en',
+            createdEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            createdOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            eventAdmin: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            pluginCreationAllowed: true,
+          },
+          user: {
+            _id: '1',
+            __typename: 'User',
+            createdAt: '2024-02-26T10:36:33.098Z',
+            email: 'adi790u@gmail.com',
+            firstName: 'Aditya',
+            image: null,
+            lastName: 'Agarwal',
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+            eventsAttended: [],
+            joinedOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            tagsAssignedWith: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'userTag 1',
+                    parentTag: null,
+                  },
+                  cursor: '1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'userTag 2',
+                    parentTag: null,
+                  },
+                  cursor: '2',
+                },
+                {
+                  node: {
+                    _id: '3',
+                    name: 'userTag 3',
+                    parentTag: null,
+                  },
+                  cursor: '3',
+                },
+                {
+                  node: {
+                    _id: '4',
+                    name: 'userTag 4',
+                    parentTag: null,
+                  },
+                  cursor: '4',
+                },
+                {
+                  node: {
+                    _id: '5',
+                    name: 'userTag 5',
+                    parentTag: null,
+                  },
+                  cursor: '5',
+                },
+                {
+                  node: {
+                    _id: '6',
+                    name: 'userTag 6',
+                    parentTag: null,
+                  },
+                  cursor: '6',
+                },
+                {
+                  node: {
+                    _id: '7',
+                    name: 'userTag 7',
+                    parentTag: null,
+                  },
+                  cursor: '7',
+                },
+                {
+                  node: {
+                    _id: '8',
+                    name: 'userTag 8',
+                    parentTag: null,
+                  },
+                  cursor: '8',
+                },
+                {
+                  node: {
+                    _id: '9',
+                    name: 'userTag 9',
+                    parentTag: null,
+                  },
+                  cursor: '9',
+                },
+                {
+                  node: {
+                    _id: '10',
+                    name: 'userTag 10',
+                    parentTag: null,
+                  },
+                  cursor: '10',
+                },
+              ],
+              pageInfo: {
+                startCursor: '1',
+                endCursor: '10',
+                hasNextPage: true,
+                hasPreviousPage: false,
+              },
+              totalCount: 12,
+            },
+            membershipRequests: [],
+            organizationsBlockedBy: [],
+            registeredEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'rishav-jha-mech',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: '10',
+      },
+    },
+    result: {
+      data: {
+        user: {
+          __typename: 'UserData',
+          appUserProfile: {
+            _id: '1',
+            __typename: 'AppUserProfile',
+            adminFor: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            isSuperAdmin: false,
+            appLanguageCode: 'en',
+            createdEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            createdOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            eventAdmin: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            pluginCreationAllowed: true,
+          },
+          user: {
+            _id: '1',
+            __typename: 'User',
+            createdAt: '2024-02-26T10:36:33.098Z',
+            email: 'adi790u@gmail.com',
+            firstName: 'Aditya',
+            image: null,
+            lastName: 'Agarwal',
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+            eventsAttended: [],
+            joinedOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            tagsAssignedWith: {
+              edges: [
+                {
+                  node: {
+                    _id: '11',
+                    name: 'userTag 11',
+                    parentTag: null,
+                  },
+                  cursor: '11',
+                },
+                {
+                  node: {
+                    _id: '12',
+                    name: 'subTag 1',
+                    parentTag: { _id: '1' },
+                  },
+                  cursor: '12',
+                },
+              ],
+              pageInfo: {
+                startCursor: '11',
+                endCursor: '12',
+                hasNextPage: false,
+                hasPreviousPage: true,
+              },
+              totalCount: 12,
+            },
+            membershipRequests: [],
+            organizationsBlockedBy: [],
+            registeredEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UNASSIGN_USER_TAG,
+      variables: {
+        tagId: '1',
+        userId: 'rishav-jha-mech',
+      },
+    },
+    result: {
+      data: {
+        unassignUserTag: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS2 = [
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'rishav-jha-mech',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+    },
+    result: {
+      data: {
+        user: {
+          __typename: 'UserData',
+          appUserProfile: {
+            _id: '1',
+            __typename: 'AppUserProfile',
+            adminFor: [],
+            isSuperAdmin: false,
+            appLanguageCode: 'en',
+            createdEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            createdOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            eventAdmin: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            pluginCreationAllowed: true,
+          },
+          user: {
+            _id: '1',
+            __typename: 'User',
+            createdAt: '2024-02-26T10:36:33.098Z',
+            email: 'adi790u@gmail.com',
+            firstName: 'Aditya',
+            image: 'https://placeholder.com/200x200',
+            lastName: 'Agarwal',
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+            joinedOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            tagsAssignedWith: {
+              edges: [],
+              pageInfo: {
+                startCursor: null,
+                endCursor: null,
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 0,
+            },
+            eventsAttended: [{ _id: 'event1' }, { _id: 'event2' }],
+            membershipRequests: [],
+            organizationsBlockedBy: [],
+            registeredEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+];
+export const MOCKS3 = [
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'rishav-jha-mech',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      },
+    },
+    result: {
+      data: {
+        user: {
+          __typename: 'UserData',
+          appUserProfile: {
+            _id: '1',
+            __typename: 'AppUserProfile',
+            adminFor: [],
+            isSuperAdmin: true,
+            appLanguageCode: 'en',
+            createdEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            createdOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            eventAdmin: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+            pluginCreationAllowed: true,
+          },
+          user: {
+            _id: '1',
+            __typename: 'User',
+            createdAt: '2024-02-26T10:36:33.098Z',
+            email: 'adi790u@gmail.com',
+            firstName: 'Aditya',
+            image: 'https://placeholder.com/200x200',
+            lastName: 'Agarwal',
+            gender: '',
+            birthDate: '2024-03-14',
+            educationGrade: '',
+            employmentStatus: '',
+            maritalStatus: '',
+            address: {
+              line1: '',
+              countryCode: '',
+              city: '',
+              state: '',
+            },
+            phone: {
+              mobile: '',
+            },
+            tagsAssignedWith: {
+              edges: [],
+              pageInfo: {
+                startCursor: null,
+                endCursor: null,
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 0,
+            },
+            eventsAttended: [],
+            joinedOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '65e0df0906dd1228350cfd4a',
+              },
+              {
+                __typename: 'Organization',
+                _id: '65e0e2abb92c9f3e29503d4e',
+              },
+            ],
+            membershipRequests: [],
+            organizationsBlockedBy: [],
+            registeredEvents: [
+              {
+                __typename: 'Event',
+                _id: '65e32a5b2a1f4288ca1f086a',
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+];
diff --git a/src/screens/OrgContribution/OrgContribution.module.css b/src/screens/OrgContribution/OrgContribution.module.css
new file mode 100644
index 0000000000..7ca9333bf7
--- /dev/null
+++ b/src/screens/OrgContribution/OrgContribution.module.css
@@ -0,0 +1,261 @@
+.navbarbg {
+  height: 60px;
+  background-color: white;
+  display: flex;
+  margin-bottom: 30px;
+  z-index: 1;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  box-shadow: 0px 0px 8px 2px #c8c8c8;
+}
+
+.logo {
+  color: #707070;
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.logo img {
+  margin-top: 0px;
+  margin-left: 10px;
+  height: 64px;
+  width: 70px;
+}
+
+.logo > strong {
+  line-height: 1.5rem;
+  margin-left: -5px;
+  font-family: sans-serif;
+  font-size: 19px;
+  color: #707070;
+}
+.mainpage {
+  display: flex;
+  flex-direction: row;
+}
+.sidebar {
+  z-index: 0;
+  padding-top: 5px;
+  margin: 0;
+  height: 100%;
+}
+.sidebar:after {
+  background-color: #f7f7f7;
+  position: absolute;
+  width: 2px;
+  height: 600px;
+  top: 10px;
+  left: 94%;
+  display: block;
+}
+.sidebarsticky {
+  padding-left: 45px;
+  margin-top: 7px;
+}
+.sidebarsticky > p {
+  margin-top: -10px;
+}
+
+.navitem {
+  padding-left: 27%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+.searchtitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 60%;
+}
+.logintitleadmin {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 30%;
+}
+.admindetails {
+  display: flex;
+  justify-content: space-between;
+}
+.admindetails > p {
+  margin-top: -12px;
+  margin-right: 30px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+.justifysp {
+  display: flex;
+  justify-content: space-between;
+}
+@media screen and (max-width: 575.5px) {
+  .justifysp {
+    padding-left: 55px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+.addbtn {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 15%;
+  height: 40px;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  padding: 40px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+.logintitleinvite {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 40%;
+}
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+.modalbody {
+  width: 50px;
+}
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+.sidebarsticky > input {
+  text-decoration: none;
+  margin-bottom: 50px;
+  border-color: #e8e5e5;
+  width: 80%;
+  border-radius: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  box-shadow: none;
+}
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/screens/OrgContribution/OrgContribution.test.tsx b/src/screens/OrgContribution/OrgContribution.test.tsx
new file mode 100644
index 0000000000..f9f63c6807
--- /dev/null
+++ b/src/screens/OrgContribution/OrgContribution.test.tsx
@@ -0,0 +1,47 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import OrgContribution from './OrgContribution';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+const link = new StaticMockLink([], true);
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Organisation Contribution Page', () => {
+  test('should render props and text elements test for the screen', async () => {
+    window.location.assign('/orglist');
+
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgContribution />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(container.textContent).not.toBe('Loading data...');
+    await wait();
+
+    expect(container.textContent).toMatch('Filter by Name');
+    expect(container.textContent).toMatch('Filter by Trans. ID');
+    expect(container.textContent).toMatch('Recent Stats');
+    expect(container.textContent).toMatch('Contribution');
+    expect(window.location).toBeAt('/orglist');
+  });
+});
diff --git a/src/screens/OrgContribution/OrgContribution.tsx b/src/screens/OrgContribution/OrgContribution.tsx
new file mode 100644
index 0000000000..db155cdb47
--- /dev/null
+++ b/src/screens/OrgContribution/OrgContribution.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+
+import ContriStats from 'components/ContriStats/ContriStats';
+import OrgContriCards from 'components/OrgContriCards/OrgContriCards';
+import { Form } from 'react-bootstrap';
+import styles from './OrgContribution.module.css';
+
+/**
+ * The `orgContribution` component displays the contributions to an organization.
+ * It includes a sidebar for filtering contributions by organization name and transaction ID.
+ * Additionally, it shows recent contribution statistics and a list of contribution cards.
+ *
+ */
+function orgContribution(): JSX.Element {
+  // Hook to get translation functions and translation text
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgContribution',
+  });
+
+  // Set the document title based on the translated title for this page
+  document.title = t('title');
+
+  return (
+    <>
+      <Row>
+        <Col sm={3}>
+          <div className={styles.sidebar}>
+            <div className={styles.sidebarsticky}>
+              {/* Input for filtering by organization name */}
+              <h6 className={styles.searchtitle}>{t('filterByName')}</h6>
+              <Form.Control
+                type="name"
+                id="orgname"
+                placeholder={t('orgname')}
+                autoComplete="off"
+                required
+              />
+
+              {/* Input for filtering by transaction ID */}
+              <h6 className={styles.searchtitle}>{t('filterByTransId')}</h6>
+              <Form.Control
+                type="transaction"
+                id="searchtransaction"
+                placeholder={t('searchtransaction')}
+                autoComplete="off"
+                required
+              />
+
+              {/* Section displaying recent contribution statistics */}
+              <h6 className={styles.searchtitle}>{t('recentStats')}</h6>
+              <ContriStats
+                key="129"
+                id="21"
+                recentAmount="90"
+                highestAmount="500"
+                totalAmount="6000"
+              />
+            </div>
+          </div>
+        </Col>
+        <Col sm={8}>
+          <div className={styles.mainpageright}>
+            <Row className={styles.justifysp}>
+              <p className={styles.logintitle}>{t('contribution')}</p>
+            </Row>
+            {/* Section displaying a list of contribution cards */}
+            <OrgContriCards
+              key="129"
+              id="21"
+              userName="John Doe"
+              contriDate="20/7/2021"
+              contriAmount="21"
+              contriTransactionId="21WE98YU"
+              userEmail="johndoexyz@gmail.com"
+            />
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default orgContribution;
diff --git a/src/screens/OrgList/OrgList.module.css b/src/screens/OrgList/OrgList.module.css
new file mode 100644
index 0000000000..9da1ecbb70
--- /dev/null
+++ b/src/screens/OrgList/OrgList.module.css
@@ -0,0 +1,323 @@
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.orgCreationBtn {
+  width: 100%;
+  border: None;
+}
+
+.enableEverythingBtn {
+  width: 100%;
+  border: None;
+}
+
+.pluginStoreBtn {
+  width: 100%;
+  background-color: white;
+  color: #31bb6b;
+  border: 0.5px solid #31bb6b;
+}
+
+.pluginStoreBtn:hover,
+.pluginStoreBtn:focus {
+  background-color: #dfe1e2 !important;
+  color: #31bb6b !important;
+  border-color: #31bb6b !important;
+}
+
+.line::before {
+  content: '';
+  display: inline-block;
+  width: 100px;
+  border-top: 1px solid #000;
+  margin: 0 10px;
+}
+
+.line::before {
+  left: 0;
+}
+
+.line::after {
+  right: 0;
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.orText {
+  display: block;
+  position: absolute;
+  top: calc(-0.7rem + 0.5rem);
+  left: calc(50% - 2.6rem);
+  margin: 0 auto;
+  padding: 0.5rem 2rem;
+  z-index: 100;
+  background: var(--bs-white);
+  color: var(--bs-secondary);
+}
+.sampleOrgSection {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  row-gap: 1em;
+}
+
+.sampleOrgCreationBtn {
+  width: 100%;
+  background-color: transparent;
+  color: #707070;
+  border-color: #707070;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sampleHover:hover {
+  border-color: grey;
+  color: grey;
+}
+
+.sampleOrgSection {
+  font-family: Arial, Helvetica, sans-serif;
+  width: 100%;
+  display: grid;
+  grid-auto-columns: repeat(1, 1fr);
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sampleModalTitle {
+  background-color: green;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.listBox {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: unset !important;
+}
+
+.listBox .itemCard {
+  width: 50%;
+}
+
+.notFound {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+@media (max-width: 1440px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+
+  .listBox .itemCard {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+/* Loading OrgList CSS */
+.itemCard .loadingWrapper {
+  background-color: var(--bs-white);
+  margin: 0.5rem;
+  height: calc(120px + 2rem);
+  padding: 1rem;
+  border-radius: 8px;
+  outline: 1px solid var(--bs-gray-200);
+  position: relative;
+}
+
+.itemCard .loadingWrapper .innerContainer {
+  display: flex;
+}
+
+.itemCard .loadingWrapper .innerContainer .orgImgContainer {
+  width: 120px;
+  height: 120px;
+  border-radius: 4px;
+}
+
+.itemCard .loadingWrapper .innerContainer .content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
+}
+
+.titlemodaldialog {
+  color: #707070;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+}
+
+form label {
+  font-weight: bold;
+  padding-bottom: 1px;
+  font-size: 14px;
+  color: #707070;
+}
+
+form > input {
+  display: block;
+  margin-bottom: 20px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 2px 1px #e8e5e5;
+  padding: 10px 20px;
+  border-radius: 5px;
+  background: none;
+  width: 100%;
+  transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+}
+
+.itemCard .loadingWrapper .innerContainer .content h5 {
+  height: 24px;
+  width: 60%;
+  margin-bottom: 0.8rem;
+}
+
+.modalbody {
+  width: 50px;
+}
+
+.pluginStoreBtnContainer {
+  display: flex;
+  gap: 1rem;
+}
+
+.itemCard .loadingWrapper .innerContainer .content h6[title='Location'] {
+  display: block;
+  width: 45%;
+  height: 18px;
+}
+
+.itemCard .loadingWrapper .innerContainer .content h6 {
+  display: block;
+  width: 30%;
+  height: 16px;
+  margin-bottom: 0.8rem;
+}
+
+.itemCard .loadingWrapper .button {
+  position: absolute;
+  height: 48px;
+  width: 92px;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+@media (max-width: 450px) {
+  .itemCard .loadingWrapper {
+    height: unset;
+    margin: 0.5rem 0;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .itemCard .loadingWrapper .innerContainer {
+    flex-direction: column;
+  }
+
+  .itemCard .loadingWrapper .innerContainer .orgImgContainer {
+    height: 200px;
+    width: 100%;
+    margin-bottom: 0.8rem;
+  }
+
+  .itemCard .loadingWrapper .innerContainer .content {
+    margin-left: 0;
+  }
+
+  .itemCard .loadingWrapper .button {
+    bottom: 0;
+    right: 0;
+    border-radius: 0.5rem;
+    position: relative;
+    margin-left: auto;
+    display: block;
+  }
+}
diff --git a/src/screens/OrgList/OrgList.test.tsx b/src/screens/OrgList/OrgList.test.tsx
new file mode 100644
index 0000000000..5b889ff07d
--- /dev/null
+++ b/src/screens/OrgList/OrgList.test.tsx
@@ -0,0 +1,535 @@
+// SKIP_LOCALSTORAGE_CHECK
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  cleanup,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import OrgList from './OrgList';
+
+import {
+  MOCKS,
+  MOCKS_ADMIN,
+  MOCKS_EMPTY,
+  MOCKS_WITH_ERROR,
+} from './OrgListMocks';
+import { ToastContainer, toast } from 'react-toastify';
+
+jest.setTimeout(30000);
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+afterEach(() => {
+  localStorage.clear();
+  cleanup();
+});
+
+describe('Organisations Page testing as SuperAdmin', () => {
+  setItem('id', '123');
+
+  const link = new StaticMockLink(MOCKS, true);
+  const link2 = new StaticMockLink(MOCKS_EMPTY, true);
+  const link3 = new StaticMockLink(MOCKS_WITH_ERROR, true);
+
+  const formData = {
+    name: 'Dummy Organization',
+    description: 'This is a dummy organization',
+    address: {
+      city: 'Kingston',
+      countryCode: 'JM',
+      dependentLocality: 'Sample Dependent Locality',
+      line1: '123 Jamaica Street',
+      line2: 'Apartment 456',
+      postalCode: 'JM12345',
+      sortingCode: 'ABC-123',
+      state: 'Kingston Parish',
+    },
+    image: new File(['hello'], 'hello.png', { type: 'image/png' }),
+  };
+  test('Should display organisations for superAdmin even if admin For field is empty', async () => {
+    window.location.assign('/');
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', []);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(
+      screen.queryByText('Organizations Not Found'),
+    ).not.toBeInTheDocument();
+  });
+
+  test('Testing search functionality by pressing enter', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    // Test that the search bar filters organizations by name
+    const searchBar = screen.getByTestId(/searchByName/i);
+    expect(searchBar).toBeInTheDocument();
+    userEvent.type(searchBar, 'Dummy{enter}');
+  });
+
+  test('Testing search functionality by Btn click', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const searchBar = screen.getByTestId('searchByName');
+    const searchBtn = screen.getByTestId('searchBtn');
+    userEvent.type(searchBar, 'Dummy');
+    fireEvent.click(searchBtn);
+  });
+
+  test('Should render no organisation warning alert when there are no organization', async () => {
+    window.location.assign('/');
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.queryByText('Organizations Not Found')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Please create an organization through dashboard'),
+    ).toBeInTheDocument();
+    expect(window.location).toBeAt('/');
+  });
+
+  test('Testing Organization data is not present', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', false);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <OrgList />
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Testing create organization modal', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={true} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    screen.debug();
+
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      'Talawa-admin_AdminFor',
+      JSON.stringify([{ name: 'adi', _id: '1234', image: '' }]),
+    );
+
+    expect(screen.getByTestId(/createOrganizationBtn/i)).toBeInTheDocument();
+  });
+
+  test('Create organization model should work properly', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait(500);
+
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      'Talawa-admin_AdminFor',
+      JSON.stringify([{ name: 'adi', _id: '1234', image: '' }]),
+    );
+
+    userEvent.click(screen.getByTestId(/createOrganizationBtn/i));
+
+    userEvent.type(screen.getByTestId(/modalOrganizationName/i), formData.name);
+    userEvent.type(
+      screen.getByPlaceholderText(/Description/i),
+      formData.description,
+    );
+    userEvent.type(screen.getByPlaceholderText(/City/i), formData.address.city);
+    userEvent.type(
+      screen.getByPlaceholderText(/Postal Code/i),
+      formData.address.postalCode,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/State \/ Province/i),
+      formData.address.state,
+    );
+
+    userEvent.selectOptions(
+      screen.getByTestId('countrycode'),
+      formData.address.countryCode,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Line 1/i),
+      formData.address.line1,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Line 2/i),
+      formData.address.line2,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Sorting Code/i),
+      formData.address.sortingCode,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Dependent Locality/i),
+      formData.address.dependentLocality,
+    );
+    userEvent.click(screen.getByTestId(/userRegistrationRequired/i));
+    userEvent.click(screen.getByTestId(/visibleInSearch/i));
+
+    expect(screen.getByTestId(/modalOrganizationName/i)).toHaveValue(
+      formData.name,
+    );
+    expect(screen.getByPlaceholderText(/Description/i)).toHaveValue(
+      formData.description,
+    );
+    //Checking the fields for the address object in the formdata.
+    const { address } = formData;
+    expect(screen.getByPlaceholderText(/City/i)).toHaveValue(address.city);
+    expect(screen.getByPlaceholderText(/State \/ Province/i)).toHaveValue(
+      address.state,
+    );
+    expect(screen.getByPlaceholderText(/Dependent Locality/i)).toHaveValue(
+      address.dependentLocality,
+    );
+    expect(screen.getByPlaceholderText(/Line 1/i)).toHaveValue(address.line1);
+    expect(screen.getByPlaceholderText(/Line 2/i)).toHaveValue(address.line2);
+    expect(screen.getByPlaceholderText(/Postal Code/i)).toHaveValue(
+      address.postalCode,
+    );
+    expect(screen.getByTestId(/countrycode/i)).toHaveValue(address.countryCode);
+    expect(screen.getByPlaceholderText(/Sorting Code/i)).toHaveValue(
+      address.sortingCode,
+    );
+    expect(screen.getByTestId(/userRegistrationRequired/i)).not.toBeChecked();
+    expect(screen.getByTestId(/visibleInSearch/i)).toBeChecked();
+    expect(screen.getByLabelText(/Display Image/i)).toBeTruthy();
+    const displayImage = screen.getByTestId('organisationImage');
+    userEvent.upload(displayImage, formData.image);
+    userEvent.click(screen.getByTestId(/submitOrganizationForm/i));
+    await waitFor(() => {
+      expect(
+        screen.queryByText(/Congratulation the Organization is created/i),
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('Plugin Notification model should work properly', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait(500);
+
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      'Talawa-admin_AdminFor',
+      JSON.stringify([{ name: 'adi', _id: '1234', image: '' }]),
+    );
+
+    userEvent.click(screen.getByTestId(/createOrganizationBtn/i));
+
+    userEvent.type(screen.getByTestId(/modalOrganizationName/i), formData.name);
+    userEvent.type(
+      screen.getByPlaceholderText(/Description/i),
+      formData.description,
+    );
+    userEvent.type(screen.getByPlaceholderText(/City/i), formData.address.city);
+    userEvent.type(
+      screen.getByPlaceholderText(/State \/ Province/i),
+      formData.address.state,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Postal Code/i),
+      formData.address.postalCode,
+    );
+    userEvent.selectOptions(
+      screen.getByTestId('countrycode'),
+      formData.address.countryCode,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Line 1/i),
+      formData.address.line1,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Line 2/i),
+      formData.address.line2,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Sorting Code/i),
+      formData.address.sortingCode,
+    );
+    userEvent.type(
+      screen.getByPlaceholderText(/Dependent Locality/i),
+      formData.address.dependentLocality,
+    );
+    userEvent.click(screen.getByTestId(/userRegistrationRequired/i));
+    userEvent.click(screen.getByTestId(/visibleInSearch/i));
+
+    expect(screen.getByTestId(/modalOrganizationName/i)).toHaveValue(
+      formData.name,
+    );
+    expect(screen.getByPlaceholderText(/Description/i)).toHaveValue(
+      formData.description,
+    );
+    //Checking the fields for the address object in the formdata.
+    const { address } = formData;
+    expect(screen.getByPlaceholderText(/City/i)).toHaveValue(address.city);
+    expect(screen.getByPlaceholderText(/State \/ Province/i)).toHaveValue(
+      address.state,
+    );
+    expect(screen.getByPlaceholderText(/Dependent Locality/i)).toHaveValue(
+      address.dependentLocality,
+    );
+    expect(screen.getByPlaceholderText(/Line 1/i)).toHaveValue(address.line1);
+    expect(screen.getByPlaceholderText(/Line 2/i)).toHaveValue(address.line2);
+    expect(screen.getByPlaceholderText(/Postal Code/i)).toHaveValue(
+      address.postalCode,
+    );
+    expect(screen.getByTestId(/countrycode/i)).toHaveValue(address.countryCode);
+    expect(screen.getByPlaceholderText(/Sorting Code/i)).toHaveValue(
+      address.sortingCode,
+    );
+    expect(screen.getByTestId(/userRegistrationRequired/i)).not.toBeChecked();
+    expect(screen.getByTestId(/visibleInSearch/i)).toBeChecked();
+    expect(screen.getByLabelText(/Display Image/i)).toBeTruthy();
+
+    userEvent.click(screen.getByTestId(/submitOrganizationForm/i));
+    // await act(async () => {
+    //   await new Promise((resolve) => setTimeout(resolve, 1000));
+    // });
+    await waitFor(() =>
+      expect(
+        screen.queryByText(/Congratulation the Organization is created/i),
+      ).toBeInTheDocument(),
+    );
+    await waitFor(() => {
+      screen.findByTestId(/pluginNotificationHeader/i);
+    });
+    // userEvent.click(screen.getByTestId(/enableEverythingForm/i));
+    userEvent.click(screen.getByTestId(/enableEverythingForm/i));
+  });
+
+  test('Testing create sample organization working properly', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByTestId(/createOrganizationBtn/i));
+    userEvent.click(screen.getByTestId(/createSampleOrganizationBtn/i));
+    await waitFor(() =>
+      expect(
+        screen.queryByText(/Sample Organization Successfully created/i),
+      ).toBeInTheDocument(),
+    );
+  });
+  test('Testing error handling for CreateSampleOrg', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', true);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    jest.spyOn(toast, 'error');
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <ToastContainer />
+            <OrgList />
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByTestId(/createOrganizationBtn/i));
+    userEvent.click(screen.getByTestId(/createSampleOrganizationBtn/i));
+    await waitFor(() =>
+      expect(
+        screen.queryByText(/Only one sample organization allowed/i),
+      ).toBeInTheDocument(),
+    );
+  });
+});
+
+describe('Organisations Page testing as Admin', () => {
+  const link = new StaticMockLink(MOCKS_ADMIN, true);
+
+  test('Create organization modal should not be present in the page for Admin', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', false);
+    setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgList />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText(/Create Organization/i)).toBeNull();
+    });
+  });
+  test('Testing sort latest and oldest toggle', async () => {
+    setItem('id', '123');
+    setItem('SuperAdmin', false);
+    setItem('AdminFor', [{ name: 'adi', _id: 'a0', image: '' }]);
+
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrgList />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+
+      await wait();
+    });
+    const sortDropdown = await waitFor(() => screen.getByTestId('sort'));
+    expect(sortDropdown).toBeInTheDocument();
+
+    const sortToggle = screen.getByTestId('sortOrgs');
+
+    fireEvent.click(sortToggle);
+    const latestOption = await waitFor(() => screen.getByTestId('latest'));
+
+    fireEvent.click(latestOption);
+
+    expect(sortDropdown).toBeInTheDocument();
+    fireEvent.click(sortToggle);
+    const oldestOption = await waitFor(() => screen.getByTestId('oldest'));
+    fireEvent.click(oldestOption);
+    expect(sortDropdown).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
new file mode 100644
index 0000000000..7023bfa9b1
--- /dev/null
+++ b/src/screens/OrgList/OrgList.tsx
@@ -0,0 +1,577 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { Search } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
+import {
+  CREATE_ORGANIZATION_MUTATION,
+  CREATE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import {
+  ORGANIZATION_CONNECTION_LIST,
+  USER_ORGANIZATION_LIST,
+} from 'GraphQl/Queries/Queries';
+
+import OrgListCard from 'components/OrgListCard/OrgListCard';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Dropdown, Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { useTranslation } from 'react-i18next';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import type {
+  InterfaceOrgConnectionInfoType,
+  InterfaceOrgConnectionType,
+  InterfaceUserType,
+} from 'utils/interfaces';
+import useLocalStorage from 'utils/useLocalstorage';
+import styles from './OrgList.module.css';
+import OrganizationModal from './OrganizationModal';
+
+function orgList(): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'orgList' });
+  const { t: tCommon } = useTranslation('common');
+  const [dialogModalisOpen, setdialogModalIsOpen] = useState(false);
+  const [dialogRedirectOrgId, setDialogRedirectOrgId] = useState('<ORG_ID>');
+
+  function openDialogModal(redirectOrgId: string): void {
+    setDialogRedirectOrgId(redirectOrgId);
+    // console.log(redirectOrgId, dialogRedirectOrgId);
+    setdialogModalIsOpen(true);
+  }
+
+  const { getItem } = useLocalStorage();
+  const superAdmin = getItem('SuperAdmin');
+  const adminFor = getItem('AdminFor');
+
+  function closeDialogModal(): void {
+    setdialogModalIsOpen(false);
+  }
+  const toggleDialogModal = /* istanbul ignore next */ (): void =>
+    setdialogModalIsOpen(!dialogModalisOpen);
+  document.title = t('title');
+
+  const perPageResult = 8;
+  const [isLoading, setIsLoading] = useState(true);
+  const [sortingState, setSortingState] = useState({
+    option: '',
+    selectedOption: t('sort'),
+  });
+  const [hasMore, sethasMore] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [searchByName, setSearchByName] = useState('');
+  const [showModal, setShowModal] = useState(false);
+  const [formState, setFormState] = useState({
+    name: '',
+    descrip: '',
+    userRegistrationRequired: true,
+    visible: false,
+    address: {
+      city: '',
+      countryCode: '',
+      dependentLocality: '',
+      line1: '',
+      line2: '',
+      postalCode: '',
+      sortingCode: '',
+      state: '',
+    },
+    image: '',
+  });
+
+  const toggleModal = (): void => setShowModal(!showModal);
+
+  const [create] = useMutation(CREATE_ORGANIZATION_MUTATION);
+
+  const [createSampleOrganization] = useMutation(
+    CREATE_SAMPLE_ORGANIZATION_MUTATION,
+  );
+
+  const {
+    data: userData,
+    error: errorUser,
+  }: {
+    data: InterfaceUserType | undefined;
+    loading: boolean;
+    error?: Error | undefined;
+  } = useQuery(USER_ORGANIZATION_LIST, {
+    variables: { userId: getItem('id') },
+    context: {
+      headers: { authorization: `Bearer ${getItem('token')}` },
+    },
+  });
+
+  const {
+    data: orgsData,
+    loading,
+    error: errorList,
+    refetch: refetchOrgs,
+    fetchMore,
+  } = useQuery(ORGANIZATION_CONNECTION_LIST, {
+    variables: {
+      first: perPageResult,
+      skip: 0,
+      filter: searchByName,
+      orderBy:
+        sortingState.option === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC',
+    },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  // To clear the search field and form fields on unmount
+  useEffect(() => {
+    return () => {
+      setSearchByName('');
+      setFormState({
+        name: '',
+        descrip: '',
+        userRegistrationRequired: true,
+        visible: false,
+        address: {
+          city: '',
+          countryCode: '',
+          dependentLocality: '',
+          line1: '',
+          line2: '',
+          postalCode: '',
+          sortingCode: '',
+          state: '',
+        },
+        image: '',
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    setIsLoading(loading && isLoadingMore);
+  }, [loading]);
+
+  /* istanbul ignore next */
+  const isAdminForCurrentOrg = (
+    currentOrg: InterfaceOrgConnectionInfoType,
+  ): boolean => {
+    if (adminFor.length === 1) {
+      // If user is admin for one org only then check if that org is current org
+      return adminFor[0]._id === currentOrg._id;
+    } else {
+      // If user is admin for more than one org then check if current org is present in adminFor array
+      return (
+        adminFor.some(
+          (org: { _id: string; name: string; image: string | null }) =>
+            org._id === currentOrg._id,
+        ) ?? false
+      );
+    }
+  };
+
+  const triggerCreateSampleOrg = (): void => {
+    createSampleOrganization()
+      .then(() => {
+        toast.success(t('sampleOrgSuccess') as string);
+        window.location.reload();
+      })
+      .catch(() => {
+        toast.error(t('sampleOrgDuplicate') as string);
+      });
+  };
+
+  const createOrg = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    const {
+      name: _name,
+      descrip: _descrip,
+      address: _address,
+      visible,
+      userRegistrationRequired,
+      image,
+    } = formState;
+
+    const name = _name.trim();
+    const descrip = _descrip.trim();
+    const address = _address;
+
+    try {
+      const { data } = await create({
+        variables: {
+          name: name,
+          description: descrip,
+          address: address,
+          visibleInSearch: visible,
+          userRegistrationRequired: userRegistrationRequired,
+          image: image,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (data) {
+        toast.success('Congratulation the Organization is created');
+        refetchOrgs();
+        openDialogModal(data.createOrganization._id);
+        setFormState({
+          name: '',
+          descrip: '',
+          userRegistrationRequired: true,
+          visible: false,
+          address: {
+            city: '',
+            countryCode: '',
+            dependentLocality: '',
+            line1: '',
+            line2: '',
+            postalCode: '',
+            sortingCode: '',
+            state: '',
+          },
+          image: '',
+        });
+        toggleModal();
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  /* istanbul ignore next */
+  if (errorList || errorUser) {
+    window.location.assign('/');
+  }
+
+  /* istanbul ignore next */
+  const resetAllParams = (): void => {
+    refetchOrgs({
+      filter: '',
+      first: perPageResult,
+      skip: 0,
+      orderBy:
+        sortingState.option === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC',
+    });
+    sethasMore(true);
+  };
+
+  /* istanbul ignore next */
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    if (value === '') {
+      resetAllParams();
+      return;
+    }
+    refetchOrgs({
+      filter: value,
+    });
+  };
+
+  const handleSearchByEnter = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.currentTarget;
+      handleSearch(value);
+    }
+  };
+
+  const handleSearchByBtnClick = (): void => {
+    const inputElement = document.getElementById(
+      'searchOrgname',
+    ) as HTMLInputElement;
+    const inputValue = inputElement?.value || '';
+    handleSearch(inputValue);
+  };
+  /* istanbul ignore next */
+  const loadMoreOrganizations = (): void => {
+    console.log('loadMoreOrganizations');
+    setIsLoadingMore(true);
+    fetchMore({
+      variables: {
+        skip: orgsData?.organizationsConnection.length || 0,
+      },
+      updateQuery: (
+        prev:
+          | { organizationsConnection: InterfaceOrgConnectionType[] }
+          | undefined,
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult:
+            | { organizationsConnection: InterfaceOrgConnectionType[] }
+            | undefined;
+        },
+      ):
+        | { organizationsConnection: InterfaceOrgConnectionType[] }
+        | undefined => {
+        setIsLoadingMore(false);
+        if (!fetchMoreResult) return prev;
+        if (fetchMoreResult.organizationsConnection.length < perPageResult) {
+          sethasMore(false);
+        }
+        return {
+          organizationsConnection: [
+            ...(prev?.organizationsConnection || []),
+            ...(fetchMoreResult.organizationsConnection || []),
+          ],
+        };
+      },
+    });
+  };
+
+  const handleSorting = (option: string): void => {
+    setSortingState({
+      option,
+      selectedOption: t(option),
+    });
+
+    const orderBy = option === 'Latest' ? 'createdAt_DESC' : 'createdAt_ASC';
+
+    refetchOrgs({
+      first: perPageResult,
+      skip: 0,
+      filter: searchByName,
+      orderBy,
+    });
+  };
+
+  return (
+    <>
+      {/* Buttons Container */}
+      <div className={styles.btnsContainer}>
+        <div className={styles.input}>
+          <Form.Control
+            type="name"
+            id="searchOrgname"
+            className="bg-white"
+            placeholder={tCommon('searchByName')}
+            data-testid="searchByName"
+            autoComplete="off"
+            required
+            onKeyUp={handleSearchByEnter}
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+            onClick={handleSearchByBtnClick}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className={styles.btnsBlock}>
+          <div className="d-flex">
+            <Dropdown
+              aria-expanded="false"
+              title="Sort organizations"
+              data-testid="sort"
+            >
+              <Dropdown.Toggle
+                variant={
+                  sortingState.option === '' ? 'outline-success' : 'success'
+                }
+                data-testid="sortOrgs"
+              >
+                <SortIcon className={'me-1'} />
+                {sortingState.selectedOption}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={(): void => handleSorting('Latest')}
+                  data-testid="latest"
+                >
+                  {t('Latest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={(): void => handleSorting('Earliest')}
+                  data-testid="oldest"
+                >
+                  {t('Earliest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          {superAdmin && (
+            <Button
+              variant="success"
+              onClick={toggleModal}
+              data-testid="createOrganizationBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('createOrganization')}
+            </Button>
+          )}
+        </div>
+      </div>
+      {/* Text Infos for list */}
+      {!isLoading &&
+      (!orgsData?.organizationsConnection ||
+        orgsData.organizationsConnection.length === 0) &&
+      searchByName.length === 0 &&
+      (!userData || adminFor.length === 0 || superAdmin) ? (
+        <div className={styles.notFound}>
+          <h3 className="m-0">{t('noOrgErrorTitle')}</h3>
+          <h6 className="text-secondary">{t('noOrgErrorDescription')}</h6>
+        </div>
+      ) : !isLoading &&
+        orgsData?.organizationsConnection.length == 0 &&
+        /* istanbul ignore next */
+        searchByName.length > 0 ? (
+        /* istanbul ignore next */
+        <div className={styles.notFound} data-testid="noResultFound">
+          <h4 className="m-0">
+            {tCommon('noResultsFoundFor')} &quot;{searchByName}&quot;
+          </h4>
+        </div>
+      ) : (
+        <>
+          <InfiniteScroll
+            dataLength={orgsData?.organizationsConnection?.length ?? 0}
+            next={loadMoreOrganizations}
+            loader={
+              <>
+                {[...Array(perPageResult)].map((_, index) => (
+                  <div key={index} className={styles.itemCard}>
+                    <div className={styles.loadingWrapper}>
+                      <div className={styles.innerContainer}>
+                        <div
+                          className={`${styles.orgImgContainer} shimmer`}
+                        ></div>
+                        <div className={styles.content}>
+                          <h5 className="shimmer" title="Org name"></h5>
+                          <h6 className="shimmer" title="Location"></h6>
+                          <h6 className="shimmer" title="Admins"></h6>
+                          <h6 className="shimmer" title="Members"></h6>
+                        </div>
+                      </div>
+                      <div className={`shimmer ${styles.button}`} />
+                    </div>
+                  </div>
+                ))}
+              </>
+            }
+            hasMore={hasMore}
+            className={styles.listBox}
+            data-testid="organizations-list"
+            endMessage={
+              <div className={'w-100 text-center my-4'}>
+                <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
+              </div>
+            }
+          >
+            {userData && superAdmin
+              ? orgsData?.organizationsConnection.map(
+                  (item: InterfaceOrgConnectionInfoType) => {
+                    return (
+                      <div key={item._id} className={styles.itemCard}>
+                        <OrgListCard data={item} />
+                      </div>
+                    );
+                  },
+                )
+              : userData &&
+                adminFor.length > 0 &&
+                orgsData?.organizationsConnection.map(
+                  (item: InterfaceOrgConnectionInfoType) => {
+                    if (isAdminForCurrentOrg(item)) {
+                      return (
+                        <div key={item._id} className={styles.itemCard}>
+                          <OrgListCard data={item} />
+                        </div>
+                      );
+                    }
+                  },
+                )}
+          </InfiniteScroll>
+          {isLoading && (
+            <>
+              {[...Array(perPageResult)].map((_, index) => (
+                <div key={index} className={styles.itemCard}>
+                  <div className={styles.loadingWrapper}>
+                    <div className={styles.innerContainer}>
+                      <div
+                        className={`${styles.orgImgContainer} shimmer`}
+                      ></div>
+                      <div className={styles.content}>
+                        <h5 className="shimmer" title="Org name"></h5>
+                        <h6 className="shimmer" title="Location"></h6>
+                        <h6 className="shimmer" title="Admins"></h6>
+                        <h6 className="shimmer" title="Members"></h6>
+                      </div>
+                    </div>
+                    <div className={`shimmer ${styles.button}`} />
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+        </>
+      )}
+      {/* Create Organization Modal */}
+      {/**
+       * Renders the `OrganizationModal` component.
+       *
+       * @param showModal - A boolean indicating whether the modal should be displayed.
+       * @param toggleModal - A function to toggle the visibility of the modal.
+       * @param formState - The state of the form in the organization modal.
+       * @param setFormState - A function to update the state of the form in the organization modal.
+       * @param createOrg - A function to handle the submission of the organization creation form.
+       * @param t - A translation function for localization.
+       * @param userData - Information about the current user.
+       * @param triggerCreateSampleOrg - A function to trigger the creation of a sample organization.
+       * @returns JSX element representing the `OrganizationModal`.
+       */}
+      <OrganizationModal
+        showModal={showModal}
+        toggleModal={toggleModal}
+        formState={formState}
+        setFormState={setFormState}
+        createOrg={createOrg}
+        t={t}
+        tCommon={tCommon}
+        userData={userData}
+        triggerCreateSampleOrg={triggerCreateSampleOrg}
+      />
+      {/* Plugin Notification Modal after Org is Created */}
+      <Modal show={dialogModalisOpen} onHide={toggleDialogModal}>
+        <Modal.Header
+          className="bg-primary"
+          closeButton
+          data-testid="pluginNotificationHeader"
+        >
+          <Modal.Title className="text-white">
+            {t('manageFeatures')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <section id={styles.grid_wrapper}>
+            <div>
+              <h4 className={styles.titlemodaldialog}>
+                {t('manageFeaturesInfo')}
+              </h4>
+
+              <div className={styles.pluginStoreBtnContainer}>
+                <Link
+                  className={`btn btn-primary ${styles.pluginStoreBtn}`}
+                  data-testid="goToStore"
+                  to={`orgstore/id=${dialogRedirectOrgId}`}
+                >
+                  {t('goToStore')}
+                </Link>
+                {/* </button> */}
+                <Button
+                  type="submit"
+                  className={styles.enableEverythingBtn}
+                  onClick={closeDialogModal}
+                  value="invite"
+                  data-testid="enableEverythingForm"
+                >
+                  {t('enableEverything')}
+                </Button>
+              </div>
+            </div>
+          </section>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default orgList;
diff --git a/src/screens/OrgList/OrgListMocks.ts b/src/screens/OrgList/OrgListMocks.ts
new file mode 100644
index 0000000000..380313ffd5
--- /dev/null
+++ b/src/screens/OrgList/OrgListMocks.ts
@@ -0,0 +1,258 @@
+import {
+  CREATE_ORGANIZATION_MUTATION,
+  CREATE_SAMPLE_ORGANIZATION_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import {
+  ORGANIZATION_CONNECTION_LIST,
+  USER_ORGANIZATION_LIST,
+} from 'GraphQl/Queries/Queries';
+import 'jest-location-mock';
+import type {
+  InterfaceOrgConnectionInfoType,
+  InterfaceUserType,
+} from 'utils/interfaces';
+
+const superAdminUser: InterfaceUserType = {
+  user: {
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john.doe@akatsuki.com',
+    image: null,
+  },
+};
+
+const adminUser: InterfaceUserType = {
+  user: {
+    ...superAdminUser.user,
+  },
+};
+
+const organizations: InterfaceOrgConnectionInfoType[] = [
+  {
+    _id: '1',
+    creator: { _id: 'xyz', firstName: 'John', lastName: 'Doe' },
+    image: '',
+    name: 'Palisadoes Foundation',
+    createdAt: '02/02/2022',
+    admins: [
+      {
+        _id: '123',
+      },
+    ],
+    members: [
+      {
+        _id: '234',
+      },
+    ],
+    address: {
+      city: 'Kingston',
+      countryCode: 'JM',
+      dependentLocality: 'Sample Dependent Locality',
+      line1: '123 Jamaica Street',
+      line2: 'Apartment 456',
+      postalCode: 'JM12345',
+      sortingCode: 'ABC-123',
+      state: 'Kingston Parish',
+    },
+  },
+];
+
+for (let x = 0; x < 1; x++) {
+  organizations.push({
+    _id: 'a' + x,
+    image: '',
+    name: 'name',
+    creator: {
+      _id: '123',
+      firstName: 'firstName',
+      lastName: 'lastName',
+    },
+    admins: [
+      {
+        _id: x + '1',
+      },
+    ],
+    members: [
+      {
+        _id: x + '2',
+      },
+    ],
+    createdAt: new Date().toISOString(),
+    address: {
+      city: 'Kingston',
+      countryCode: 'JM',
+      dependentLocality: 'Sample Dependent Locality',
+      line1: '123 Jamaica Street',
+      line2: 'Apartment 456',
+      postalCode: 'JM12345',
+      sortingCode: 'ABC-123',
+      state: 'Kingston Parish',
+    },
+  });
+}
+
+// MOCKS FOR SUPERADMIN
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+      variables: {
+        first: 8,
+        skip: 0,
+        filter: '',
+        orderBy: 'createdAt_ASC',
+      },
+      notifyOnNetworkStatusChange: true,
+    },
+    result: {
+      data: {
+        organizationsConnection: organizations,
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { userId: '123' },
+    },
+    result: {
+      data: { user: superAdminUser },
+    },
+  },
+  {
+    request: {
+      query: CREATE_SAMPLE_ORGANIZATION_MUTATION,
+    },
+    result: {
+      data: {
+        createSampleOrganization: {
+          id: '1',
+          name: 'Sample Organization',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_ORGANIZATION_MUTATION,
+      variables: {
+        description: 'This is a dummy organization',
+        address: {
+          city: 'Kingston',
+          countryCode: 'JM',
+          dependentLocality: 'Sample Dependent Locality',
+          line1: '123 Jamaica Street',
+          line2: 'Apartment 456',
+          postalCode: 'JM12345',
+          sortingCode: 'ABC-123',
+          state: 'Kingston Parish',
+        },
+        name: 'Dummy Organization',
+        visibleInSearch: true,
+        userRegistrationRequired: false,
+        image: '',
+      },
+    },
+    result: {
+      data: {
+        createOrganization: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+const MOCKS_EMPTY = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+      variables: {
+        first: 8,
+        skip: 0,
+        filter: '',
+        orderBy: 'createdAt_ASC',
+      },
+      notifyOnNetworkStatusChange: true,
+    },
+    result: {
+      data: {
+        organizationsConnection: [],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { userId: '123' },
+    },
+    result: {
+      data: { user: superAdminUser },
+    },
+  },
+];
+const MOCKS_WITH_ERROR = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+      variables: {
+        first: 8,
+        skip: 0,
+        filter: '',
+        orderBy: 'createdAt_ASC',
+      },
+      notifyOnNetworkStatusChange: true,
+    },
+    result: {
+      data: {
+        organizationsConnection: organizations,
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { userId: '123' },
+    },
+    result: {
+      data: { user: superAdminUser },
+    },
+  },
+  {
+    request: {
+      query: CREATE_SAMPLE_ORGANIZATION_MUTATION,
+    },
+    error: new Error('Failed to create sample organization'),
+  },
+];
+
+// MOCKS FOR ADMIN
+const MOCKS_ADMIN = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+      variables: {
+        first: 8,
+        skip: 0,
+        filter: '',
+        orderBy: 'createdAt_ASC',
+      },
+      notifyOnNetworkStatusChange: true,
+    },
+    result: {
+      data: {
+        organizationsConnection: organizations,
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { userId: '123' },
+    },
+    result: {
+      data: { user: adminUser },
+    },
+  },
+];
+
+export { MOCKS, MOCKS_ADMIN, MOCKS_EMPTY, MOCKS_WITH_ERROR };
diff --git a/src/screens/OrgList/OrganizationModal.tsx b/src/screens/OrgList/OrganizationModal.tsx
new file mode 100644
index 0000000000..8a44d2b851
--- /dev/null
+++ b/src/screens/OrgList/OrganizationModal.tsx
@@ -0,0 +1,322 @@
+import React from 'react';
+import { Modal, Form, Row, Col, Button } from 'react-bootstrap';
+import convertToBase64 from 'utils/convertToBase64';
+import type { ChangeEvent } from 'react';
+import styles from './OrgList.module.css';
+import type { InterfaceAddress } from 'utils/interfaces';
+import { countryOptions } from 'utils/formEnumFields';
+import useLocalStorage from 'utils/useLocalstorage';
+
+/**
+ * Represents the state of the form in the organization modal.
+ */
+interface InterfaceFormStateType {
+  name: string;
+  descrip: string;
+  userRegistrationRequired: boolean;
+  visible: boolean;
+  address: InterfaceAddress;
+  image: string;
+}
+
+/**
+ * Represents a user type.
+ */
+interface InterfaceUserType {
+  user: {
+    firstName: string;
+    lastName: string;
+    image: string | null;
+    email: string;
+  };
+
+  // Add more properties if needed
+}
+
+/**
+ * Represents the properties of the OrganizationModal component.
+ */
+interface InterfaceOrganizationModalProps {
+  showModal: boolean;
+  toggleModal: () => void;
+  formState: InterfaceFormStateType;
+  setFormState: (state: React.SetStateAction<InterfaceFormStateType>) => void;
+  createOrg: (e: ChangeEvent<HTMLFormElement>) => Promise<void>;
+  t: (key: string) => string;
+  tCommon: (key: string) => string;
+  userData: InterfaceUserType | undefined;
+  triggerCreateSampleOrg: () => void;
+}
+
+/**
+ * Represents the organization modal component.
+ */
+
+const OrganizationModal: React.FC<InterfaceOrganizationModalProps> = ({
+  showModal,
+  toggleModal,
+  formState,
+  setFormState,
+  createOrg,
+  t,
+  tCommon,
+  triggerCreateSampleOrg,
+}) => {
+  // function to update the state of the parameters inside address.
+  const { getItem } = useLocalStorage();
+  const superAdmin = getItem('SuperAdmin');
+  const adminFor = getItem('AdminFor');
+
+  const handleInputChange = (fieldName: string, value: string): void => {
+    setFormState((prevState) => ({
+      ...prevState,
+      address: {
+        ...prevState.address,
+        [fieldName]: value,
+      },
+    }));
+  };
+  return (
+    <Modal
+      show={showModal}
+      onHide={toggleModal}
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+    >
+      <Modal.Header
+        className="bg-primary"
+        closeButton
+        data-testid="modalOrganizationHeader"
+      >
+        <Modal.Title className="text-white">
+          {t('createOrganization')}
+        </Modal.Title>
+      </Modal.Header>
+      <Form onSubmitCapture={createOrg}>
+        <Modal.Body>
+          <Form.Label htmlFor="orgname">{tCommon('name')}</Form.Label>
+          <Form.Control
+            type="name"
+            id="orgname"
+            className="mb-3"
+            placeholder={t('enterName')}
+            data-testid="modalOrganizationName"
+            autoComplete="off"
+            required
+            value={formState.name}
+            onChange={(e): void => {
+              const inputText = e.target.value;
+              if (inputText.length < 50) {
+                setFormState({
+                  ...formState,
+                  name: e.target.value,
+                });
+              }
+            }}
+          />
+          <Form.Label htmlFor="descrip">{tCommon('description')}</Form.Label>
+          <Form.Control
+            type="descrip"
+            id="descrip"
+            className="mb-3"
+            placeholder={tCommon('description')}
+            autoComplete="off"
+            required
+            value={formState.descrip}
+            onChange={(e): void => {
+              const descriptionText = e.target.value;
+              if (descriptionText.length < 200) {
+                setFormState({
+                  ...formState,
+                  descrip: e.target.value,
+                });
+              }
+            }}
+          />
+          <Form.Label>{tCommon('address')}</Form.Label>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                required
+                as="select"
+                data-testid="countrycode"
+                value={formState.address.countryCode}
+                onChange={(e) => {
+                  const countryCode = e.target.value;
+                  handleInputChange('countryCode', countryCode);
+                }}
+              >
+                <option value="" disabled>
+                  Select a country
+                </option>
+                {countryOptions.map((country) => (
+                  <option
+                    key={country.value.toUpperCase()}
+                    value={country.value.toUpperCase()}
+                  >
+                    {country.label}
+                  </option>
+                ))}
+              </Form.Control>
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('city')}
+                autoComplete="off"
+                required
+                value={formState.address.city}
+                onChange={(e) => handleInputChange('city', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('state')}
+                autoComplete="off"
+                value={formState.address.state}
+                onChange={(e) => handleInputChange('state', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('dependentLocality')}
+                autoComplete="off"
+                value={formState.address.dependentLocality}
+                onChange={(e) =>
+                  handleInputChange('dependentLocality', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
+          <Row className="mb-3">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line1')}
+                autoComplete="off"
+                required
+                value={formState.address.line1}
+                onChange={(e) => handleInputChange('line1', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line2')}
+                autoComplete="off"
+                value={formState.address.line2}
+                onChange={(e) => handleInputChange('line2', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('postalCode')}
+                autoComplete="off"
+                value={formState.address.postalCode}
+                onChange={(e) =>
+                  handleInputChange('postalCode', e.target.value)
+                }
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('sortingCode')}
+                autoComplete="off"
+                value={formState.address.sortingCode}
+                onChange={(e) =>
+                  handleInputChange('sortingCode', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
+          <Row className="mb-3">
+            <Col>
+              <Form.Label htmlFor="userRegistrationRequired">
+                {t('userRegistrationRequired')}
+              </Form.Label>
+              <Form.Switch
+                id="userRegistrationRequired"
+                data-testid="userRegistrationRequired"
+                type="checkbox"
+                defaultChecked={formState.userRegistrationRequired}
+                onChange={(): void =>
+                  setFormState({
+                    ...formState,
+                    userRegistrationRequired:
+                      !formState.userRegistrationRequired,
+                  })
+                }
+              />
+            </Col>
+            <Col>
+              <Form.Label htmlFor="visibleInSearch">
+                {t('visibleInSearch')}
+              </Form.Label>
+              <Form.Switch
+                id="visibleInSearch"
+                data-testid="visibleInSearch"
+                type="checkbox"
+                defaultChecked={formState.visible}
+                onChange={(): void =>
+                  setFormState({
+                    ...formState,
+                    visible: !formState.visible,
+                  })
+                }
+              />
+            </Col>
+          </Row>
+          <Form.Label htmlFor="orgphoto">{tCommon('displayImage')}</Form.Label>
+          <Form.Control
+            accept="image/*"
+            id="orgphoto"
+            className="mb-3"
+            name="photo"
+            type="file"
+            multiple={false}
+            onChange={async (e: React.ChangeEvent): Promise<void> => {
+              const target = e.target as HTMLInputElement;
+              const file = target.files && target.files[0];
+              /* istanbul ignore else */
+              if (file)
+                setFormState({
+                  ...formState,
+                  image: await convertToBase64(file),
+                });
+            }}
+            data-testid="organisationImage"
+          />
+          <Col className={styles.sampleOrgSection}>
+            <Button
+              className={styles.orgCreationBtn}
+              type="submit"
+              value="invite"
+              data-testid="submitOrganizationForm"
+            >
+              {t('createOrganization')}
+            </Button>
+
+            <div className="position-relative">
+              <hr />
+              <span className={styles.orText}>{tCommon('OR')}</span>
+            </div>
+            {(adminFor.length > 0 || superAdmin) && (
+              <div className={styles.sampleOrgSection}>
+                <Button
+                  className={styles.sampleOrgCreationBtn}
+                  onClick={() => triggerCreateSampleOrg()}
+                  data-testid="createSampleOrganizationBtn"
+                >
+                  {t('createSampleOrganization')}
+                </Button>
+              </div>
+            )}
+          </Col>
+        </Modal.Body>
+      </Form>
+    </Modal>
+  );
+};
+
+export default OrganizationModal;
diff --git a/src/screens/OrgPost/OrgPost.module.css b/src/screens/OrgPost/OrgPost.module.css
new file mode 100644
index 0000000000..e674efbc7a
--- /dev/null
+++ b/src/screens/OrgPost/OrgPost.module.css
@@ -0,0 +1,325 @@
+.mainpage {
+  display: flex;
+  flex-direction: row;
+}
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.preview {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.preview img {
+  width: 400px;
+  height: auto;
+}
+.preview video {
+  width: 400px;
+  height: auto;
+}
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+.logintitleadmin {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 30%;
+}
+.admindetails {
+  display: flex;
+  justify-content: space-between;
+}
+.admindetails > p {
+  margin-top: -12px;
+  margin-right: 30px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+.justifysp {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3rem;
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+
+  .listBox .itemCard {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 575.5px) {
+  .justifysp {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .mainpageright {
+    width: 98%;
+  }
+}
+.addbtn {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60%;
+  width: 60%;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+.logintitleinvite {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 40%;
+}
+.postinfo {
+  height: 80px;
+}
+
+.postinfo {
+  height: 80px;
+  margin-bottom: 20px;
+}
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 65%;
+}
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+.modalbody {
+  width: 50px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+.sidebarsticky > input {
+  text-decoration: none;
+  margin-bottom: 50px;
+  border: solid 1.5px #d3d3d3;
+  border-radius: 5px;
+  width: 80%;
+  border-radius: 7px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.sidebarsticky > input:focus {
+  border-color: #fff;
+  box-shadow: 0 0 5pt 0.5pt #d3d3d3;
+  outline: none;
+}
+button[data-testid='createPostBtn'] {
+  display: block;
+}
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.list_box {
+  height: 70vh;
+  overflow-y: auto;
+  width: auto;
+}
+@media only screen and (max-width: 600px) {
+  .form_wrapper {
+    width: 90%;
+    top: 45%;
+  }
+}
diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx
new file mode 100644
index 0000000000..9829589350
--- /dev/null
+++ b/src/screens/OrgPost/OrgPost.test.tsx
@@ -0,0 +1,689 @@
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import React, { act } from 'react';
+import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
+import { ORGANIZATION_POST_LIST } from 'GraphQl/Queries/Queries';
+import { ToastContainer } from 'react-toastify';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import OrgPost from './OrgPost';
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_POST_LIST,
+      variables: {
+        id: undefined,
+        after: null,
+        before: null,
+        first: 6,
+        last: null,
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            posts: {
+              edges: [
+                {
+                  node: {
+                    _id: '6411e53835d7ba2344a78e21',
+                    title: 'postone',
+                    text: 'This is the first post',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    comments: [],
+                    pinned: true,
+                    likedBy: [],
+                  },
+                  cursor: '6411e53835d7ba2344a78e21',
+                },
+                {
+                  node: {
+                    _id: '6411e54835d7ba2344a78e29',
+                    title: 'posttwo',
+                    text: 'Tis is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    pinned: false,
+                    likedBy: [],
+                    comments: [],
+                  },
+                  cursor: '6411e54835d7ba2344a78e29',
+                },
+                {
+                  node: {
+                    _id: '6411e54835d7ba2344a78e30',
+                    title: 'posttwo',
+                    text: 'Tis is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    pinned: true,
+                    likedBy: [],
+                    comments: [],
+                  },
+                  cursor: '6411e54835d7ba2344a78e30',
+                },
+                {
+                  node: {
+                    _id: '6411e54835d7ba2344a78e31',
+                    title: 'posttwo',
+                    text: 'Tis is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    pinned: false,
+                    likedBy: [],
+                    comments: [],
+                  },
+                  cursor: '6411e54835d7ba2344a78e31',
+                },
+              ],
+              pageInfo: {
+                startCursor: '6411e53835d7ba2344a78e21',
+                endCursor: '6411e54835d7ba2344a78e31',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 4,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_POST_MUTATION,
+      variables: {
+        title: 'Dummy Post',
+        text: 'This is dummy text',
+        organizationId: '123',
+      },
+      result: {
+        data: {
+          createPost: {
+            _id: '453',
+          },
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_POST_MUTATION,
+      variables: {
+        title: 'Dummy Post',
+        text: 'This is dummy text',
+        organizationId: '123',
+      },
+      result: {
+        data: {
+          createPost: {
+            _id: '453',
+          },
+        },
+      },
+    },
+  },
+];
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Organisation Post Page', () => {
+  const formData = {
+    posttitle: 'dummy post',
+    postinfo: 'This is a dummy post',
+    postImage: new File(['hello'], 'hello.png', { type: 'image/png' }),
+    postVideo: new File(['hello'], 'hello.mp4', { type: 'video/mp4' }),
+  };
+
+  test('correct mock data should be queried', async () => {
+    const dataQuery1 = MOCKS[0]?.result?.data?.organizations[0].posts.edges[0];
+
+    expect(dataQuery1).toEqual({
+      node: {
+        _id: '6411e53835d7ba2344a78e21',
+        title: 'postone',
+        text: 'This is the first post',
+        imageUrl: null,
+        videoUrl: null,
+        createdAt: '2023-08-24T09:26:56.524+00:00',
+        creator: {
+          _id: '640d98d9eb6a743d75341067',
+          firstName: 'Aditya',
+          lastName: 'Shelke',
+          email: 'adidacreator1@gmail.com',
+        },
+        likeCount: 0,
+        commentCount: 0,
+        pinned: true,
+        likedBy: [],
+        comments: [],
+      },
+      cursor: '6411e53835d7ba2344a78e21',
+    });
+  });
+
+  test('Testing create post functionality', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    userEvent.type(screen.getByTestId('modalTitle'), formData.posttitle);
+
+    userEvent.type(screen.getByTestId('modalinfo'), formData.postinfo);
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postImage);
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postVideo);
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postImage);
+    userEvent.upload(screen.getByTestId('addMediaField'), formData.postVideo);
+    userEvent.click(screen.getByTestId('pinPost'));
+    expect(screen.getByTestId('pinPost')).toBeChecked();
+
+    userEvent.click(screen.getByTestId('createPostBtn'));
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('closeOrganizationModal'));
+  }, 15000);
+
+  test('Testing search functionality', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    async function debounceWait(ms = 200): Promise<void> {
+      await act(() => {
+        return new Promise((resolve) => {
+          setTimeout(resolve, ms);
+        });
+      });
+    }
+    await debounceWait();
+    userEvent.type(screen.getByPlaceholderText(/Search By/i), 'postone{enter}');
+    await debounceWait();
+    const sortDropdown = screen.getByTestId('sort');
+    userEvent.click(sortDropdown);
+  });
+  test('Testing search text and title toggle', async () => {
+    await act(async () => {
+      // Wrap the test code in act
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrgPost />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    const searchInput = screen.getByTestId('searchByName');
+    expect(searchInput).toHaveAttribute('placeholder', 'Search By Title');
+
+    const inputText = screen.getByTestId('searchBy');
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    const toggleText = screen.getByTestId('Text');
+
+    await act(async () => {
+      fireEvent.click(toggleText);
+    });
+
+    expect(searchInput).toHaveAttribute('placeholder', 'Search By Text');
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+    const toggleTite = screen.getByTestId('searchTitle');
+    await act(async () => {
+      fireEvent.click(toggleTite);
+    });
+
+    expect(searchInput).toHaveAttribute('placeholder', 'Search By Title');
+  });
+  test('Testing search latest and oldest toggle', async () => {
+    await act(async () => {
+      // Wrap the test code in act
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <OrgPost />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    const searchInput = screen.getByTestId('sort');
+    expect(searchInput).toBeInTheDocument();
+
+    const inputText = screen.getByTestId('sortpost');
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    const toggleText = screen.getByTestId('latest');
+
+    await act(async () => {
+      fireEvent.click(toggleText);
+    });
+
+    expect(searchInput).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    const toggleTite = screen.getByTestId('oldest');
+    await act(async () => {
+      fireEvent.click(toggleTite);
+    });
+    expect(searchInput).toBeInTheDocument();
+  });
+  test('After creating a post, the data should be refetched', async () => {
+    const refetchMock = jest.fn();
+
+    render(
+      <MockedProvider addTypename={false} mocks={MOCKS} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    // Fill in post form fields...
+
+    userEvent.click(screen.getByTestId('createPostBtn'));
+
+    await wait();
+
+    expect(refetchMock).toHaveBeenCalledTimes(0);
+  });
+
+  test('Create post without media', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    const postTitleInput = screen.getByTestId('modalTitle');
+    fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
+
+    const postInfoTextarea = screen.getByTestId('modalinfo');
+    fireEvent.change(postInfoTextarea, {
+      target: { value: 'Test post information' },
+    });
+
+    const createPostBtn = screen.getByTestId('createPostBtn');
+    fireEvent.click(createPostBtn);
+  }, 15000);
+
+  test('Create post and preview', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    const postTitleInput = screen.getByTestId('modalTitle');
+    fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
+
+    const postInfoTextarea = screen.getByTestId('modalinfo');
+    fireEvent.change(postInfoTextarea, {
+      target: { value: 'Test post information' },
+    });
+
+    // Simulate uploading an image
+    const imageFile = new File(['image content'], 'image.png', {
+      type: 'image/png',
+    });
+    const imageInput = screen.getByTestId('addMediaField');
+    userEvent.upload(imageInput, imageFile);
+
+    // Check if the image is displayed
+    const imagePreview = await screen.findByAltText('Post Image Preview');
+    expect(imagePreview).toBeInTheDocument();
+
+    // Check if the close button for the image works
+    const closeButton = screen.getByTestId('mediaCloseButton');
+    fireEvent.click(closeButton);
+
+    // Check if the image is removed from the preview
+    expect(imagePreview).not.toBeInTheDocument();
+  }, 15000);
+
+  test('Modal opens and closes', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const createPostModalBtn = screen.getByTestId('createPostModalBtn');
+
+    userEvent.click(createPostModalBtn);
+
+    const modalTitle = screen.getByTestId('modalOrganizationHeader');
+    expect(modalTitle).toBeInTheDocument();
+
+    const closeButton = screen.getByTestId(/modalOrganizationHeader/i);
+    userEvent.click(closeButton);
+
+    await wait();
+
+    const closedModalTitle = screen.queryByText(/postDetail/i);
+    expect(closedModalTitle).not.toBeInTheDocument();
+  });
+  it('renders the form with input fields and buttons', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    // Check if input fields and buttons are present
+    expect(screen.getByTestId('modalTitle')).toBeInTheDocument();
+    expect(screen.getByTestId('modalinfo')).toBeInTheDocument();
+    expect(screen.getByTestId('createPostBtn')).toBeInTheDocument();
+  });
+
+  it('allows users to input data into the form fields', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    // Simulate user input
+    fireEvent.change(screen.getByTestId('modalTitle'), {
+      target: { value: 'Test Title' },
+    });
+    fireEvent.change(screen.getByTestId('modalinfo'), {
+      target: { value: 'Test Info' },
+    });
+
+    // Check if input values are set correctly
+    expect(screen.getByTestId('modalTitle')).toHaveValue('Test Title');
+    expect(screen.getByTestId('modalinfo')).toHaveValue('Test Info');
+  });
+
+  test('allows users to upload an image', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    userEvent.click(screen.getByTestId('createPostModalBtn'));
+
+    const postTitleInput = screen.getByTestId('modalTitle');
+    fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
+
+    const postInfoTextarea = screen.getByTestId('modalinfo');
+    fireEvent.change(postInfoTextarea, {
+      target: { value: 'Test post information' },
+    });
+    const file = new File(['image content'], 'image.png', {
+      type: 'image/png',
+    });
+    const input = screen.getByTestId('addMediaField');
+    userEvent.upload(input, file);
+
+    await screen.findByAltText('Post Image Preview');
+    expect(screen.getByAltText('Post Image Preview')).toBeInTheDocument();
+
+    const closeButton = screen.getByTestId('mediaCloseButton');
+    fireEvent.click(closeButton);
+  }, 15000);
+  test('Create post, preview image, and close preview', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <OrgPost />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    await act(async () => {
+      userEvent.click(screen.getByTestId('createPostModalBtn'));
+    });
+
+    const postTitleInput = screen.getByTestId('modalTitle');
+    await act(async () => {
+      fireEvent.change(postTitleInput, { target: { value: 'Test Post' } });
+    });
+
+    const postInfoTextarea = screen.getByTestId('modalinfo');
+    await act(async () => {
+      fireEvent.change(postInfoTextarea, {
+        target: { value: 'Test post information' },
+      });
+    });
+
+    const videoFile = new File(['video content'], 'video.mp4', {
+      type: 'video/mp4',
+    });
+
+    await act(async () => {
+      userEvent.upload(screen.getByTestId('addMediaField'), videoFile);
+    });
+
+    // Check if the video is displayed
+    const videoPreview = await screen.findByTestId('videoPreview');
+    expect(videoPreview).toBeInTheDocument();
+
+    // Check if the close button for the video works
+    const closeVideoPreviewButton = screen.getByTestId('mediaCloseButton');
+    await act(async () => {
+      fireEvent.click(closeVideoPreviewButton);
+    });
+    expect(videoPreview).not.toBeInTheDocument();
+  });
+  test('Sorting posts by pinned status', async () => {
+    // Mocked data representing posts with different pinned statuses
+    const mockedPosts = [
+      {
+        _id: '1',
+        title: 'Post 1',
+        pinned: true,
+      },
+      {
+        _id: '2',
+        title: 'Post 2',
+        pinned: false,
+      },
+      {
+        _id: '3',
+        title: 'Post 3',
+        pinned: true,
+      },
+      {
+        _id: '4',
+        title: 'Post 4',
+        pinned: true,
+      },
+    ];
+
+    // Render the OrgPost component and pass the mocked data to it
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <OrgPost />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const sortedPosts = screen.getAllByTestId('post-item');
+
+    // Assert that the posts are sorted correctly
+    expect(sortedPosts).toHaveLength(mockedPosts.length);
+    expect(sortedPosts[0]).toHaveTextContent(
+      'postoneThis is the first po... Aditya Shelke',
+    );
+    expect(sortedPosts[1]).toHaveTextContent(
+      'posttwoTis is the post two Aditya Shelke',
+    );
+    expect(sortedPosts[2]).toHaveTextContent(
+      'posttwoTis is the post two Aditya Shelke',
+    );
+  });
+});
diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx
new file mode 100644
index 0000000000..1931f6c76a
--- /dev/null
+++ b/src/screens/OrgPost/OrgPost.tsx
@@ -0,0 +1,574 @@
+import { useMutation, useQuery, type ApolloError } from '@apollo/client';
+import { Search } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
+import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
+import { ORGANIZATION_POST_LIST } from 'GraphQl/Queries/Queries';
+import Loader from 'components/Loader/Loader';
+import NotFound from 'components/NotFound/NotFound';
+import OrgPostCard from 'components/OrgPostCard/OrgPostCard';
+import { useNavigate, useParams } from 'react-router-dom';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Modal from 'react-bootstrap/Modal';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import convertToBase64 from 'utils/convertToBase64';
+import { errorHandler } from 'utils/errorHandler';
+import type { InterfaceQueryOrganizationPostListItem } from 'utils/interfaces';
+import styles from './OrgPost.module.css';
+
+interface InterfaceOrgPost {
+  _id: string;
+  title: string;
+  text: string;
+  imageUrl: string | null;
+  videoUrl: string | null;
+  creator: { _id: string; firstName: string; lastName: string; email: string };
+  pinned: boolean;
+  createdAt: string;
+  likeCount: number;
+  commentCount: number;
+  likedBy: { _id: string }[];
+  comments: {
+    _id: string;
+    text: string;
+    creator: { _id: string };
+    createdAt: string;
+    likeCount: number;
+    likedBy: { _id: string }[];
+  }[];
+}
+
+/**
+ * This function is used to display the posts of the organization. It displays the posts in a card format.
+ * It also provides the functionality to create a new post. The user can also sort the posts based on the date of creation.
+ * The user can also search for a post based on the title of the post.
+ * @returns JSX.Element which contains the posts of the organization.
+ */
+function orgPost(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgPost',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  document.title = t('title');
+  const [postmodalisOpen, setPostModalIsOpen] = useState(false);
+  const [postformState, setPostFormState] = useState({
+    posttitle: '',
+    postinfo: '',
+    postImage: '',
+    postVideo: '',
+    addMedia: '',
+    pinPost: false,
+  });
+  const [sortingOption, setSortingOption] = useState('latest');
+  const [file, setFile] = useState<File | null>(null);
+  const { orgId: currentUrl } = useParams();
+  const navigate = useNavigate();
+  const [showTitle, setShowTitle] = useState(true);
+  const [after, setAfter] = useState<string | null | undefined>(null);
+  const [before, setBefore] = useState<string | null | undefined>(null);
+  const [first, setFirst] = useState<number | null>(6);
+  const [last, setLast] = useState<number | null>(null);
+
+  const showInviteModal = (): void => {
+    setPostModalIsOpen(true);
+  };
+
+  const hideInviteModal = (): void => {
+    setPostModalIsOpen(false);
+    setPostFormState({
+      posttitle: '',
+      postinfo: '',
+      postImage: '',
+      postVideo: '',
+      addMedia: '',
+      pinPost: false,
+    });
+  };
+
+  const {
+    data: orgPostListData,
+    loading: orgPostListLoading,
+    error: orgPostListError,
+    refetch,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationPostListItem[];
+    };
+    loading: boolean;
+    error?: ApolloError;
+    refetch: (filterData?: {
+      id: string | undefined;
+      // title_contains: string | null;
+      // text_contains: string | null;
+      after: string | null | undefined;
+      before: string | null | undefined;
+      first: number | null;
+      last: number | null;
+    }) => void;
+  } = useQuery(ORGANIZATION_POST_LIST, {
+    variables: {
+      id: currentUrl as string,
+      after: after ?? null,
+      before: before ?? null,
+      first: first,
+      last: last,
+    },
+  });
+  const [create, { loading: createPostLoading }] =
+    useMutation(CREATE_POST_MUTATION);
+  const [displayedPosts, setDisplayedPosts] = useState(
+    orgPostListData?.organizations[0].posts.edges.map((edge) => edge.node) ||
+      [],
+  );
+
+  // ...
+
+  useEffect(() => {
+    if (orgPostListData && orgPostListData.organizations) {
+      const newDisplayedPosts: InterfaceOrgPost[] = sortPosts(
+        orgPostListData.organizations[0].posts.edges.map((edge) => edge.node),
+        sortingOption,
+      );
+      setDisplayedPosts(newDisplayedPosts);
+    }
+  }, [orgPostListData, sortingOption]);
+
+  const createPost = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    const {
+      posttitle: _posttitle,
+      postinfo: _postinfo,
+      postImage,
+      postVideo,
+      pinPost,
+    } = postformState;
+
+    const posttitle = _posttitle.trim();
+    const postinfo = _postinfo.trim();
+
+    try {
+      if (!posttitle || !postinfo) {
+        throw new Error('Text fields cannot be empty strings');
+      }
+
+      const { data } = await create({
+        variables: {
+          title: posttitle,
+          text: postinfo,
+          organizationId: currentUrl,
+          file: postImage || postVideo || postformState.addMedia,
+          pinned: pinPost,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('postCreatedSuccess') as string);
+        refetch();
+        setPostFormState({
+          posttitle: '',
+          postinfo: '',
+          postImage: '',
+          postVideo: '',
+          addMedia: '',
+          pinPost: false,
+        });
+        setPostModalIsOpen(false);
+      }
+    } catch (error: unknown) {
+      errorHandler(t, error);
+    }
+  };
+
+  useEffect(() => {
+    if (orgPostListError) {
+      navigate('/orglist');
+    }
+  }, [orgPostListError]);
+
+  if (createPostLoading || orgPostListLoading) {
+    return <Loader />;
+  }
+
+  const handleAddMediaChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): Promise<void> => {
+    setPostFormState((prevPostFormState) => ({
+      ...prevPostFormState,
+      addMedia: '',
+    }));
+
+    const selectedFile = e.target.files?.[0];
+
+    if (selectedFile) {
+      setFile(selectedFile);
+      setPostFormState({
+        ...postformState,
+        addMedia: await convertToBase64(selectedFile),
+      });
+    }
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { value } = e.target;
+    const filterData = {
+      id: currentUrl,
+      title_contains: showTitle ? value : null,
+      text_contains: !showTitle ? value : null,
+      after: after || null,
+      before: before || null,
+      first: first || null,
+      last: last || null,
+    };
+    refetch(filterData);
+  };
+
+  const debouncedHandleSearch = handleSearch;
+
+  const handleSorting = (option: string): void => {
+    setSortingOption(option);
+  };
+  const handleNextPage = (): void => {
+    setAfter(orgPostListData?.organizations[0].posts.pageInfo.endCursor);
+    setBefore(null);
+    setFirst(6);
+    setLast(null);
+  };
+  const handlePreviousPage = (): void => {
+    setBefore(orgPostListData?.organizations[0].posts.pageInfo.startCursor);
+    setAfter(null);
+    setFirst(null);
+    setLast(6);
+  };
+  // console.log(orgPostListData?.organizations[0].posts);
+  const sortPosts = (
+    posts: InterfaceOrgPost[],
+    sortingOption: string,
+  ): InterfaceOrgPost[] => {
+    const sortedPosts = [...posts];
+
+    if (sortingOption === 'latest') {
+      sortedPosts.sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+      );
+    } else if (sortingOption === 'oldest') {
+      sortedPosts.sort(
+        (a, b) =>
+          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      );
+    }
+
+    return sortedPosts;
+  };
+
+  const sortedPostsList: InterfaceOrgPost[] = [...displayedPosts];
+  sortedPostsList.sort((a: InterfaceOrgPost, b: InterfaceOrgPost) => {
+    if (a.pinned === b.pinned) {
+      return 0;
+    }
+    /* istanbul ignore next */
+    if (a.pinned) {
+      return -1;
+    }
+    return 1;
+  });
+
+  return (
+    <>
+      <Row className={styles.head}>
+        <div className={styles.mainpageright}>
+          <div className={styles.btnsContainer}>
+            <div className={styles.input}>
+              <Form.Control
+                type="text"
+                id="posttitle"
+                className="bg-white"
+                placeholder={showTitle ? t('searchTitle') : t('searchText')}
+                data-testid="searchByName"
+                autoComplete="off"
+                onChange={debouncedHandleSearch}
+                required
+              />
+              <Button
+                tabIndex={-1}
+                className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+              >
+                <Search />
+              </Button>
+            </div>
+            <div className={styles.btnsBlock}>
+              <div className="d-flex">
+                <Dropdown
+                  aria-expanded="false"
+                  title="SearchBy"
+                  data-testid="sea"
+                >
+                  <Dropdown.Toggle
+                    data-testid="searchBy"
+                    variant="outline-success"
+                  >
+                    <SortIcon className={'me-1'} />
+                    {t('searchBy')}
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      id="searchText"
+                      onClick={(e): void => {
+                        setShowTitle(false);
+                        e.preventDefault();
+                      }}
+                      data-testid="Text"
+                    >
+                      {t('Text')}
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      id="searchTitle"
+                      onClick={(e): void => {
+                        setShowTitle(true);
+                        e.preventDefault();
+                      }}
+                      data-testid="searchTitle"
+                    >
+                      {t('Title')}
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
+                <Dropdown
+                  aria-expanded="false"
+                  title="Sort Post"
+                  data-testid="sort"
+                >
+                  <Dropdown.Toggle
+                    variant="outline-success"
+                    data-testid="sortpost"
+                  >
+                    <SortIcon className={'me-1'} />
+                    {t('sortPost')}
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      onClick={(): void => handleSorting('latest')}
+                      data-testid="latest"
+                    >
+                      {t('Latest')}
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      onClick={(): void => handleSorting('oldest')}
+                      data-testid="oldest"
+                    >
+                      {t('Oldest')}
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
+              </div>
+
+              <Button
+                variant="success"
+                onClick={showInviteModal}
+                data-testid="createPostModalBtn"
+              >
+                <i className={'fa fa-plus me-2'} />
+                {t('createPost')}
+              </Button>
+            </div>
+          </div>
+          <div className={`row ${styles.list_box}`}>
+            {sortedPostsList && sortedPostsList.length > 0 ? (
+              sortedPostsList.map(
+                (datas: {
+                  _id: string;
+                  title: string;
+                  text: string;
+                  imageUrl: string | null;
+                  videoUrl: string | null;
+
+                  creator: { firstName: string; lastName: string };
+                  pinned: boolean;
+                }) => (
+                  <OrgPostCard
+                    key={datas._id}
+                    id={datas._id}
+                    postTitle={datas.title}
+                    postInfo={datas.text}
+                    postAuthor={`${datas.creator.firstName} ${datas.creator.lastName}`}
+                    postPhoto={datas?.imageUrl}
+                    postVideo={datas?.videoUrl}
+                    pinned={datas.pinned}
+                    postID={''}
+                  />
+                ),
+              )
+            ) : (
+              <NotFound title="post" keyPrefix="postNotFound" />
+            )}
+          </div>
+        </div>
+        <div className="row m-lg-1 d-flex justify-content-center w-100">
+          <div className="col-auto">
+            <Button
+              onClick={handlePreviousPage}
+              className="btn-sm"
+              disabled={
+                !orgPostListData?.organizations[0].posts.pageInfo
+                  .hasPreviousPage
+              }
+            >
+              {t('Previous')}
+            </Button>
+          </div>
+          <div className="col-auto">
+            <Button
+              onClick={handleNextPage}
+              className="btn-sm "
+              disabled={
+                !orgPostListData?.organizations[0].posts.pageInfo.hasNextPage
+              }
+            >
+              {t('Next')}
+            </Button>
+          </div>
+        </div>
+      </Row>
+      <Modal
+        show={postmodalisOpen}
+        onHide={hideInviteModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header
+          className="bg-primary"
+          data-testid="modalOrganizationHeader"
+          closeButton
+        >
+          <Modal.Title className="text-white">{t('postDetails')}</Modal.Title>
+        </Modal.Header>
+        <Form onSubmitCapture={createPost}>
+          <Modal.Body>
+            <Form.Label htmlFor="posttitle">{t('postTitle')}</Form.Label>
+            <Form.Control
+              type="name"
+              id="orgname"
+              className="mb-3"
+              placeholder={t('postTitle1')}
+              data-testid="modalTitle"
+              autoComplete="off"
+              required
+              value={postformState.posttitle}
+              onChange={(e): void => {
+                setPostFormState({
+                  ...postformState,
+                  posttitle: e.target.value,
+                });
+              }}
+            />
+            <Form.Label htmlFor="postinfo">{t('information')}</Form.Label>
+            <Form.Control
+              type="descrip"
+              id="descrip"
+              className="mb-3"
+              placeholder={t('information1')}
+              data-testid="modalinfo"
+              autoComplete="off"
+              required
+              value={postformState.postinfo}
+              onChange={(e): void => {
+                setPostFormState({
+                  ...postformState,
+                  postinfo: e.target.value,
+                });
+              }}
+            />
+          </Modal.Body>
+          <Modal.Body>
+            <Form.Label htmlFor="addMedia">{t('addMedia')}</Form.Label>
+            <Form.Control
+              id="addMedia"
+              name="addMedia"
+              type="file"
+              accept="image/*,video/*"
+              placeholder={t('addMedia')}
+              multiple={false}
+              onChange={handleAddMediaChange}
+              data-testid="addMediaField"
+            />
+
+            {postformState.addMedia && file && (
+              <div className={styles.preview} data-testid="mediaPreview">
+                {/* Display preview for both image and video */}
+                {file.type.startsWith('image') ? (
+                  <img
+                    src={postformState.addMedia}
+                    data-testid="imagePreview"
+                    alt="Post Image Preview"
+                  />
+                ) : (
+                  <video controls data-testid="videoPreview">
+                    <source src={postformState.addMedia} type={file.type} />(
+                    {t('tag')})
+                  </video>
+                )}
+                <button
+                  className={styles.closeButton}
+                  onClick={(): void => {
+                    setPostFormState({
+                      ...postformState,
+                      addMedia: '',
+                    });
+                    const fileInput = document.getElementById(
+                      'addMedia',
+                    ) as HTMLInputElement;
+                    if (fileInput) {
+                      fileInput.value = '';
+                    }
+                  }}
+                  data-testid="mediaCloseButton"
+                >
+                  <i className="fa fa-times"></i>
+                </button>
+              </div>
+            )}
+            <Form.Label htmlFor="pinpost" className="mt-3">
+              {t('pinPost')}
+            </Form.Label>
+            <Form.Switch
+              id="pinPost"
+              type="checkbox"
+              data-testid="pinPost"
+              defaultChecked={postformState.pinPost}
+              onChange={(): void =>
+                setPostFormState({
+                  ...postformState,
+                  pinPost: !postformState.pinPost,
+                })
+              }
+            />
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={(): void => hideInviteModal()}
+              data-testid="closeOrganizationModal"
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button type="submit" value="invite" data-testid="createPostBtn">
+              {t('addPost')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+}
+
+export default orgPost;
diff --git a/src/screens/OrgSettings/OrgSettings.mocks.ts b/src/screens/OrgSettings/OrgSettings.mocks.ts
new file mode 100644
index 0000000000..02748dbf70
--- /dev/null
+++ b/src/screens/OrgSettings/OrgSettings.mocks.ts
@@ -0,0 +1,143 @@
+import {
+  ACTION_ITEM_CATEGORY_LIST,
+  AGENDA_ITEM_CATEGORY_LIST,
+  IS_SAMPLE_ORGANIZATION_QUERY,
+  ORGANIZATION_CUSTOM_FIELDS,
+  ORGANIZATIONS_LIST,
+} from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: {
+        id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            image: null,
+            creator: {
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              email: 'testsuperadmin@example.com',
+              __typename: 'User',
+            },
+            name: 'Unity Foundation',
+            description:
+              'A foundation aimed at uniting the world and making it a better place for all.',
+            address: {
+              city: 'Bronx',
+              countryCode: 'US',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '10451',
+              sortingCode: 'ABC-123',
+              state: 'NYC',
+              __typename: 'Address',
+            },
+            userRegistrationRequired: false,
+            visibleInSearch: true,
+            members: [
+              {
+                _id: '64378abd85008f171cf2990d',
+                firstName: 'Wilt',
+                lastName: 'Shepherd',
+                email: 'testsuperadmin@example.com',
+                __typename: 'User',
+              },
+            ],
+            admins: [
+              {
+                _id: '64378abd85008f171cf2990d',
+                firstName: 'Wilt',
+                lastName: 'Shepherd',
+                email: 'testsuperadmin@example.com',
+                createdAt: '2023-04-13T04:53:17.742Z',
+                __typename: 'User',
+              },
+            ],
+            membershipRequests: [],
+            blockedUsers: [],
+            __typename: 'Organization',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CUSTOM_FIELDS,
+      variables: { customFieldsByOrganizationId: 'orgId' },
+    },
+    result: {
+      data: {
+        customFieldsByOrganization: [
+          {
+            _id: 'adsdasdsa334343yiu423434',
+            type: 'fieldType',
+            name: 'fieldName',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: IS_SAMPLE_ORGANIZATION_QUERY,
+      variables: { isSampleOrganizationId: 'orgId' },
+    },
+    result: {
+      data: {
+        isSampleOrganization: false,
+      },
+    },
+  },
+
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: 'orgId' },
+    },
+    result: {
+      data: {
+        agendaItemCategoriesByOrganization: [],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: 'orgId',
+        where: {
+          name_contains: '',
+        },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        actionItemCategoriesByOrganization: [
+          {
+            _id: 'actionItemCategoryId1',
+            name: 'Test 3',
+            isDisabled: false,
+            createdAt: '2024-08-25',
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              __typename: 'User',
+            },
+            __typename: 'ActionItemCategory',
+          },
+        ],
+      },
+    },
+  },
+];
diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css
new file mode 100644
index 0000000000..9952a9a459
--- /dev/null
+++ b/src/screens/OrgSettings/OrgSettings.module.css
@@ -0,0 +1,55 @@
+.headerBtn {
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
+}
+.settingsContainer {
+  min-height: 100vh;
+}
+
+.settingsBody {
+  min-height: 100vh;
+  margin: 2.5rem 1rem;
+}
+
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 180px;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--bs-secondary);
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--bs-gray-500);
+}
+
+.settingsTabs {
+  display: none;
+}
+
+@media (min-width: 577px) {
+  .settingsDropdown {
+    display: none;
+  }
+}
+
+@media (min-width: 577px) {
+  .settingsTabs {
+    display: block;
+  }
+}
diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx
new file mode 100644
index 0000000000..a9aec5f33d
--- /dev/null
+++ b/src/screens/OrgSettings/OrgSettings.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import OrgSettings from './OrgSettings';
+import userEvent from '@testing-library/user-event';
+import type { ApolloLink } from '@apollo/client';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MOCKS } from './OrgSettings.mocks';
+
+const link1 = new StaticMockLink(MOCKS);
+
+const renderOrganisationSettings = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgsetting/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/orgsetting/:orgId" element={<OrgSettings />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Organisation Settings Page', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/orgsetting/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/orgsetting/" element={<OrgSettings />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  test('should render the organisation settings page', async () => {
+    renderOrganisationSettings(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('generalSettings')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('actionItemCategoriesSettings'),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('agendaItemCategoriesSettings'),
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('generalSettings'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('generalTab')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('actionItemCategoriesSettings'));
+    await waitFor(() => {
+      expect(screen.getByTestId('actionItemCategoriesTab')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('agendaItemCategoriesSettings'));
+    await waitFor(() => {
+      expect(screen.getByTestId('agendaItemCategoriesTab')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx
new file mode 100644
index 0000000000..e4ae5424a6
--- /dev/null
+++ b/src/screens/OrgSettings/OrgSettings.tsx
@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Button, Dropdown, Row, Col } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import styles from './OrgSettings.module.css';
+import OrgActionItemCategories from 'components/OrgSettings/ActionItemCategories/OrgActionItemCategories';
+import OrganizationAgendaCategory from 'components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory';
+import { Navigate, useParams } from 'react-router-dom';
+import GeneralSettings from 'components/OrgSettings/General/GeneralSettings';
+
+// Type representing the different settings categories available
+type SettingType = 'general' | 'actionItemCategories' | 'agendaItemCategories';
+
+// List of available settings categories
+const settingtabs: SettingType[] = [
+  'general',
+  'actionItemCategories',
+  'agendaItemCategories',
+];
+
+/**
+ * The `orgSettings` component provides a user interface for managing various settings related to an organization.
+ * It includes options for updating organization details, deleting the organization, changing language preferences,
+ * and managing custom fields and action item categories.
+ *
+ * The component renders different settings sections based on the user's selection from the tabs or dropdown menu.
+ *
+ * @returns The rendered component displaying the organization settings.
+ */
+function orgSettings(): JSX.Element {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'orgSettings',
+  });
+
+  const [tab, setTab] = useState<SettingType>('general');
+
+  // Set the document title using the translated title for this page
+  document.title = t('title');
+
+  // Get the organization ID from the URL parameters
+  const { orgId } = useParams();
+
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  return (
+    <div className="d-flex flex-column">
+      <Row className="mx-3 mt-3">
+        <Col>
+          <div className={styles.settingsTabs}>
+            {/* Render buttons for each settings category */}
+            {settingtabs.map((setting, index) => (
+              <Button
+                key={index}
+                className={`me-3 border rounded-3 ${styles.headerBtn}`}
+                variant={tab === setting ? `success` : `none`}
+                onClick={() => setTab(setting)}
+                data-testid={`${setting}Settings`}
+              >
+                {t(setting)}
+              </Button>
+            ))}
+          </div>
+
+          {/* Dropdown menu for selecting settings category */}
+          <Dropdown
+            className={styles.settingsDropdown}
+            data-testid="settingsDropdownContainer"
+            drop="down"
+          >
+            <Dropdown.Toggle
+              variant="success"
+              id="dropdown-basic"
+              data-testid="settingsDropdownToggle"
+            >
+              <span className="me-1">{t(tab)}</span>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {/* Render dropdown items for each settings category */}
+              {settingtabs.map((setting, index) => (
+                <Dropdown.Item
+                  key={index}
+                  onClick={
+                    /* istanbul ignore next */
+                    () => setTab(setting)
+                  }
+                  className={tab === setting ? 'text-secondary' : ''}
+                >
+                  {t(setting)}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Col>
+
+        <Row className="mt-3">
+          <hr />
+        </Row>
+      </Row>
+
+      {/* Render content based on the selected settings category */}
+      {(() => {
+        switch (tab) {
+          case 'general':
+            return (
+              <div data-testid="generalTab">
+                <GeneralSettings orgId={orgId} />
+              </div>
+            );
+          case 'actionItemCategories':
+            return (
+              <div data-testid="actionItemCategoriesTab">
+                <OrgActionItemCategories orgId={orgId} />
+              </div>
+            );
+          case 'agendaItemCategories':
+            return (
+              <div data-testid="agendaItemCategoriesTab">
+                <OrganizationAgendaCategory orgId={orgId} />
+              </div>
+            );
+        }
+      })()}
+    </div>
+  );
+}
+
+export default orgSettings;
diff --git a/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx b/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx
new file mode 100644
index 0000000000..fffeebfd7f
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemDeleteModal.test.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import ItemDeleteModal, {
+  type InterfaceItemDeleteModalProps,
+} from './ItemDeleteModal';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.organizationActionItems,
+  ),
+);
+
+const itemProps: InterfaceItemDeleteModalProps = {
+  isOpen: true,
+  hide: jest.fn(),
+  actionItemsRefetch: jest.fn(),
+  actionItem: {
+    _id: 'actionItemId1',
+    assignee: null,
+    assigneeGroup: null,
+    assigneeType: 'User',
+    assigneeUser: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: undefined,
+    },
+    actionItemCategory: {
+      _id: 'actionItemCategoryId1',
+      name: 'Category 1',
+    },
+    preCompletionNotes: 'Notes 1',
+    postCompletionNotes: 'Cmp Notes 1',
+    assignmentDate: new Date('2024-08-27'),
+    dueDate: new Date('2044-08-30'),
+    completionDate: new Date('2044-09-03'),
+    isCompleted: true,
+    event: null,
+    allottedHours: 24,
+    assigner: {
+      _id: 'userId2',
+      firstName: 'Wilt',
+      lastName: 'Shepherd',
+      image: undefined,
+    },
+    creator: {
+      _id: 'userId2',
+      firstName: 'Wilt',
+      lastName: 'Shepherd',
+    },
+  },
+};
+
+const renderItemDeleteModal = (
+  link: ApolloLink,
+  props: InterfaceItemDeleteModalProps,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ItemDeleteModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing ItemDeleteModal', () => {
+  it('should render ItemDeleteModal', () => {
+    renderItemDeleteModal(link1, itemProps);
+    expect(screen.getByText(t.deleteActionItem)).toBeInTheDocument();
+  });
+
+  it('should successfully Delete Action Item', async () => {
+    renderItemDeleteModal(link1, itemProps);
+    expect(screen.getByTestId('deleteyesbtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('deleteyesbtn'));
+
+    await waitFor(() => {
+      expect(itemProps.actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps.hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulDeletion);
+    });
+  });
+
+  it('should fail to Delete Action Item', async () => {
+    renderItemDeleteModal(link2, itemProps);
+    expect(screen.getByTestId('deleteyesbtn')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('deleteyesbtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+});
diff --git a/src/screens/OrganizationActionItems/ItemDeleteModal.tsx b/src/screens/OrganizationActionItems/ItemDeleteModal.tsx
new file mode 100644
index 0000000000..2526486993
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemDeleteModal.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Modal, Button } from 'react-bootstrap';
+import styles from './OrganizationActionItems.module.css';
+import { useMutation } from '@apollo/client';
+import { DELETE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutations';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+
+/**
+ * Props for the `ItemDeleteModal` component.
+ */
+export interface InterfaceItemDeleteModalProps {
+  isOpen: boolean;
+  hide: () => void;
+  actionItem: InterfaceActionItemInfo | null;
+  actionItemsRefetch: () => void;
+}
+
+/**
+ * A modal component for confirming the deletion of an action item.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `ItemDeleteModal` component.
+ */
+const ItemDeleteModal: React.FC<InterfaceItemDeleteModalProps> = ({
+  isOpen,
+  hide,
+  actionItem,
+  actionItemsRefetch,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationActionItems',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [removeActionItem] = useMutation(DELETE_ACTION_ITEM_MUTATION);
+
+  /**
+   * Handles the action item deletion.
+   */
+  const deleteActionItemHandler = async (): Promise<void> => {
+    try {
+      await removeActionItem({
+        variables: {
+          actionItemId: actionItem?._id,
+        },
+      });
+
+      actionItemsRefetch();
+      hide();
+      toast.success(t('successfulDeletion'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+  return (
+    <>
+      <Modal className={styles.itemModal} onHide={hide} show={isOpen}>
+        <Modal.Header>
+          <p className={styles.titlemodal}> {t('deleteActionItem')}</p>
+          <Button
+            variant="danger"
+            onClick={hide}
+            className={styles.modalCloseBtn}
+            data-testid="modalCloseBtn"
+          >
+            {' '}
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <p> {t('deleteActionItemMsg')}</p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            onClick={deleteActionItemHandler}
+            data-testid="deleteyesbtn"
+          >
+            {tCommon('yes')}
+          </Button>
+          <Button variant="secondary" onClick={hide} data-testid="deletenobtn">
+            {tCommon('no')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+
+export default ItemDeleteModal;
diff --git a/src/screens/OrganizationActionItems/ItemModal.test.tsx b/src/screens/OrganizationActionItems/ItemModal.test.tsx
new file mode 100644
index 0000000000..a58496e6df
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemModal.test.tsx
@@ -0,0 +1,798 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from '../../utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceItemModalProps } from './ItemModal';
+import ItemModal from './ItemModal';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+    warning: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationActionItems ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceItemModalProps[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    orgId: 'orgId',
+    eventId: undefined,
+    actionItemsRefetch: jest.fn(),
+    editMode: false,
+    actionItem: null,
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    orgId: 'orgId',
+    eventId: 'eventId',
+    actionItemsRefetch: jest.fn(),
+    editMode: false,
+    actionItem: null,
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    orgId: 'orgId',
+    eventId: undefined,
+    actionItemsRefetch: jest.fn(),
+    editMode: true,
+    actionItem: {
+      _id: 'actionItemId1',
+      assignee: null,
+      assigneeGroup: null,
+      assigneeType: 'User',
+      assigneeUser: {
+        _id: 'userId1',
+        firstName: 'Harve',
+        lastName: 'Lance',
+        image: '',
+      },
+      actionItemCategory: {
+        _id: 'categoryId1',
+        name: 'Category 1',
+      },
+      preCompletionNotes: 'Notes 1',
+      postCompletionNotes: 'Cmp Notes 1',
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-08-30'),
+      completionDate: new Date('2044-09-03'),
+      isCompleted: true,
+      event: null,
+      allottedHours: 24,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: undefined,
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    orgId: 'orgId',
+    eventId: undefined,
+    actionItemsRefetch: jest.fn(),
+    editMode: true,
+    actionItem: {
+      _id: 'actionItemId2',
+      assignee: null,
+      assigneeGroup: null,
+      assigneeType: 'User',
+      assigneeUser: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: '',
+      },
+      actionItemCategory: {
+        _id: 'categoryId2',
+        name: 'Category 2',
+      },
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: null,
+      allottedHours: null,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: 'wilt-image',
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    orgId: 'orgId',
+    eventId: 'eventId',
+    actionItemsRefetch: jest.fn(),
+    editMode: true,
+    actionItem: {
+      _id: 'actionItemId2',
+      assigneeType: 'EventVolunteer',
+      assignee: {
+        _id: 'volunteerId1',
+        hasAccepted: true,
+        hoursVolunteered: 0,
+        user: {
+          _id: 'userId1',
+          firstName: 'Teresa',
+          lastName: 'Bradley',
+          image: null,
+        },
+        assignments: [],
+        groups: [],
+      },
+      assigneeGroup: null,
+      assigneeUser: null,
+      actionItemCategory: {
+        _id: 'categoryId2',
+        name: 'Category 2',
+      },
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: {
+        _id: 'eventId',
+        title: 'Event 1',
+      },
+      allottedHours: null,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: 'wilt-image',
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    orgId: 'orgId',
+    eventId: 'eventId',
+    actionItemsRefetch: jest.fn(),
+    editMode: true,
+    actionItem: {
+      _id: 'actionItemId2',
+      assigneeType: 'EventVolunteerGroup',
+      assigneeGroup: {
+        _id: 'groupId1',
+        name: 'group1',
+        description: 'desc',
+        volunteersRequired: 10,
+        createdAt: '2024-10-27T15:34:15.889Z',
+        creator: {
+          _id: 'userId2',
+          firstName: 'Wilt',
+          lastName: 'Shepherd',
+          image: null,
+        },
+        leader: {
+          _id: 'userId1',
+          firstName: 'Teresa',
+          lastName: 'Bradley',
+          image: null,
+        },
+        volunteers: [
+          {
+            _id: 'volunteerId1',
+            user: {
+              _id: 'userId1',
+              firstName: 'Teresa',
+              lastName: 'Bradley',
+              image: null,
+            },
+          },
+        ],
+        assignments: [],
+        event: {
+          _id: 'eventId',
+        },
+      },
+      assignee: null,
+      assigneeUser: null,
+      actionItemCategory: {
+        _id: 'categoryId2',
+        name: 'Category 2',
+      },
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: {
+        _id: 'eventId',
+        title: 'Event 1',
+      },
+      allottedHours: null,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: 'wilt-image',
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+];
+
+const renderItemModal = (
+  link: ApolloLink,
+  props: InterfaceItemModalProps,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <ItemModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing ItemModal', () => {
+  it('Create Action Item (for Member)', async () => {
+    renderItemModal(link1, itemProps[0]);
+    expect(screen.getAllByText(t.createActionItem)).toHaveLength(2);
+
+    // Select Category 1
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Select Assignee
+    const memberSelect = await screen.findByTestId('memberSelect');
+    expect(memberSelect).toBeInTheDocument();
+    const memberInputField = within(memberSelect).getByRole('combobox');
+    fireEvent.mouseDown(memberInputField);
+
+    const memberOption = await screen.findByText('Harve Lance');
+    expect(memberOption).toBeInTheDocument();
+    fireEvent.click(memberOption);
+
+    // Select Due Date
+    fireEvent.change(screen.getByLabelText(t.dueDate), {
+      target: { value: '02/01/2044' },
+    });
+
+    // Select Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '9'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Add Pre Completion Notes
+    fireEvent.change(screen.getByLabelText(t.preCompletionNotes), {
+      target: { value: 'Notes' },
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[0].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulCreation);
+    });
+  });
+
+  it('Create Action Item (for Volunteer)', async () => {
+    renderItemModal(link1, itemProps[1]);
+    expect(screen.getAllByText(t.createActionItem)).toHaveLength(2);
+
+    // Select Category 1
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Select Volunteer Role
+    const groupRadio = await screen.findByText(t.groups);
+    const individualRadio = await screen.findByText(t.individuals);
+    expect(groupRadio).toBeInTheDocument();
+    expect(individualRadio).toBeInTheDocument();
+    fireEvent.click(individualRadio);
+
+    // Select Individual Volunteer
+    const volunteerSelect = await screen.findByTestId('volunteerSelect');
+    expect(volunteerSelect).toBeInTheDocument();
+    const volunteerInputField = within(volunteerSelect).getByRole('combobox');
+    fireEvent.mouseDown(volunteerInputField);
+
+    const volunteerOption = await screen.findByText('Teresa Bradley');
+    expect(volunteerOption).toBeInTheDocument();
+    fireEvent.click(volunteerOption);
+
+    // Select Due Date
+    fireEvent.change(screen.getByLabelText(t.dueDate), {
+      target: { value: '02/01/2044' },
+    });
+
+    // Select Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '9'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Add Pre Completion Notes
+    fireEvent.change(screen.getByLabelText(t.preCompletionNotes), {
+      target: { value: 'Notes' },
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[1].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[1].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulCreation);
+    });
+  });
+
+  it('Create Action Item (for Group)', async () => {
+    renderItemModal(link1, itemProps[1]);
+    expect(screen.getAllByText(t.createActionItem)).toHaveLength(2);
+
+    // Select Category 1
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Select Volunteer Role
+    const groupRadio = await screen.findByText(t.groups);
+    const individualRadio = await screen.findByText(t.individuals);
+    expect(groupRadio).toBeInTheDocument();
+    expect(individualRadio).toBeInTheDocument();
+    fireEvent.click(groupRadio);
+
+    // Select Individual Volunteer
+    const groupSelect = await screen.findByTestId('volunteerGroupSelect');
+    expect(groupSelect).toBeInTheDocument();
+    const groupInputField = within(groupSelect).getByRole('combobox');
+    fireEvent.mouseDown(groupInputField);
+
+    const groupOption = await screen.findByText('group1');
+    expect(groupOption).toBeInTheDocument();
+    fireEvent.click(groupOption);
+
+    // Select Due Date
+    fireEvent.change(screen.getByLabelText(t.dueDate), {
+      target: { value: '02/01/2044' },
+    });
+
+    // Select Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '9'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Add Pre Completion Notes
+    fireEvent.change(screen.getByLabelText(t.preCompletionNotes), {
+      target: { value: 'Notes' },
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[1].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[1].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulCreation);
+    });
+  });
+
+  it('Update Action Item (completed)', async () => {
+    renderItemModal(link1, itemProps[2]);
+    expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+    // Update Category
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 2');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Update Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '19'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Update Post Completion Notes
+    fireEvent.change(screen.getByLabelText(t.postCompletionNotes), {
+      target: { value: 'Cmp Notes 2' },
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[2].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[2].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('Update Action Item (Volunteer)', async () => {
+    renderItemModal(link1, itemProps[4]);
+    expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+    // Update Category
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Select Volunteer Role
+    const groupRadio = await screen.findByText(t.groups);
+    const individualRadio = await screen.findByText(t.individuals);
+    expect(groupRadio).toBeInTheDocument();
+    expect(individualRadio).toBeInTheDocument();
+    fireEvent.click(individualRadio);
+
+    // Select Individual Volunteer
+    const volunteerSelect = await screen.findByTestId('volunteerSelect');
+    expect(volunteerSelect).toBeInTheDocument();
+    const volunteerInputField = within(volunteerSelect).getByRole('combobox');
+    fireEvent.mouseDown(volunteerInputField);
+
+    const volunteerOption = await screen.findByText('Bruce Graza');
+    expect(volunteerOption).toBeInTheDocument();
+    fireEvent.click(volunteerOption);
+
+    // Update Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '19'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[4].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[4].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('Update Action Item (Group)', async () => {
+    renderItemModal(link1, itemProps[5]);
+    expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+    // Update Category
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Select Volunteer Role
+    const groupRadio = await screen.findByText(t.groups);
+    const individualRadio = await screen.findByText(t.individuals);
+    expect(groupRadio).toBeInTheDocument();
+    expect(individualRadio).toBeInTheDocument();
+    fireEvent.click(groupRadio);
+
+    // Select Individual Volunteer
+    const groupSelect = await screen.findByTestId('volunteerGroupSelect');
+    expect(groupSelect).toBeInTheDocument();
+    const groupInputField = within(groupSelect).getByRole('combobox');
+    fireEvent.mouseDown(groupInputField);
+
+    const groupOption = await screen.findByText('group2');
+    expect(groupOption).toBeInTheDocument();
+    fireEvent.click(groupOption);
+
+    // Update Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '19'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[5].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[5].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('Update Action Item (Volunteer -> Group)', async () => {
+    renderItemModal(link1, itemProps[4]);
+    expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+    // Update Category
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Select Volunteer Role
+    const groupRadio = await screen.findByText(t.groups);
+    const individualRadio = await screen.findByText(t.individuals);
+    expect(groupRadio).toBeInTheDocument();
+    expect(individualRadio).toBeInTheDocument();
+    fireEvent.click(groupRadio);
+
+    // Select Individual Volunteer
+    const groupSelect = await screen.findByTestId('volunteerGroupSelect');
+    expect(groupSelect).toBeInTheDocument();
+    const groupInputField = within(groupSelect).getByRole('combobox');
+    fireEvent.mouseDown(groupInputField);
+
+    const groupOption = await screen.findByText('group2');
+    expect(groupOption).toBeInTheDocument();
+    fireEvent.click(groupOption);
+
+    // Update Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '19'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[4].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[4].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('Update Action Item (not completed)', async () => {
+    renderItemModal(link1, itemProps[3]);
+    expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+    // Update Category
+    const categorySelect = await screen.findByTestId('categorySelect');
+    expect(categorySelect).toBeInTheDocument();
+    const inputField = within(categorySelect).getByRole('combobox');
+    fireEvent.mouseDown(inputField);
+
+    const categoryOption = await screen.findByText('Category 1');
+    expect(categoryOption).toBeInTheDocument();
+    fireEvent.click(categoryOption);
+
+    // Update Assignee
+    const memberSelect = await screen.findByTestId('memberSelect');
+    expect(memberSelect).toBeInTheDocument();
+    const memberInputField = within(memberSelect).getByRole('combobox');
+    fireEvent.mouseDown(memberInputField);
+
+    const memberOption = await screen.findByText('Harve Lance');
+    expect(memberOption).toBeInTheDocument();
+    fireEvent.click(memberOption);
+
+    // Update Allotted Hours (try all options)
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    const allottedHoursOptions = ['', '-1', '19'];
+
+    allottedHoursOptions.forEach((option) => {
+      fireEvent.change(allottedHours, { target: { value: option } });
+      expect(allottedHours).toHaveValue(parseInt(option) > 0 ? option : '');
+    });
+
+    // Update Due Date
+    fireEvent.change(screen.getByLabelText(t.dueDate), {
+      target: { value: '02/01/2044' },
+    });
+
+    // Update Pre Completion Notes
+    fireEvent.change(screen.getByLabelText(t.preCompletionNotes), {
+      target: { value: 'Notes 3' },
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(itemProps[3].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[3].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('Try adding negative Allotted Hours', async () => {
+    renderItemModal(link1, itemProps[0]);
+    expect(screen.getAllByText(t.createActionItem)).toHaveLength(2);
+    const allottedHours = screen.getByLabelText(t.allottedHours);
+    fireEvent.change(allottedHours, { target: { value: '-1' } });
+
+    await waitFor(() => {
+      expect(allottedHours).toHaveValue('');
+    });
+
+    fireEvent.change(allottedHours, { target: { value: '' } });
+
+    await waitFor(() => {
+      expect(allottedHours).toHaveValue('');
+    });
+
+    fireEvent.change(allottedHours, { target: { value: '0' } });
+    await waitFor(() => {
+      expect(allottedHours).toHaveValue('0');
+    });
+
+    fireEvent.change(allottedHours, { target: { value: '19' } });
+    await waitFor(() => {
+      expect(allottedHours).toHaveValue('19');
+    });
+  });
+
+  it('should fail to Create Action Item', async () => {
+    renderItemModal(link2, itemProps[0]);
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+
+  it('No Fields Updated while Updating', async () => {
+    renderItemModal(link2, itemProps[2]);
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(toast.warning).toHaveBeenCalledWith(t.noneUpdated);
+    });
+  });
+
+  it('should fail to Update Action Item', async () => {
+    renderItemModal(link2, itemProps[2]);
+    expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2);
+
+    // Update Post Completion Notes
+    fireEvent.change(screen.getByLabelText(t.postCompletionNotes), {
+      target: { value: 'Cmp Notes 2' },
+    });
+
+    // Click Submit
+    const submitButton = screen.getByTestId('submitBtn');
+    expect(submitButton).toBeInTheDocument();
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+});
diff --git a/src/screens/OrganizationActionItems/ItemModal.tsx b/src/screens/OrganizationActionItems/ItemModal.tsx
new file mode 100644
index 0000000000..b7555af121
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemModal.tsx
@@ -0,0 +1,648 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Modal, Form, Button } from 'react-bootstrap';
+import type { ChangeEvent, FC } from 'react';
+import styles from '../../style/app.module.css';
+import { DatePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+
+import type {
+  InterfaceActionItemCategoryInfo,
+  InterfaceActionItemCategoryList,
+  InterfaceActionItemInfo,
+  InterfaceEventVolunteerInfo,
+  InterfaceMemberInfo,
+  InterfaceMembersList,
+  InterfaceVolunteerGroupInfo,
+} from 'utils/interfaces';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { useMutation, useQuery } from '@apollo/client';
+import {
+  CREATE_ACTION_ITEM_MUTATION,
+  UPDATE_ACTION_ITEM_MUTATION,
+} from 'GraphQl/Mutations/ActionItemMutations';
+import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/ActionItemCategoryQueries';
+import { Autocomplete, FormControl, TextField } from '@mui/material';
+import {
+  EVENT_VOLUNTEER_GROUP_LIST,
+  EVENT_VOLUNTEER_LIST,
+} from 'GraphQl/Queries/EventVolunteerQueries';
+import { HiUser, HiUserGroup } from 'react-icons/hi2';
+import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+
+/**
+ * Interface for the form state used in the `ItemModal` component.
+ */
+interface InterfaceFormStateType {
+  dueDate: Date;
+  assigneeType: 'EventVolunteer' | 'EventVolunteerGroup' | 'User';
+  actionItemCategoryId: string;
+  assigneeId: string;
+  eventId?: string;
+  preCompletionNotes: string;
+  postCompletionNotes: string | null;
+  allottedHours: number | null;
+  isCompleted: boolean;
+}
+
+/**
+ * Props for the `ItemModal` component.
+ */
+export interface InterfaceItemModalProps {
+  isOpen: boolean;
+  hide: () => void;
+  orgId: string;
+  eventId: string | undefined;
+  actionItemsRefetch: () => void;
+  actionItem: InterfaceActionItemInfo | null;
+  editMode: boolean;
+}
+
+/**
+ * Initializes the form state for the `ItemModal` component.
+ *
+ * @param actionItem - The action item to be edited.
+ * @returns
+ */
+
+const initializeFormState = (
+  actionItem: InterfaceActionItemInfo | null,
+): InterfaceFormStateType => ({
+  dueDate: actionItem?.dueDate || new Date(),
+  actionItemCategoryId: actionItem?.actionItemCategory?._id || '',
+  assigneeId:
+    actionItem?.assignee?._id ||
+    actionItem?.assigneeGroup?._id ||
+    actionItem?.assigneeUser?._id ||
+    '',
+  assigneeType: actionItem?.assigneeType || 'User',
+  preCompletionNotes: actionItem?.preCompletionNotes || '',
+  postCompletionNotes: actionItem?.postCompletionNotes || null,
+  allottedHours: actionItem?.allottedHours || null,
+  isCompleted: actionItem?.isCompleted || false,
+});
+
+/**
+ * A modal component for creating action items.
+ *
+ * @param props - The properties passed to the component.
+ * @returns The `ItemModal` component.
+ */
+const ItemModal: FC<InterfaceItemModalProps> = ({
+  isOpen,
+  hide,
+  orgId,
+  eventId,
+  actionItem,
+  editMode,
+  actionItemsRefetch,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationActionItems',
+  });
+
+  const [actionItemCategory, setActionItemCategory] =
+    useState<InterfaceActionItemCategoryInfo | null>(null);
+  const [assignee, setAssignee] = useState<InterfaceEventVolunteerInfo | null>(
+    null,
+  );
+  const [assigneeGroup, setAssigneeGroup] =
+    useState<InterfaceVolunteerGroupInfo | null>(null);
+
+  const [assigneeUser, setAssigneeUser] = useState<InterfaceMemberInfo | null>(
+    null,
+  );
+
+  const [formState, setFormState] = useState<InterfaceFormStateType>(
+    initializeFormState(actionItem),
+  );
+
+  const {
+    dueDate,
+    assigneeType,
+    actionItemCategoryId,
+    assigneeId,
+    preCompletionNotes,
+    postCompletionNotes,
+    allottedHours,
+    isCompleted,
+  } = formState;
+
+  /**
+   * Query to fetch action item categories for the organization.
+   */
+  const {
+    data: actionItemCategoriesData,
+  }: {
+    data: InterfaceActionItemCategoryList | undefined;
+  } = useQuery(ACTION_ITEM_CATEGORY_LIST, {
+    variables: {
+      organizationId: orgId,
+      where: { is_disabled: false },
+    },
+  });
+
+  /**
+   * Query to fetch event volunteers for the event.
+   */
+  const {
+    data: volunteersData,
+  }: {
+    data?: {
+      getEventVolunteers: InterfaceEventVolunteerInfo[];
+    };
+  } = useQuery(EVENT_VOLUNTEER_LIST, {
+    variables: {
+      where: {
+        eventId: eventId,
+        hasAccepted: true,
+      },
+    },
+  });
+
+  /**
+   * Query to fetch the list of volunteer groups for the event.
+   */
+  const {
+    data: groupsData,
+  }: {
+    data?: {
+      getEventVolunteerGroups: InterfaceVolunteerGroupInfo[];
+    };
+  } = useQuery(EVENT_VOLUNTEER_GROUP_LIST, {
+    variables: {
+      where: {
+        eventId: eventId,
+      },
+    },
+  });
+
+  /**
+   * Query to fetch members of the organization.
+   */
+  const {
+    data: membersData,
+  }: {
+    data: InterfaceMembersList | undefined;
+  } = useQuery(MEMBERS_LIST, {
+    variables: { id: orgId },
+  });
+
+  const members = useMemo(
+    () => membersData?.organizations[0].members || [],
+    [membersData],
+  );
+
+  const volunteers = useMemo(
+    () => volunteersData?.getEventVolunteers || [],
+    [volunteersData],
+  );
+
+  const groups = useMemo(
+    () => groupsData?.getEventVolunteerGroups || [],
+    [groupsData],
+  );
+
+  const actionItemCategories = useMemo(
+    () => actionItemCategoriesData?.actionItemCategoriesByOrganization || [],
+    [actionItemCategoriesData],
+  );
+
+  /**
+   * Mutation to create & update a new action item.
+   */
+  const [createActionItem] = useMutation(CREATE_ACTION_ITEM_MUTATION);
+  const [updateActionItem] = useMutation(UPDATE_ACTION_ITEM_MUTATION);
+
+  /**
+   * Handler function to update the form state.
+   *
+   * @param field - The field to be updated.
+   * @param value - The value to be set.
+   * @returns void
+   */
+  const handleFormChange = (
+    field: keyof InterfaceFormStateType,
+    value: string | number | boolean | Date | undefined | null,
+  ): void => {
+    setFormState((prevState) => ({ ...prevState, [field]: value }));
+  };
+
+  /**
+   * Handler function to create a new action item.
+   *
+   * @param e - The form submit event.
+   * @returns A promise that resolves when the action item is created.
+   */
+  const createActionItemHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      const dDate = dayjs(dueDate).format('YYYY-MM-DD');
+      await createActionItem({
+        variables: {
+          dDate: dDate,
+          assigneeId: assigneeId,
+          assigneeType: assigneeType,
+          actionItemCategoryId: actionItemCategory?._id,
+          preCompletionNotes: preCompletionNotes,
+          allottedHours: allottedHours,
+          ...(eventId && { eventId }),
+        },
+      });
+
+      // Reset form and date after successful creation
+      setFormState(initializeFormState(null));
+      setActionItemCategory(null);
+      setAssignee(null);
+
+      actionItemsRefetch();
+      hide();
+      toast.success(t('successfulCreation'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  /**
+   * Handles the form submission for updating an action item.
+   *
+   * @param  e - The form submission event.
+   */
+  const updateActionItemHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      const updatedFields: {
+        [key: string]: number | string | boolean | Date | undefined | null;
+      } = {};
+
+      if (actionItemCategoryId !== actionItem?.actionItemCategory?._id) {
+        updatedFields.actionItemCategoryId = actionItemCategoryId;
+      }
+
+      if (
+        assigneeId !== actionItem?.assignee?._id &&
+        assigneeType === 'EventVolunteer'
+      ) {
+        updatedFields.assigneeId = assigneeId;
+      }
+
+      if (
+        assigneeId !== actionItem?.assigneeGroup?._id &&
+        assigneeType === 'EventVolunteerGroup'
+      ) {
+        updatedFields.assigneeId = assigneeId;
+      }
+
+      if (
+        assigneeId !== actionItem?.assigneeUser?._id &&
+        assigneeType === 'User'
+      ) {
+        updatedFields.assigneeId = assigneeId;
+      }
+
+      if (assigneeType !== actionItem?.assigneeType) {
+        updatedFields.assigneeType = assigneeType;
+      }
+
+      if (preCompletionNotes !== actionItem?.preCompletionNotes) {
+        updatedFields.preCompletionNotes = preCompletionNotes;
+      }
+
+      if (postCompletionNotes !== actionItem?.postCompletionNotes) {
+        updatedFields.postCompletionNotes = postCompletionNotes;
+      }
+
+      if (allottedHours !== actionItem?.allottedHours) {
+        updatedFields.allottedHours = allottedHours;
+      }
+
+      if (dueDate !== actionItem?.dueDate) {
+        updatedFields.dueDate = dayjs(dueDate).format('YYYY-MM-DD');
+      }
+
+      if (Object.keys(updatedFields).length === 0) {
+        toast.warning(t('noneUpdated'));
+        return;
+      }
+
+      await updateActionItem({
+        variables: {
+          actionItemId: actionItem?._id,
+          assigneeId: assigneeId,
+          assigneeType: assigneeType,
+          ...updatedFields,
+        },
+      });
+
+      setFormState(initializeFormState(null));
+      actionItemsRefetch();
+      hide();
+      toast.success(t('successfulUpdation'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  useEffect(() => {
+    setFormState(initializeFormState(actionItem));
+    setActionItemCategory(
+      actionItemCategories.find(
+        (category) => category._id === actionItem?.actionItemCategory?._id,
+      ) || null,
+    );
+    setAssignee(
+      volunteers.find(
+        (volunteer) => volunteer._id === actionItem?.assignee?._id,
+      ) || null,
+    );
+    setAssigneeGroup(
+      groups.find((group) => group._id === actionItem?.assigneeGroup?._id) ||
+        null,
+    );
+    setAssigneeUser(
+      members.find((member) => member._id === actionItem?.assigneeUser?._id) ||
+        null,
+    );
+  }, [actionItem, actionItemCategories, volunteers, groups, members]);
+
+  return (
+    <Modal className={styles.itemModal} show={isOpen} onHide={hide}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>
+          {editMode ? t('updateActionItem') : t('createActionItem')}
+        </p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.closeButton}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form
+          onSubmitCapture={
+            editMode ? updateActionItemHandler : createActionItemHandler
+          }
+          className="p-2"
+        >
+          <Form.Group className="d-flex gap-3 mb-3">
+            <Autocomplete
+              className={`${styles.noOutline} w-100`}
+              data-testid="categorySelect"
+              options={actionItemCategories}
+              value={actionItemCategory}
+              isOptionEqualToValue={(option, value) => option._id === value._id}
+              filterSelectedOptions={true}
+              getOptionLabel={(item: InterfaceActionItemCategoryInfo): string =>
+                item.name
+              }
+              onChange={(_, newCategory): void => {
+                /* istanbul ignore next */
+                handleFormChange(
+                  'actionItemCategoryId',
+                  newCategory?._id ?? '',
+                );
+                setActionItemCategory(newCategory);
+              }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label={t('actionItemCategory')}
+                  required
+                />
+              )}
+            />
+            {isCompleted && (
+              <>
+                {/* Input text Component to add allotted Hours for action item  */}
+                <FormControl>
+                  <TextField
+                    label={t('allottedHours')}
+                    variant="outlined"
+                    className={styles.noOutline}
+                    value={allottedHours ?? ''}
+                    onChange={(e) =>
+                      handleFormChange(
+                        'allottedHours',
+                        e.target.value === '' || parseInt(e.target.value) < 0
+                          ? null
+                          : parseInt(e.target.value),
+                      )
+                    }
+                  />
+                </FormControl>
+              </>
+            )}
+          </Form.Group>
+          {!isCompleted && (
+            <>
+              {eventId && (
+                <>
+                  <Form.Label className="my-0 py-0">{t('assignTo')}</Form.Label>
+                  <div
+                    className={`btn-group ${styles.toggleGroup} mt-0`}
+                    role="group"
+                    aria-label="Basic radio toggle button group"
+                  >
+                    <input
+                      type="radio"
+                      className={`btn-check ${styles.toggleBtn}`}
+                      name="btnradio"
+                      id="individualRadio"
+                      checked={assigneeType === 'EventVolunteer'}
+                      onChange={() =>
+                        handleFormChange('assigneeType', 'EventVolunteer')
+                      }
+                    />
+                    <label
+                      className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                      htmlFor="individualRadio"
+                    >
+                      <HiUser className="me-1" />
+                      {t('individuals')}
+                    </label>
+
+                    <input
+                      type="radio"
+                      className={`btn-check ${styles.toggleBtn}`}
+                      name="btnradio"
+                      id="groupsRadio"
+                      onChange={() =>
+                        handleFormChange('assigneeType', 'EventVolunteerGroup')
+                      }
+                      checked={assigneeType === 'EventVolunteerGroup'}
+                    />
+                    <label
+                      className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                      htmlFor="groupsRadio"
+                    >
+                      <HiUserGroup className="me-1" />
+                      {t('groups')}
+                    </label>
+                  </div>
+                </>
+              )}
+
+              {assigneeType === 'EventVolunteer' ? (
+                <Form.Group className="mb-3 w-100">
+                  <Autocomplete
+                    className={`${styles.noOutline} w-100`}
+                    data-testid="volunteerSelect"
+                    options={volunteers}
+                    value={assignee}
+                    isOptionEqualToValue={(option, value) =>
+                      option._id === value._id
+                    }
+                    filterSelectedOptions={true}
+                    getOptionLabel={(
+                      volunteer: InterfaceEventVolunteerInfo,
+                    ): string =>
+                      `${volunteer.user.firstName} ${volunteer.user.lastName}`
+                    }
+                    onChange={(_, newAssignee): void => {
+                      /* istanbul ignore next */
+                      handleFormChange('assigneeId', newAssignee?._id ?? '');
+                      setAssignee(newAssignee);
+                    }}
+                    renderInput={(params) => (
+                      <TextField {...params} label={t('volunteers')} required />
+                    )}
+                  />
+                </Form.Group>
+              ) : assigneeType === 'EventVolunteerGroup' ? (
+                <Form.Group className="mb-3 w-100">
+                  <Autocomplete
+                    className={`${styles.noOutline} w-100`}
+                    data-testid="volunteerGroupSelect"
+                    options={groups}
+                    value={assigneeGroup}
+                    isOptionEqualToValue={(option, value) =>
+                      option._id === value._id
+                    }
+                    filterSelectedOptions={true}
+                    getOptionLabel={(
+                      group: InterfaceVolunteerGroupInfo,
+                    ): string => `${group.name}`}
+                    onChange={(_, newAssignee): void => {
+                      /* istanbul ignore next */
+                      handleFormChange('assigneeId', newAssignee?._id ?? '');
+                      setAssigneeGroup(newAssignee);
+                    }}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        label={t('volunteerGroups')}
+                        required
+                      />
+                    )}
+                  />
+                </Form.Group>
+              ) : (
+                <Form.Group className="mb-3 w-100">
+                  <Autocomplete
+                    className={`${styles.noOutline} w-100`}
+                    data-testid="memberSelect"
+                    options={members}
+                    value={assigneeUser}
+                    isOptionEqualToValue={(option, value) =>
+                      option._id === value._id
+                    }
+                    filterSelectedOptions={true}
+                    getOptionLabel={(member: InterfaceMemberInfo): string =>
+                      `${member.firstName} ${member.lastName}`
+                    }
+                    onChange={(_, newAssignee): void => {
+                      /* istanbul ignore next */
+                      handleFormChange('assigneeId', newAssignee?._id ?? '');
+                      setAssigneeUser(newAssignee);
+                    }}
+                    renderInput={(params) => (
+                      <TextField {...params} label={t('assignee')} required />
+                    )}
+                  />
+                </Form.Group>
+              )}
+
+              <Form.Group className="d-flex gap-3 mx-auto  mb-3">
+                {/* Date Calendar Component to select due date of an action item */}
+                <DatePicker
+                  format="DD/MM/YYYY"
+                  label={t('dueDate')}
+                  className={styles.noOutline}
+                  value={dayjs(dueDate)}
+                  onChange={(date: Dayjs | null): void => {
+                    /* istanbul ignore next */
+                    if (date) handleFormChange('dueDate', date.toDate());
+                  }}
+                />
+
+                {/* Input text Component to add allotted Hours for action item  */}
+                <FormControl>
+                  <TextField
+                    label={t('allottedHours')}
+                    variant="outlined"
+                    className={styles.noOutline}
+                    value={allottedHours ?? ''}
+                    onChange={(e) =>
+                      handleFormChange(
+                        'allottedHours',
+                        e.target.value === '' || parseInt(e.target.value) < 0
+                          ? null
+                          : parseInt(e.target.value),
+                      )
+                    }
+                  />
+                </FormControl>
+              </Form.Group>
+
+              {/* Input text Component to add notes for action item */}
+              <FormControl fullWidth className="mb-2">
+                <TextField
+                  label={t('preCompletionNotes')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={preCompletionNotes}
+                  onChange={(e) =>
+                    handleFormChange('preCompletionNotes', e.target.value)
+                  }
+                />
+              </FormControl>
+            </>
+          )}
+
+          {isCompleted && (
+            <FormControl fullWidth className="mb-2">
+              <TextField
+                label={t('postCompletionNotes')}
+                className={styles.noOutline}
+                value={postCompletionNotes}
+                multiline
+                maxRows={3}
+                onChange={(e) =>
+                  handleFormChange('postCompletionNotes', e.target.value)
+                }
+              />
+            </FormControl>
+          )}
+
+          <Button
+            type="submit"
+            className={styles.addButton}
+            data-testid="submitBtn"
+          >
+            {editMode ? t('updateActionItem') : t('createActionItem')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default ItemModal;
diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx
new file mode 100644
index 0000000000..aa28b14d40
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.test.tsx
@@ -0,0 +1,259 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS, MOCKS_ERROR } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import ItemUpdateStatusModal, {
+  type InterfaceItemUpdateStatusModalProps,
+} from './ItemUpdateStatusModal';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const t = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.organizationActionItems,
+  ),
+);
+
+const itemProps: InterfaceItemUpdateStatusModalProps[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    actionItemsRefetch: jest.fn(),
+    actionItem: {
+      _id: 'actionItemId1',
+      assignee: null,
+      assigneeGroup: null,
+      assigneeType: 'User',
+      assigneeUser: {
+        _id: 'userId1',
+        firstName: 'John',
+        lastName: 'Doe',
+        image: undefined,
+      },
+      actionItemCategory: {
+        _id: 'actionItemCategoryId1',
+        name: 'Category 1',
+      },
+      preCompletionNotes: 'Notes 1',
+      postCompletionNotes: 'Cmp Notes 1',
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-08-30'),
+      completionDate: new Date('2044-09-03'),
+      isCompleted: true,
+      event: null,
+      allottedHours: 24,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: undefined,
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    actionItemsRefetch: jest.fn(),
+    actionItem: {
+      _id: 'actionItemId1',
+      assignee: null,
+      assigneeGroup: {
+        _id: 'volunteerGroupId1',
+        name: 'Group 1',
+        description: 'Description 1',
+        event: {
+          _id: 'eventId1',
+        },
+        createdAt: '2024-08-27',
+        creator: {
+          _id: 'userId2',
+          firstName: 'Wilt',
+          lastName: 'Shepherd',
+          image: undefined,
+        },
+        leader: {
+          _id: 'userId1',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: undefined,
+        },
+        volunteersRequired: 10,
+        assignments: [],
+        volunteers: [
+          {
+            _id: 'volunteerId1',
+            user: {
+              _id: 'userId1',
+              firstName: 'John',
+              lastName: 'Doe',
+              image: undefined,
+            },
+          },
+        ],
+      },
+      assigneeType: 'EventVolunteerGroup',
+      assigneeUser: {
+        _id: 'userId1',
+        firstName: 'John',
+        lastName: 'Doe',
+        image: undefined,
+      },
+      actionItemCategory: {
+        _id: 'actionItemCategoryId1',
+        name: 'Category 1',
+      },
+      preCompletionNotes: 'Notes 1',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-08-30'),
+      completionDate: new Date('2044-09-03'),
+      isCompleted: false,
+      event: null,
+      allottedHours: 24,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: undefined,
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    actionItemsRefetch: jest.fn(),
+    actionItem: {
+      _id: 'actionItemId1',
+      assignee: {
+        _id: 'volunteerId1',
+        hasAccepted: true,
+        user: {
+          _id: 'userId1',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: undefined,
+        },
+        assignments: [],
+        groups: [],
+        hoursVolunteered: 0,
+      },
+      assigneeGroup: null,
+      assigneeType: 'EventVolunteer',
+      assigneeUser: null,
+      actionItemCategory: {
+        _id: 'actionItemCategoryId1',
+        name: 'Category 1',
+      },
+      preCompletionNotes: 'Notes 1',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-08-30'),
+      completionDate: new Date('2044-09-03'),
+      isCompleted: true,
+      event: null,
+      allottedHours: 24,
+      assigner: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: undefined,
+      },
+      creator: {
+        _id: 'userId2',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+      },
+    },
+  },
+];
+
+const renderItemUpdateStatusModal = (
+  link: ApolloLink,
+  props: InterfaceItemUpdateStatusModalProps,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ItemUpdateStatusModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing ItemUpdateStatusModal', () => {
+  it('Update Status of Completed ActionItem', async () => {
+    renderItemUpdateStatusModal(link1, itemProps[0]);
+    expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument();
+    const yesBtn = await screen.findByTestId('yesBtn');
+    fireEvent.click(yesBtn);
+
+    await waitFor(() => {
+      expect(itemProps[0].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('Update Status of Pending ActionItem', async () => {
+    renderItemUpdateStatusModal(link1, itemProps[1]);
+    expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument();
+
+    const notes = await screen.findByLabelText(t.postCompletionNotes);
+    fireEvent.change(notes, { target: { value: 'Cmp Notes 1' } });
+
+    const createBtn = await screen.findByTestId('createBtn');
+    fireEvent.click(createBtn);
+
+    await waitFor(() => {
+      expect(itemProps[1].actionItemsRefetch).toHaveBeenCalled();
+      expect(itemProps[1].hide).toHaveBeenCalled();
+      expect(toast.success).toHaveBeenCalledWith(t.successfulUpdation);
+    });
+  });
+
+  it('should fail to Update status of Action Item', async () => {
+    renderItemUpdateStatusModal(link2, itemProps[2]);
+
+    expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument();
+    const yesBtn = await screen.findByTestId('yesBtn');
+    fireEvent.click(yesBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+});
diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
new file mode 100644
index 0000000000..640fdde032
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx
@@ -0,0 +1,138 @@
+import React, { type FC, type FormEvent, useEffect, useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { FormControl, TextField } from '@mui/material';
+import styles from '../../style/app.module.css';
+import { useMutation } from '@apollo/client';
+import { UPDATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutations';
+import { toast } from 'react-toastify';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+
+export interface InterfaceItemUpdateStatusModalProps {
+  isOpen: boolean;
+  hide: () => void;
+  actionItemsRefetch: () => void;
+  actionItem: InterfaceActionItemInfo;
+}
+
+const ItemUpdateStatusModal: FC<InterfaceItemUpdateStatusModalProps> = ({
+  hide,
+  isOpen,
+  actionItemsRefetch,
+  actionItem,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationActionItems',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const {
+    _id,
+    isCompleted,
+    assignee,
+    assigneeGroup,
+    assigneeUser,
+    assigneeType,
+  } = actionItem;
+
+  const [postCompletionNotes, setPostCompletionNotes] = useState<string>(
+    actionItem.postCompletionNotes ?? '',
+  );
+
+  /**
+   * Mutation to update an action item.
+   */
+  const [updateActionItem] = useMutation(UPDATE_ACTION_ITEM_MUTATION);
+
+  /**
+   * Handles the form submission for updating an action item.
+   *
+   * @param  e - The form submission event.
+   */
+  const updateActionItemHandler = async (
+    e: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+
+    try {
+      await updateActionItem({
+        variables: {
+          actionItemId: _id,
+          assigneeId:
+            assigneeType === 'EventVolunteer'
+              ? assignee?._id
+              : assigneeType === 'EventVolunteerGroup'
+                ? assigneeGroup?._id
+                : assigneeUser?._id,
+          assigneeType,
+          postCompletionNotes: isCompleted ? '' : postCompletionNotes,
+          isCompleted: !isCompleted,
+        },
+      });
+
+      actionItemsRefetch();
+      hide();
+      toast.success(t('successfulUpdation'));
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  useEffect(() => {
+    setPostCompletionNotes(actionItem.postCompletionNotes ?? '');
+  }, [actionItem]);
+
+  return (
+    <Modal className={styles.itemModal} show={isOpen} onHide={hide}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('actionItemStatus')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.closeButton}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmitCapture={updateActionItemHandler} className="p-2">
+          {!isCompleted ? (
+            <FormControl fullWidth className="mb-2">
+              <TextField
+                label={t('postCompletionNotes')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={postCompletionNotes}
+                onChange={(e) => setPostCompletionNotes(e.target.value)}
+              />
+            </FormControl>
+          ) : (
+            <p>{t('updateStatusMsg')}</p>
+          )}
+
+          {isCompleted ? (
+            <div className="d-flex gap-3 justify-content-end">
+              <Button type="submit" variant="primary" data-testid="yesBtn">
+                {tCommon('yes')}
+              </Button>
+              <Button variant="secondary" onClick={hide}>
+                {tCommon('no')}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              type="submit"
+              className={styles.addButton}
+              data-testid="createBtn"
+            >
+              {t('markCompletion')}
+            </Button>
+          )}
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default ItemUpdateStatusModal;
diff --git a/src/screens/OrganizationActionItems/ItemViewModal.test.tsx b/src/screens/OrganizationActionItems/ItemViewModal.test.tsx
new file mode 100644
index 0000000000..297cfab6a8
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemViewModal.test.tsx
@@ -0,0 +1,287 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { MOCKS } from './OrganizationActionItem.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import ItemViewModal, { type InterfaceViewModalProps } from './ItemViewModal';
+import type {
+  InterfaceEventVolunteerInfo,
+  InterfaceUserInfo,
+  InterfaceVolunteerGroupInfo,
+} from 'utils/interfaces';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const t = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.organizationActionItems,
+  ),
+);
+
+const createUser = (
+  id: string,
+  firstName: string,
+  lastName: string,
+  image?: string,
+): InterfaceUserInfo => ({
+  _id: id,
+  firstName,
+  lastName,
+  image,
+});
+
+const createAssignee = (
+  user: ReturnType<typeof createUser>,
+  hasAccepted = true,
+): InterfaceEventVolunteerInfo => ({
+  _id: `${user._id}-assignee`,
+  user,
+  assignments: [],
+  groups: [],
+  hasAccepted,
+  hoursVolunteered: 0,
+});
+
+const createAssigneeGroup = (
+  id: string,
+  name: string,
+  leader: ReturnType<typeof createUser>,
+): InterfaceVolunteerGroupInfo => ({
+  _id: id,
+  name,
+  description: `${name} description`,
+  event: { _id: 'eventId1' },
+  volunteers: [],
+  assignments: [],
+  volunteersRequired: 10,
+  leader,
+  creator: leader,
+  createdAt: '2024-08-27',
+});
+
+const userWithImage = createUser('userId', 'Wilt', 'Shepherd', 'wilt-image');
+const userWithoutImage = createUser('userId', 'Wilt', 'Shepherd');
+const assigneeWithImage = createUser('userId1', 'John', 'Doe', 'image-url');
+const assigneeWithoutImage = createUser('userId1', 'John', 'Doe');
+const actionItemCategory = {
+  _id: 'actionItemCategoryId2',
+  name: 'Category 2',
+};
+
+const itemProps: InterfaceViewModalProps[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    item: {
+      _id: 'actionItemId1',
+      assignee: createAssignee(assigneeWithoutImage),
+      assigneeGroup: null,
+      assigneeType: 'EventVolunteer',
+      assigneeUser: null,
+      actionItemCategory,
+      preCompletionNotes: 'Notes 1',
+      postCompletionNotes: 'Cmp Notes 1',
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-08-30'),
+      completionDate: new Date('2044-09-03'),
+      isCompleted: true,
+      event: null,
+      allottedHours: 24,
+      assigner: userWithoutImage,
+      creator: userWithoutImage,
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    item: {
+      _id: 'actionItemId2',
+      assignee: createAssignee(assigneeWithImage),
+      assigneeGroup: null,
+      assigneeType: 'EventVolunteer',
+      assigneeUser: null,
+      actionItemCategory,
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: null,
+      allottedHours: null,
+      assigner: userWithImage,
+      creator: userWithoutImage,
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    item: {
+      _id: 'actionItemId2',
+      assignee: null,
+      assigneeGroup: null,
+      assigneeType: 'User',
+      assigneeUser: assigneeWithImage,
+      actionItemCategory,
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: null,
+      allottedHours: null,
+      assigner: userWithImage,
+      creator: userWithoutImage,
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    item: {
+      _id: 'actionItemId2',
+      assignee: null,
+      assigneeGroup: null,
+      assigneeType: 'User',
+      assigneeUser: createUser('userId1', 'Jane', 'Doe'),
+      actionItemCategory,
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: null,
+      allottedHours: null,
+      assigner: userWithoutImage,
+      creator: userWithoutImage,
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    item: {
+      _id: 'actionItemId2',
+      assignee: null,
+      assigneeGroup: createAssigneeGroup(
+        'groupId1',
+        'Group 1',
+        assigneeWithoutImage,
+      ),
+      assigneeType: 'EventVolunteerGroup',
+      assigneeUser: null,
+      actionItemCategory,
+      preCompletionNotes: 'Notes 2',
+      postCompletionNotes: null,
+      assignmentDate: new Date('2024-08-27'),
+      dueDate: new Date('2044-09-30'),
+      completionDate: new Date('2044-10-03'),
+      isCompleted: false,
+      event: null,
+      allottedHours: null,
+      assigner: userWithoutImage,
+      creator: userWithoutImage,
+    },
+  },
+];
+
+const renderItemViewModal = (
+  link: ApolloLink,
+  props: InterfaceViewModalProps,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ItemViewModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing ItemViewModal', () => {
+  it('should render ItemViewModal with pending item & assignee with null image', () => {
+    renderItemViewModal(link1, itemProps[0]);
+    expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+
+    const assigneeInput = screen.getByTestId('assignee_input');
+    expect(assigneeInput).toBeInTheDocument();
+
+    const inputElement = within(assigneeInput).getByRole('textbox');
+    expect(inputElement).toHaveValue('John Doe');
+
+    expect(screen.getByTestId('assignee_avatar')).toBeInTheDocument();
+    expect(screen.getByTestId('assigner_avatar')).toBeInTheDocument();
+    expect(screen.getByLabelText(t.postCompletionNotes)).toBeInTheDocument();
+    expect(screen.getByLabelText(t.allottedHours)).toBeInTheDocument();
+    expect(screen.getByLabelText(t.allottedHours)).toHaveValue('24');
+  });
+
+  it('should render ItemViewModal with completed item & assignee with image', () => {
+    renderItemViewModal(link1, itemProps[1]);
+    expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('assignee_image')).toBeInTheDocument();
+    expect(screen.getByTestId('assigner_image')).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText(t.postCompletionNotes),
+    ).not.toBeInTheDocument();
+    expect(screen.getByLabelText(t.allottedHours)).toBeInTheDocument();
+    expect(screen.getByLabelText(t.allottedHours)).toHaveValue('-');
+  });
+
+  it('should render ItemViewModal with assigneeUser with image', () => {
+    renderItemViewModal(link1, itemProps[2]);
+    expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('assignee_image')).toBeInTheDocument();
+    expect(screen.getByTestId('assigner_image')).toBeInTheDocument();
+    const assigneeInput = screen.getByTestId('assignee_input');
+    expect(assigneeInput).toBeInTheDocument();
+
+    const inputElement = within(assigneeInput).getByRole('textbox');
+    expect(inputElement).toHaveValue('John Doe');
+  });
+
+  it('should render ItemViewModal with assigneeUser without image', () => {
+    renderItemViewModal(link1, itemProps[3]);
+    expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('assignee_avatar')).toBeInTheDocument();
+    expect(screen.getByTestId('assigner_avatar')).toBeInTheDocument();
+    const assigneeInput = screen.getByTestId('assignee_input');
+    expect(assigneeInput).toBeInTheDocument();
+
+    const inputElement = within(assigneeInput).getByRole('textbox');
+    expect(inputElement).toHaveValue('Jane Doe');
+  });
+
+  it('should render ItemViewModal with assigneeGroup', () => {
+    renderItemViewModal(link1, itemProps[4]);
+    expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument();
+    expect(screen.getByTestId('assigneeGroup_avatar')).toBeInTheDocument();
+    expect(screen.getByTestId('assigner_avatar')).toBeInTheDocument();
+    const assigneeInput = screen.getByTestId('assignee_input');
+    expect(assigneeInput).toBeInTheDocument();
+
+    const inputElement = within(assigneeInput).getByRole('textbox');
+    expect(inputElement).toHaveValue('Group 1');
+  });
+});
diff --git a/src/screens/OrganizationActionItems/ItemViewModal.tsx b/src/screens/OrganizationActionItems/ItemViewModal.tsx
new file mode 100644
index 0000000000..5a78ac8a91
--- /dev/null
+++ b/src/screens/OrganizationActionItems/ItemViewModal.tsx
@@ -0,0 +1,253 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import React from 'react';
+import dayjs from 'dayjs';
+import type { FC } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+import styles from './OrganizationActionItems.module.css';
+import { useTranslation } from 'react-i18next';
+import { FormControl, TextField } from '@mui/material';
+import { TaskAlt, HistoryToggleOff } from '@mui/icons-material';
+import Avatar from 'components/Avatar/Avatar';
+
+export interface InterfaceViewModalProps {
+  isOpen: boolean;
+  hide: () => void;
+  item: InterfaceActionItemInfo;
+}
+
+/**
+ * A modal dialog for viewing action item details.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param item - The action item object to be displayed.
+ *
+ * @returns The rendered modal component.
+ *
+ * The `ItemViewModal` component displays all the fields of an action item in a modal dialog.
+ * It includes fields for assignee, assigner, category, pre and post completion notes, assignment date, due date, completion date, and event.
+ */
+
+const ItemViewModal: FC<InterfaceViewModalProps> = ({ isOpen, hide, item }) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationActionItems',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const {
+    actionItemCategory,
+    assignee,
+    assigneeGroup,
+    assigneeUser,
+    assigneeType,
+    assigner,
+    completionDate,
+    dueDate,
+    isCompleted,
+    postCompletionNotes,
+    preCompletionNotes,
+    allottedHours,
+  } = item;
+
+  return (
+    <Modal className={styles.itemModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('actionItemDetails')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form className="p-3">
+          <Form.Group className="d-flex mb-3 w-100">
+            <FormControl fullWidth>
+              <TextField
+                label={t('category')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={actionItemCategory?.name}
+                disabled
+              />
+            </FormControl>
+          </Form.Group>
+          <Form.Group className="d-flex gap-3 mb-3">
+            <FormControl fullWidth>
+              <TextField
+                label={t('assignee')}
+                variant="outlined"
+                className={styles.noOutline}
+                data-testid="assignee_input"
+                value={
+                  assigneeType === 'EventVolunteer'
+                    ? `${assignee?.user?.firstName} ${assignee?.user?.lastName}`
+                    : assigneeType === 'EventVolunteerGroup'
+                      ? assigneeGroup?.name
+                      : `${assigneeUser?.firstName} ${assigneeUser?.lastName}`
+                }
+                disabled
+                InputProps={{
+                  startAdornment: (
+                    <>
+                      {assignee?.user?.image || assigneeUser?.image ? (
+                        <img
+                          src={
+                            (assignee?.user?.image ||
+                              assigneeUser?.image) as string
+                          }
+                          alt="Assignee"
+                          data-testid={`assignee_image`}
+                          className={styles.TableImage}
+                        />
+                      ) : assignee || assigneeUser ? (
+                        <Avatar
+                          key={assignee?._id || assigneeUser?._id}
+                          containerStyle={styles.imageContainer}
+                          avatarStyle={styles.TableImage}
+                          dataTestId={`assignee_avatar`}
+                          name={`${assignee?.user.firstName || assigneeUser?.firstName} ${assignee?.user.lastName || assigneeUser?.lastName}`}
+                          alt={`assignee_avatar`}
+                        />
+                      ) : (
+                        <Avatar
+                          key={assigneeGroup?._id}
+                          containerStyle={styles.imageContainer}
+                          avatarStyle={styles.TableImage}
+                          dataTestId={`assigneeGroup_avatar`}
+                          name={assigneeGroup?.name as string}
+                          alt={`assigneeGroup_avatar`}
+                        />
+                      )}
+                    </>
+                  ),
+                }}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <TextField
+                label={t('assigner')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={assigner?.firstName + ' ' + assigner?.lastName}
+                disabled
+                InputProps={{
+                  startAdornment: (
+                    <>
+                      {assigner.image ? (
+                        <img
+                          src={assigner.image}
+                          alt="Assigner"
+                          data-testid={`assigner_image`}
+                          className={styles.TableImage}
+                        />
+                      ) : (
+                        <div className={styles.avatarContainer}>
+                          <Avatar
+                            key={assigner._id + '1'}
+                            containerStyle={styles.imageContainer}
+                            avatarStyle={styles.TableImage}
+                            dataTestId={`assigner_avatar`}
+                            name={assigner.firstName + ' ' + assigner.lastName}
+                            alt={`assigner_avatar`}
+                          />
+                        </div>
+                      )}
+                    </>
+                  ),
+                }}
+              />
+            </FormControl>
+          </Form.Group>
+          <Form.Group className="d-flex gap-3 mx-auto mb-3">
+            {/* Status of Action Item */}
+            <TextField
+              label={t('status')}
+              fullWidth
+              value={isCompleted ? tCommon('completed') : tCommon('pending')}
+              InputProps={{
+                startAdornment: (
+                  <>
+                    {isCompleted ? (
+                      <TaskAlt color="success" className="me-2" />
+                    ) : (
+                      <HistoryToggleOff color="warning" className="me-2" />
+                    )}
+                  </>
+                ),
+                style: {
+                  color: isCompleted ? 'green' : '#ed6c02',
+                },
+              }}
+              inputProps={{
+                style: {
+                  WebkitTextFillColor: isCompleted ? 'green' : '#ed6c02',
+                },
+              }}
+              disabled
+            />
+
+            <TextField
+              label={t('allottedHours')}
+              variant="outlined"
+              className={`${styles.noOutline} w-100`}
+              value={allottedHours ?? '-'}
+              disabled
+            />
+          </Form.Group>
+          <Form.Group className={`d-flex gap-3 mb-3`}>
+            {/* Date Calendar Component to display due date of Action Item */}
+            <DatePicker
+              format="DD/MM/YYYY"
+              label={t('dueDate')}
+              className={`${styles.noOutline} w-100`}
+              value={dayjs(dueDate)}
+              disabled
+            />
+
+            {/* Date Calendar Component to display completion Date of Action Item */}
+            {isCompleted && (
+              <DatePicker
+                format="DD/MM/YYYY"
+                label={t('completionDate')}
+                className={`${styles.noOutline} w-100`}
+                value={dayjs(completionDate)}
+                disabled
+              />
+            )}
+          </Form.Group>
+          <Form.Group className={`d-flex ${isCompleted && 'mb-3'}`}>
+            <FormControl fullWidth>
+              <TextField
+                label={t('preCompletionNotes')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={preCompletionNotes}
+                multiline
+                maxRows={3}
+                disabled
+              />
+            </FormControl>
+          </Form.Group>
+          {isCompleted && (
+            <FormControl fullWidth>
+              <TextField
+                label={t('postCompletionNotes')}
+                className={styles.noOutline}
+                value={postCompletionNotes}
+                multiline
+                maxRows={3}
+                disabled
+              />
+            </FormControl>
+          )}
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default ItemViewModal;
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts b/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts
new file mode 100644
index 0000000000..d7d661fc9d
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItem.mocks.ts
@@ -0,0 +1,493 @@
+import dayjs from 'dayjs';
+import {
+  CREATE_ACTION_ITEM_MUTATION,
+  DELETE_ACTION_ITEM_MUTATION,
+  UPDATE_ACTION_ITEM_MUTATION,
+} from 'GraphQl/Mutations/ActionItemMutations';
+import { ACTION_ITEM_LIST } from 'GraphQl/Queries/Queries';
+
+import {
+  actionItemCategoryListQuery,
+  groupListQuery,
+  itemWithGroup,
+  itemWithUser,
+  itemWithUserImage,
+  itemWithVolunteer,
+  itemWithVolunteerImage,
+  memberListQuery,
+  volunteerListQuery,
+} from './testObject.mocks';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [
+          itemWithVolunteer,
+          itemWithUser,
+          itemWithGroup,
+          itemWithVolunteerImage,
+          itemWithUserImage,
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          categoryName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithVolunteer, itemWithUser],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'dueDate_ASC',
+        where: {
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithVolunteer, itemWithUser],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'dueDate_DESC',
+        where: {
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithUser, itemWithVolunteer],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          assigneeName: '',
+          is_completed: true,
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithVolunteer],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          assigneeName: '',
+          is_completed: false,
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithUser],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          assigneeName: 'John',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithVolunteer],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          categoryName: 'Category 1',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [itemWithVolunteer],
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+      },
+    },
+    result: {
+      data: {
+        removeActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+        assigneeId: 'userId1',
+        assigneeType: 'User',
+        postCompletionNotes: '',
+        isCompleted: false,
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+        assigneeId: 'userId1',
+        assigneeType: 'User',
+        actionItemCategoryId: 'categoryId2',
+        postCompletionNotes: 'Cmp Notes 2',
+        allottedHours: 19,
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+        assigneeId: 'volunteerGroupId1',
+        assigneeType: 'EventVolunteerGroup',
+        postCompletionNotes: 'Cmp Notes 1',
+        isCompleted: true,
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId2',
+        assigneeId: 'userId1',
+        assigneeType: 'User',
+        actionItemCategoryId: 'categoryId1',
+        preCompletionNotes: 'Notes 3',
+        allottedHours: 19,
+        dueDate: '2044-01-02',
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+        assigneeId: 'userId1',
+        postCompletionNotes: 'Cmp Notes 1',
+        isCompleted: true,
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId2',
+        assigneeId: 'volunteerId2',
+        assigneeType: 'EventVolunteer',
+        actionItemCategoryId: 'categoryId1',
+        allottedHours: 19,
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId2',
+        assigneeId: 'groupId2',
+        assigneeType: 'EventVolunteerGroup',
+        actionItemCategoryId: 'categoryId1',
+        allottedHours: 19,
+      },
+    },
+    result: {
+      data: {
+        updateActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_MUTATION,
+      variables: {
+        assigneeId: 'userId1',
+        assigneeType: 'User',
+        actionItemCategoryId: 'categoryId1',
+        preCompletionNotes: 'Notes',
+        allottedHours: 9,
+        dDate: '2044-01-02',
+      },
+    },
+    result: {
+      data: {
+        createActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_MUTATION,
+      variables: {
+        assigneeId: 'userId1',
+        assigneeType: 'User',
+        actionItemCategoryId: 'categoryId1',
+        preCompletionNotes: 'Notes',
+        allottedHours: 9,
+        dDate: '2044-01-02',
+      },
+    },
+    result: {
+      data: {
+        createActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_MUTATION,
+      variables: {
+        assigneeId: 'volunteerId1',
+        assigneeType: 'EventVolunteer',
+        actionItemCategoryId: 'categoryId1',
+        preCompletionNotes: 'Notes',
+        allottedHours: 9,
+        dDate: '2044-01-02',
+        eventId: 'eventId',
+      },
+    },
+    result: {
+      data: {
+        createActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_MUTATION,
+      variables: {
+        assigneeId: 'groupId1',
+        assigneeType: 'EventVolunteerGroup',
+        actionItemCategoryId: 'categoryId1',
+        preCompletionNotes: 'Notes',
+        allottedHours: 9,
+        dDate: '2044-01-02',
+        eventId: 'eventId',
+      },
+    },
+    result: {
+      data: {
+        createActionItem: {
+          _id: 'actionItemId1',
+        },
+      },
+    },
+  },
+  memberListQuery,
+  actionItemCategoryListQuery,
+  ...volunteerListQuery,
+  ...groupListQuery,
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          assigneeName: '',
+        },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: DELETE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+        assigneeId: 'volunteerId1',
+        assigneeType: 'EventVolunteer',
+        postCompletionNotes: '',
+        isCompleted: false,
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: CREATE_ACTION_ITEM_MUTATION,
+      variables: {
+        assigneeId: '',
+        assigneeType: 'User',
+        preCompletionNotes: '',
+        allottedHours: null,
+        dDate: dayjs().format('YYYY-MM-DD'),
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  {
+    request: {
+      query: UPDATE_ACTION_ITEM_MUTATION,
+      variables: {
+        actionItemId: 'actionItemId1',
+        assigneeId: 'userId1',
+        assigneeType: 'User',
+        postCompletionNotes: 'Cmp Notes 2',
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+  memberListQuery,
+  actionItemCategoryListQuery,
+  ...volunteerListQuery,
+  ...groupListQuery,
+];
+
+export const MOCKS_EMPTY = [
+  {
+    request: {
+      query: ACTION_ITEM_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: null,
+        where: {
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByOrganization: [],
+      },
+    },
+  },
+  memberListQuery,
+  actionItemCategoryListQuery,
+  ...volunteerListQuery,
+  ...groupListQuery,
+];
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
new file mode 100644
index 0000000000..ac86e19f3f
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -0,0 +1,291 @@
+actionItemsContainer {
+  height: 90vh;
+}
+
+.actionItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+}
+
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.dropdownToggle {
+  margin-bottom: 0;
+  display: flex;
+}
+
+.dropdownModalToggle {
+  width: 50%;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px var(--bs-gray-300);
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: var(--bs-primary);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--bs-gray-500);
+  margin: 1rem;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+.icon {
+  margin: 1px;
+}
+
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
+.removeFilterIcon {
+  cursor: pointer;
+}
+
+.searchForm {
+  display: inline;
+}
+
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--bs-gray-600);
+}
+
+/* header (search, filter, dropdown) */
+.btnsContainer {
+  display: flex;
+  margin: 0.5rem 0 1.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.noOutline input:disabled {
+  -webkit-text-fill-color: black !important;
+}
+
+.noOutline textarea:disabled {
+  -webkit-text-fill-color: black !important;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+/* Action Items Data Grid */
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.chipIcon {
+  height: 0.9rem !important;
+}
+
+.chip {
+  height: 1.5rem !important;
+}
+
+.active {
+  background-color: #31bb6a50 !important;
+}
+
+.pending {
+  background-color: #ffd76950 !important;
+  color: #bb952bd0 !important;
+  border-color: #bb952bd0 !important;
+}
+
+/* Modals */
+.itemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+}
+
+.TableImage {
+  object-fit: cover;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 100% !important;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+/* Toggle Btn */
+.toggleGroup {
+  width: 50%;
+  min-width: 20rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtn {
+  padding: 0rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtn:hover {
+  color: #31bb6b !important;
+}
+
+input[type='radio']:checked + label {
+  background-color: #31bb6a50 !important;
+}
+
+input[type='radio']:checked + label:hover {
+  color: black !important;
+} /* Toggle Btn */
+.toggleGroup {
+  width: 50%;
+  min-width: 20rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtn {
+  padding: 0rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtn:hover {
+  color: #31bb6b !important;
+}
+
+input[type='radio']:checked + label {
+  background-color: #31bb6a50 !important;
+}
+
+input[type='radio']:checked + label:hover {
+  color: black !important;
+}
+
+.rankings {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  width: 50px;
+}
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
new file mode 100644
index 0000000000..44e11baa35
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx
@@ -0,0 +1,359 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import OrganizationActionItems from 'screens/OrganizationActionItems/OrganizationActionItems';
+import type { ApolloLink } from '@apollo/client';
+import {
+  MOCKS,
+  MOCKS_EMPTY,
+  MOCKS_ERROR,
+} from './OrganizationActionItem.mocks';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const link3 = new StaticMockLink(MOCKS_EMPTY);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationActionItems ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderOrganizationActionItems = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgactionitems/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/orgactionitems/:orgId"
+                  element={<OrganizationActionItems />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Organization Action Items Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', eventId: 'eventId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/orgactionitems/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/orgactionitems/"
+                  element={<OrganizationActionItems />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Organization Action Items screen', async () => {
+    renderOrganizationActionItems(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getAllByText('John Doe')).toHaveLength(2);
+      expect(screen.getAllByText('Jane Doe')).toHaveLength(2);
+    });
+  });
+
+  it('Sort Action Items descending by dueDate', async () => {
+    renderOrganizationActionItems(link1);
+
+    const sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by dueDate_DESC
+    fireEvent.click(sortBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('dueDate_DESC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('dueDate_DESC'));
+    await waitFor(() => {
+      expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+        'Category 2',
+      );
+    });
+  });
+
+  it('Sort Action Items ascending by dueDate', async () => {
+    renderOrganizationActionItems(link1);
+
+    const sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by dueDate_ASC
+    fireEvent.click(sortBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('dueDate_ASC')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('dueDate_ASC'));
+    await waitFor(() => {
+      expect(screen.getAllByTestId('categoryName')[0]).toHaveTextContent(
+        'Category 1',
+      );
+    });
+  });
+
+  it('Filter Action Items by status (All/Pending)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    // Filter by All
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusAll')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusAll'));
+
+    await waitFor(() => {
+      expect(screen.getAllByText('Category 1')).toHaveLength(3);
+      expect(screen.getAllByText('Category 2')).toHaveLength(2);
+    });
+
+    // Filter by Pending
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusPending')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusPending'));
+    await waitFor(() => {
+      expect(screen.queryByText('Category 1')).toBeNull();
+      expect(screen.getByText('Category 2')).toBeInTheDocument();
+    });
+  });
+
+  it('Filter Action Items by status (Completed)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const filterBtn = await screen.findByTestId('filter');
+    expect(filterBtn).toBeInTheDocument();
+
+    fireEvent.click(filterBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('statusCompleted')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('statusCompleted'));
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.queryByText('Category 2')).toBeNull();
+    });
+  });
+
+  it('open and close Item modal (create)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const addItemBtn = await screen.findByTestId('createActionItemBtn');
+    expect(addItemBtn).toBeInTheDocument();
+    userEvent.click(addItemBtn);
+
+    await waitFor(() =>
+      expect(screen.getAllByText(t.createActionItem)).toHaveLength(2),
+    );
+    userEvent.click(screen.getByTestId('modalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and close Item modal (view)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const viewItemBtn = await screen.findByTestId('viewItemBtn1');
+    expect(viewItemBtn).toBeInTheDocument();
+    userEvent.click(viewItemBtn);
+
+    await waitFor(() =>
+      expect(screen.getByText(t.actionItemDetails)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('modalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and closes Item modal (edit)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const editItemBtn = await screen.findByTestId('editItemBtn1');
+    await waitFor(() => expect(editItemBtn).toBeInTheDocument());
+    userEvent.click(editItemBtn);
+
+    await waitFor(() =>
+      expect(screen.getAllByText(t.updateActionItem)).toHaveLength(2),
+    );
+    userEvent.click(screen.getByTestId('modalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and closes Item modal (delete)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const deleteItemBtn = await screen.findByTestId('deleteItemBtn1');
+    expect(deleteItemBtn).toBeInTheDocument();
+    userEvent.click(deleteItemBtn);
+
+    await waitFor(() =>
+      expect(screen.getByText(t.deleteActionItem)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('modalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and closes Item modal (update status)', async () => {
+    renderOrganizationActionItems(link1);
+
+    const statusCheckbox = await screen.findByTestId('statusCheckbox1');
+    expect(statusCheckbox).toBeInTheDocument();
+    userEvent.click(statusCheckbox);
+
+    await waitFor(() =>
+      expect(screen.getByText(t.actionItemStatus)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('modalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('modalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('Search action items by assignee', async () => {
+    renderOrganizationActionItems(link1);
+
+    const searchByToggle = await screen.findByTestId('searchByToggle');
+    expect(searchByToggle).toBeInTheDocument();
+
+    userEvent.click(searchByToggle);
+    await waitFor(() => {
+      expect(screen.getByTestId('assignee')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('assignee'));
+
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'John');
+    await debounceWait();
+
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.queryByText('Category 2')).toBeNull();
+    });
+  });
+
+  it('Search action items by category', async () => {
+    renderOrganizationActionItems(link1);
+
+    const searchByToggle = await screen.findByTestId('searchByToggle');
+    expect(searchByToggle).toBeInTheDocument();
+
+    userEvent.click(searchByToggle);
+    await waitFor(() => {
+      expect(screen.getByTestId('category')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('category'));
+
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'Category 1');
+    await debounceWait();
+
+    await waitFor(() => {
+      expect(screen.getByText('Category 1')).toBeInTheDocument();
+      expect(screen.queryByText('Category 2')).toBeNull();
+    });
+  });
+
+  it('should render Empty Action Item Categories Screen', async () => {
+    renderOrganizationActionItems(link3);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noActionItems)).toBeInTheDocument();
+    });
+  });
+
+  it('should render the Action Item Categories Screen with error', async () => {
+    renderOrganizationActionItems(link2);
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.tsx b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
new file mode 100644
index 0000000000..f1a8044d01
--- /dev/null
+++ b/src/screens/OrganizationActionItems/OrganizationActionItems.tsx
@@ -0,0 +1,578 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
+
+import {
+  Circle,
+  FilterAltOutlined,
+  Search,
+  Sort,
+  WarningAmberRounded,
+} from '@mui/icons-material';
+import dayjs from 'dayjs';
+
+import { useQuery } from '@apollo/client';
+import { ACTION_ITEM_LIST } from 'GraphQl/Queries/Queries';
+
+import type {
+  InterfaceActionItemInfo,
+  InterfaceActionItemList,
+} from 'utils/interfaces';
+import styles from '../../style/app.module.css';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { Chip, debounce, Stack } from '@mui/material';
+import ItemViewModal from './ItemViewModal';
+import ItemModal from './ItemModal';
+import ItemDeleteModal from './ItemDeleteModal';
+import Avatar from 'components/Avatar/Avatar';
+import ItemUpdateStatusModal from './ItemUpdateStatusModal';
+
+enum ItemStatus {
+  Pending = 'pending',
+  Completed = 'completed',
+  Late = 'late',
+}
+
+enum ModalState {
+  SAME = 'same',
+  DELETE = 'delete',
+  VIEW = 'view',
+  STATUS = 'status',
+}
+
+/**
+ * Component for managing and displaying action items within an organization.
+ *
+ * This component allows users to view, filter, sort, and create action items. It also handles fetching and displaying related data such as action item categories and members.
+ *
+ * @returns The rendered component.
+ */
+function organizationActionItems(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationActionItems',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Get the organization ID from URL parameters
+  const { orgId, eventId } = useParams();
+
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [actionItem, setActionItem] = useState<InterfaceActionItemInfo | null>(
+    null,
+  );
+  const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<'dueDate_ASC' | 'dueDate_DESC' | null>(
+    null,
+  );
+  const [status, setStatus] = useState<ItemStatus | null>(null);
+  const [searchBy, setSearchBy] = useState<'assignee' | 'category'>('assignee');
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.SAME]: false,
+    [ModalState.DELETE]: false,
+    [ModalState.VIEW]: false,
+    [ModalState.STATUS]: false,
+  });
+
+  const openModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+
+  const closeModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+  const handleModalClick = useCallback(
+    (actionItem: InterfaceActionItemInfo | null, modal: ModalState): void => {
+      if (modal === ModalState.SAME) {
+        setModalMode(actionItem ? 'edit' : 'create');
+      }
+      setActionItem(actionItem);
+      openModal(modal);
+    },
+    [openModal],
+  );
+
+  /**
+   * Query to fetch action items for the organization based on filters and sorting.
+   */
+  const {
+    data: actionItemsData,
+    loading: actionItemsLoading,
+    error: actionItemsError,
+    refetch: actionItemsRefetch,
+  }: {
+    data: InterfaceActionItemList | undefined;
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(ACTION_ITEM_LIST, {
+    variables: {
+      organizationId: orgId,
+      eventId: eventId,
+      orderBy: sortBy,
+      where: {
+        assigneeName: searchBy === 'assignee' ? searchTerm : undefined,
+        categoryName: searchBy === 'category' ? searchTerm : undefined,
+        is_completed:
+          status === null ? undefined : status === ItemStatus.Completed,
+      },
+    },
+  });
+
+  const actionItems = useMemo(
+    () => actionItemsData?.actionItemsByOrganization || [],
+    [actionItemsData],
+  );
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  if (actionItemsLoading) {
+    return <Loader size="xl" />;
+  }
+
+  if (actionItemsError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Action Items' })}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'assignee',
+      headerName: 'Assignee',
+      flex: 1,
+      align: 'left',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { _id, firstName, lastName, image } =
+          params.row.assigneeUser || params.row.assignee?.user || {};
+
+        return (
+          <>
+            {params.row.assigneeType !== 'EventVolunteerGroup' ? (
+              <>
+                <div
+                  className="d-flex fw-bold align-items-center ms-2"
+                  data-testid="assigneeName"
+                >
+                  {image ? (
+                    <img
+                      src={image}
+                      alt="Assignee"
+                      data-testid={`image${_id + 1}`}
+                      className={styles.TableImage}
+                    />
+                  ) : (
+                    <div className={styles.avatarContainer}>
+                      <Avatar
+                        key={_id + '1'}
+                        containerStyle={styles.imageContainer}
+                        avatarStyle={styles.TableImage}
+                        name={firstName + ' ' + lastName}
+                        alt={firstName + ' ' + lastName}
+                      />
+                    </div>
+                  )}
+                  {firstName + ' ' + lastName}
+                </div>
+              </>
+            ) : (
+              <>
+                <div
+                  className="d-flex fw-bold align-items-center ms-2"
+                  data-testid="assigneeName"
+                >
+                  <div className={styles.avatarContainer}>
+                    <Avatar
+                      key={_id + '1'}
+                      containerStyle={styles.imageContainer}
+                      avatarStyle={styles.TableImage}
+                      name={params.row.assigneeGroup?.name as string}
+                      alt={'assigneeGroup_avatar'}
+                    />
+                  </div>
+                  {params.row.assigneeGroup?.name as string}
+                </div>
+              </>
+            )}
+          </>
+        );
+      },
+    },
+    {
+      field: 'itemCategory',
+      headerName: 'Item Category',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="categoryName"
+          >
+            {params.row.actionItemCategory?.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'status',
+      headerName: 'Status',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Chip
+            icon={<Circle className={styles.chipIcon} />}
+            label={params.row.isCompleted ? 'Completed' : 'Pending'}
+            variant="outlined"
+            color="primary"
+            className={`${styles.chip} ${params.row.isCompleted ? styles.active : styles.pending}`}
+          />
+        );
+      },
+    },
+    {
+      field: 'allottedHours',
+      headerName: 'Allotted Hours',
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="allottedHours">
+            {params.row.allottedHours ?? '-'}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'dueDate',
+      headerName: 'Due Date',
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="createdOn">
+            {dayjs(params.row.dueDate).format('DD/MM/YYYY')}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'options',
+      headerName: 'Options',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              // variant="success"
+              size="sm"
+              style={{ minWidth: '32px' }}
+              className={styles.infoButton}
+              data-testid={`viewItemBtn${params.row.id}`}
+              onClick={() => handleModalClick(params.row, ModalState.VIEW)}
+            >
+              <i className="fa fa-info" />
+            </Button>
+            <Button
+              variant="success"
+              size="sm"
+              className={styles.infoButton}
+              data-testid={`editItemBtn${params.row.id}`}
+              onClick={() => handleModalClick(params.row, ModalState.SAME)}
+            >
+              <i className="fa fa-edit" />
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              className={styles.actionItemDeleteButton}
+              data-testid={`deleteItemBtn${params.row.id}`}
+              onClick={() => handleModalClick(params.row, ModalState.DELETE)}
+            >
+              <i className="fa fa-trash" />
+            </Button>
+          </>
+        );
+      },
+    },
+    {
+      field: 'completed',
+      headerName: 'Completed',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex align-items-center justify-content-center mt-3">
+            <Form.Check
+              type="checkbox"
+              data-testid={`statusCheckbox${params.row.id}`}
+              className={styles.checkboxButton}
+              checked={params.row.isCompleted}
+              onChange={() => handleModalClick(params.row, ModalState.STATUS)}
+            />
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: searchBy.charAt(0).toUpperCase() + searchBy.slice(1),
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={styles.searchButton}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="md:d-flex gap-3 mb-1 overflow-auto">
+          <div className="d-flex justify-space-between align-items-center gap-3 overflow-y-auto">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="searchByToggle"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('searchBy', { item: '' })}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('assignee')}
+                  data-testid="assignee"
+                >
+                  {t('assignee')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('category')}
+                  data-testid="category"
+                >
+                  {t('category')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('dueDate_DESC')}
+                  data-testid="dueDate_DESC"
+                >
+                  {t('latestDueDate')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('dueDate_ASC')}
+                  data-testid="dueDate_ASC"
+                >
+                  {t('earliestDueDate')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <FilterAltOutlined className={'me-1'} />
+                {t('status')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setStatus(null)}
+                  data-testid="statusAll"
+                >
+                  {tCommon('all')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setStatus(ItemStatus.Pending)}
+                  data-testid="statusPending"
+                >
+                  {tCommon('pending')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setStatus(ItemStatus.Completed)}
+                  data-testid="statusCompleted"
+                >
+                  {tCommon('completed')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              onClick={() => handleModalClick(null, ModalState.SAME)}
+              className={styles.createButton}
+              data-testid="createActionItemBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {tCommon('create')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Action Items */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noActionItems')}
+            </Stack>
+          ),
+        }}
+        sx={{
+          borderRadius: '20px',
+          backgroundColor: 'EAEBEF)',
+          '& .MuiDataGrid-row': {
+            backgroundColor: '#eff1f7',
+            '&:focus-within': {
+              // outline: '2px solid #000',
+              outlineOffset: '-2px',
+            },
+          },
+          '& .MuiDataGrid-row:hover': {
+            backgroundColor: '#EAEBEF',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+          },
+          '& .MuiDataGrid-row.Mui-hovered': {
+            backgroundColor: '#EAEBEF',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+          },
+          '& .MuiDataGrid-cell:focus': {
+            // outline: '2px solid #000',
+            // outlineOffset: '-2px',
+          },
+        }}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={actionItems.map((actionItem, index) => ({
+          id: index + 1,
+          ...actionItem,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      {/* Item Modal (Create/Edit) */}
+      <ItemModal
+        isOpen={modalState[ModalState.SAME]}
+        hide={() => closeModal(ModalState.SAME)}
+        orgId={orgId}
+        eventId={eventId}
+        actionItemsRefetch={actionItemsRefetch}
+        actionItem={actionItem}
+        editMode={modalMode === 'edit'}
+      />
+
+      {/* View Modal */}
+      {actionItem && (
+        <>
+          <ItemViewModal
+            isOpen={modalState[ModalState.VIEW]}
+            hide={() => closeModal(ModalState.VIEW)}
+            item={actionItem}
+          />
+
+          <ItemUpdateStatusModal
+            actionItem={actionItem}
+            isOpen={modalState[ModalState.STATUS]}
+            hide={() => closeModal(ModalState.STATUS)}
+            actionItemsRefetch={actionItemsRefetch}
+          />
+
+          <ItemDeleteModal
+            isOpen={modalState[ModalState.DELETE]}
+            hide={() => closeModal(ModalState.DELETE)}
+            actionItem={actionItem}
+            actionItemsRefetch={actionItemsRefetch}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default organizationActionItems;
diff --git a/src/screens/OrganizationActionItems/testObject.mocks.ts b/src/screens/OrganizationActionItems/testObject.mocks.ts
new file mode 100644
index 0000000000..d43f574e8c
--- /dev/null
+++ b/src/screens/OrganizationActionItems/testObject.mocks.ts
@@ -0,0 +1,402 @@
+import {
+  EVENT_VOLUNTEER_GROUP_LIST,
+  EVENT_VOLUNTEER_LIST,
+} from 'GraphQl/Queries/EventVolunteerQueries';
+import {
+  ACTION_ITEM_CATEGORY_LIST,
+  MEMBERS_LIST,
+} from 'GraphQl/Queries/Queries';
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+
+export const actionItemCategory1 = {
+  _id: 'actionItemCategoryId1',
+  name: 'Category 1',
+};
+
+export const actionItemCategory2 = {
+  _id: 'actionItemCategoryId2',
+  name: 'Category 2',
+};
+
+export const baseActionItem = {
+  assigner: {
+    _id: 'userId',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  creator: {
+    _id: 'userId',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+    __typename: 'User',
+  },
+};
+
+export const itemWithVolunteer: InterfaceActionItemInfo = {
+  _id: 'actionItemId1',
+  assigneeType: 'EventVolunteer',
+  assignee: {
+    _id: 'volunteerId1',
+    hasAccepted: true,
+    hoursVolunteered: 12,
+    assignments: [],
+    groups: [],
+    user: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: null,
+    },
+  },
+  assigneeUser: null,
+  assigneeGroup: null,
+  preCompletionNotes: 'Notes 1',
+  postCompletionNotes: 'Cmp Notes 1',
+  assignmentDate: new Date('2024-08-27'),
+  dueDate: new Date('2044-08-30'),
+  completionDate: new Date('2044-09-03'),
+  isCompleted: true,
+  event: null,
+  allottedHours: 24,
+  actionItemCategory: actionItemCategory1,
+  ...baseActionItem,
+};
+
+export const itemWithVolunteerImage: InterfaceActionItemInfo = {
+  _id: 'actionItemId1b',
+  assigneeType: 'EventVolunteer',
+  assignee: {
+    _id: 'volunteerId1',
+    hasAccepted: true,
+    hoursVolunteered: 12,
+    assignments: [],
+    groups: [],
+    user: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: 'user-image',
+    },
+  },
+  assigneeUser: null,
+  assigneeGroup: null,
+  preCompletionNotes: 'Notes 1',
+  postCompletionNotes: 'Cmp Notes 1',
+  assignmentDate: new Date('2024-08-27'),
+  dueDate: new Date('2044-08-30'),
+  completionDate: new Date('2044-09-03'),
+  isCompleted: true,
+  event: null,
+  allottedHours: 24,
+  actionItemCategory: actionItemCategory1,
+  ...baseActionItem,
+};
+
+export const itemWithUser: InterfaceActionItemInfo = {
+  _id: 'actionItemId2',
+  assigneeType: 'User',
+  assigneeUser: {
+    _id: 'userId1',
+    firstName: 'Jane',
+    lastName: 'Doe',
+    image: null,
+  },
+  assignee: null,
+  assigneeGroup: null,
+  preCompletionNotes: 'Notes 2',
+  postCompletionNotes: null,
+  assignmentDate: new Date('2024-08-27'),
+  dueDate: new Date('2044-09-30'),
+  completionDate: new Date('2044-10-03'),
+  isCompleted: false,
+  event: null,
+  allottedHours: null,
+  actionItemCategory: actionItemCategory2,
+  ...baseActionItem,
+};
+
+export const itemWithUserImage: InterfaceActionItemInfo = {
+  _id: 'actionItemId2b',
+  assigneeType: 'User',
+  assigneeUser: {
+    _id: 'userId1',
+    firstName: 'Jane',
+    lastName: 'Doe',
+    image: 'user-image',
+  },
+  assignee: null,
+  assigneeGroup: null,
+  preCompletionNotes: 'Notes 2',
+  postCompletionNotes: null,
+  assignmentDate: new Date('2024-08-27'),
+  dueDate: new Date('2044-09-30'),
+  completionDate: new Date('2044-10-03'),
+  isCompleted: false,
+  event: null,
+  allottedHours: null,
+  actionItemCategory: actionItemCategory2,
+  ...baseActionItem,
+};
+
+export const itemWithGroup: InterfaceActionItemInfo = {
+  _id: 'actionItemId3',
+  assigneeType: 'EventVolunteerGroup',
+  assigneeUser: null,
+  assignee: null,
+  assigneeGroup: {
+    _id: 'volunteerGroupId1',
+    name: 'Group 1',
+    description: 'Group 1 Description',
+    volunteersRequired: 10,
+    event: {
+      _id: 'eventId1',
+    },
+    assignments: [],
+    volunteers: [],
+    createdAt: '2024-08-27',
+    creator: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: null,
+    },
+    leader: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: null,
+    },
+  },
+  preCompletionNotes: 'Notes 1',
+  postCompletionNotes: 'Cmp Notes 1',
+  assignmentDate: new Date('2024-08-27'),
+  dueDate: new Date('2044-08-30'),
+  completionDate: new Date('2044-09-03'),
+  isCompleted: true,
+  event: null,
+  allottedHours: 24,
+  actionItemCategory: actionItemCategory1,
+  ...baseActionItem,
+};
+
+export const memberListQuery = {
+  request: {
+    query: MEMBERS_LIST,
+    variables: { id: 'orgId' },
+  },
+  result: {
+    data: {
+      organizations: [
+        {
+          _id: 'orgId',
+          members: [
+            {
+              _id: 'userId1',
+              firstName: 'Harve',
+              lastName: 'Lance',
+              email: 'harve@example.com',
+              image: '',
+              organizationsBlockedBy: [],
+              createdAt: '2024-02-14',
+            },
+            {
+              _id: 'userId2',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              email: 'wilt@example.com',
+              image: '',
+              organizationsBlockedBy: [],
+              createdAt: '2024-02-14',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export const volunteerListQuery = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: { where: { eventId: 'eventId', hasAccepted: true } },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [
+          {
+            _id: 'volunteerId1',
+            hasAccepted: true,
+            hoursVolunteered: 0,
+            user: {
+              _id: 'userId1',
+              firstName: 'Teresa',
+              lastName: 'Bradley',
+              image: null,
+            },
+            assignments: [],
+            groups: [
+              {
+                _id: 'groupId1',
+                name: 'group1',
+                volunteers: [
+                  {
+                    _id: 'volunteerId1',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            _id: 'volunteerId2',
+            hasAccepted: true,
+            hoursVolunteered: 0,
+            user: {
+              _id: 'userId3',
+              firstName: 'Bruce',
+              lastName: 'Graza',
+              image: null,
+            },
+            assignments: [],
+            groups: [],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_LIST,
+      variables: { where: { hasAccepted: true } },
+    },
+    result: {
+      data: {
+        getEventVolunteers: [],
+      },
+    },
+  },
+];
+
+export const groupListQuery = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: { where: { eventId: 'eventId' } },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [
+          {
+            _id: 'groupId1',
+            name: 'group1',
+            description: 'desc',
+            volunteersRequired: 10,
+            createdAt: '2024-10-27T15:34:15.889Z',
+            creator: {
+              _id: 'userId2',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+            },
+            leader: {
+              _id: 'userId1',
+              firstName: 'Teresa',
+              lastName: 'Bradley',
+              image: null,
+            },
+            volunteers: [
+              {
+                _id: 'volunteerId1',
+                user: {
+                  _id: 'userId1',
+                  firstName: 'Teresa',
+                  lastName: 'Bradley',
+                  image: null,
+                },
+              },
+            ],
+            assignments: [],
+            event: {
+              _id: 'eventId',
+            },
+          },
+          {
+            _id: 'groupId2',
+            name: 'group2',
+            description: 'desc',
+            volunteersRequired: 10,
+            createdAt: '2024-10-27T15:34:15.889Z',
+            creator: {
+              _id: 'userId2',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+            },
+            leader: {
+              _id: 'userId1',
+              firstName: 'Teresa',
+              lastName: 'Bradley',
+              image: null,
+            },
+            volunteers: [],
+            assignments: [],
+            event: {
+              _id: 'eventId',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: { where: { eventId: undefined } },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [],
+      },
+    },
+  },
+];
+
+export const actionItemCategoryListQuery = {
+  request: {
+    query: ACTION_ITEM_CATEGORY_LIST,
+    variables: {
+      organizationId: 'orgId',
+      where: { is_disabled: false },
+    },
+  },
+  result: {
+    data: {
+      actionItemCategoriesByOrganization: [
+        {
+          _id: 'categoryId1',
+          name: 'Category 1',
+          isDisabled: false,
+          createdAt: '2024-08-26',
+          creator: {
+            _id: 'creatorId1',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+          },
+        },
+        {
+          _id: 'categoryId2',
+          name: 'Category 2',
+          isDisabled: true,
+          createdAt: '2024-08-25',
+          creator: {
+            _id: 'creatorId2',
+            firstName: 'John',
+            lastName: 'Doe',
+          },
+        },
+      ],
+    },
+  },
+};
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
new file mode 100644
index 0000000000..3ffe274196
--- /dev/null
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
@@ -0,0 +1,35 @@
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 180px;
+  padding-top: 0;
+  max-height: 570px;
+  overflow-y: scroll;
+  width: 100%;
+  max-width: 400px;
+}
+
+.cardBody .emptyContainer {
+  display: flex;
+  height: 180px;
+  justify-content: center;
+  align-items: center;
+}
+
+.rankings {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  width: 35px;
+}
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
new file mode 100644
index 0000000000..88db2aa737
--- /dev/null
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
@@ -0,0 +1,277 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import OrganizationDashboard from './OrganizationDashboard';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, EMPTY_MOCKS, ERROR_MOCKS } from './OrganizationDashboardMocks';
+import { toast } from 'react-toastify';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(i18n.getDataByLanguage('en')?.translation.dashboard ?? {}),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const renderOrganizationDashboard = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgdash/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/orgdash/:orgId"
+                  element={<OrganizationDashboard />}
+                />
+                <Route
+                  path="/orgpeople/:orgId"
+                  element={<div data-testid="orgpeople"></div>}
+                />
+                <Route
+                  path="/orgevents/:orgId"
+                  element={<div data-testid="orgevents"></div>}
+                />
+                <Route
+                  path="/orgpost/:orgId"
+                  element={<div data-testid="orgpost"></div>}
+                />
+                <Route
+                  path="/orgevents/:orgId"
+                  element={<div data-testid="orgevents"></div>}
+                />
+                <Route
+                  path="/blockuser/:orgId"
+                  element={<div data-testid="blockuser"></div>}
+                />
+                <Route
+                  path="/leaderboard/:orgId"
+                  element={<div data-testid="leaderboard"></div>}
+                />
+                <Route
+                  path="/requests"
+                  element={<div data-testid="requests"></div>}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Organization Dashboard Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/orgdash/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/orgdash/" element={<OrganizationDashboard />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Organization Dashboard screen', async () => {
+    renderOrganizationDashboard(link1);
+
+    // Dashboard cards
+    const membersBtn = await screen.findByText(t.members);
+    expect(membersBtn).toBeInTheDocument();
+    expect(screen.getByText(t.admins)).toBeInTheDocument();
+    expect(screen.getByText(t.posts)).toBeInTheDocument();
+    expect(screen.getByText(t.events)).toBeInTheDocument();
+    expect(screen.getByText(t.blockedUsers)).toBeInTheDocument();
+
+    // Upcoming events
+    expect(screen.getByText(t.upcomingEvents)).toBeInTheDocument();
+    expect(screen.getByText('Event 1')).toBeInTheDocument();
+
+    // Latest posts
+    expect(screen.getByText(t.latestPosts)).toBeInTheDocument();
+    expect(screen.getByText('postone')).toBeInTheDocument();
+
+    // Membership requests
+    expect(screen.getByText(t.membershipRequests)).toBeInTheDocument();
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+
+    // Volunteer rankings
+    expect(screen.getByText(t.volunteerRankings)).toBeInTheDocument();
+    expect(screen.getByText('Teresa Bradley')).toBeInTheDocument();
+  });
+
+  it('Click People Card', async () => {
+    renderOrganizationDashboard(link1);
+    const membersBtn = await screen.findByText(t.members);
+    expect(membersBtn).toBeInTheDocument();
+
+    userEvent.click(membersBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('orgpeople')).toBeInTheDocument();
+    });
+  });
+
+  it('Click Admin Card', async () => {
+    renderOrganizationDashboard(link1);
+    const adminsBtn = await screen.findByText(t.admins);
+    expect(adminsBtn).toBeInTheDocument();
+  });
+});
+
+it('Click Post Card', async () => {
+  renderOrganizationDashboard(link1);
+  const postsBtn = await screen.findByText(t.posts);
+  expect(postsBtn).toBeInTheDocument();
+
+  userEvent.click(postsBtn);
+  await waitFor(() => {
+    expect(screen.getByTestId('orgpost')).toBeInTheDocument();
+  });
+});
+
+it('Click Events Card', async () => {
+  renderOrganizationDashboard(link1);
+  const eventsBtn = await screen.findByText(t.events);
+  expect(eventsBtn).toBeInTheDocument();
+
+  userEvent.click(eventsBtn);
+  await waitFor(() => {
+    expect(screen.getByTestId('orgevents')).toBeInTheDocument();
+  });
+});
+
+it('Click Blocked Users Card', async () => {
+  renderOrganizationDashboard(link1);
+  const blockedUsersBtn = await screen.findByText(t.blockedUsers);
+  expect(blockedUsersBtn).toBeInTheDocument();
+
+  userEvent.click(blockedUsersBtn);
+  await waitFor(() => {
+    expect(screen.getByTestId('blockuser')).toBeInTheDocument();
+  });
+});
+
+it('Click Requests Card', async () => {
+  renderOrganizationDashboard(link1);
+  const requestsBtn = await screen.findByText(t.requests);
+  expect(requestsBtn).toBeInTheDocument();
+
+  userEvent.click(requestsBtn);
+  await waitFor(() => {
+    expect(screen.getByTestId('requests')).toBeInTheDocument();
+  });
+});
+
+it('Click View All Events', async () => {
+  renderOrganizationDashboard(link1);
+  const viewAllBtn = await screen.findAllByText(t.viewAll);
+  expect(viewAllBtn[0]).toBeInTheDocument();
+
+  userEvent.click(viewAllBtn[0]);
+  await waitFor(() => {
+    expect(screen.getByTestId('orgevents')).toBeInTheDocument();
+  });
+});
+
+it('Click View All Posts', async () => {
+  renderOrganizationDashboard(link1);
+  const viewAllBtn = await screen.findAllByText(t.viewAll);
+  expect(viewAllBtn[1]).toBeInTheDocument();
+
+  userEvent.click(viewAllBtn[1]);
+  await waitFor(() => {
+    expect(screen.getByTestId('orgpost')).toBeInTheDocument();
+  });
+});
+
+it('Click View All Requests', async () => {
+  renderOrganizationDashboard(link1);
+  const viewAllBtn = await screen.findAllByText(t.viewAll);
+  expect(viewAllBtn[2]).toBeInTheDocument();
+
+  userEvent.click(viewAllBtn[2]);
+  await waitFor(() => {
+    expect(toast.success).toHaveBeenCalled();
+  });
+});
+
+it('Click View All Leaderboard', async () => {
+  renderOrganizationDashboard(link1);
+  const viewAllBtn = await screen.findAllByText(t.viewAll);
+  expect(viewAllBtn[3]).toBeInTheDocument();
+
+  userEvent.click(viewAllBtn[3]);
+  await waitFor(() => {
+    expect(screen.getByTestId('leaderboard')).toBeInTheDocument();
+  });
+});
+
+it('should render Organization Dashboard screen with empty data', async () => {
+  renderOrganizationDashboard(link3);
+
+  await waitFor(() => {
+    expect(screen.getByText(t.noUpcomingEvents)).toBeInTheDocument();
+    expect(screen.getByText(t.noPostsPresent)).toBeInTheDocument();
+    expect(screen.getByText(t.noMembershipRequests)).toBeInTheDocument();
+    expect(screen.getByText(t.noVolunteers)).toBeInTheDocument();
+  });
+});
+
+it('should redirectt to / if error occurs', async () => {
+  renderOrganizationDashboard(link2);
+
+  await waitFor(() => {
+    expect(toast.error).toHaveBeenCalled();
+    expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
new file mode 100644
index 0000000000..ebea874d2e
--- /dev/null
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -0,0 +1,486 @@
+import { useQuery } from '@apollo/client';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button, Card } from 'react-bootstrap';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+
+import type { ApolloError } from '@apollo/client';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATION_EVENT_CONNECTION_LIST,
+  ORGANIZATION_POST_LIST,
+} from 'GraphQl/Queries/Queries';
+import AdminsIcon from 'assets/svgs/admin.svg?react';
+import BlockedUsersIcon from 'assets/svgs/blockedUser.svg?react';
+import EventsIcon from 'assets/svgs/events.svg?react';
+import PostsIcon from 'assets/svgs/post.svg?react';
+import UsersIcon from 'assets/svgs/users.svg?react';
+import CardItem from 'components/OrganizationDashCards/CardItem';
+import CardItemLoading from 'components/OrganizationDashCards/CardItemLoading';
+import DashBoardCard from 'components/OrganizationDashCards/DashboardCard';
+import DashboardCardLoading from 'components/OrganizationDashCards/DashboardCardLoading';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import gold from 'assets/images/gold.png';
+import silver from 'assets/images/silver.png';
+import bronze from 'assets/images/bronze.png';
+import { toast } from 'react-toastify';
+import type {
+  InterfaceQueryOrganizationEventListItem,
+  InterfaceQueryOrganizationPostListItem,
+  InterfaceQueryOrganizationsListObject,
+  InterfaceVolunteerRank,
+} from 'utils/interfaces';
+import styles from './OrganizationDashboard.module.css';
+import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
+
+/**
+ * Component for displaying the organization dashboard.
+ *
+ * This component provides an overview of various statistics and information related to an organization, including members, admins, posts, events, blocked users, and membership requests. It also displays upcoming events and latest posts.
+ *
+ * @returns The rendered component.
+ */
+function organizationDashboard(): JSX.Element {
+  const { t } = useTranslation('translation', { keyPrefix: 'dashboard' });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+  document.title = t('title');
+  const { orgId } = useParams();
+
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const leaderboardLink = `/leaderboard/${orgId}`;
+  const peopleLink = `/orgpeople/${orgId}`;
+  const postsLink = `/orgpost/${orgId}`;
+  const eventsLink = `/orgevents/${orgId}`;
+  const blockUserLink = `/blockuser/${orgId}`;
+  const requestLink = '/requests';
+
+  const navigate = useNavigate();
+  const [upcomingEvents, setUpcomingEvents] = useState<
+    InterfaceQueryOrganizationEventListItem[]
+  >([]);
+
+  /**
+   * Query to fetch organization data.
+   */
+  const {
+    data,
+    loading: loadingOrgData,
+    error: errorOrg,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationsListObject[];
+    };
+    loading: boolean;
+    error?: ApolloError;
+  } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: orgId },
+  });
+
+  /**
+   * Query to fetch vvolunteer rankings.
+   */
+  const {
+    data: rankingsData,
+    loading: rankingsLoading,
+    error: errorRankings,
+  }: {
+    data?: {
+      getVolunteerRanks: InterfaceVolunteerRank[];
+    };
+    loading: boolean;
+    error?: ApolloError;
+  } = useQuery(VOLUNTEER_RANKING, {
+    variables: {
+      orgId,
+      where: {
+        orderBy: 'hours_DESC',
+        timeFrame: 'allTime',
+        limit: 3,
+      },
+    },
+  });
+
+  const rankings = useMemo(
+    () => rankingsData?.getVolunteerRanks || [],
+    [rankingsData],
+  );
+
+  /**
+   * Query to fetch posts for the organization.
+   */
+  const {
+    data: postData,
+    loading: loadingPost,
+    error: errorPost,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationPostListItem[];
+    };
+    loading: boolean;
+    error?: ApolloError;
+  } = useQuery(ORGANIZATION_POST_LIST, {
+    variables: { id: orgId, first: 10 },
+  });
+
+  /**
+   * Query to fetch events for the organization.
+   */
+  const {
+    data: eventData,
+    loading: loadingEvent,
+    error: errorEvent,
+  } = useQuery(ORGANIZATION_EVENT_CONNECTION_LIST, {
+    variables: {
+      organization_id: orgId,
+    },
+  });
+
+  /**
+   * UseEffect to update the list of upcoming events.
+   */
+  useEffect(() => {
+    if (eventData && eventData?.eventsByOrganizationConnection.length > 0) {
+      const tempUpcomingEvents: InterfaceQueryOrganizationEventListItem[] = [];
+      eventData?.eventsByOrganizationConnection.map(
+        (event: InterfaceQueryOrganizationEventListItem) => {
+          const startDate = new Date(event.startDate);
+          const now = new Date();
+          if (startDate > now) {
+            tempUpcomingEvents.push(event);
+          }
+        },
+      );
+      setUpcomingEvents(tempUpcomingEvents);
+    }
+  }, [eventData?.eventsByOrganizationConnection]);
+
+  /**
+   * UseEffect to handle errors and navigate if necessary.
+   */
+  useEffect(() => {
+    if (errorOrg || errorPost || errorEvent || errorRankings) {
+      toast.error(tErrors('errorLoading', { entity: '' }));
+      navigate('/');
+    }
+  }, [errorOrg, errorPost, errorEvent, errorRankings]);
+
+  return (
+    <>
+      <Row className="mt-4">
+        <Col xl={8}>
+          {loadingOrgData ? (
+            <Row style={{ display: 'flex' }}>
+              {[...Array(6)].map((_, index) => {
+                return (
+                  <Col
+                    xs={6}
+                    sm={4}
+                    className="mb-4"
+                    key={`orgLoading_${index}`}
+                  >
+                    <DashboardCardLoading />
+                  </Col>
+                );
+              })}
+            </Row>
+          ) : (
+            <Row style={{ display: 'flex' }}>
+              <Col
+                xs={6}
+                sm={4}
+                role="button"
+                className="mb-4"
+                onClick={(): void => {
+                  navigate(peopleLink);
+                }}
+              >
+                <DashBoardCard
+                  count={data?.organizations[0].members?.length}
+                  title={tCommon('members')}
+                  icon={<UsersIcon fill="var(--bs-primary)" />}
+                />
+              </Col>
+              <Col
+                xs={6}
+                sm={4}
+                role="button"
+                className="mb-4"
+                onClick={
+                  /*istanbul ignore next*/
+                  (): void => {
+                    navigate(peopleLink);
+                  }
+                }
+              >
+                <DashBoardCard
+                  count={data?.organizations[0].admins?.length}
+                  title={tCommon('admins')}
+                  icon={<AdminsIcon fill="var(--bs-primary)" />}
+                />
+              </Col>
+              <Col
+                xs={6}
+                sm={4}
+                role="button"
+                className="mb-4"
+                onClick={(): void => {
+                  navigate(postsLink);
+                }}
+              >
+                <DashBoardCard
+                  count={postData?.organizations[0].posts.totalCount}
+                  title={t('posts')}
+                  icon={<PostsIcon fill="var(--bs-primary)" />}
+                />
+              </Col>
+              <Col
+                xs={6}
+                sm={4}
+                role="button"
+                className="mb-4"
+                onClick={(): void => {
+                  navigate(eventsLink);
+                }}
+              >
+                <DashBoardCard
+                  count={eventData?.eventsByOrganizationConnection.length}
+                  title={t('events')}
+                  icon={<EventsIcon fill="var(--bs-primary)" />}
+                />
+              </Col>
+              <Col
+                xs={6}
+                sm={4}
+                role="button"
+                className="mb-4"
+                onClick={(): void => {
+                  navigate(blockUserLink);
+                }}
+              >
+                <DashBoardCard
+                  count={data?.organizations[0].blockedUsers?.length}
+                  title={t('blockedUsers')}
+                  icon={<BlockedUsersIcon fill="var(--bs-primary)" />}
+                />
+              </Col>
+              <Col
+                xs={6}
+                sm={4}
+                role="button"
+                className="mb-4"
+                onClick={(): void => {
+                  navigate(requestLink);
+                }}
+              >
+                <DashBoardCard
+                  count={data?.organizations[0].membershipRequests?.length}
+                  title={tCommon('requests')}
+                  icon={<UsersIcon fill="var(--bs-primary)" />}
+                />
+              </Col>
+            </Row>
+          )}
+          <Row>
+            <Col lg={6} className="mb-4">
+              <Card border="0" className="rounded-4">
+                <div className={styles.cardHeader}>
+                  <div className={styles.cardTitle}>{t('upcomingEvents')}</div>
+                  <Button
+                    size="sm"
+                    variant="light"
+                    data-testid="viewAllEvents"
+                    onClick={(): void => navigate(eventsLink)}
+                  >
+                    {t('viewAll')}
+                  </Button>
+                </div>
+                <Card.Body className={styles.cardBody}>
+                  {loadingEvent ? (
+                    [...Array(4)].map((_, index) => {
+                      return <CardItemLoading key={`eventLoading_${index}`} />;
+                    })
+                  ) : upcomingEvents.length == 0 ? (
+                    <div className={styles.emptyContainer}>
+                      <h6>{t('noUpcomingEvents')}</h6>
+                    </div>
+                  ) : (
+                    upcomingEvents.map(
+                      (event: InterfaceQueryOrganizationEventListItem) => {
+                        return (
+                          <CardItem
+                            data-testid="cardItem"
+                            type="Event"
+                            key={event._id}
+                            startdate={event.startDate}
+                            enddate={event.endDate}
+                            title={event.title}
+                            location={event.location}
+                          />
+                        );
+                      },
+                    )
+                  )}
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col lg={6} className="mb-4">
+              <Card border="0" className="rounded-4">
+                <div className={styles.cardHeader}>
+                  <div className={styles.cardTitle}>{t('latestPosts')}</div>
+                  <Button
+                    size="sm"
+                    variant="light"
+                    data-testid="viewAllPosts"
+                    onClick={(): void => navigate(postsLink)}
+                  >
+                    {t('viewAll')}
+                  </Button>
+                </div>
+                <Card.Body className={styles.cardBody}>
+                  {loadingPost ? (
+                    [...Array(4)].map((_, index) => {
+                      return <CardItemLoading key={`postLoading_${index}`} />;
+                    })
+                  ) : postData?.organizations[0].posts.totalCount == 0 ? (
+                    /* eslint-disable */
+                    <div className={styles.emptyContainer}>
+                      <h6>{t('noPostsPresent')}</h6>
+                    </div>
+                  ) : (
+                    /* eslint-enable */
+                    postData?.organizations[0].posts.edges
+                      .slice(0, 5)
+                      .map((edge) => {
+                        const post = edge.node;
+                        return (
+                          <CardItem
+                            type="Post"
+                            key={post._id}
+                            title={post.title}
+                            time={post.createdAt}
+                            creator={post.creator}
+                          />
+                        );
+                      })
+                  )}
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Col>
+        <Col xl={4}>
+          <Row className="mb-4">
+            <Card border="0" className="rounded-4" style={{ height: '220px' }}>
+              <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>
+                  {t('membershipRequests')}
+                </div>
+                <Button
+                  size="sm"
+                  variant="light"
+                  data-testid="viewAllMembershipRequests"
+                  onClick={(): void => {
+                    toast.success('Coming soon!');
+                  }}
+                >
+                  {t('viewAll')}
+                </Button>
+              </div>
+              <Card.Body
+                className={styles.cardBody}
+                style={{ height: '150px' }}
+              >
+                {loadingOrgData ? (
+                  [...Array(4)].map((_, index) => {
+                    return <CardItemLoading key={`requestsLoading_${index}`} />;
+                  })
+                ) : data?.organizations[0].membershipRequests.length == 0 ? (
+                  <div
+                    className={styles.emptyContainer}
+                    style={{ height: '150px' }}
+                  >
+                    <h6>{t('noMembershipRequests')}</h6>
+                  </div>
+                ) : (
+                  data?.organizations[0]?.membershipRequests
+                    .slice(0, 8)
+                    .map((request) => {
+                      return (
+                        <CardItem
+                          type="MembershipRequest"
+                          key={request._id}
+                          title={`${request.user.firstName} ${request.user.lastName}`}
+                        />
+                      );
+                    })
+                )}
+              </Card.Body>
+            </Card>
+          </Row>
+          <Row>
+            <Card border="0" className="rounded-4">
+              <div className={styles.cardHeader}>
+                <div className={styles.cardTitle}>{t('volunteerRankings')}</div>
+                <Button
+                  size="sm"
+                  variant="light"
+                  data-testid="viewAllLeadeboard"
+                  onClick={(): void => navigate(leaderboardLink)}
+                >
+                  {t('viewAll')}
+                </Button>
+              </div>
+              <Card.Body className={styles.cardBody} style={{ padding: '0px' }}>
+                {rankingsLoading ? (
+                  [...Array(3)].map((_, index) => {
+                    return <CardItemLoading key={`rankingLoading_${index}`} />;
+                  })
+                ) : rankings.length == 0 ? (
+                  <div className={styles.emptyContainer}>
+                    <h6>{t('noVolunteers')}</h6>
+                  </div>
+                ) : (
+                  rankings.map(({ rank, user, hoursVolunteered }, index) => {
+                    return (
+                      <div key={`ranking_${index}`}>
+                        <div className="d-flex ms-4 mt-1 mb-3">
+                          <div className="fw-bold me-2">
+                            {rank <= 3 ? (
+                              <img
+                                src={
+                                  rank === 1
+                                    ? gold
+                                    : rank === 2
+                                      ? silver
+                                      : bronze
+                                }
+                                alt="gold"
+                                className={styles.rankings}
+                              />
+                            ) : (
+                              rank
+                            )}
+                          </div>
+                          <div className="me-2 mt-2">{`${user.firstName} ${user.lastName}`}</div>
+                          <div className="mt-2">- {hoursVolunteered} hours</div>
+                        </div>
+                        {index < 2 && <hr />}
+                      </div>
+                    );
+                  })
+                )}
+              </Card.Body>
+            </Card>
+          </Row>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default organizationDashboard;
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts b/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts
new file mode 100644
index 0000000000..af1e9a799b
--- /dev/null
+++ b/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts
@@ -0,0 +1,486 @@
+import { VOLUNTEER_RANKING } from 'GraphQl/Queries/EventVolunteerQueries';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATION_EVENT_CONNECTION_LIST,
+  ORGANIZATION_POST_LIST,
+} from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: 'orgId' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            image: '',
+            name: 'Dummy Organization',
+            description: 'This is a Dummy Organization',
+            address: {
+              city: 'Delhi',
+              countryCode: 'IN',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '110001',
+              sortingCode: 'ABC-123',
+              state: 'Delhi',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: false,
+            creator: {
+              firstName: '',
+              lastName: '',
+              email: '',
+            },
+            members: [
+              {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@gmail.com',
+              },
+            ],
+            admins: [
+              {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@gmail.com',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: 'requestId1',
+                user: {
+                  firstName: 'Jane',
+                  lastName: 'Doe',
+                  email: 'janedoe@gmail.com',
+                },
+              },
+            ],
+            blockedUsers: [
+              {
+                _id: '789',
+                firstName: 'Steve',
+                lastName: 'Smith',
+                email: 'stevesmith@gmail.com',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_POST_LIST,
+      variables: { id: 'orgId', first: 10 },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            posts: {
+              edges: [
+                {
+                  node: {
+                    _id: 'postId1',
+                    title: 'postone',
+                    text: 'This is the first post',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    comments: [],
+                    pinned: true,
+                    likedBy: [],
+                  },
+                  cursor: 'postId1',
+                },
+                {
+                  node: {
+                    _id: 'postId2',
+                    title: 'posttwo',
+                    text: 'Tis is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    pinned: false,
+                    likedBy: [],
+                    comments: [],
+                  },
+                  cursor: 'postId2',
+                },
+                {
+                  node: {
+                    _id: 'postId3',
+                    title: 'posttwo',
+                    text: 'Tis is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    pinned: true,
+                    likedBy: [],
+                    comments: [],
+                  },
+                  cursor: 'postId3',
+                },
+                {
+                  node: {
+                    _id: 'postId4',
+                    title: 'posttwo',
+                    text: 'Tis is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2023-08-24T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Aditya',
+                      lastName: 'Shelke',
+                      email: 'adidacreator1@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    pinned: false,
+                    likedBy: [],
+                    comments: [],
+                  },
+                  cursor: 'postId4',
+                },
+              ],
+              pageInfo: {
+                startCursor: 'postId1',
+                endCursor: 'postId4',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 4,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_EVENT_CONNECTION_LIST,
+      variables: {
+        organization_id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [
+          {
+            _id: 'eventId1',
+            title: 'Event 1',
+            description: 'Sample Description',
+            startDate: '2025-10-29T00:00:00.000Z',
+            endDate: '2023-10-29T23:59:59.000Z',
+            location: 'Sample Location',
+            startTime: '08:00:00',
+            endTime: '17:00:00',
+            allDay: false,
+            recurring: false,
+            attendees: [
+              {
+                _id: 'userId1',
+                createdAt: '2023-01-01T00:00:00.000Z',
+                firstName: 'John',
+                lastName: 'Doe',
+                gender: 'Male',
+                eventsAttended: {
+                  _id: 'eventId1',
+                  endDate: '2023-10-29T23:59:59.000Z',
+                },
+              },
+            ],
+            recurrenceRule: null,
+            isRecurringEventException: false,
+            isPublic: true,
+            isRegisterable: true,
+          },
+          {
+            _id: 'eventId2',
+            title: 'Event 2',
+            description: 'Sample Description',
+            startDate: '2022-10-29T00:00:00.000Z',
+            endDate: '2023-10-29T23:59:59.000Z',
+            location: 'Sample Location',
+            startTime: '08:00:00',
+            endTime: '17:00:00',
+            allDay: false,
+            attendees: [
+              {
+                _id: 'userId1',
+                createdAt: '2023-01-01T00:00:00.000Z',
+                firstName: 'John',
+                lastName: 'Doe',
+                gender: 'Male',
+                eventsAttended: {
+                  _id: 'eventId1',
+                  endDate: '2023-10-29T23:59:59.000Z',
+                },
+              },
+            ],
+            recurring: false,
+            recurrenceRule: null,
+            isRecurringEventException: false,
+            isPublic: true,
+            isRegisterable: true,
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: 'orgId',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          limit: 3,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [
+          {
+            rank: 1,
+            hoursVolunteered: 5,
+            user: {
+              _id: 'userId1',
+              lastName: 'Bradley',
+              firstName: 'Teresa',
+              image: null,
+              email: 'testuser4@example.com',
+            },
+          },
+          {
+            rank: 2,
+            hoursVolunteered: 4,
+            user: {
+              _id: 'userId2',
+              lastName: 'Garza',
+              firstName: 'Bruce',
+              image: null,
+              email: 'testuser5@example.com',
+            },
+          },
+          {
+            rank: 3,
+            hoursVolunteered: 3,
+            user: {
+              _id: 'userId3',
+              lastName: 'John',
+              firstName: 'Doe',
+              image: null,
+              email: 'testuser6@example.com',
+            },
+          },
+          {
+            rank: 4,
+            hoursVolunteered: 2,
+            user: {
+              _id: 'userId4',
+              lastName: 'Jane',
+              firstName: 'Doe',
+              image: null,
+              email: 'testuser7@example.com',
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: 'orgId' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 123,
+            image: '',
+            name: 'Dummy Organization',
+            description: 'This is a Dummy Organization',
+            address: {
+              city: 'Delhi',
+              countryCode: 'IN',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Random Street',
+              line2: 'Apartment 456',
+              postalCode: '110001',
+              sortingCode: 'ABC-123',
+              state: 'Delhi',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: false,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'johndoe@gmail.com',
+            },
+            members: [
+              {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@gmail.com',
+              },
+            ],
+            admins: [
+              {
+                _id: '123',
+                firstName: 'John',
+                lastName: 'Doe',
+                email: 'johndoe@gmail.com',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: [],
+            blockedUsers: [
+              {
+                _id: '789',
+                firstName: 'Steve',
+                lastName: 'Smith',
+                email: 'stevesmith@gmail.com',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_POST_LIST,
+      variables: { id: 'orgId', first: 10 },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            posts: {
+              edges: [],
+              pageInfo: {
+                startCursor: '',
+                endCursor: '',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 0,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_EVENT_CONNECTION_LIST,
+      variables: {
+        organization_id: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [],
+      },
+    },
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: '123',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          limit: 3,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerRanks: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: 'orgId' },
+    },
+    error: new Error('Mock Graphql ORGANIZATIONS_LIST Error'),
+  },
+  {
+    request: {
+      query: ORGANIZATION_POST_LIST,
+      variables: { id: 'orgId', first: 10 },
+    },
+    error: new Error('Mock Graphql ORGANIZATION_POST_LIST Error'),
+  },
+  {
+    request: {
+      query: ORGANIZATION_EVENT_CONNECTION_LIST,
+      variables: {
+        organization_id: 'orgId',
+      },
+    },
+    error: new Error('Mock Graphql ORGANIZATION_EVENT_LIST Error'),
+  },
+  {
+    request: {
+      query: VOLUNTEER_RANKING,
+      variables: {
+        orgId: '123',
+        where: {
+          orderBy: 'hours_DESC',
+          timeFrame: 'allTime',
+          limit: 3,
+        },
+      },
+    },
+    error: new Error('Mock Graphql VOLUNTEER_RANKING Error'),
+  },
+];
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.module.css b/src/screens/OrganizationEvents/OrganizationEvents.module.css
new file mode 100644
index 0000000000..55e86fcaba
--- /dev/null
+++ b/src/screens/OrganizationEvents/OrganizationEvents.module.css
@@ -0,0 +1,330 @@
+.navbarbg {
+  height: 60px;
+  background-color: white;
+  display: flex;
+  margin-bottom: 30px;
+  z-index: 1;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  box-shadow: 0px 0px 8px 2px #c8c8c8;
+}
+
+.logo {
+  color: #707070;
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.logo img {
+  margin-top: 0px;
+  margin-left: 10px;
+  height: 64px;
+  width: 70px;
+}
+
+.logo > strong {
+  line-height: 1.5rem;
+  margin-left: -5px;
+  font-family: sans-serif;
+  font-size: 19px;
+  color: #707070;
+}
+.mainpage {
+  display: flex;
+  flex-direction: row;
+}
+
+.sidebar:after {
+  background-color: #f7f7f7;
+  position: absolute;
+  width: 2px;
+  height: 600px;
+  top: 10px;
+  left: 94%;
+  display: block;
+}
+
+.navitem {
+  padding-left: 27%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+
+.logintitleadmin {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 30%;
+}
+.admindetails {
+  display: flex;
+  justify-content: space-between;
+}
+.admindetails > p {
+  margin-top: -12px;
+  margin-right: 30px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+.justifysp {
+  display: block;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.addbtn {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60%;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+  max-height: 86vh;
+  overflow: auto;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+.logintitleinvite {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 40%;
+}
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 65%;
+}
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+.modalbody {
+  width: 50px;
+}
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
+}
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  border-color: #e8e5e5;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+.checkboxdiv > label {
+  margin-right: 50px;
+}
+.checkboxdiv > label > input {
+  margin-left: 10px;
+}
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.dispflex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.dispflex > input {
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+.checkboxdiv {
+  display: flex;
+  margin-bottom: 5px;
+}
+.checkboxdiv > div {
+  width: 50%;
+}
+
+.recurrenceRuleNumberInput {
+  width: 70px;
+}
+
+.recurrenceRuleDateBox {
+  width: 70%;
+}
+
+.recurrenceDayButton {
+  width: 33px;
+  height: 33px;
+  border: 1px solid var(--bs-gray);
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+}
+
+.recurrenceDayButton:hover {
+  background-color: var(--bs-gray);
+}
+
+.recurrenceDayButton.selected {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+  color: var(--bs-white);
+}
+
+.recurrenceDayButton span {
+  color: var(--bs-gray);
+  padding: 0.25rem;
+  text-align: center;
+}
+
+.recurrenceDayButton:hover span {
+  color: var(--bs-white);
+}
+
+.recurrenceDayButton.selected span {
+  color: var(--bs-white);
+}
+
+.recurrenceRuleSubmitBtn {
+  margin-left: 82%;
+  padding: 7px 15px;
+}
+
+@media only screen and (max-width: 600px) {
+  .form_wrapper {
+    width: 90%;
+    top: 45%;
+  }
+}
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.test.tsx b/src/screens/OrganizationEvents/OrganizationEvents.test.tsx
new file mode 100644
index 0000000000..09e896e031
--- /dev/null
+++ b/src/screens/OrganizationEvents/OrganizationEvents.test.tsx
@@ -0,0 +1,464 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+
+import OrganizationEvents from './OrganizationEvents';
+import { store } from 'state/store';
+import i18n from 'utils/i18nForTest';
+import userEvent from '@testing-library/user-event';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import { createTheme } from '@mui/material';
+import { ThemeProvider } from 'react-bootstrap';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { MOCKS } from './OrganizationEventsMocks';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#31bb6b',
+    },
+  },
+});
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink([], true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationEvents ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+describe('Organisation Events Page', () => {
+  const formData = {
+    title: 'Dummy Org',
+    description: 'This is a dummy organization',
+    startDate: '03/28/2022',
+    endDate: '03/30/2022',
+    location: 'New Delhi',
+    startTime: '09:00 AM',
+    endTime: '05:00 PM',
+  };
+
+  global.alert = jest.fn();
+
+  test('It is necessary to query the correct mock data.', async () => {
+    const dataQuery1 = MOCKS[0]?.result?.data?.eventsByOrganizationConnection;
+
+    expect(dataQuery1).toEqual([
+      {
+        _id: 1,
+        title: 'Event',
+        description: 'Event Test',
+        startDate: '',
+        endDate: '',
+        location: 'New Delhi',
+        startTime: '02:00',
+        endTime: '06:00',
+        allDay: false,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+    ]);
+  });
+  test('It is necessary to query the correct mock data for organization.', async () => {
+    const dataQuery1 = MOCKS[1]?.result?.data?.eventsByOrganizationConnection;
+
+    expect(dataQuery1).toEqual([
+      {
+        _id: '1',
+        title: 'Dummy Org',
+        description: 'This is a dummy organization',
+        location: 'string',
+        startDate: '',
+        endDate: '',
+        startTime: '02:00',
+        endTime: '06:00',
+        allDay: false,
+        recurring: false,
+        recurrenceRule: null,
+        isRecurringEventException: false,
+        isPublic: true,
+        isRegisterable: true,
+      },
+    ]);
+  });
+  test('It is necessary to check correct render', async () => {
+    window.location.assign('/orglist');
+
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(container.textContent).not.toBe('Loading data...');
+    await wait();
+    expect(container.textContent).toMatch('Month');
+    expect(window.location).toBeAt('/orglist');
+  });
+
+  test('No mock data', async () => {
+    render(
+      <MockedProvider link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+  });
+
+  test('Testing toggling of Create event modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('createEventModalCloseBtn'),
+      ).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Testing Create event modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+    userEvent.type(screen.getByPlaceholderText(/Location/i), formData.location);
+
+    const endDatePicker = screen.getByLabelText('End Date');
+    const startDatePicker = screen.getByLabelText('Start Date');
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    userEvent.click(screen.getByTestId('ispublicCheck'));
+    userEvent.click(screen.getByTestId('registrableCheck'));
+
+    await wait();
+
+    expect(screen.getByPlaceholderText(/Enter Title/i)).toHaveValue(
+      formData.title,
+    );
+    expect(screen.getByPlaceholderText(/Enter Description/i)).toHaveValue(
+      formData.description,
+    );
+
+    expect(endDatePicker).toHaveValue(formData.endDate);
+    expect(startDatePicker).toHaveValue(formData.startDate);
+    expect(screen.getByTestId('ispublicCheck')).not.toBeChecked();
+    expect(screen.getByTestId('registrableCheck')).toBeChecked();
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventCreated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Testing Create event with invalid inputs', async () => {
+    const formData = {
+      title: ' ',
+      description: ' ',
+      location: ' ',
+      startDate: '03/28/2022',
+      endDate: '03/30/2022',
+      startTime: '02:00',
+      endTime: '06:00',
+      allDay: false,
+      recurring: false,
+      isPublic: true,
+      isRegisterable: true,
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+    userEvent.type(screen.getByPlaceholderText(/Location/i), formData.location);
+    userEvent.type(screen.getByPlaceholderText(/Location/i), formData.location);
+
+    const endDatePicker = screen.getByLabelText('End Date');
+    const startDatePicker = screen.getByLabelText('Start Date');
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    userEvent.click(screen.getByTestId('alldayCheck'));
+    userEvent.click(screen.getByTestId('recurringCheck'));
+    userEvent.click(screen.getByTestId('ispublicCheck'));
+    userEvent.click(screen.getByTestId('registrableCheck'));
+
+    await wait();
+
+    expect(screen.getByPlaceholderText(/Enter Title/i)).toHaveValue(' ');
+    expect(screen.getByPlaceholderText(/Enter Description/i)).toHaveValue(' ');
+
+    expect(endDatePicker).toHaveValue(formData.endDate);
+    expect(startDatePicker).toHaveValue(formData.startDate);
+    expect(screen.getByTestId('alldayCheck')).not.toBeChecked();
+    expect(screen.getByTestId('recurringCheck')).toBeChecked();
+    expect(screen.getByTestId('ispublicCheck')).not.toBeChecked();
+    expect(screen.getByTestId('registrableCheck')).toBeChecked();
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+    expect(toast.warning).toHaveBeenCalledWith('Title can not be blank!');
+    expect(toast.warning).toHaveBeenCalledWith('Description can not be blank!');
+    expect(toast.warning).toHaveBeenCalledWith('Location can not be blank!');
+
+    userEvent.click(screen.getByTestId('createEventModalCloseBtn'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  test('Testing create event if the event is not for all day', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18n}>
+                  <OrganizationEvents />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createEventModalBtn')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Enter Title/i)).toBeInTheDocument();
+    });
+
+    userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title);
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Description/i),
+      formData.description,
+    );
+
+    userEvent.type(screen.getByPlaceholderText(/Location/i), formData.location);
+
+    const endDatePicker = screen.getByLabelText('End Date');
+    const startDatePicker = screen.getByLabelText('Start Date');
+
+    fireEvent.change(endDatePicker, {
+      target: { value: formData.endDate },
+    });
+    fireEvent.change(startDatePicker, {
+      target: { value: formData.startDate },
+    });
+
+    userEvent.click(screen.getByTestId('alldayCheck'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(translations.startTime)).toBeInTheDocument();
+    });
+
+    const startTimePicker = screen.getByLabelText(translations.startTime);
+    const endTimePicker = screen.getByLabelText(translations.endTime);
+
+    fireEvent.change(startTimePicker, {
+      target: { value: formData.startTime },
+    });
+
+    fireEvent.change(endTimePicker, {
+      target: { value: formData.endTime },
+    });
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.eventCreated);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('createEventModalCloseBtn'),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx
new file mode 100644
index 0000000000..4c90777c6e
--- /dev/null
+++ b/src/screens/OrganizationEvents/OrganizationEvents.tsx
@@ -0,0 +1,506 @@
+import React, { useState, useEffect } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { Form, Popover } from 'react-bootstrap';
+import { useMutation, useQuery } from '@apollo/client';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import EventCalendar from 'components/EventCalendar/EventCalendar';
+import { TimePicker, DatePicker } from '@mui/x-date-pickers';
+import styles from './OrganizationEvents.module.css';
+import {
+  ORGANIZATION_EVENT_CONNECTION_LIST,
+  ORGANIZATIONS_LIST,
+} from 'GraphQl/Queries/Queries';
+import { CREATE_EVENT_MUTATION } from 'GraphQl/Mutations/mutations';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { errorHandler } from 'utils/errorHandler';
+import Loader from 'components/Loader/Loader';
+import useLocalStorage from 'utils/useLocalstorage';
+import { useParams, useNavigate } from 'react-router-dom';
+import EventHeader from 'components/EventCalendar/EventHeader';
+import {
+  Frequency,
+  Days,
+  getRecurrenceRuleText,
+  getWeekDayOccurenceInMonth,
+} from 'utils/recurrenceUtils';
+import type { InterfaceRecurrenceRuleState } from 'utils/recurrenceUtils';
+import RecurrenceOptions from 'components/RecurrenceOptions/RecurrenceOptions';
+
+const timeToDayJs = (time: string): Dayjs => {
+  const dateTimeString = dayjs().format('YYYY-MM-DD') + ' ' + time;
+  return dayjs(dateTimeString, { format: 'YYYY-MM-DD HH:mm:ss' });
+};
+
+export enum ViewType {
+  DAY = 'Day',
+  MONTH = 'Month View',
+  YEAR = 'Year View',
+}
+
+/**
+ * Organization Events Page Component to display the events of an organization
+ * and create new events for the organization by the admin or superadmin user.
+ * The component uses the EventCalendar component to display the events and EventHeader component
+ *  to display the view type and create event button.
+ *  The component uses the RecurrenceOptions component to display the recurrence options for the event.
+ *  The component uses the CREATE_EVENT_MUTATION mutation to create a new event for the organization.
+ *  The component uses the ORGANIZATION_EVENT_CONNECTION_LIST and ORGANIZATIONS_LIST queries to fetch the events
+ *  and organization details.
+ *  The component uses the useLocalStorage hook to get the user details from the local storage.
+ *
+ * @returns  JSX.Element to display the Organization Events Page
+ */
+function organizationEvents(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationEvents',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const { getItem } = useLocalStorage();
+
+  document.title = t('title');
+  const [createEventmodalisOpen, setCreateEventmodalisOpen] = useState(false);
+  const [startDate, setStartDate] = React.useState<Date>(new Date());
+  const [endDate, setEndDate] = React.useState<Date>(new Date());
+  const [viewType, setViewType] = useState<ViewType>(ViewType.MONTH);
+  const [alldaychecked, setAllDayChecked] = React.useState(true);
+  const [recurringchecked, setRecurringChecked] = React.useState(false);
+
+  const [publicchecked, setPublicChecked] = React.useState(true);
+  const [registrablechecked, setRegistrableChecked] = React.useState(false);
+
+  const [recurrenceRuleState, setRecurrenceRuleState] =
+    useState<InterfaceRecurrenceRuleState>({
+      recurrenceStartDate: startDate,
+      recurrenceEndDate: null,
+      frequency: Frequency.WEEKLY,
+      weekDays: [Days[startDate.getDay()]],
+      interval: 1,
+      count: undefined,
+      weekDayOccurenceInMonth: undefined,
+    });
+
+  const [formState, setFormState] = useState({
+    title: '',
+    eventdescrip: '',
+    date: '',
+    location: '',
+    startTime: '08:00:00',
+    endTime: '18:00:00',
+  });
+  const { orgId: currentUrl } = useParams();
+  const navigate = useNavigate();
+
+  const showInviteModal = (): void => {
+    setCreateEventmodalisOpen(true);
+  };
+  const hideCreateEventModal = (): void => {
+    setCreateEventmodalisOpen(false);
+  };
+  const handleChangeView = (item: string | null): void => {
+    /*istanbul ignore next*/
+    if (item) {
+      setViewType(item as ViewType);
+    }
+  };
+
+  const {
+    data,
+    loading,
+    error: eventDataError,
+    refetch: refetchEvents,
+  } = useQuery(ORGANIZATION_EVENT_CONNECTION_LIST, {
+    variables: {
+      organization_id: currentUrl,
+      title_contains: '',
+      description_contains: '',
+      location_contains: '',
+    },
+  });
+
+  const { data: orgData } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: currentUrl },
+  });
+
+  const userId = getItem('id') as string;
+  const superAdmin = getItem('SuperAdmin');
+  const adminFor = getItem('AdminFor');
+  const userRole = superAdmin
+    ? 'SUPERADMIN'
+    : adminFor?.length > 0
+      ? 'ADMIN'
+      : 'USER';
+
+  const [create, { loading: loading2 }] = useMutation(CREATE_EVENT_MUTATION);
+
+  const {
+    recurrenceStartDate,
+    recurrenceEndDate,
+    frequency,
+    weekDays,
+    interval,
+    count,
+    weekDayOccurenceInMonth,
+  } = recurrenceRuleState;
+
+  const recurrenceRuleText = getRecurrenceRuleText(recurrenceRuleState);
+
+  const createEvent = async (
+    e: React.ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    if (
+      formState.title.trim().length > 0 &&
+      formState.eventdescrip.trim().length > 0 &&
+      formState.location.trim().length > 0
+    ) {
+      try {
+        const { data: createEventData } = await create({
+          variables: {
+            title: formState.title,
+            description: formState.eventdescrip,
+            isPublic: publicchecked,
+            recurring: recurringchecked,
+            isRegisterable: registrablechecked,
+            organizationId: currentUrl,
+            startDate: dayjs(startDate).format('YYYY-MM-DD'),
+            endDate: dayjs(endDate).format('YYYY-MM-DD'),
+            allDay: alldaychecked,
+            location: formState.location,
+            startTime: !alldaychecked ? formState.startTime : undefined,
+            endTime: !alldaychecked ? formState.endTime : undefined,
+            recurrenceStartDate: recurringchecked
+              ? dayjs(recurrenceStartDate).format('YYYY-MM-DD')
+              : undefined,
+            recurrenceEndDate: recurringchecked
+              ? recurrenceEndDate
+                ? dayjs(recurrenceEndDate).format('YYYY-MM-DD')
+                : null
+              : undefined,
+            frequency: recurringchecked ? frequency : undefined,
+            weekDays:
+              recurringchecked &&
+              (frequency === Frequency.WEEKLY ||
+                (frequency === Frequency.MONTHLY && weekDayOccurenceInMonth))
+                ? weekDays
+                : undefined,
+            interval: recurringchecked ? interval : undefined,
+            count: recurringchecked ? count : undefined,
+            weekDayOccurenceInMonth: recurringchecked
+              ? weekDayOccurenceInMonth
+              : undefined,
+          },
+        });
+
+        if (createEventData) {
+          toast.success(t('eventCreated') as string);
+          refetchEvents();
+          hideCreateEventModal();
+          setFormState({
+            title: '',
+            eventdescrip: '',
+            date: '',
+            location: '',
+            startTime: '08:00:00',
+            endTime: '18:00:00',
+          });
+          setRecurringChecked(false);
+          setRecurrenceRuleState({
+            recurrenceStartDate: new Date(),
+            recurrenceEndDate: null,
+            frequency: Frequency.WEEKLY,
+            weekDays: [Days[new Date().getDay()]],
+            interval: 1,
+            count: undefined,
+            weekDayOccurenceInMonth: undefined,
+          });
+          setStartDate(new Date());
+          setEndDate(new Date());
+        }
+      } catch (error: unknown) {
+        /* istanbul ignore next */
+        if (error instanceof Error) {
+          console.log(error.message);
+          errorHandler(t, error);
+        }
+      }
+    }
+    if (formState.title.trim().length === 0) {
+      toast.warning('Title can not be blank!');
+    }
+    if (formState.eventdescrip.trim().length === 0) {
+      toast.warning('Description can not be blank!');
+    }
+    if (formState.location.trim().length === 0) {
+      toast.warning('Location can not be blank!');
+    }
+  };
+
+  useEffect(() => {
+    if (eventDataError) {
+      navigate('/orglist');
+    }
+  }, [eventDataError]);
+
+  if (loading || loading2) {
+    return <Loader />;
+  }
+
+  const popover = (
+    <Popover
+      id={`popover-recurrenceRuleText`}
+      data-testid={`popover-recurrenceRuleText`}
+    >
+      <Popover.Body>{recurrenceRuleText}</Popover.Body>
+    </Popover>
+  );
+
+  return (
+    <>
+      <div className={styles.mainpageright}>
+        <div className={styles.justifysp}>
+          <EventHeader
+            viewType={viewType}
+            handleChangeView={handleChangeView}
+            showInviteModal={showInviteModal}
+          />
+        </div>
+      </div>
+      <EventCalendar
+        eventData={data?.eventsByOrganizationConnection}
+        refetchEvents={refetchEvents}
+        orgData={orgData}
+        userRole={userRole}
+        userId={userId}
+        viewType={viewType}
+      />
+
+      {/* Create Event Modal */}
+      <Modal show={createEventmodalisOpen} onHide={hideCreateEventModal}>
+        <Modal.Header>
+          <p className={styles.titlemodal}>{t('eventDetails')}</p>
+          <Button
+            variant="danger"
+            onClick={hideCreateEventModal}
+            data-testid="createEventModalCloseBtn"
+          >
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <Form onSubmitCapture={createEvent}>
+            <label htmlFor="eventtitle">{t('eventTitle')}</label>
+            <Form.Control
+              type="title"
+              id="eventitle"
+              placeholder={t('enterTitle')}
+              autoComplete="off"
+              required
+              value={formState.title}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  title: e.target.value,
+                });
+              }}
+            />
+            <label htmlFor="eventdescrip">{tCommon('description')}</label>
+            <Form.Control
+              type="eventdescrip"
+              id="eventdescrip"
+              placeholder={t('enterDescrip')}
+              autoComplete="off"
+              required
+              value={formState.eventdescrip}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  eventdescrip: e.target.value,
+                });
+              }}
+            />
+            <label htmlFor="eventLocation">{tCommon('enterLocation')}</label>
+            <Form.Control
+              type="text"
+              id="eventLocation"
+              placeholder={tCommon('enterLocation')}
+              autoComplete="off"
+              required
+              value={formState.location}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  location: e.target.value,
+                });
+              }}
+            />
+            <div className={styles.datediv}>
+              <div>
+                <DatePicker
+                  label={tCommon('startDate')}
+                  className={styles.datebox}
+                  value={dayjs(startDate)}
+                  onChange={(date: Dayjs | null): void => {
+                    if (date) {
+                      setStartDate(date?.toDate());
+                      setEndDate(
+                        endDate < date?.toDate() ? date?.toDate() : endDate,
+                      );
+                      setRecurrenceRuleState({
+                        ...recurrenceRuleState,
+                        recurrenceStartDate: date?.toDate(),
+                        weekDays: [Days[date?.toDate().getDay()]],
+                        weekDayOccurenceInMonth: weekDayOccurenceInMonth
+                          ? getWeekDayOccurenceInMonth(date?.toDate())
+                          : undefined,
+                      });
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                <DatePicker
+                  label={tCommon('endDate')}
+                  className={styles.datebox}
+                  value={dayjs(endDate)}
+                  onChange={(date: Dayjs | null): void => {
+                    if (date) {
+                      setEndDate(date?.toDate());
+                    }
+                  }}
+                  minDate={dayjs(startDate)}
+                />
+              </div>
+            </div>
+            {!alldaychecked && (
+              <div className={styles.datediv}>
+                <div className="mr-3">
+                  <TimePicker
+                    label={tCommon('startTime')}
+                    className={styles.datebox}
+                    timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+                    value={timeToDayJs(formState.startTime)}
+                    /*istanbul ignore next*/
+                    onChange={(time): void => {
+                      if (time) {
+                        setFormState({
+                          ...formState,
+                          startTime: time?.format('HH:mm:ss'),
+                          endTime:
+                            /*istanbul ignore next*/
+                            timeToDayJs(formState.endTime) < time
+                              ? /* istanbul ignore next */ time?.format(
+                                  'HH:mm:ss',
+                                )
+                              : formState.endTime,
+                        });
+                      }
+                    }}
+                    disabled={alldaychecked}
+                  />
+                </div>
+                <div>
+                  <TimePicker
+                    label={tCommon('endTime')}
+                    className={styles.datebox}
+                    timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+                    /*istanbul ignore next*/
+                    value={timeToDayJs(formState.endTime)}
+                    onChange={(time): void => {
+                      if (time) {
+                        setFormState({
+                          ...formState,
+                          endTime: time?.format('HH:mm:ss'),
+                        });
+                      }
+                    }}
+                    minTime={timeToDayJs(formState.startTime)}
+                    disabled={alldaychecked}
+                  />
+                </div>
+              </div>
+            )}
+            <div className={styles.checkboxdiv}>
+              <div className={styles.dispflex}>
+                <label htmlFor="allday">{t('allDay')}?</label>
+                <Form.Switch
+                  className="me-4"
+                  id="allday"
+                  type="checkbox"
+                  checked={alldaychecked}
+                  data-testid="alldayCheck"
+                  onChange={(): void => setAllDayChecked(!alldaychecked)}
+                />
+              </div>
+              <div className={styles.dispflex}>
+                <label htmlFor="ispublic">{t('isPublic')}?</label>
+                <Form.Switch
+                  className="me-4"
+                  id="ispublic"
+                  type="checkbox"
+                  data-testid="ispublicCheck"
+                  checked={publicchecked}
+                  onChange={(): void => setPublicChecked(!publicchecked)}
+                />
+              </div>
+            </div>
+            <div className={styles.checkboxdiv}>
+              <div className={styles.dispflex}>
+                <label htmlFor="recurring">{t('recurringEvent')}?</label>
+                <Form.Switch
+                  className="me-4"
+                  id="recurring"
+                  type="checkbox"
+                  data-testid="recurringCheck"
+                  checked={recurringchecked}
+                  onChange={(): void => {
+                    setRecurringChecked(!recurringchecked);
+                  }}
+                />
+              </div>
+              <div className={styles.dispflex}>
+                <label htmlFor="registrable">{t('isRegistrable')}?</label>
+                <Form.Switch
+                  className="me-4"
+                  id="registrable"
+                  type="checkbox"
+                  data-testid="registrableCheck"
+                  checked={registrablechecked}
+                  onChange={(): void =>
+                    setRegistrableChecked(!registrablechecked)
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Recurrence Options */}
+            {recurringchecked && (
+              <RecurrenceOptions
+                recurrenceRuleState={recurrenceRuleState}
+                recurrenceRuleText={recurrenceRuleText}
+                setRecurrenceRuleState={setRecurrenceRuleState}
+                popover={popover}
+                t={t}
+                tCommon={tCommon}
+              />
+            )}
+
+            <Button
+              type="submit"
+              className={styles.greenregbtn}
+              value="createevent"
+              data-testid="createEventBtn"
+            >
+              {t('createEvent')}
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default organizationEvents;
diff --git a/src/screens/OrganizationEvents/OrganizationEventsMocks.ts b/src/screens/OrganizationEvents/OrganizationEventsMocks.ts
new file mode 100644
index 0000000000..4f844d33fa
--- /dev/null
+++ b/src/screens/OrganizationEvents/OrganizationEventsMocks.ts
@@ -0,0 +1,241 @@
+import { CREATE_EVENT_MUTATION } from 'GraphQl/Mutations/mutations';
+import { ORGANIZATION_EVENT_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_EVENT_CONNECTION_LIST,
+      variables: {
+        organization_id: undefined,
+        title_contains: '',
+        description_contains: '',
+        location_contains: '',
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [
+          {
+            _id: 1,
+            title: 'Event',
+            description: 'Event Test',
+            startDate: '',
+            endDate: '',
+            location: 'New Delhi',
+            startTime: '02:00',
+            endTime: '06:00',
+            allDay: false,
+            recurring: false,
+            recurrenceRule: null,
+            isRecurringEventException: false,
+            isPublic: true,
+            isRegisterable: true,
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_EVENT_CONNECTION_LIST,
+      variables: {
+        title_contains: '',
+        description_contains: '',
+        organization_id: undefined,
+        location_contains: '',
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [
+          {
+            _id: '1',
+            title: 'Dummy Org',
+            description: 'This is a dummy organization',
+            location: 'string',
+            startDate: '',
+            endDate: '',
+            startTime: '02:00',
+            endTime: '06:00',
+            allDay: false,
+            recurring: false,
+            recurrenceRule: null,
+            isRecurringEventException: false,
+            isPublic: true,
+            isRegisterable: true,
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'Dummy Org',
+        location: 'New Delhi',
+        description: 'This is a dummy organization',
+        isPublic: false,
+        recurring: false,
+        isRegisterable: true,
+        organizationId: undefined,
+        startDate: '2022-03-28',
+        endDate: '2022-03-30',
+        allDay: true,
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'Dummy Org',
+        location: 'New Delhi',
+        description: 'This is a dummy organization',
+        isPublic: true,
+        recurring: false,
+        isRegisterable: false,
+        organizationId: undefined,
+        startDate: '2022-03-28',
+        endDate: '2022-03-30',
+        allDay: false,
+        startTime: '09:00:00',
+        endTime: '17:00:00',
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'Dummy Org',
+        location: 'New Delhi',
+        description: 'This is a dummy organization',
+        isPublic: true,
+        recurring: true,
+        isRegisterable: false,
+        organizationId: undefined,
+        startDate: '2022-03-28',
+        endDate: '2022-03-30',
+        allDay: false,
+        startTime: '09:00:00',
+        endTime: '17:00:00',
+        recurrenceStartDate: '2022-03-28',
+        recurrenceEndDate: null,
+        frequency: 'DAILY',
+        interval: 1,
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'Dummy Org',
+        location: 'New Delhi',
+        description: 'This is a dummy organization',
+        isPublic: true,
+        recurring: true,
+        isRegisterable: false,
+        organizationId: undefined,
+        startDate: '2022-03-28',
+        endDate: '2022-03-30',
+        allDay: false,
+        startTime: '09:00:00',
+        endTime: '17:00:00',
+        recurrenceStartDate: '2022-03-28',
+        recurrenceEndDate: null,
+        frequency: 'WEEKLY',
+        interval: 1,
+        weekDays: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY'],
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'Dummy Org',
+        description: 'This is a dummy organization',
+        location: 'New Delhi',
+        organizationId: undefined,
+        isPublic: true,
+        recurring: true,
+        isRegisterable: false,
+        startDate: '2022-03-28',
+        endDate: '2022-03-30',
+        allDay: true,
+        recurrenceStartDate: '2022-03-28',
+        recurrenceEndDate: '2023-04-15',
+        frequency: 'MONTHLY',
+        weekDays: ['MONDAY'],
+        interval: 2,
+        weekDayOccurenceInMonth: 4,
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'Dummy Org',
+        location: 'New Delhi',
+        description: 'This is a dummy organization',
+        isPublic: true,
+        recurring: true,
+        isRegisterable: false,
+        organizationId: undefined,
+        startDate: '2022-03-28',
+        endDate: '2022-03-30',
+        allDay: true,
+        recurrenceStartDate: '2022-03-28',
+        recurrenceEndDate: null,
+        frequency: 'DAILY',
+        interval: 1,
+        count: 100,
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.test.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.test.tsx
new file mode 100644
index 0000000000..2a5a61a22b
--- /dev/null
+++ b/src/screens/OrganizationFundCampaign/CampaignModal.test.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import { MOCKS, MOCK_ERROR } from './OrganizationFundCampaignMocks';
+import type { InterfaceCampaignModal } from './CampaignModal';
+import CampaignModal from './CampaignModal';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCK_ERROR);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.fundCampaign),
+);
+
+const campaignProps: InterfaceCampaignModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    fundId: 'fundId',
+    orgId: 'orgId',
+    campaign: {
+      _id: 'campaignId1',
+      name: 'Campaign 1',
+      fundingGoal: 100,
+      startDate: new Date('2021-01-01'),
+      endDate: new Date('2024-01-01'),
+      currency: 'USD',
+      createdAt: '2021-01-01',
+    },
+    refetchCampaign: jest.fn(),
+    mode: 'create',
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    fundId: 'fundId',
+    orgId: 'orgId',
+    campaign: {
+      _id: 'campaignId1',
+      name: 'Campaign 1',
+      fundingGoal: 100,
+      startDate: new Date('2021-01-01'),
+      endDate: new Date('2024-01-01'),
+      currency: 'USD',
+      createdAt: '2021-01-01',
+    },
+    refetchCampaign: jest.fn(),
+    mode: 'edit',
+  },
+];
+const renderCampaignModal = (
+  link: ApolloLink,
+  props: InterfaceCampaignModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <CampaignModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('CampaignModal', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('should populate form fields with correct values in edit mode', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    await waitFor(() =>
+      expect(screen.getAllByText(translations.updateCampaign)).toHaveLength(2),
+    );
+
+    expect(screen.getByLabelText(translations.campaignName)).toHaveValue(
+      'Campaign 1',
+    );
+    expect(screen.getByLabelText('Start Date')).toHaveValue('01/01/2021');
+    expect(screen.getByLabelText('End Date')).toHaveValue('01/01/2024');
+    expect(screen.getByLabelText(translations.currency)).toHaveTextContent(
+      'USD ($)',
+    );
+    expect(screen.getByLabelText(translations.fundingGoal)).toHaveValue('100');
+  });
+
+  it('should update fundingGoal when input value changes', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    const goalInput = screen.getByLabelText(translations.fundingGoal);
+    expect(goalInput).toHaveValue('100');
+    fireEvent.change(goalInput, { target: { value: '200' } });
+    expect(goalInput).toHaveValue('200');
+  });
+
+  it('should not update fundingGoal when input value is less than or equal to 0', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    const goalInput = screen.getByLabelText(translations.fundingGoal);
+    expect(goalInput).toHaveValue('100');
+    fireEvent.change(goalInput, { target: { value: '-10' } });
+    expect(goalInput).toHaveValue('100');
+  });
+
+  it('should update Start Date when a new date is selected', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    const startDateInput = screen.getByLabelText('Start Date');
+    fireEvent.change(startDateInput, { target: { value: '02/01/2024' } });
+    expect(startDateInput).toHaveValue('02/01/2024');
+  });
+
+  it('Start Date onChange when its null', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    const startDateInput = screen.getByLabelText('Start Date');
+    expect(startDateInput).toHaveValue('01/01/2021');
+    fireEvent.change(startDateInput, { target: { value: null } });
+    expect(startDateInput).toHaveValue('');
+  });
+
+  it('should update End Date when a new date is selected', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    const endDateInput = screen.getByLabelText('End Date');
+    fireEvent.change(endDateInput, { target: { value: '02/01/2024' } });
+    expect(endDateInput).toHaveValue('02/01/2024');
+  });
+
+  it('End Date onChange when its null', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+    const endDateInput = screen.getByLabelText('End Date');
+    fireEvent.change(endDateInput, { target: { value: null } });
+    expect(endDateInput).toHaveValue('');
+  });
+
+  it('should create campaign', async () => {
+    renderCampaignModal(link1, campaignProps[0]);
+
+    const campaignName = screen.getByLabelText(translations.campaignName);
+    fireEvent.change(campaignName, { target: { value: 'Campaign 2' } });
+
+    const startDate = screen.getByLabelText('Start Date');
+    fireEvent.change(startDate, { target: { value: '02/01/2024' } });
+
+    const endDate = screen.getByLabelText('End Date');
+    fireEvent.change(endDate, { target: { value: '02/02/2024' } });
+
+    const fundingGoal = screen.getByLabelText(translations.fundingGoal);
+    fireEvent.change(fundingGoal, { target: { value: '200' } });
+
+    const submitBtn = screen.getByTestId('submitCampaignBtn');
+    expect(submitBtn).toBeInTheDocument();
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.createdCampaign);
+      expect(campaignProps[0].refetchCampaign).toHaveBeenCalled();
+      expect(campaignProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('should update campaign', async () => {
+    renderCampaignModal(link1, campaignProps[1]);
+
+    const campaignName = screen.getByLabelText(translations.campaignName);
+    fireEvent.change(campaignName, { target: { value: 'Campaign 4' } });
+
+    const startDate = screen.getByLabelText('Start Date');
+    fireEvent.change(startDate, { target: { value: '02/01/2023' } });
+
+    const endDate = screen.getByLabelText('End Date');
+    fireEvent.change(endDate, { target: { value: '02/02/2023' } });
+
+    const fundingGoal = screen.getByLabelText(translations.fundingGoal);
+    fireEvent.change(fundingGoal, { target: { value: '400' } });
+
+    const submitBtn = screen.getByTestId('submitCampaignBtn');
+    expect(submitBtn).toBeInTheDocument();
+
+    fireEvent.click(submitBtn);
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.updatedCampaign);
+      expect(campaignProps[1].refetchCampaign).toHaveBeenCalled();
+      expect(campaignProps[1].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('Error: should create campaign', async () => {
+    renderCampaignModal(link2, campaignProps[0]);
+
+    const campaignName = screen.getByLabelText(translations.campaignName);
+    fireEvent.change(campaignName, { target: { value: 'Campaign 2' } });
+
+    const startDate = screen.getByLabelText('Start Date');
+    fireEvent.change(startDate, { target: { value: '02/01/2024' } });
+
+    const endDate = screen.getByLabelText('End Date');
+    fireEvent.change(endDate, { target: { value: '02/02/2024' } });
+
+    const fundingGoal = screen.getByLabelText(translations.fundingGoal);
+    fireEvent.change(fundingGoal, { target: { value: '200' } });
+
+    const submitBtn = screen.getByTestId('submitCampaignBtn');
+    expect(submitBtn).toBeInTheDocument();
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock graphql error');
+    });
+  });
+
+  it('Error: should update campaign', async () => {
+    renderCampaignModal(link2, campaignProps[1]);
+
+    const campaignName = screen.getByLabelText(translations.campaignName);
+    fireEvent.change(campaignName, { target: { value: 'Campaign 4' } });
+
+    const startDate = screen.getByLabelText('Start Date');
+    fireEvent.change(startDate, { target: { value: '02/01/2023' } });
+
+    const endDate = screen.getByLabelText('End Date');
+    fireEvent.change(endDate, { target: { value: '02/02/2023' } });
+
+    const fundingGoal = screen.getByLabelText(translations.fundingGoal);
+    fireEvent.change(fundingGoal, { target: { value: '400' } });
+
+    const submitBtn = screen.getByTestId('submitCampaignBtn');
+    expect(submitBtn).toBeInTheDocument();
+
+    fireEvent.click(submitBtn);
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock graphql error');
+    });
+  });
+});
diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
new file mode 100644
index 0000000000..63d1e8de3a
--- /dev/null
+++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx
@@ -0,0 +1,315 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { currencyOptions, currencySymbols } from 'utils/currency';
+import styles from './OrganizationFundCampaign.module.css';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import {
+  CREATE_CAMPAIGN_MUTATION,
+  UPDATE_CAMPAIGN_MUTATION,
+} from 'GraphQl/Mutations/CampaignMutation';
+import { toast } from 'react-toastify';
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
+import type { InterfaceCampaignInfo } from 'utils/interfaces';
+
+/**
+ * Props for the CampaignModal component.
+ */
+export interface InterfaceCampaignModal {
+  isOpen: boolean;
+  hide: () => void;
+  fundId: string;
+  orgId: string;
+  campaign: InterfaceCampaignInfo | null;
+  refetchCampaign: () => void;
+  mode: 'create' | 'edit';
+}
+
+/**
+ * Modal component for creating or editing a campaign.
+ *
+ * @param props - The props for the CampaignModal component.
+ * @returns JSX.Element
+ */
+const CampaignModal: React.FC<InterfaceCampaignModal> = ({
+  isOpen,
+  hide,
+  fundId,
+  orgId,
+  refetchCampaign,
+  mode,
+  campaign,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'fundCampaign',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [formState, setFormState] = useState({
+    campaignName: campaign?.name ?? '',
+    campaignCurrency: campaign?.currency ?? 'USD',
+    campaignGoal: campaign?.fundingGoal ?? 0,
+    campaignStartDate: campaign?.startDate ?? new Date(),
+    campaignEndDate: campaign?.endDate ?? new Date(),
+  });
+
+  useEffect(() => {
+    setFormState({
+      campaignCurrency: campaign?.currency ?? 'USD',
+      campaignEndDate: campaign?.endDate ?? new Date(),
+      campaignGoal: campaign?.fundingGoal ?? 0,
+      campaignName: campaign?.name ?? '',
+      campaignStartDate: campaign?.startDate ?? new Date(),
+    });
+  }, [campaign]);
+
+  const {
+    campaignName,
+    campaignCurrency,
+    campaignEndDate,
+    campaignGoal,
+    campaignStartDate,
+  } = formState;
+
+  const [createCampaign] = useMutation(CREATE_CAMPAIGN_MUTATION);
+  const [updateCampaign] = useMutation(UPDATE_CAMPAIGN_MUTATION);
+
+  /**
+   * Handles form submission to create a new campaign.
+   *
+   * @param e - The form event.
+   * @returns Promise<void>
+   */
+  const createCampaignHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      await createCampaign({
+        variables: {
+          name: formState.campaignName,
+          currency: formState.campaignCurrency,
+          fundingGoal: formState.campaignGoal,
+          organizationId: orgId,
+          startDate: dayjs(formState.campaignStartDate).format('YYYY-MM-DD'),
+          endDate: dayjs(formState.campaignEndDate).format('YYYY-MM-DD'),
+          fundId,
+        },
+      });
+      toast.success(t('createdCampaign') as string);
+      setFormState({
+        campaignName: '',
+        campaignCurrency: 'USD',
+        campaignGoal: 0,
+        campaignStartDate: new Date(),
+        campaignEndDate: new Date(),
+      });
+      refetchCampaign();
+      hide();
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  /**
+   * Handles form submission to update an existing campaign.
+   *
+   * @param e - The form event.
+   * @returns Promise<void>
+   */
+  /*istanbul ignore next*/
+  const updateCampaignHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      const updatedFields: { [key: string]: string | number | undefined } = {};
+      if (campaign?.name !== campaignName) {
+        updatedFields.name = campaignName;
+      }
+      if (campaign?.currency !== campaignCurrency) {
+        updatedFields.currency = campaignCurrency;
+      }
+      if (campaign?.fundingGoal !== campaignGoal) {
+        updatedFields.fundingGoal = campaignGoal;
+      }
+      if (campaign?.startDate !== campaignStartDate) {
+        updatedFields.startDate = dayjs(campaignStartDate).format('YYYY-MM-DD');
+      }
+      if (campaign?.endDate !== formState.campaignEndDate) {
+        updatedFields.endDate = dayjs(formState.campaignEndDate).format(
+          'YYYY-MM-DD',
+        );
+      }
+      await updateCampaign({
+        variables: {
+          id: campaign?._id,
+          ...updatedFields,
+        },
+      });
+      setFormState({
+        campaignName: '',
+        campaignCurrency: 'USD',
+        campaignGoal: 0,
+        campaignStartDate: new Date(),
+        campaignEndDate: new Date(),
+      });
+      refetchCampaign();
+      hide();
+      toast.success(t('updatedCampaign') as string);
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  return (
+    <>
+      <Modal className={styles.campaignModal} show={isOpen} onHide={hide}>
+        <Modal.Header>
+          <p className={styles.titlemodal}>
+            {t(mode === 'edit' ? 'updateCampaign' : 'createCampaign')}
+          </p>
+          <Button
+            variant="danger"
+            onClick={hide}
+            className={styles.modalCloseBtn}
+            data-testid="campaignCloseBtn"
+          >
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <Form
+            onSubmitCapture={
+              mode === 'edit' ? updateCampaignHandler : createCampaignHandler
+            }
+            className="p-3"
+          >
+            <Form.Group className="d-flex mb-3 w-100">
+              <FormControl fullWidth>
+                <TextField
+                  label={t('campaignName')}
+                  variant="outlined"
+                  className={`${styles.noOutline} w-100`}
+                  value={campaignName}
+                  onChange={(e) =>
+                    setFormState({
+                      ...formState,
+                      campaignName: e.target.value,
+                    })
+                  }
+                />
+              </FormControl>
+            </Form.Group>
+
+            <Form.Group className="d-flex gap-4 mx-auto mb-3">
+              {/* Date Calendar Component to select start date of campaign*/}
+              <DatePicker
+                format="DD/MM/YYYY"
+                label={tCommon('startDate')}
+                value={dayjs(campaignStartDate)}
+                className={styles.noOutline}
+                onChange={(date: Dayjs | null): void => {
+                  if (date) {
+                    setFormState({
+                      ...formState,
+                      campaignStartDate: date.toDate(),
+                      campaignEndDate:
+                        campaignEndDate &&
+                        (campaignEndDate < date?.toDate()
+                          ? date.toDate()
+                          : campaignEndDate),
+                    });
+                  }
+                }}
+                minDate={dayjs(new Date())}
+              />
+              {/* Date Calendar Component to select end Date of campaign */}
+              <DatePicker
+                format="DD/MM/YYYY"
+                label={tCommon('endDate')}
+                className={styles.noOutline}
+                value={dayjs(campaignEndDate)}
+                onChange={(date: Dayjs | null): void => {
+                  if (date) {
+                    setFormState({
+                      ...formState,
+                      campaignEndDate: date.toDate(),
+                    });
+                  }
+                }}
+                minDate={dayjs(campaignStartDate)}
+              />
+            </Form.Group>
+
+            <Form.Group className="d-flex gap-4 mb-4">
+              {/* Dropdown to select the currency for funding goal of the campaign*/}
+              <FormControl fullWidth>
+                <InputLabel id="demo-simple-select-label">
+                  {t('currency')}
+                </InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  value={campaignCurrency}
+                  label={t('currency')}
+                  data-testid="currencySelect"
+                  onChange={
+                    /*istanbul ignore next*/
+                    (e) => {
+                      setFormState({
+                        ...formState,
+                        campaignCurrency: e.target.value,
+                      });
+                    }
+                  }
+                >
+                  {currencyOptions.map((currency) => (
+                    <MenuItem key={currency.label} value={currency.value}>
+                      {currency.label} ({currencySymbols[currency.value]})
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              {/* Input field to enter funding goal for the campaign */}
+              <FormControl fullWidth>
+                <TextField
+                  label={t('fundingGoal')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={campaignGoal}
+                  onChange={(e) => {
+                    if (parseInt(e.target.value) > 0) {
+                      setFormState({
+                        ...formState,
+                        campaignGoal: parseInt(e.target.value),
+                      });
+                    }
+                  }}
+                />
+              </FormControl>
+            </Form.Group>
+            {/* Button to create the campaign */}
+            <Button
+              type="submit"
+              className={styles.greenregbtn}
+              data-testid="submitCampaignBtn"
+            >
+              {t(mode === 'edit' ? 'updateCampaign' : 'createCampaign')}
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+export default CampaignModal;
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
new file mode 100644
index 0000000000..1c6dbf2cc6
--- /dev/null
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
@@ -0,0 +1,453 @@
+import { useQuery } from '@apollo/client';
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+import { Stack, Typography, Breadcrumbs, Link } from '@mui/material';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import React, { useCallback, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import Loader from 'components/Loader/Loader';
+import CampaignModal from './CampaignModal';
+import { FUND_CAMPAIGN } from 'GraphQl/Queries/fundQueries';
+import styles from './OrganizationFundCampaign.module.css';
+import { currencySymbols } from 'utils/currency';
+import type {
+  InterfaceCampaignInfo,
+  InterfaceQueryOrganizationFundCampaigns,
+} from 'utils/interfaces';
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * `orgFundCampaign` component displays a list of fundraising campaigns for a specific fund within an organization.
+ * It allows users to search, sort, view and edit campaigns.
+ *
+ * ### Functionality
+ * - Displays a data grid with campaigns information, including their names, start and end dates, funding goals, and actions.
+ * - Provides search functionality to filter campaigns by name.
+ * - Offers sorting options based on funding goal and end date.
+ * - Opens modals for creating or editing campaigns.
+ *
+ *
+ * ### State
+ * - `campaign`: The current campaign being edited or deleted.
+ * - `searchTerm`: The term used for searching campaigns by name.
+ * - `sortBy`: The current sorting criteria for campaigns.
+ * - `modalState`: An object indicating the visibility of different modals (`same` for create/edit).
+ * - `campaignModalMode`: Determines if the modal is in 'edit' or 'create' mode.
+ *
+ * ### Methods
+ * - `handleOpenModal(campaign: InterfaceCampaignInfo | null, mode: 'edit' | 'create')`: Opens the modal for creating or editing a campaign.
+ * - `handleClick(campaignId: string)`: Navigates to the pledge details page for a specific campaign.
+ *
+ * ### GraphQL Queries
+ * - Uses `FUND_CAMPAIGN` query to fetch the list of campaigns based on the provided fund ID, search term, and sorting criteria.
+ *
+ * ### Rendering
+ * - Renders a `DataGrid` component with campaigns information.
+ * - Displays modals for creating and editing campaigns.
+ * - Shows error and loading states using `Loader` and error message components.
+ *
+ * @returns The rendered component including breadcrumbs, search and filter controls, data grid, and modals.
+ */
+const orgFundCampaign = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'fundCampaign',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const navigate = useNavigate();
+
+  const { fundId, orgId } = useParams();
+
+  if (!fundId || !orgId) {
+    return <Navigate to={'/'} />;
+  }
+
+  const [campaign, setCampaign] = useState<InterfaceCampaignInfo | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<string | null>(null);
+
+  const [modalState, setModalState] = useState<boolean>(false);
+  const [campaignModalMode, setCampaignModalMode] = useState<'edit' | 'create'>(
+    'create',
+  );
+
+  const handleOpenModal = useCallback(
+    (campaign: InterfaceCampaignInfo | null, mode: 'edit' | 'create'): void => {
+      setCampaign(campaign);
+      setCampaignModalMode(mode);
+      setModalState(true);
+    },
+    [],
+  );
+
+  const {
+    data: campaignData,
+    loading: campaignLoading,
+    error: campaignError,
+    refetch: refetchCampaign,
+  }: {
+    data?: {
+      getFundById: InterfaceQueryOrganizationFundCampaigns;
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(FUND_CAMPAIGN, {
+    variables: {
+      id: fundId,
+      orderBy: sortBy,
+      where: {
+        name_contains: searchTerm,
+      },
+    },
+  });
+
+  const handleClick = (campaignId: string): void => {
+    navigate(`/fundCampaignPledge/${orgId}/${campaignId}`);
+  };
+
+  const { campaigns, fundName, isArchived } = useMemo(() => {
+    const fundName = campaignData?.getFundById?.name || 'Fund';
+    const isArchived = campaignData?.getFundById?.isArchived || false;
+    const campaigns = campaignData?.getFundById?.campaigns || [];
+    return { fundName, campaigns, isArchived };
+  }, [campaignData]);
+
+  if (campaignLoading) {
+    return <Loader size="xl" />;
+  }
+  if (campaignError) {
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occured while loading Campaigns
+            <br />
+            {campaignError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: 'Sr. No.',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'campaignName',
+      headerName: 'Campaign Name',
+      flex: 2,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="campaignName"
+            onClick={() => handleClick(params.row.campaign._id as string)}
+          >
+            {params.row.campaign.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'startDate',
+      headerName: 'Start Date',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return dayjs(params.row.campaign.startDate).format('DD/MM/YYYY');
+      },
+    },
+    {
+      field: 'endDate',
+      headerName: 'End Date',
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="endDateCell">
+            {dayjs(params.row.campaign.endDate).format('DD/MM/YYYY')}{' '}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'fundingGoal',
+      headerName: 'Funding Goal',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="goalCell"
+          >
+            {
+              currencySymbols[
+                params.row.campaign.currency as keyof typeof currencySymbols
+              ]
+            }
+            {params.row.campaign.fundingGoal}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'fundingRaised',
+      headerName: 'Raised',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="goalCell"
+          >
+            {
+              currencySymbols[
+                params.row.campaign.currency as keyof typeof currencySymbols
+              ]
+            }
+            0
+          </div>
+        );
+      },
+    },
+    {
+      field: 'action',
+      headerName: 'Action',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              className="me-2 rounded"
+              data-testid="editCampaignBtn"
+              onClick={() =>
+                handleOpenModal(
+                  params.row.campaign as InterfaceCampaignInfo,
+                  'edit',
+                )
+              }
+            >
+              <i className="fa fa-edit" />
+            </Button>
+          </>
+        );
+      },
+    },
+    {
+      field: 'assocPledge',
+      headerName: 'Associated Pledges',
+      flex: 2,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Button
+            variant="outline-success"
+            size="sm"
+            className="rounded"
+            data-testid="viewBtn"
+            onClick={() => handleClick(params.row.campaign._id as string)}
+          >
+            <i className="fa fa-eye me-1" />
+            {t('viewPledges')}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div className={styles.organizationFundCampaignContainer}>
+      <Breadcrumbs aria-label="breadcrumb" className="ms-1">
+        <Link
+          underline="hover"
+          color="inherit"
+          component="button"
+          data-testid="fundsLink"
+          onClick={() => navigate(`/orgfunds/${orgId}`)}
+        >
+          {fundName}
+        </Link>
+        <Typography color="text.primary">{t('title')}</Typography>
+      </Breadcrumbs>
+
+      <div className={styles.btnsContainer}>
+        <div className={styles.input}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchByName')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-testid="searchFullName"
+          />
+          <Button
+            className="position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center"
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className={styles.btnsBlock}>
+          <div className="d-flex justify-space-between">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('fundingGoal_ASC')}
+                  data-testid="fundingGoal_ASC"
+                >
+                  {t('lowestGoal')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('fundingGoal_DESC')}
+                  data-testid="fundingGoal_DESC"
+                >
+                  {t('highestGoal')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('endDate_DESC')}
+                  data-testid="endDate_DESC"
+                >
+                  {t('latestEndDate')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('endDate_ASC')}
+                  data-testid="endDate_ASC"
+                >
+                  {t('earliestEndDate')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              className={styles.orgFundCampaignButton}
+              onClick={() => handleOpenModal(null, 'create')}
+              data-testid="addCampaignBtn"
+              disabled={isArchived}
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('addCampaign')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={8}
+        hideFooter={true}
+        getRowId={(row) => row.campaign._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noCampaignsFound')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={campaigns.map((campaign, index) => ({
+          id: index + 1,
+          campaign,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      {/* Create Campaign ModalState */}
+      <CampaignModal
+        isOpen={modalState}
+        hide={() => setModalState(false)}
+        refetchCampaign={refetchCampaign}
+        fundId={fundId}
+        orgId={orgId}
+        campaign={campaign}
+        mode={campaignModalMode}
+      />
+    </div>
+  );
+};
+export default orgFundCampaign;
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css
new file mode 100644
index 0000000000..55202baef9
--- /dev/null
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css
@@ -0,0 +1,202 @@
+.organizationFundCampaignContainer {
+  margin: 0.5rem 0;
+}
+.goalButton {
+  border: 1px solid rgba(49, 187, 107, 1) !important;
+  color: rgba(49, 187, 107, 1) !important;
+  width: 75%;
+  padding: 10px;
+  border-radius: 8px;
+  display: block;
+  margin: auto;
+  box-shadow: 5px 5px 4px 0px rgba(49, 187, 107, 0.12);
+}
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+.container {
+  min-height: 100vh;
+}
+.campaignModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+.noOutline input {
+  outline: none;
+}
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+  flex: 1;
+}
+
+.redregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+  flex: 1;
+}
+.campaignNameInfo {
+  font-size: medium;
+  cursor: pointer;
+}
+.campaignNameInfo:hover {
+  color: blue;
+  transform: translateY(-2px);
+}
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.inputField {
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+.btnsContainer {
+  display: flex;
+  margin: 2rem 0 2rem 0;
+  gap: 0.8rem;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  gap: 0.8rem;
+}
+
+.btnsContainer .btnsBlock div button {
+  display: flex;
+  margin-left: 1rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin: 0;
+  }
+
+  .createFundBtn {
+    margin-top: 0;
+  }
+}
+
+@media screen and (max-width: 575.5px) {
+  .mainpageright {
+    width: 98%;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx
new file mode 100644
index 0000000000..9c169e355a
--- /dev/null
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.test.tsx
@@ -0,0 +1,320 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from '../../state/store';
+import { StaticMockLink } from '../../utils/StaticMockLink';
+import i18nForTest from '../../utils/i18nForTest';
+import OrganizaitionFundCampiagn from './OrganizationFundCampagins';
+import {
+  EMPTY_MOCKS,
+  MOCKS,
+  MOCK_ERROR,
+} from './OrganizationFundCampaignMocks';
+import type { ApolloLink } from '@apollo/client';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const link1 = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCK_ERROR, true);
+const link3 = new StaticMockLink(EMPTY_MOCKS, true);
+
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.fundCampaign),
+);
+
+const renderFundCampaign = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgfundcampaign/orgId/fundId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route
+                  path="/orgfundcampaign/:orgId/:fundId"
+                  element={<OrganizaitionFundCampiagn />}
+                />
+                <Route
+                  path="/fundCampaignPledge/orgId/campaignId1"
+                  element={<div data-testid="pledgeScreen"></div>}
+                />
+                <Route
+                  path="/orgfunds/orgId"
+                  element={<div data-testid="fundScreen"></div>}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('FundCampaigns Screen', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', fundId: 'fundId' }),
+    }));
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the Campaign Pledge screen', async () => {
+    renderFundCampaign(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchFullName')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Campaign 1')).toBeInTheDocument();
+    expect(screen.getByText('Campaign 2')).toBeInTheDocument();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/orgfundcampaign/']}>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Routes>
+                  <Route
+                    path="/orgfundcampaign/"
+                    element={<OrganizaitionFundCampiagn />}
+                  />
+                  <Route
+                    path="/"
+                    element={<div data-testid="paramsError"></div>}
+                  />
+                </Routes>
+              </I18nextProvider>
+            </LocalizationProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('open and close Create Campaign modal', async () => {
+    renderFundCampaign(link1);
+
+    const addCampaignBtn = await screen.findByTestId('addCampaignBtn');
+    expect(addCampaignBtn).toBeInTheDocument();
+    userEvent.click(addCampaignBtn);
+
+    await waitFor(() =>
+      expect(screen.getAllByText(translations.createCampaign)).toHaveLength(2),
+    );
+    userEvent.click(screen.getByTestId('campaignCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('campaignCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and close update campaign modal', async () => {
+    renderFundCampaign(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchFullName')).toBeInTheDocument();
+    });
+
+    const editCampaignBtn = await screen.findAllByTestId('editCampaignBtn');
+    await waitFor(() => expect(editCampaignBtn[0]).toBeInTheDocument());
+    userEvent.click(editCampaignBtn[0]);
+
+    await waitFor(() =>
+      expect(
+        screen.getAllByText(translations.updateCampaign)[0],
+      ).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('campaignCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('campaignCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('Search the Campaigns list by Name', async () => {
+    renderFundCampaign(link1);
+    const searchField = await screen.findByTestId('searchFullName');
+    fireEvent.change(searchField, {
+      target: { value: '2' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Campaign 2')).toBeInTheDocument();
+      expect(screen.queryByText('Campaign 1')).toBeNull();
+    });
+  });
+
+  it('should render the Campaign screen with error', async () => {
+    renderFundCampaign(link2);
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the empty campaign component', async () => {
+    renderFundCampaign(link3);
+    await waitFor(() =>
+      expect(
+        screen.getByText(translations.noCampaignsFound),
+      ).toBeInTheDocument(),
+    );
+  });
+
+  it('Sort the Campaigns list by Latest end Date', async () => {
+    renderFundCampaign(link1);
+
+    const sortBtn = await screen.findByTestId('filter');
+    expect(sortBtn).toBeInTheDocument();
+
+    fireEvent.click(sortBtn);
+    fireEvent.click(screen.getByTestId('endDate_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Campaign 1')).toBeInTheDocument();
+      expect(screen.queryByText('Campaign 2')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('endDateCell')[0]).toHaveTextContent(
+        '01/01/2024',
+      );
+    });
+  });
+
+  it('Sort the Campaigns list by Earliest end Date', async () => {
+    renderFundCampaign(link1);
+
+    const sortBtn = await screen.findByTestId('filter');
+    expect(sortBtn).toBeInTheDocument();
+
+    fireEvent.click(sortBtn);
+    fireEvent.click(screen.getByTestId('endDate_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Campaign 1')).toBeInTheDocument();
+      expect(screen.queryByText('Campaign 2')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('endDateCell')[0]).toHaveTextContent(
+        '01/01/2021',
+      );
+    });
+  });
+
+  it('Sort the Campaigns list by lowest goal', async () => {
+    renderFundCampaign(link1);
+
+    const sortBtn = await screen.findByTestId('filter');
+    expect(sortBtn).toBeInTheDocument();
+
+    fireEvent.click(sortBtn);
+    fireEvent.click(screen.getByTestId('fundingGoal_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Campaign 1')).toBeInTheDocument();
+      expect(screen.queryByText('Campaign 2')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('goalCell')[0]).toHaveTextContent('100');
+    });
+  });
+
+  it('Sort the Campaigns list by highest goal', async () => {
+    renderFundCampaign(link1);
+
+    const sortBtn = await screen.findByTestId('filter');
+    expect(sortBtn).toBeInTheDocument();
+
+    fireEvent.click(sortBtn);
+    fireEvent.click(screen.getByTestId('fundingGoal_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Campaign 1')).toBeInTheDocument();
+      expect(screen.queryByText('Campaign 2')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('goalCell')[0]).toHaveTextContent('200');
+    });
+  });
+
+  it('Click on Campaign Name', async () => {
+    renderFundCampaign(link1);
+
+    const campaignName = await screen.findAllByTestId('campaignName');
+    expect(campaignName[0]).toBeInTheDocument();
+    fireEvent.click(campaignName[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('pledgeScreen')).toBeInTheDocument();
+    });
+  });
+
+  it('Click on View Pledge', async () => {
+    renderFundCampaign(link1);
+
+    const viewBtn = await screen.findAllByTestId('viewBtn');
+    expect(viewBtn[0]).toBeInTheDocument();
+    fireEvent.click(viewBtn[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('pledgeScreen')).toBeInTheDocument();
+    });
+  });
+
+  it('should render the Fund screen on fund breadcrumb click', async () => {
+    renderFundCampaign(link1);
+
+    const fundBreadcrumb = await screen.findByTestId('fundsLink');
+    expect(fundBreadcrumb).toBeInTheDocument();
+    fireEvent.click(fundBreadcrumb);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('fundScreen')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts b/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts
new file mode 100644
index 0000000000..fa871c3593
--- /dev/null
+++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampaignMocks.ts
@@ -0,0 +1,320 @@
+import {
+  CREATE_CAMPAIGN_MUTATION,
+  UPDATE_CAMPAIGN_MUTATION,
+} from 'GraphQl/Mutations/CampaignMutation';
+import { FUND_CAMPAIGN } from 'GraphQl/Queries/fundQueries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: null,
+        where: { name_contains: '' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [
+            {
+              _id: 'campaignId1',
+              name: 'Campaign 1',
+              fundingGoal: 100,
+              startDate: '2024-01-01',
+              endDate: '2024-01-01',
+              currency: 'USD',
+            },
+            {
+              _id: '2',
+              name: 'Campaign 2',
+              fundingGoal: 200,
+              startDate: '2021-01-01',
+              endDate: '2021-01-01',
+              currency: 'USD',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: null,
+        where: { name_contains: '2' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [
+            {
+              _id: '2',
+              name: 'Campaign 2',
+              fundingGoal: 200,
+              startDate: '2021-01-01',
+              endDate: '2021-01-01',
+              currency: 'USD',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: 'endDate_DESC',
+        where: { name_contains: '' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [
+            {
+              _id: '1',
+              name: 'Campaign 1',
+              fundingGoal: 100,
+              startDate: '2024-01-01',
+              endDate: '2024-01-01',
+              currency: 'USD',
+            },
+            {
+              _id: '2',
+              name: 'Campaign 2',
+              fundingGoal: 200,
+              startDate: '2021-01-01',
+              endDate: '2021-01-01',
+              currency: 'USD',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: 'endDate_ASC',
+        where: { name_contains: '' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [
+            {
+              _id: '2',
+              name: 'Campaign 2',
+              fundingGoal: 200,
+              startDate: '2021-01-01',
+              endDate: '2021-01-01',
+              currency: 'USD',
+            },
+            {
+              _id: '1',
+              name: 'Campaign 1',
+              fundingGoal: 100,
+              startDate: '2024-01-01',
+              endDate: '2024-01-01',
+              currency: 'USD',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: 'fundingGoal_DESC',
+        where: { name_contains: '' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [
+            {
+              _id: '2',
+              name: 'Campaign 2',
+              fundingGoal: 200,
+              startDate: '2021-01-01',
+              endDate: '2021-01-01',
+              currency: 'USD',
+            },
+            {
+              _id: '1',
+              name: 'Campaign 1',
+              fundingGoal: 100,
+              startDate: '2024-01-01',
+              endDate: '2024-01-01',
+              currency: 'USD',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: 'fundingGoal_ASC',
+        where: { name_contains: '' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [
+            {
+              _id: '1',
+              name: 'Campaign 1',
+              fundingGoal: 100,
+              startDate: '2024-01-01',
+              endDate: '2024-01-01',
+              currency: 'USD',
+            },
+            {
+              _id: '2',
+              name: 'Campaign 2',
+              fundingGoal: 200,
+              startDate: '2021-01-01',
+              endDate: '2021-01-01',
+              currency: 'USD',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_CAMPAIGN_MUTATION,
+      variables: {
+        fundId: 'fundId',
+        organizationId: 'orgId',
+        name: 'Campaign 2',
+        fundingGoal: 200,
+        startDate: '2024-01-02',
+        endDate: '2024-02-02',
+        currency: 'USD',
+      },
+    },
+    result: {
+      data: {
+        createFundraisingCampaign: {
+          _id: 'fundId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_CAMPAIGN_MUTATION,
+      variables: {
+        id: 'campaignId1',
+        name: 'Campaign 4',
+        fundingGoal: 400,
+        startDate: '2023-01-02',
+        endDate: '2023-02-02',
+      },
+    },
+    result: {
+      data: {
+        updateFundraisingCampaign: {
+          _id: 'campaignId1',
+        },
+      },
+    },
+  },
+];
+
+export const MOCK_ERROR = [
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: null,
+        where: { name_contains: '2' },
+      },
+    },
+    error: new Error('An error occurred'),
+  },
+  {
+    request: {
+      query: CREATE_CAMPAIGN_MUTATION,
+      variables: {
+        fundId: 'fundId',
+        organizationId: 'orgId',
+        name: 'Campaign 2',
+        fundingGoal: 200,
+        startDate: '2024-01-02',
+        endDate: '2024-02-02',
+        currency: 'USD',
+      },
+    },
+    error: new Error('Mock graphql error'),
+  },
+  {
+    request: {
+      query: UPDATE_CAMPAIGN_MUTATION,
+      variables: {
+        id: 'campaignId1',
+        name: 'Campaign 4',
+        fundingGoal: 400,
+        startDate: '2023-01-02',
+        endDate: '2023-02-02',
+      },
+    },
+    error: new Error('Mock graphql error'),
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: FUND_CAMPAIGN,
+      variables: {
+        id: 'fundId',
+        orderBy: null,
+        where: { name_contains: '' },
+      },
+    },
+    result: {
+      data: {
+        getFundById: {
+          name: 'Fund 1',
+          isArchived: false,
+          campaigns: [],
+        },
+      },
+    },
+  },
+];
diff --git a/src/screens/OrganizationFunds/FundModal.test.tsx b/src/screens/OrganizationFunds/FundModal.test.tsx
new file mode 100644
index 0000000000..c74b0434c3
--- /dev/null
+++ b/src/screens/OrganizationFunds/FundModal.test.tsx
@@ -0,0 +1,260 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from '../../utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import { MOCKS, MOCKS_ERROR } from './OrganizationFundsMocks';
+import type { InterfaceFundModal } from './FundModal';
+import FundModal from './FundModal';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(MOCKS_ERROR);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.funds),
+);
+
+const fundProps: InterfaceFundModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    fund: {
+      _id: 'fundId',
+      name: 'Fund 1',
+      refrenceNumber: '1111',
+      taxDeductible: true,
+      isArchived: false,
+      isDefault: false,
+      createdAt: '2024-06-22',
+      organizationId: 'orgId',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'John',
+        lastName: 'Doe',
+      },
+    },
+    refetchFunds: jest.fn(),
+    orgId: 'orgId',
+    mode: 'create',
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    fund: {
+      _id: 'fundId',
+      name: 'Fund 1',
+      refrenceNumber: '1111',
+      taxDeductible: true,
+      isArchived: false,
+      isDefault: false,
+      createdAt: '2024-06-22',
+      organizationId: 'orgId',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'John',
+        lastName: 'Doe',
+      },
+    },
+    refetchFunds: jest.fn(),
+    orgId: 'orgId',
+    mode: 'edit',
+  },
+];
+
+const renderFundModal = (
+  link: ApolloLink,
+  props: InterfaceFundModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <FundModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('PledgeModal', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should populate form fields with correct values in edit mode', async () => {
+    renderFundModal(link1, fundProps[1]);
+    await waitFor(() =>
+      expect(
+        screen.getAllByText(translations.fundUpdate)[0],
+      ).toBeInTheDocument(),
+    );
+    expect(screen.getByLabelText(translations.fundName)).toHaveValue('Fund 1');
+    expect(screen.getByLabelText(translations.fundId)).toHaveValue('1111');
+    expect(screen.getByTestId('setTaxDeductibleSwitch')).toBeChecked();
+    expect(screen.getByTestId('setDefaultSwitch')).not.toBeChecked();
+    expect(screen.getByTestId('archivedSwitch')).not.toBeChecked();
+  });
+
+  it('should update Fund Name when input value changes', async () => {
+    renderFundModal(link1, fundProps[1]);
+    const fundNameInput = screen.getByLabelText(translations.fundName);
+    expect(fundNameInput).toHaveValue('Fund 1');
+    fireEvent.change(fundNameInput, { target: { value: 'Fund 2' } });
+    expect(fundNameInput).toHaveValue('Fund 2');
+  });
+
+  it('should update Fund Reference ID when input value changes', async () => {
+    renderFundModal(link1, fundProps[1]);
+    const fundIdInput = screen.getByLabelText(translations.fundId);
+    expect(fundIdInput).toHaveValue('1111');
+    fireEvent.change(fundIdInput, { target: { value: '2222' } });
+    expect(fundIdInput).toHaveValue('2222');
+  });
+
+  it('should update Tax Deductible Switch when input value changes', async () => {
+    renderFundModal(link1, fundProps[1]);
+    const taxDeductibleSwitch = screen.getByTestId('setTaxDeductibleSwitch');
+    expect(taxDeductibleSwitch).toBeChecked();
+    fireEvent.click(taxDeductibleSwitch);
+    expect(taxDeductibleSwitch).not.toBeChecked();
+  });
+
+  it('should update Tax Default switch when input value changes', async () => {
+    renderFundModal(link1, fundProps[1]);
+    const defaultSwitch = screen.getByTestId('setDefaultSwitch');
+    expect(defaultSwitch).not.toBeChecked();
+    fireEvent.click(defaultSwitch);
+    expect(defaultSwitch).toBeChecked();
+  });
+
+  it('should update Tax isArchived switch when input value changes', async () => {
+    renderFundModal(link1, fundProps[1]);
+    const archivedSwitch = screen.getByTestId('archivedSwitch');
+    expect(archivedSwitch).not.toBeChecked();
+    fireEvent.click(archivedSwitch);
+    expect(archivedSwitch).toBeChecked();
+  });
+
+  it('should create fund', async () => {
+    renderFundModal(link1, fundProps[0]);
+
+    const fundNameInput = screen.getByLabelText(translations.fundName);
+    fireEvent.change(fundNameInput, { target: { value: 'Fund 2' } });
+
+    const fundIdInput = screen.getByLabelText(translations.fundId);
+    fireEvent.change(fundIdInput, { target: { value: '2222' } });
+
+    const taxDeductibleSwitch = screen.getByTestId('setTaxDeductibleSwitch');
+    fireEvent.click(taxDeductibleSwitch);
+
+    const defaultSwitch = screen.getByTestId('setDefaultSwitch');
+    fireEvent.click(defaultSwitch);
+
+    fireEvent.click(screen.getByTestId('createFundFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.fundCreated);
+      expect(fundProps[0].refetchFunds).toHaveBeenCalled();
+      expect(fundProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('should update fund', async () => {
+    renderFundModal(link1, fundProps[1]);
+
+    const fundNameInput = screen.getByLabelText(translations.fundName);
+    fireEvent.change(fundNameInput, { target: { value: 'Fund 2' } });
+
+    const fundIdInput = screen.getByLabelText(translations.fundId);
+    fireEvent.change(fundIdInput, { target: { value: '2222' } });
+
+    const taxDeductibleSwitch = screen.getByTestId('setTaxDeductibleSwitch');
+    fireEvent.click(taxDeductibleSwitch);
+
+    const defaultSwitch = screen.getByTestId('setDefaultSwitch');
+    fireEvent.click(defaultSwitch);
+
+    const archivedSwitch = screen.getByTestId('archivedSwitch');
+    fireEvent.click(archivedSwitch);
+
+    fireEvent.click(screen.getByTestId('createFundFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(translations.fundUpdated);
+      expect(fundProps[1].refetchFunds).toHaveBeenCalled();
+      expect(fundProps[1].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('Error: should create fund', async () => {
+    renderFundModal(link2, fundProps[0]);
+
+    const fundNameInput = screen.getByLabelText(translations.fundName);
+    fireEvent.change(fundNameInput, { target: { value: 'Fund 2' } });
+
+    const fundIdInput = screen.getByLabelText(translations.fundId);
+    fireEvent.change(fundIdInput, { target: { value: '2222' } });
+
+    const taxDeductibleSwitch = screen.getByTestId('setTaxDeductibleSwitch');
+    fireEvent.click(taxDeductibleSwitch);
+
+    const defaultSwitch = screen.getByTestId('setDefaultSwitch');
+    fireEvent.click(defaultSwitch);
+
+    fireEvent.click(screen.getByTestId('createFundFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock graphql error');
+    });
+  });
+
+  it('Error: should update fund', async () => {
+    renderFundModal(link2, fundProps[1]);
+
+    const fundNameInput = screen.getByLabelText(translations.fundName);
+    fireEvent.change(fundNameInput, { target: { value: 'Fund 2' } });
+
+    const fundIdInput = screen.getByLabelText(translations.fundId);
+    fireEvent.change(fundIdInput, { target: { value: '2222' } });
+
+    const taxDeductibleSwitch = screen.getByTestId('setTaxDeductibleSwitch');
+    fireEvent.click(taxDeductibleSwitch);
+
+    const defaultSwitch = screen.getByTestId('setDefaultSwitch');
+    fireEvent.click(defaultSwitch);
+
+    const archivedSwitch = screen.getByTestId('archivedSwitch');
+    fireEvent.click(archivedSwitch);
+
+    fireEvent.click(screen.getByTestId('createFundFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock graphql error');
+    });
+  });
+});
diff --git a/src/screens/OrganizationFunds/FundModal.tsx b/src/screens/OrganizationFunds/FundModal.tsx
new file mode 100644
index 0000000000..0f112cba9b
--- /dev/null
+++ b/src/screens/OrganizationFunds/FundModal.tsx
@@ -0,0 +1,286 @@
+import React, { useEffect, useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import type { InterfaceCreateFund, InterfaceFundInfo } from 'utils/interfaces';
+import styles from './OrganizationFunds.module.css';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from '@apollo/client';
+import {
+  CREATE_FUND_MUTATION,
+  UPDATE_FUND_MUTATION,
+} from 'GraphQl/Mutations/FundMutation';
+import { toast } from 'react-toastify';
+import { FormControl, TextField } from '@mui/material';
+
+export interface InterfaceFundModal {
+  isOpen: boolean;
+  hide: () => void;
+  refetchFunds: () => void;
+  fund: InterfaceFundInfo | null;
+  orgId: string;
+  mode: 'create' | 'edit';
+}
+/**
+ * `FundModal` component provides a modal dialog for creating or editing a fund.
+ * It allows users to input fund details and submit them to the server.
+ *
+ * This component handles both the creation of new funds and the editing of existing funds,
+ * based on the `mode` prop. It displays a form with fields for the fund's name, description,
+ * and other relevant details. Upon submission, it interacts with the GraphQL API to save
+ * or update the fund details and triggers a refetch of the fund data.
+ *
+ * ### Props
+ * - `isOpen`: A boolean indicating whether the modal is open or closed.
+ * - `hide`: A function to close the modal.
+ * - `refetchFunds`: A function to refetch the fund list after a successful operation.
+ * - `fund`: The current fund object being edited or `null` if creating a new fund.
+ * - `orgId`: The ID of the organization to which the fund belongs.
+ * - `mode`: The mode of the modal, either 'edit' or 'create'.
+ *
+ * ### State
+ * - `name`: The name of the fund.
+ * - `description`: The description of the fund.
+ * - `amount`: The amount associated with the fund.
+ * - `status`: The status of the fund (e.g., active, archived).
+ *
+ * ### Methods
+ * - `handleSubmit()`: Handles form submission, creates or updates the fund, and triggers a refetch of the fund list.
+ * - `handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)`: Updates the state based on user input.
+ *
+ * @returns  The rendered modal dialog.
+ */
+const FundModal: React.FC<InterfaceFundModal> = ({
+  isOpen,
+  hide,
+  refetchFunds,
+  fund,
+  orgId,
+  mode,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'funds',
+  });
+
+  const [formState, setFormState] = useState<InterfaceCreateFund>({
+    fundName: fund?.name ?? '',
+    fundRef: fund?.refrenceNumber ?? '',
+    isDefault: fund?.isDefault ?? false,
+    taxDeductible: fund?.taxDeductible ?? false,
+    isArchived: fund?.isArchived ?? false,
+  });
+
+  useEffect(() => {
+    setFormState({
+      fundName: fund?.name ?? '',
+      fundRef: fund?.refrenceNumber ?? '',
+      isDefault: fund?.isDefault ?? false,
+      taxDeductible: fund?.taxDeductible ?? false,
+      isArchived: fund?.isArchived ?? false,
+    });
+  }, [fund]);
+
+  const [createFund] = useMutation(CREATE_FUND_MUTATION);
+  const [updateFund] = useMutation(UPDATE_FUND_MUTATION);
+
+  const createFundHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    const { fundName, fundRef, isDefault, taxDeductible, isArchived } =
+      formState;
+    try {
+      await createFund({
+        variables: {
+          name: fundName,
+          refrenceNumber: fundRef,
+          organizationId: orgId,
+          taxDeductible,
+          isArchived,
+          isDefault,
+        },
+      });
+
+      setFormState({
+        fundName: '',
+        fundRef: '',
+        isDefault: false,
+        taxDeductible: false,
+        isArchived: false,
+      });
+      toast.success(t('fundCreated') as string);
+      refetchFunds();
+      hide();
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  /*istanbul ignore next*/
+  const updateFundHandler = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    const { fundName, fundRef, taxDeductible, isArchived, isDefault } =
+      formState;
+    try {
+      const updatedFields: { [key: string]: string | boolean } = {};
+      if (fundName != fund?.name) {
+        updatedFields.name = fundName;
+      }
+      if (fundRef != fund?.refrenceNumber) {
+        updatedFields.refrenceNumber = fundRef;
+      }
+      if (taxDeductible != fund?.taxDeductible) {
+        updatedFields.taxDeductible = taxDeductible;
+      }
+      if (isArchived != fund?.isArchived) {
+        updatedFields.isArchived = isArchived;
+      }
+      if (isDefault != fund?.isDefault) {
+        updatedFields.isDefault = isDefault;
+      }
+
+      await updateFund({
+        variables: {
+          id: fund?._id,
+          ...updatedFields,
+        },
+      });
+      setFormState({
+        fundName: '',
+        fundRef: '',
+        isDefault: false,
+        taxDeductible: false,
+        isArchived: false,
+      });
+      refetchFunds();
+      hide();
+      toast.success(t('fundUpdated') as string);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Modal className={styles.fundModal} show={isOpen} onHide={hide}>
+        <Modal.Header>
+          <p className={styles.titlemodal}>
+            {t(mode === 'create' ? 'fundCreate' : 'fundUpdate')}
+          </p>
+          <Button
+            variant="danger"
+            onClick={hide}
+            className={styles.modalCloseBtn}
+            data-testid="fundModalCloseBtn"
+          >
+            <i className="fa fa-times"></i>
+          </Button>
+        </Modal.Header>
+        <Modal.Body>
+          <Form
+            onSubmitCapture={
+              mode === 'create' ? createFundHandler : updateFundHandler
+            }
+            className="p-3"
+          >
+            <Form.Group className="d-flex mb-3 w-100">
+              <FormControl fullWidth>
+                <TextField
+                  label={t('fundName')}
+                  variant="outlined"
+                  className={`${styles.noOutline} w-100`}
+                  value={formState.fundName}
+                  onChange={(e) =>
+                    setFormState({
+                      ...formState,
+                      fundName: e.target.value,
+                    })
+                  }
+                />
+              </FormControl>
+            </Form.Group>
+            <Form.Group className="d-flex mb-3 w-100">
+              <FormControl fullWidth>
+                <TextField
+                  label={t('fundId')}
+                  variant="outlined"
+                  className={`${styles.noOutline} w-100`}
+                  value={formState.fundRef}
+                  onChange={(e) =>
+                    setFormState({
+                      ...formState,
+                      fundRef: e.target.value,
+                    })
+                  }
+                />
+              </FormControl>
+            </Form.Group>
+
+            <div
+              className={`d-flex mt-2 mb-3 flex-wrap ${mode === 'edit' ? 'justify-content-between' : 'justify-content-start gap-3'} `}
+            >
+              <Form.Group className="d-flex">
+                <label>{t('taxDeductible')} </label>
+                <Form.Switch
+                  type="checkbox"
+                  checked={formState.taxDeductible}
+                  data-testid="setTaxDeductibleSwitch"
+                  className="ms-2"
+                  onChange={() =>
+                    setFormState({
+                      ...formState,
+                      taxDeductible: !formState.taxDeductible,
+                    })
+                  }
+                />
+              </Form.Group>
+              <Form.Group className="d-flex">
+                <label>{t('default')} </label>
+                <Form.Switch
+                  type="checkbox"
+                  className="ms-2"
+                  data-testid="setDefaultSwitch"
+                  checked={formState.isDefault}
+                  onChange={() =>
+                    setFormState({
+                      ...formState,
+                      isDefault: !formState.isDefault,
+                    })
+                  }
+                />
+              </Form.Group>
+              {mode === 'edit' && (
+                <Form.Group className="d-flex">
+                  <label>{t('archived')} </label>
+                  <Form.Switch
+                    type="checkbox"
+                    checked={formState.isArchived}
+                    data-testid="archivedSwitch"
+                    className="ms-2"
+                    onChange={() =>
+                      setFormState({
+                        ...formState,
+                        isArchived: !formState.isArchived,
+                      })
+                    }
+                  />
+                </Form.Group>
+              )}
+            </div>
+            <Button
+              type="submit"
+              className={styles.greenregbtn}
+              data-testid="createFundFormSubmitBtn"
+            >
+              {t(mode === 'create' ? 'fundCreate' : 'fundUpdate')}
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+export default FundModal;
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.module.css b/src/screens/OrganizationFunds/OrganizationFunds.module.css
new file mode 100644
index 0000000000..aa9d89dfb1
--- /dev/null
+++ b/src/screens/OrganizationFunds/OrganizationFunds.module.css
@@ -0,0 +1,142 @@
+.list_box {
+  height: auto;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+.fundName {
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.modalHeader {
+  border: none;
+  padding-bottom: 0;
+}
+
+.label {
+  color: var(--bs-emphasis-color);
+}
+
+.fundModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.manageBtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  width: 45%;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+.btnsContainer {
+  display: flex;
+  margin: 2rem 0 2.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.test.tsx b/src/screens/OrganizationFunds/OrganizationFunds.test.tsx
new file mode 100644
index 0000000000..c6983e1d6d
--- /dev/null
+++ b/src/screens/OrganizationFunds/OrganizationFunds.test.tsx
@@ -0,0 +1,244 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/client/testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import OrganizationFunds from './OrganizationFunds';
+import { MOCKS, MOCKS_ERROR, NO_FUNDS } from './OrganizationFundsMocks';
+import type { ApolloLink } from '@apollo/client';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR, true);
+const link3 = new StaticMockLink(NO_FUNDS, true);
+
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.funds),
+);
+
+const renderOrganizationFunds = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgfunds/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route
+                  path="/orgfunds/:orgId"
+                  element={<OrganizationFunds />}
+                />
+                <Route
+                  path="/orgfundcampaign/orgId/fundId"
+                  element={<div data-testid="campaignScreen"></div>}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('OrganizationFunds Screen =>', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the Campaign Pledge screen', async () => {
+    renderOrganizationFunds(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchByName')).toBeInTheDocument();
+    });
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/orgfunds/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/orgfunds/" element={<OrganizationFunds />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('open and close Create Fund modal', async () => {
+    renderOrganizationFunds(link1);
+
+    const createFundBtn = await screen.findByTestId('createFundBtn');
+    expect(createFundBtn).toBeInTheDocument();
+    userEvent.click(createFundBtn);
+
+    await waitFor(() =>
+      expect(screen.getAllByText(translations.fundCreate)).toHaveLength(3),
+    );
+    userEvent.click(screen.getByTestId('fundModalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('fundModalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and close update fund modal', async () => {
+    renderOrganizationFunds(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchByName')).toBeInTheDocument();
+    });
+
+    const editFundBtn = await screen.findAllByTestId('editFundBtn');
+    await waitFor(() => expect(editFundBtn[0]).toBeInTheDocument());
+    userEvent.click(editFundBtn[0]);
+
+    await waitFor(() =>
+      expect(
+        screen.getAllByText(translations.fundUpdate)[0],
+      ).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('fundModalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('fundModalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('Search the Funds list by name', async () => {
+    renderOrganizationFunds(link1);
+    const searchField = await screen.findByTestId('searchByName');
+    fireEvent.change(searchField, {
+      target: { value: '2' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Fund 2')).toBeInTheDocument();
+      expect(screen.queryByText('Fund 1')).toBeNull();
+    });
+  });
+
+  it('should render the Fund screen with error', async () => {
+    renderOrganizationFunds(link2);
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the empty fund component', async () => {
+    renderOrganizationFunds(link3);
+    await waitFor(() =>
+      expect(screen.getByText(translations.noFundsFound)).toBeInTheDocument(),
+    );
+  });
+
+  it('Sort the Pledges list by Latest created Date', async () => {
+    renderOrganizationFunds(link1);
+
+    const sortBtn = await screen.findByTestId('filter');
+    expect(sortBtn).toBeInTheDocument();
+
+    fireEvent.click(sortBtn);
+    fireEvent.click(screen.getByTestId('createdAt_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Fund 1')).toBeInTheDocument();
+      expect(screen.queryByText('Fund 2')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('createdOn')[0]).toHaveTextContent(
+        '22/06/2024',
+      );
+    });
+  });
+
+  it('Sort the Pledges list by Earliest created Date', async () => {
+    renderOrganizationFunds(link1);
+
+    const sortBtn = await screen.findByTestId('filter');
+    expect(sortBtn).toBeInTheDocument();
+
+    fireEvent.click(sortBtn);
+    fireEvent.click(screen.getByTestId('createdAt_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Fund 1')).toBeInTheDocument();
+      expect(screen.queryByText('Fund 2')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('createdOn')[0]).toHaveTextContent(
+        '21/06/2024',
+      );
+    });
+  });
+
+  it('Click on Fund Name', async () => {
+    renderOrganizationFunds(link1);
+
+    const fundName = await screen.findAllByTestId('fundName');
+    expect(fundName[0]).toBeInTheDocument();
+    fireEvent.click(fundName[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('campaignScreen')).toBeInTheDocument();
+    });
+  });
+
+  it('Click on View Campaign', async () => {
+    renderOrganizationFunds(link1);
+
+    const viewBtn = await screen.findAllByTestId('viewBtn');
+    expect(viewBtn[0]).toBeInTheDocument();
+    fireEvent.click(viewBtn[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('campaignScreen')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx
new file mode 100644
index 0000000000..29ffb0d865
--- /dev/null
+++ b/src/screens/OrganizationFunds/OrganizationFunds.tsx
@@ -0,0 +1,383 @@
+import { useQuery } from '@apollo/client';
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+import { Stack } from '@mui/material';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import React, { useCallback, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import Loader from 'components/Loader/Loader';
+import FundModal from './FundModal';
+import { FUND_LIST } from 'GraphQl/Queries/fundQueries';
+import styles from './OrganizationFunds.module.css';
+import type { InterfaceFundInfo } from 'utils/interfaces';
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * `organizationFunds` component displays a list of funds for a specific organization,
+ * allowing users to search, sort, view and edit funds.
+ *
+ * This component utilizes the `DataGrid` from Material-UI to present the list of funds in a tabular format,
+ * and includes functionality for filtering and sorting. It also handles the opening and closing of modals
+ * for creating and editing.
+ *
+ * It includes:
+ * - A search input field to filter funds by name.
+ * - A dropdown menu to sort funds by creation date.
+ * - A button to create a new fund.
+ * - A table to display the list of funds with columns for fund details and actions.
+ * - Modals for creating and editing funds.
+ *
+ * ### GraphQL Queries
+ * - `FUND_LIST`: Fetches a list of funds for the given organization, filtered and sorted based on the provided parameters.
+ *
+ * ### Props
+ * - `orgId`: The ID of the organization whose funds are being managed.
+ *
+ * ### State
+ * - `fund`: The currently selected fund for editing or deletion.
+ * - `searchTerm`: The current search term used for filtering funds.
+ * - `sortBy`: The current sorting order for funds.
+ * - `modalState`: The state of the modals (edit/create).
+ * - `fundModalMode`: The mode of the fund modal (edit or create).
+ *
+ * ### Methods
+ * - `handleOpenModal(fund: InterfaceFundInfo | null, mode: 'edit' | 'create')`: Opens the fund modal with the given fund and mode.
+ * - `handleClick(fundId: string)`: Navigates to the campaign page for the specified fund.
+ *
+ * @returns The rendered component.
+ */
+const organizationFunds = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'funds',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const { orgId } = useParams();
+  const navigate = useNavigate();
+
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [fund, setFund] = useState<InterfaceFundInfo | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<'createdAt_ASC' | 'createdAt_DESC'>(
+    'createdAt_DESC',
+  );
+
+  const [modalState, setModalState] = useState<boolean>(false);
+  const [fundModalMode, setFundModalMode] = useState<'edit' | 'create'>(
+    'create',
+  );
+
+  const handleOpenModal = useCallback(
+    (fund: InterfaceFundInfo | null, mode: 'edit' | 'create'): void => {
+      setFund(fund);
+      setFundModalMode(mode);
+      setModalState(true);
+    },
+    [],
+  );
+
+  const {
+    data: fundData,
+    loading: fundLoading,
+    error: fundError,
+    refetch: refetchFunds,
+  }: {
+    data?: {
+      fundsByOrganization: InterfaceFundInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(FUND_LIST, {
+    variables: {
+      organizationId: orgId,
+      filter: searchTerm,
+      orderBy: sortBy,
+    },
+  });
+
+  const funds = useMemo(() => fundData?.fundsByOrganization ?? [], [fundData]);
+
+  const handleClick = (fundId: string): void => {
+    navigate(`/orgfundcampaign/${orgId}/${fundId}`);
+  };
+
+  if (fundLoading) {
+    return <Loader size="xl" />;
+  }
+  if (fundError) {
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occured while loading Funds
+            <br />
+            {fundError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: 'Sr. No.',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'fundName',
+      headerName: 'Fund Name',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="fundName"
+            onClick={() => handleClick(params.row._id as string)}
+          >
+            {params.row.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'createdBy',
+      headerName: 'Created By',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return params.row.creator.firstName + ' ' + params.row.creator.lastName;
+      },
+    },
+    {
+      field: 'createdOn',
+      headerName: 'Created On',
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 2,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="createdOn">
+            {dayjs(params.row.createdAt).format('DD/MM/YYYY')}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'status',
+      headerName: 'Status',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return params.row.isArchived ? 'Archived' : 'Active';
+      },
+    },
+    {
+      field: 'action',
+      headerName: 'Action',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              className="me-2 rounded"
+              data-testid="editFundBtn"
+              onClick={() =>
+                handleOpenModal(params.row as InterfaceFundInfo, 'edit')
+              }
+            >
+              <i className="fa fa-edit" />
+            </Button>
+          </>
+        );
+      },
+    },
+    {
+      field: 'assocCampaigns',
+      headerName: 'Associated Campaigns',
+      flex: 2,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Button
+            variant="outline-success"
+            size="sm"
+            className="rounded"
+            onClick={() => handleClick(params.row._id as string)}
+            data-testid="viewBtn"
+          >
+            <i className="fa fa-eye me-1" />
+            {t('viewCampaigns')}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchByName')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-testid="searchByName"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '9px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <div className="d-flex justify-space-between align-items-center">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_DESC')}
+                  data-testid="createdAt_DESC"
+                >
+                  {t('createdLatest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_ASC')}
+                  data-testid="createdAt_ASC"
+                >
+                  {t('createdEarliest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            <Button
+              variant="success"
+              onClick={() => handleOpenModal(null, 'create')}
+              style={{ marginTop: '11px' }}
+              data-testid="createFundBtn"
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('createFund')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noFundsFound')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={funds.map((fund, index) => ({
+          id: index + 1,
+          ...fund,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+      <FundModal
+        isOpen={modalState}
+        hide={() => setModalState(false)}
+        refetchFunds={refetchFunds}
+        fund={fund}
+        orgId={orgId}
+        mode={fundModalMode}
+      />
+    </div>
+  );
+};
+
+export default organizationFunds;
diff --git a/src/screens/OrganizationFunds/OrganizationFundsMocks.ts b/src/screens/OrganizationFunds/OrganizationFundsMocks.ts
new file mode 100644
index 0000000000..81e5a0fb64
--- /dev/null
+++ b/src/screens/OrganizationFunds/OrganizationFundsMocks.ts
@@ -0,0 +1,231 @@
+import {
+  CREATE_FUND_MUTATION,
+  UPDATE_FUND_MUTATION,
+} from 'GraphQl/Mutations/FundMutation';
+import { FUND_LIST } from 'GraphQl/Queries/fundQueries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: FUND_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'createdAt_DESC',
+        filter: '',
+      },
+    },
+    result: {
+      data: {
+        fundsByOrganization: [
+          {
+            _id: 'fundId',
+            name: 'Fund 1',
+            refrenceNumber: '1111',
+            taxDeductible: true,
+            isArchived: false,
+            isDefault: false,
+            createdAt: '2024-06-22',
+            organizationId: 'orgId',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+          {
+            _id: 'fundId2',
+            name: 'Fund 2',
+            refrenceNumber: '2222',
+            taxDeductible: true,
+            isArchived: true,
+            isDefault: false,
+            createdAt: '2024-06-21',
+            organizationId: 'orgId',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'createdAt_ASC',
+        filter: '',
+      },
+    },
+    result: {
+      data: {
+        fundsByOrganization: [
+          {
+            _id: 'fundId',
+            name: 'Fund 2',
+            refrenceNumber: '2222',
+            taxDeductible: true,
+            isArchived: true,
+            isDefault: false,
+            createdAt: '2024-06-21',
+            organizationId: 'orgId',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+          {
+            _id: 'fundId2',
+            name: 'Fund 1',
+            refrenceNumber: '1111',
+            taxDeductible: true,
+            isArchived: false,
+            isDefault: false,
+            createdAt: '2024-06-22',
+            organizationId: 'orgId',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: FUND_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'createdAt_DESC',
+        filter: '2',
+      },
+    },
+    result: {
+      data: {
+        fundsByOrganization: [
+          {
+            _id: 'fundId',
+            name: 'Fund 2',
+            refrenceNumber: '2222',
+            taxDeductible: true,
+            isArchived: true,
+            isDefault: false,
+            createdAt: '2024-06-21',
+            organizationId: 'orgId',
+            creator: {
+              _id: 'creatorId1',
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_FUND_MUTATION,
+      variables: {
+        name: 'Fund 2',
+        refrenceNumber: '2222',
+        taxDeductible: false,
+        isArchived: false,
+        isDefault: true,
+        organizationId: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        createFund: {
+          _id: '2222',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_FUND_MUTATION,
+      variables: {
+        id: 'fundId',
+        name: 'Fund 2',
+        refrenceNumber: '2222',
+        taxDeductible: false,
+        isArchived: true,
+        isDefault: true,
+      },
+    },
+    result: {
+      data: {
+        updateFund: {
+          _id: 'fundId',
+        },
+      },
+    },
+  },
+];
+
+export const NO_FUNDS = [
+  {
+    request: {
+      query: FUND_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'createdAt_DESC',
+        filter: '',
+      },
+    },
+    result: {
+      data: {
+        fundsByOrganization: [],
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: FUND_LIST,
+      variables: {
+        organizationId: 'orgId',
+        orderBy: 'createdAt_DESC',
+        filter: '',
+      },
+    },
+    error: new Error('Mock graphql error'),
+  },
+  {
+    request: {
+      query: CREATE_FUND_MUTATION,
+      variables: {
+        name: 'Fund 2',
+        refrenceNumber: '2222',
+        taxDeductible: false,
+        isArchived: false,
+        isDefault: true,
+        organizationId: 'orgId',
+      },
+    },
+    error: new Error('Mock graphql error'),
+  },
+  {
+    request: {
+      query: UPDATE_FUND_MUTATION,
+      variables: {
+        id: 'fundId',
+        name: 'Fund 2',
+        refrenceNumber: '2222',
+        taxDeductible: false,
+        isArchived: true,
+        isDefault: true,
+      },
+    },
+    error: new Error('Mock graphql error'),
+  },
+];
diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx
new file mode 100644
index 0000000000..750d831abf
--- /dev/null
+++ b/src/screens/OrganizationPeople/AddMember.tsx
@@ -0,0 +1,578 @@
+import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
+import { Check, Close, Search } from '@mui/icons-material';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { styled } from '@mui/material/styles';
+import {
+  ADD_MEMBER_MUTATION,
+  SIGNUP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  USERS_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
+import Loader from 'components/Loader/Loader';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Button, Dropdown, Form, InputGroup, Modal } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { Link, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+import type {
+  InterfaceQueryOrganizationsListObject,
+  InterfaceQueryUserListItem,
+} from 'utils/interfaces';
+import styles from '../../style/app.module.css';
+import Avatar from 'components/Avatar/Avatar';
+
+const StyledTableCell = styled(TableCell)(() => ({
+  [`&.${tableCellClasses.head}`]: {
+    backgroundColor: 'var(--table-head-bg, blue)',
+    color: 'var(--table-header-color, black)',
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+const StyledTableRow = styled(TableRow)(() => ({
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+}));
+
+/**
+ * AddMember component is used to add new members to the organization by selecting from
+ * the existing users or creating a new user.
+ * It uses the following queries and mutations:
+ *  ORGANIZATIONS_LIST,
+ *  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+ *  USERS_CONNECTION_LIST,
+ *  ADD_MEMBER_MUTATION,SIGNUP_MUTATION.
+ */
+function AddMember(): JSX.Element {
+  const { t: translateOrgPeople } = useTranslation('translation', {
+    keyPrefix: 'organizationPeople',
+  });
+
+  const { t: translateAddMember } = useTranslation('translation', {
+    keyPrefix: 'addMember',
+  });
+
+  const { t: tCommon } = useTranslation('common');
+
+  document.title = translateOrgPeople('title');
+
+  const [addUserModalisOpen, setAddUserModalIsOpen] = useState(false);
+
+  function openAddUserModal(): void {
+    setAddUserModalIsOpen(true);
+  }
+
+  const toggleDialogModal = (): void =>
+    setAddUserModalIsOpen(!addUserModalisOpen);
+
+  const [createNewUserModalisOpen, setCreateNewUserModalIsOpen] =
+    useState(false);
+  function openCreateNewUserModal(): void {
+    setCreateNewUserModalIsOpen(true);
+  }
+
+  function closeCreateNewUserModal(): void {
+    setCreateNewUserModalIsOpen(false);
+  }
+  const toggleCreateNewUserModal = (): void =>
+    setCreateNewUserModalIsOpen(!addUserModalisOpen);
+
+  const [addMember] = useMutation(ADD_MEMBER_MUTATION);
+
+  const createMember = async (userId: string): Promise<void> => {
+    try {
+      await addMember({
+        variables: {
+          userid: userId,
+          orgid: currentUrl,
+        },
+      });
+      toast.success(tCommon('addedSuccessfully', { item: 'Member' }) as string);
+      memberRefetch({
+        orgId: currentUrl,
+      });
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+        console.log(error.message);
+      }
+    }
+  };
+
+  const { orgId: currentUrl } = useParams();
+
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState<boolean>(false);
+
+  const togglePassword = (): void => setShowPassword(!showPassword);
+  const toggleConfirmPassword = (): void =>
+    setShowConfirmPassword(!showConfirmPassword);
+
+  const [userName, setUserName] = useState('');
+
+  const {
+    data: organizationData,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationsListObject[];
+    };
+  } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: currentUrl },
+  });
+
+  const getMembersId = (): string[] => {
+    if (memberData) {
+      const ids = memberData?.organizationsMemberConnection.edges.map(
+        (member: { _id: string }) => member._id,
+      );
+      return ids;
+    }
+    return [];
+  };
+
+  const { data: memberData, refetch: memberRefetch } = useLazyQuery(
+    ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+    {
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+        orgId: currentUrl,
+      },
+    },
+  )[1];
+
+  const {
+    data: allUsersData,
+    loading: allUsersLoading,
+    refetch: allUsersRefetch,
+  } = useQuery(USERS_CONNECTION_LIST, {
+    variables: {
+      id_not_in: getMembersId(),
+      firstName_contains: '',
+      lastName_contains: '',
+    },
+  });
+
+  useEffect(() => {
+    memberRefetch({
+      orgId: currentUrl,
+    });
+  });
+
+  const [registerMutation] = useMutation(SIGNUP_MUTATION);
+
+  const [createUserVariables, setCreateUserVariables] = React.useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const handleCreateUser = async (): Promise<void> => {
+    if (
+      !(
+        createUserVariables.email &&
+        createUserVariables.password &&
+        createUserVariables.firstName &&
+        createUserVariables.lastName
+      )
+    ) {
+      toast.error(translateOrgPeople('invalidDetailsMessage') as string);
+    } else if (
+      createUserVariables.password !== createUserVariables.confirmPassword
+    ) {
+      toast.error(translateOrgPeople('passwordNotMatch') as string);
+    } else {
+      try {
+        const registeredUser = await registerMutation({
+          variables: {
+            firstName: createUserVariables.firstName,
+            lastName: createUserVariables.lastName,
+            email: createUserVariables.email,
+            password: createUserVariables.password,
+            orgId: currentUrl,
+          },
+        });
+        const createdUserId = registeredUser?.data.signUp.user._id;
+
+        await createMember(createdUserId);
+
+        closeCreateNewUserModal();
+
+        setCreateUserVariables({
+          firstName: '',
+          lastName: '',
+          email: '',
+          password: '',
+          confirmPassword: '',
+        });
+      } catch (error: unknown) {
+        errorHandler(translateOrgPeople, error);
+      }
+    }
+  };
+
+  const handleFirstName = (e: ChangeEvent<HTMLInputElement>): void => {
+    const firstName = e.target.value;
+    setCreateUserVariables({ ...createUserVariables, firstName });
+  };
+
+  const handleLastName = (e: ChangeEvent<HTMLInputElement>): void => {
+    const lastName = e.target.value;
+    setCreateUserVariables({ ...createUserVariables, lastName });
+  };
+
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const email = e.target.value;
+    setCreateUserVariables({ ...createUserVariables, email });
+  };
+
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const password = e.target.value;
+    setCreateUserVariables({ ...createUserVariables, password });
+  };
+
+  const handleConfirmPasswordChange = (
+    e: ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const confirmPassword = e.target.value;
+    setCreateUserVariables({ ...createUserVariables, confirmPassword });
+  };
+
+  const handleUserModalSearchChange = (e: React.FormEvent): void => {
+    e.preventDefault();
+    const [firstName, lastName] = userName.split(' ');
+
+    const newFilterData = {
+      firstName_contains: firstName || '',
+      lastName_contains: lastName || '',
+    };
+
+    allUsersRefetch({
+      ...newFilterData,
+    });
+  };
+
+  return (
+    <>
+      <Dropdown>
+        <Dropdown.Toggle
+          variant="success"
+          id="dropdown-basic"
+          className={styles.dropdown}
+          data-testid="addMembers"
+        >
+          {translateOrgPeople('addMembers')}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item
+            id="existingUser"
+            data-value="existingUser"
+            data-name="existingUser"
+            data-testid="existingUser"
+            onClick={(): void => {
+              openAddUserModal();
+            }}
+          >
+            <Form.Label htmlFor="existingUser">
+              {translateOrgPeople('existingUser')}
+            </Form.Label>
+          </Dropdown.Item>
+          <Dropdown.Item
+            id="newUser"
+            data-value="newUser"
+            data-name="newUser"
+            data-testid="newUser"
+            onClick={(): void => {
+              openCreateNewUserModal();
+            }}
+          >
+            <label htmlFor="memberslist">{translateOrgPeople('newUser')}</label>
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      {/* Existing User Modal */}
+      <Modal
+        data-testid="addExistingUserModal"
+        show={addUserModalisOpen}
+        onHide={toggleDialogModal}
+        contentClassName={styles.modalContent}
+      >
+        <Modal.Header closeButton data-testid="pluginNotificationHeader">
+          <Modal.Title>{translateOrgPeople('addMembers')}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {allUsersLoading ? (
+            <Loader />
+          ) : (
+            <>
+              <div className={styles.input}>
+                <Form onSubmit={handleUserModalSearchChange}>
+                  <Form.Control
+                    type="name"
+                    id="searchUser"
+                    data-testid="searchUser"
+                    placeholder={translateOrgPeople('searchFullName')}
+                    autoComplete="off"
+                    className={styles.inputFieldModal}
+                    value={userName}
+                    onChange={(e): void => {
+                      const { value } = e.target;
+                      setUserName(value);
+                    }}
+                  />
+                  <Button
+                    type="submit"
+                    data-testid="submitBtn"
+                    className={styles.searchButton}
+                  >
+                    <Search className={styles.searchIcon} />
+                  </Button>
+                </Form>
+              </div>
+              <TableContainer component={Paper}>
+                <Table aria-label="customized table">
+                  <TableHead>
+                    <TableRow>
+                      <StyledTableCell>#</StyledTableCell>
+                      <StyledTableCell align="center">
+                        {translateAddMember('profile')}
+                      </StyledTableCell>
+                      <StyledTableCell align="center">
+                        {translateAddMember('user')}
+                      </StyledTableCell>
+                      <StyledTableCell align="center">
+                        {translateAddMember('addMember')}
+                      </StyledTableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {allUsersData &&
+                      allUsersData.users.length > 0 &&
+                      allUsersData.users.map(
+                        (
+                          userDetails: InterfaceQueryUserListItem,
+                          index: number,
+                        ) => (
+                          <StyledTableRow
+                            data-testid="user"
+                            key={userDetails.user._id}
+                          >
+                            <StyledTableCell component="th" scope="row">
+                              {index + 1}
+                            </StyledTableCell>
+                            <StyledTableCell
+                              align="center"
+                              data-testid="profileImage"
+                            >
+                              {userDetails.user.image ? (
+                                <img
+                                  src={userDetails.user.image ?? undefined}
+                                  alt="avatar"
+                                  className={styles.TableImage}
+                                />
+                              ) : (
+                                <Avatar
+                                  avatarStyle={styles.TableImage}
+                                  name={`${userDetails.user.firstName} ${userDetails.user.lastName}`}
+                                  data-testid="avatarImage"
+                                />
+                              )}
+                            </StyledTableCell>
+                            <StyledTableCell align="center">
+                              <Link
+                                className={`${styles.membername} ${styles.subtleBlueGrey}`}
+                                to={{
+                                  pathname: `/member/${currentUrl}`,
+                                }}
+                              >
+                                {userDetails.user.firstName +
+                                  ' ' +
+                                  userDetails.user.lastName}
+                                <br />
+                                {userDetails.user.email}
+                              </Link>
+                            </StyledTableCell>
+                            <StyledTableCell align="center">
+                              <Button
+                                onClick={() => {
+                                  createMember(userDetails.user._id);
+                                }}
+                                data-testid="addBtn"
+                                className={styles.addButton}
+                              >
+                                <i className={'fa fa-plus me-2'} />
+                                Add
+                              </Button>
+                            </StyledTableCell>
+                          </StyledTableRow>
+                        ),
+                      )}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </>
+          )}
+        </Modal.Body>
+      </Modal>
+
+      {/* New User Modal */}
+      <Modal
+        data-testid="addNewUserModal"
+        show={createNewUserModalisOpen}
+        onHide={toggleCreateNewUserModal}
+      >
+        <Modal.Header className={styles.createUserModalHeader}>
+          <Modal.Title>Create User</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="my-3">
+            <div className="row">
+              <div className="col-sm-6">
+                <h6>{translateOrgPeople('firstName')}</h6>
+                <InputGroup className="mt-2 mb-4">
+                  <Form.Control
+                    placeholder={translateOrgPeople('enterFirstName')}
+                    className={styles.borderNone}
+                    value={createUserVariables.firstName}
+                    onChange={handleFirstName}
+                    data-testid="firstNameInput"
+                  />
+                </InputGroup>
+              </div>
+              <div className="col-sm-6">
+                <h6>{translateOrgPeople('lastName')}</h6>
+                <InputGroup className="mt-2 mb-4">
+                  <Form.Control
+                    placeholder={translateOrgPeople('enterLastName')}
+                    className={styles.borderNone}
+                    value={createUserVariables.lastName}
+                    onChange={handleLastName}
+                    data-testid="lastNameInput"
+                  />
+                </InputGroup>
+              </div>
+            </div>
+            <h6>{translateOrgPeople('emailAddress')}</h6>
+            <InputGroup className="mt-2 mb-4">
+              <Form.Control
+                placeholder={translateOrgPeople('enterEmail')}
+                type="email"
+                className={styles.borderNone}
+                value={createUserVariables.email}
+                onChange={handleEmailChange}
+                data-testid="emailInput"
+              />
+              <InputGroup.Text
+                className={`${styles.colorPrimary} ${styles.borderNone}`}
+              >
+                <EmailOutlinedIcon className={`${styles.colorWhite}`} />
+              </InputGroup.Text>
+            </InputGroup>
+            <h6>{translateOrgPeople('password')}</h6>
+            <InputGroup className="mt-2 mb-4">
+              <Form.Control
+                placeholder={translateOrgPeople('enterPassword')}
+                type={showPassword ? 'text' : 'password'}
+                className={styles.borderNone}
+                value={createUserVariables.password}
+                onChange={handlePasswordChange}
+                data-testid="passwordInput"
+              />
+              <InputGroup.Text
+                className={`${styles.colorPrimary} ${styles.borderNone} ${styles.colorWhite}`}
+                onClick={togglePassword}
+                data-testid="showPassword"
+              >
+                {showPassword ? (
+                  <i className="fas fa-eye"></i>
+                ) : (
+                  <i className="fas fa-eye-slash"></i>
+                )}
+              </InputGroup.Text>
+            </InputGroup>
+            <h6>{translateOrgPeople('confirmPassword')}</h6>
+            <InputGroup className="mt-2 mb-4">
+              <Form.Control
+                placeholder={translateOrgPeople('enterConfirmPassword')}
+                type={showConfirmPassword ? 'text' : 'password'}
+                className={styles.borderNone}
+                value={createUserVariables.confirmPassword}
+                onChange={handleConfirmPasswordChange}
+                data-testid="confirmPasswordInput"
+              />
+              <InputGroup.Text
+                className={`${styles.colorPrimary} ${styles.borderNone} ${styles.colorWhite}`}
+                onClick={toggleConfirmPassword}
+                data-testid="showConfirmPassword"
+              >
+                {showConfirmPassword ? (
+                  <i className="fas fa-eye"></i>
+                ) : (
+                  <i className="fas fa-eye-slash"></i>
+                )}
+              </InputGroup.Text>
+            </InputGroup>
+            <h6>{translateOrgPeople('organization')}</h6>
+            <InputGroup className="mt-2 mb-4">
+              <Form.Control
+                className={styles.borderNone}
+                value={organizationData?.organizations[0]?.name}
+                data-testid="organizationName"
+                disabled
+              />
+            </InputGroup>
+          </div>
+          <div className={styles.createUserActionBtns}>
+            <Button
+              className={`${styles.borderNone}`}
+              variant="danger"
+              onClick={closeCreateNewUserModal}
+              data-testid="closeBtn"
+              style={{
+                backgroundColor: 'var(--delete-button-bg)',
+                color: 'var(--delete-button-color)',
+              }}
+            >
+              <Close className={styles.closeButton} />
+              {translateOrgPeople('cancel')}
+            </Button>
+            <Button
+              className={`${styles.colorPrimary} ${styles.borderNone}`}
+              variant="success"
+              onClick={handleCreateUser}
+              data-testid="createBtn"
+              style={{
+                backgroundColor: 'var(--search-button-bg)',
+                border: '1px solid var(--dropdown-border-color)',
+              }}
+            >
+              <Check className={styles.searchIcon} />
+              {translateOrgPeople('create')}
+            </Button>
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default AddMember;
diff --git a/src/screens/OrganizationPeople/MockDataTypes.ts b/src/screens/OrganizationPeople/MockDataTypes.ts
new file mode 100644
index 0000000000..c12bb05531
--- /dev/null
+++ b/src/screens/OrganizationPeople/MockDataTypes.ts
@@ -0,0 +1,77 @@
+import type { DocumentNode } from 'graphql';
+import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
+type User = {
+  __typename: string;
+  firstName: string;
+  lastName: string;
+  image: string | null;
+  _id: string;
+  email: string;
+  createdAt: string;
+  joinedOrganizations: {
+    __typename: string;
+    _id: string;
+    name?: string;
+    creator?: {
+      _id: string;
+      firstName: string;
+      lastName: string;
+      email: string;
+      image: null;
+      createdAt: string;
+    };
+  }[];
+};
+type Edge = {
+  _id?: string;
+  firstName?: string;
+  lastName?: string;
+  image?: string | null;
+  email?: string;
+  createdAt?: string;
+  user?: Edge;
+};
+export type TestMock = {
+  request: {
+    query: DocumentNode;
+    variables: {
+      id?: string;
+      orgId?: string;
+      orgid?: string;
+      firstNameContains?: string;
+      lastNameContains?: string;
+      firstName_contains?: string;
+      lastName_contains?: string;
+      id_not_in?: string[];
+      userid?: string;
+      firstName?: string;
+      lastName?: string;
+      email?: string;
+      password?: string;
+    };
+  };
+  result: {
+    __typename?: string;
+    data: {
+      __typename?: string;
+      createMember?: {
+        __typename: string;
+        _id: string;
+      };
+      signUp?: {
+        user?: {
+          _id: string;
+        };
+        accessToken?: string;
+        refreshToken?: string;
+      };
+      users?: { user?: User }[];
+      organizations?: InterfaceQueryOrganizationsListObject[];
+      organizationsMemberConnection?: {
+        edges?: Edge[];
+        user?: Edge[];
+      };
+    };
+  };
+  newData?: () => TestMock['result'];
+};
diff --git a/src/screens/OrganizationPeople/OrganizationPeople.test.tsx b/src/screens/OrganizationPeople/OrganizationPeople.test.tsx
new file mode 100644
index 0000000000..a840f1e1f0
--- /dev/null
+++ b/src/screens/OrganizationPeople/OrganizationPeople.test.tsx
@@ -0,0 +1,1435 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import OrganizationPeople from './OrganizationPeople';
+import { store } from 'state/store';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  USERS_CONNECTION_LIST,
+  USER_LIST_FOR_TABLE,
+} from 'GraphQl/Queries/Queries';
+import 'jest-location-mock';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import {
+  ADD_MEMBER_MUTATION,
+  SIGNUP_MUTATION,
+} from 'GraphQl/Mutations/mutations';
+import type { TestMock } from './MockDataTypes';
+
+const createMemberMock = (
+  orgId = '',
+  firstNameContains = '',
+  lastNameContains = '',
+): TestMock => ({
+  request: {
+    query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+    variables: {
+      orgId: orgId,
+      firstNameContains,
+      lastNameContains,
+    },
+  },
+  result: {
+    data: {
+      organizationsMemberConnection: {
+        edges: [
+          {
+            _id: '64001660a711c62d5b4076a2',
+            firstName: 'Aditya',
+            lastName: 'Memberguy',
+            image: null,
+            email: 'member@gmail.com',
+            createdAt: '2023-03-02T03:22:08.101Z',
+          },
+        ],
+      },
+    },
+  },
+  newData: () => ({
+    data: {
+      organizationsMemberConnection: {
+        edges: [
+          {
+            user: {
+              __typename: 'User',
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Memberguy',
+              image: null,
+              email: 'member@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          },
+        ],
+      },
+    },
+  }),
+});
+
+const createAdminMock = (
+  orgId = '',
+  firstNameContains = '',
+  lastNameContains = '',
+): TestMock => ({
+  request: {
+    query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+    variables: {
+      orgId,
+      firstNameContains,
+      lastNameContains,
+    },
+  },
+  result: {
+    data: {
+      organizationsMemberConnection: {
+        edges: [
+          {
+            user: {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Adminguy',
+              image: null,
+              email: 'admin@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          },
+        ],
+      },
+    },
+  },
+  newData: () => ({
+    data: {
+      organizationsMemberConnection: {
+        __typename: 'UserConnection',
+        edges: [
+          {
+            user: {
+              __typename: 'User',
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Adminguy',
+              image: null,
+              email: 'admin@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+              lol: true,
+            },
+          },
+        ],
+      },
+    },
+  }),
+});
+
+const createUserMock = (
+  firstNameContains = '',
+  lastNameContains = '',
+): TestMock => ({
+  request: {
+    query: USER_LIST_FOR_TABLE,
+    variables: {
+      firstNameContains,
+      lastNameContains,
+    },
+  },
+  result: {
+    data: {
+      users: [
+        {
+          user: {
+            __typename: 'User',
+            firstName: 'Aditya',
+            lastName: 'Userguy',
+            image: 'tempUrl',
+            _id: '64001660a711c62d5b4076a2',
+            email: 'adidacreator1@gmail.com',
+            createdAt: '2023-03-02T03:22:08.101Z',
+            joinedOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '6401ff65ce8e8406b8f07af1',
+              },
+            ],
+          },
+        },
+        {
+          user: {
+            __typename: 'User',
+            firstName: 'Aditya',
+            lastName: 'Userguytwo',
+            image: 'tempUrl',
+            _id: '6402030dce8e8406b8f07b0e',
+            email: 'adi1@gmail.com',
+            createdAt: '2023-03-03T14:24:13.084Z',
+            joinedOrganizations: [
+              {
+                __typename: 'Organization',
+                _id: '6401ff65ce8e8406b8f07af2',
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+});
+
+const MOCKS: TestMock[] = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: {
+        id: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgid',
+            image: '',
+            creator: {
+              firstName: 'firstName',
+              lastName: 'lastName',
+              email: 'email',
+            },
+            name: 'name',
+            description: 'description',
+            userRegistrationRequired: false,
+            visibleInSearch: false,
+            address: {
+              city: 'string',
+              countryCode: 'string',
+              dependentLocality: 'string',
+              line1: 'string',
+              line2: 'string',
+              postalCode: 'string',
+              sortingCode: 'string',
+              state: 'string',
+            },
+            members: [
+              {
+                _id: 'id',
+                firstName: 'firstName',
+                lastName: 'lastName',
+                email: 'email',
+              },
+            ],
+            admins: [
+              {
+                _id: 'id',
+                firstName: 'firstName',
+                lastName: 'lastName',
+                email: 'email',
+                createdAt: '12-03-2024',
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: 'id',
+                user: {
+                  firstName: 'firstName',
+                  lastName: 'lastName',
+                  email: 'email',
+                },
+              },
+            ],
+            blockedUsers: [
+              {
+                _id: 'id',
+                firstName: 'firstName',
+                lastName: 'lastName',
+                email: 'email',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+
+  {
+    //These are mocks for 1st query (member list)
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: 'orgid',
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Memberguy',
+              image: null,
+              email: 'member@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+    newData: () => ({
+      //A function if multiple request are sent
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Memberguy',
+              image: null,
+              email: 'member@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    }),
+  },
+
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: 'orgid',
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Adminguy',
+              image: null,
+              email: 'admin@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+    newData: () => ({
+      data: {
+        organizationsMemberConnection: {
+          __typename: 'UserConnection',
+          edges: [
+            {
+              __typename: 'User',
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Aditya',
+              lastName: 'Adminguy',
+              image: null,
+              email: 'admin@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+              lol: true,
+            },
+          ],
+        },
+      },
+    }),
+  },
+
+  {
+    //This is mock for user list
+    request: {
+      query: USER_LIST_FOR_TABLE,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              __typename: 'User',
+              firstName: 'Aditya',
+              lastName: 'Userguy',
+              image: 'tempUrl',
+              _id: '64001660a711c62d5b4076a2',
+              email: 'adidacreator1@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af1',
+                },
+              ],
+            },
+          },
+          {
+            user: {
+              __typename: 'User',
+              firstName: 'Aditya',
+              lastName: 'Userguytwo',
+              image: 'tempUrl',
+              _id: '6402030dce8e8406b8f07b0e',
+              email: 'adi1@gmail.com',
+              createdAt: '2023-03-03T14:24:13.084Z',
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+
+  createMemberMock('orgid', 'Aditya', ''),
+  createMemberMock('orgid', '', 'Memberguy'),
+  createMemberMock('orgid', 'Aditya', 'Memberguy'),
+
+  createAdminMock('orgid', 'Aditya', ''),
+  createAdminMock('orgid', '', 'Adminguy'),
+  createAdminMock('orgid', 'Aditya', 'Adminguy'),
+
+  createUserMock('Aditya', ''),
+  createUserMock('', 'Userguytwo'),
+  createUserMock('Aditya', 'Userguytwo'),
+
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        id_not_in: ['64001660a711c62d5b4076a2'],
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              firstName: 'Vyvyan',
+              lastName: 'Kerry',
+              image: 'tempUrl',
+              _id: '65378abd85008f171cf2990d',
+              email: 'testadmin1@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+          },
+          {
+            user: {
+              firstName: 'Nandika',
+              lastName: 'Agrawal',
+              image: null,
+              _id: '65378abd85008f171cf2990d',
+              email: 'testadmin1@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: SIGNUP_MUTATION,
+      variables: {
+        firstName: 'Disha',
+        lastName: 'Talreja',
+        email: 'test@gmail.com',
+        password: 'dishatalreja',
+        orgId: 'orgId',
+      },
+    },
+    result: {
+      data: {
+        signUp: {
+          user: {
+            _id: '',
+          },
+          accessToken: 'accessToken',
+          refreshToken: 'refreshToken',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: ADD_MEMBER_MUTATION,
+      variables: {
+        userid: '65378abd85008f171cf2990d',
+        orgid: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        createMember: {
+          _id: '6437904485008f171cf29924',
+          __typename: 'Organization',
+        },
+      },
+    },
+  },
+];
+
+const EMPTYMOCKS: TestMock[] = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: {
+        id: 'orgid',
+      },
+    },
+    result: {
+      data: {
+        organizations: [],
+      },
+    },
+  },
+
+  {
+    //These are mocks for 1st query (member list)
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: 'orgid',
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [],
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: 'orgid',
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [],
+        },
+      },
+    },
+  },
+
+  {
+    //This is mock for user list
+    request: {
+      query: USER_LIST_FOR_TABLE,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(EMPTYMOCKS, true);
+async function wait(ms = 2): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+const linkURL = 'orgid';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: linkURL }),
+}));
+
+// TODO - REMOVE THE NEXT LINE IT IS TO SUPPRESS THE ERROR
+// FOR THE FIRST TEST WHICH CAME OUT OF NOWHERE
+console.error = jest.fn();
+
+describe('Organization People Page', () => {
+  const searchData = {
+    fullNameMember: 'Aditya Memberguy',
+    fullNameAdmin: 'Aditya Adminguy',
+    fullNameUser: 'Aditya Userguytwo',
+    location: 'Delhi, India',
+    event: 'Event',
+  };
+
+  test('Correct mock data should be queried', async () => {
+    window.location.assign('/orgpeople/orgid');
+
+    const dataQuery1 =
+      MOCKS[1]?.result?.data?.organizationsMemberConnection?.edges;
+    expect(dataQuery1).toEqual([
+      {
+        _id: '64001660a711c62d5b4076a2',
+        firstName: 'Aditya',
+        lastName: 'Memberguy',
+        image: null,
+        email: 'member@gmail.com',
+        createdAt: '2023-03-02T03:22:08.101Z',
+      },
+    ]);
+
+    const dataQuery2 =
+      MOCKS[2]?.result?.data?.organizationsMemberConnection?.edges;
+
+    const dataQuery3 = MOCKS[3]?.result?.data?.users;
+
+    expect(dataQuery3).toEqual([
+      {
+        user: {
+          __typename: 'User',
+          firstName: 'Aditya',
+          lastName: 'Userguy',
+          image: 'tempUrl',
+          _id: '64001660a711c62d5b4076a2',
+          email: 'adidacreator1@gmail.com',
+          createdAt: '2023-03-02T03:22:08.101Z',
+          joinedOrganizations: [
+            {
+              __typename: 'Organization',
+              _id: '6401ff65ce8e8406b8f07af1',
+            },
+          ],
+        },
+      },
+      {
+        user: {
+          __typename: 'User',
+          firstName: 'Aditya',
+          lastName: 'Userguytwo',
+          image: 'tempUrl',
+          _id: '6402030dce8e8406b8f07b0e',
+          email: 'adi1@gmail.com',
+          createdAt: '2023-03-03T14:24:13.084Z',
+          joinedOrganizations: [
+            {
+              __typename: 'Organization',
+              _id: '6401ff65ce8e8406b8f07af2',
+            },
+          ],
+        },
+      },
+    ]);
+
+    expect(dataQuery2).toEqual([
+      {
+        _id: '64001660a711c62d5b4076a2',
+        firstName: 'Aditya',
+        lastName: 'Adminguy',
+        image: null,
+        email: 'admin@gmail.com',
+        createdAt: '2023-03-02T03:22:08.101Z',
+      },
+    ]);
+
+    expect(window.location).toBeAt('/orgpeople/orgid');
+  });
+
+  test('It is necessary to query the correct mock data.', async () => {
+    window.location.assign('/orgpeople/orgid');
+
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    expect(container.textContent).not.toBe('Loading data...');
+
+    await wait();
+
+    expect(window.location).toBeAt('/orgpeople/orgid');
+  });
+
+  test('Testing MEMBERS list', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    const dropdownToggles = screen.getAllByTestId('role');
+
+    dropdownToggles.forEach((dropdownToggle) => {
+      userEvent.click(dropdownToggle);
+    });
+
+    const memebersDropdownItem = screen.getByTestId('members');
+    userEvent.click(memebersDropdownItem);
+    await wait();
+
+    const findtext = screen.getByText(/Aditya Memberguy/i);
+    await wait();
+    expect(findtext).toBeInTheDocument();
+
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Full Name/i),
+      searchData.fullNameMember,
+    );
+    await wait();
+    expect(screen.getByPlaceholderText(/Enter Full Name/i)).toHaveValue(
+      searchData.fullNameMember,
+    );
+
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/orgid');
+  });
+
+  test('Testing MEMBERS list with filters', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const fullNameInput = screen.getByPlaceholderText(/Enter Full Name/i);
+
+    // Only First Name
+    userEvent.type(fullNameInput, searchData.fullNameMember);
+    await wait();
+
+    let findtext = screen.getByText(/Aditya Memberguy/i);
+    await wait();
+    expect(findtext).toBeInTheDocument();
+
+    findtext = screen.getByText(/Aditya Memberguy/i);
+    await wait();
+    expect(findtext).toBeInTheDocument();
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/orgid');
+  });
+
+  test('Testing ADMIN LIST', async () => {
+    window.location.assign('/orgpeople/orgid');
+
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    // Get all dropdown toggles by test id
+    const dropdownToggles = screen.getAllByTestId('role');
+
+    // Click the dropdown toggle to open the dropdown menu
+    dropdownToggles.forEach((dropdownToggle) => {
+      userEvent.click(dropdownToggle);
+    });
+
+    // Click the "Admin" dropdown item
+    const adminDropdownItem = screen.getByTestId('admins');
+    userEvent.click(adminDropdownItem);
+
+    // Wait for any asynchronous operations to complete
+    await wait();
+    // remove this comment when table fecthing functionality is fixed
+    // Assert that the "Aditya Adminguy" text is present
+    // const findtext = screen.getByText('Aditya Adminguy');
+    // expect(findtext).toBeInTheDocument();
+
+    // Type in the full name input field
+    userEvent.type(
+      screen.getByPlaceholderText(/Enter Full Name/i),
+      searchData.fullNameAdmin,
+    );
+
+    // Wait for any asynchronous operations to complete
+    await wait();
+
+    // Assert the value of the full name input field
+    expect(screen.getByPlaceholderText(/Enter Full Name/i)).toHaveValue(
+      searchData.fullNameAdmin,
+    );
+    await wait();
+
+    // Wait for any asynchronous operations to complete
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/orgid');
+  });
+
+  test('Testing ADMIN list with filters', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('role'));
+    await wait();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('admins'));
+    await wait();
+
+    // Type the full name into the input field
+    const fullNameInput = screen.getByPlaceholderText(/Enter Full Name/i);
+    userEvent.type(fullNameInput, searchData.fullNameAdmin);
+
+    // Wait for the results to update
+    await wait();
+    const btn = screen.getByTestId('searchbtn');
+    userEvent.click(btn);
+    // remove this comment when table fecthing functionality is fixed
+    // Check if the expected name is present in the results
+    // let findtext = screen.getByText(/Aditya Adminguy/i);
+    // expect(findtext).toBeInTheDocument();
+
+    // Ensure that the name is still present after filtering
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/orgid');
+  });
+
+  test('Testing add existing user modal', async () => {
+    window.location.assign('/orgpeople/6401ff65ce8e8406b8f07af1');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+
+    expect(screen.getByTestId('existingUser')).toBeInTheDocument();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('existingUser'));
+    await wait();
+
+    expect(
+      screen.getAllByTestId('addExistingUserModal').length,
+    ).toBeGreaterThan(0);
+    await wait();
+
+    const addBtn = screen.getAllByTestId('addBtn');
+    userEvent.click(addBtn[0]);
+  });
+
+  test('Open and search existing user', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('existingUser'));
+    await wait();
+
+    expect(screen.getByTestId('addExistingUserModal')).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId('searchUser'), {
+      target: { value: 'Disha' },
+    });
+  });
+
+  test('Open and close add new user modal', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('newUser'));
+    await wait();
+
+    expect(screen.getByTestId('addNewUserModal')).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('closeBtn'));
+  });
+
+  test('Testing add new user modal', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('newUser'));
+    await wait();
+
+    expect(screen.getByTestId('addNewUserModal')).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId('firstNameInput'), {
+      target: { value: 'Disha' },
+    });
+    expect(screen.getByTestId('firstNameInput')).toHaveValue('Disha');
+
+    fireEvent.change(screen.getByTestId('lastNameInput'), {
+      target: { value: 'Talreja' },
+    });
+    expect(screen.getByTestId('lastNameInput')).toHaveValue('Talreja');
+
+    fireEvent.change(screen.getByTestId('emailInput'), {
+      target: { value: 'test@gmail.com' },
+    });
+    expect(screen.getByTestId('emailInput')).toHaveValue('test@gmail.com');
+
+    fireEvent.change(screen.getByTestId('passwordInput'), {
+      target: { value: 'dishatalreja' },
+    });
+    userEvent.click(screen.getByTestId('showPassword'));
+    expect(screen.getByTestId('passwordInput')).toHaveValue('dishatalreja');
+
+    fireEvent.change(screen.getByTestId('confirmPasswordInput'), {
+      target: { value: 'dishatalreja' },
+    });
+    userEvent.click(screen.getByTestId('showConfirmPassword'));
+    expect(screen.getByTestId('confirmPasswordInput')).toHaveValue(
+      'dishatalreja',
+    );
+
+    userEvent.click(screen.getByTestId('createBtn'));
+  });
+
+  test('Throw invalid details error in add new user modal', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('newUser'));
+    await wait();
+
+    expect(screen.getByTestId('addNewUserModal')).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId('firstNameInput'), {
+      target: { value: 'Disha' },
+    });
+    expect(screen.getByTestId('firstNameInput')).toHaveValue('Disha');
+
+    fireEvent.change(screen.getByTestId('lastNameInput'), {
+      target: { value: 'Talreja' },
+    });
+    expect(screen.getByTestId('lastNameInput')).toHaveValue('Talreja');
+
+    fireEvent.change(screen.getByTestId('emailInput'), {
+      target: { value: 'test@gmail.com' },
+    });
+    expect(screen.getByTestId('emailInput')).toHaveValue('test@gmail.com');
+
+    fireEvent.change(screen.getByTestId('passwordInput'), {
+      target: { value: 'dishatalreja' },
+    });
+    userEvent.click(screen.getByTestId('showPassword'));
+    expect(screen.getByTestId('passwordInput')).toHaveValue('dishatalreja');
+
+    fireEvent.change(screen.getByTestId('confirmPasswordInput'), {
+      target: { value: 'disha' },
+    });
+    userEvent.click(screen.getByTestId('showConfirmPassword'));
+    expect(screen.getByTestId('confirmPasswordInput')).toHaveValue('disha');
+
+    userEvent.click(screen.getByTestId('createBtn'));
+  });
+
+  test('Throw passwordNotMatch error in add new user modal', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // Wait for the component to finish rendering
+    await wait();
+
+    // Click on the dropdown toggle to open the menu
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+
+    // Click on the "Admins" option in the dropdown menu
+    userEvent.click(screen.getByTestId('newUser'));
+    await wait();
+
+    expect(screen.getByTestId('addNewUserModal')).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId('firstNameInput'), {
+      target: { value: 'Disha' },
+    });
+    expect(screen.getByTestId('firstNameInput')).toHaveValue('Disha');
+
+    fireEvent.change(screen.getByTestId('lastNameInput'), {
+      target: { value: 'Talreja' },
+    });
+    expect(screen.getByTestId('lastNameInput')).toHaveValue('Talreja');
+
+    fireEvent.change(screen.getByTestId('passwordInput'), {
+      target: { value: 'dishatalreja' },
+    });
+    userEvent.click(screen.getByTestId('showPassword'));
+    expect(screen.getByTestId('passwordInput')).toHaveValue('dishatalreja');
+
+    fireEvent.change(screen.getByTestId('confirmPasswordInput'), {
+      target: { value: 'dishatalreja' },
+    });
+    userEvent.click(screen.getByTestId('showConfirmPassword'));
+    expect(screen.getByTestId('confirmPasswordInput')).toHaveValue(
+      'dishatalreja',
+    );
+
+    userEvent.click(screen.getByTestId('createBtn'));
+  });
+
+  test('Testing USERS list', async () => {
+    window.location.assign('/orgpeople/6401ff65ce8e8406b8f07af1');
+
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const orgUsers = MOCKS[3]?.result?.data?.users;
+    expect(orgUsers?.length).toBe(2);
+
+    const dropdownToggles = screen.getAllByTestId('role');
+
+    dropdownToggles.forEach((dropdownToggle) => {
+      userEvent.click(dropdownToggle);
+    });
+
+    const usersDropdownItem = screen.getByTestId('users');
+    userEvent.click(usersDropdownItem);
+    await wait();
+    const btn = screen.getByTestId('searchbtn');
+    userEvent.click(btn);
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/6401ff65ce8e8406b8f07af1');
+  });
+
+  test('Testing USERS list with filters', async () => {
+    window.location.assign('/orgpeople/6401ff65ce8e8406b8f07af2');
+
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    const fullNameInput = screen.getByPlaceholderText(/Enter Full Name/i);
+
+    // Only Full Name
+    userEvent.type(fullNameInput, searchData.fullNameUser);
+    const btn = screen.getByTestId('searchbtn');
+    userEvent.click(btn);
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/6401ff65ce8e8406b8f07af2');
+  });
+
+  test('Add Member component renders', async () => {
+    render(
+      <MockedProvider
+        addTypename={true}
+        link={link}
+        defaultOptions={{
+          watchQuery: { fetchPolicy: 'no-cache' },
+          query: { fetchPolicy: 'no-cache' },
+        }}
+      >
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    userEvent.click(screen.getByTestId('addMembers'));
+    await wait();
+    userEvent.click(screen.getByTestId('existingUser'));
+    await wait();
+    const btn = screen.getByTestId('submitBtn');
+    userEvent.click(btn);
+  });
+
+  test('Datagrid renders with members data', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrganizationPeople />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const dataGrid = screen.getByRole('grid');
+    expect(dataGrid).toBeInTheDocument();
+    const removeButtons = screen.getAllByTestId('removeMemberModalBtn');
+    userEvent.click(removeButtons[0]);
+  });
+
+  test('Datagrid renders with admin data', async () => {
+    window.location.assign('/orgpeople/orgid');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrganizationPeople />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const dropdownToggles = screen.getAllByTestId('role');
+    dropdownToggles.forEach((dropdownToggle) => {
+      userEvent.click(dropdownToggle);
+    });
+    const adminDropdownItem = screen.getByTestId('admins');
+    userEvent.click(adminDropdownItem);
+    await wait();
+    const removeButtons = screen.getAllByTestId('removeAdminModalBtn');
+    userEvent.click(removeButtons[0]);
+  });
+
+  test('No Mock Data test', async () => {
+    window.location.assign('/orgpeople/orgid');
+
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationPeople />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(window.location).toBeAt('/orgpeople/orgid');
+    expect(screen.queryByText(/Nothing Found !!/i)).toBeInTheDocument();
+  });
+});
+
+test('Open and check if profile image is displayed for existing user', async () => {
+  window.location.assign('/orgpeople/orgid');
+  render(
+    <MockedProvider
+      addTypename={true}
+      link={link}
+      defaultOptions={{
+        watchQuery: { fetchPolicy: 'no-cache' },
+        query: { fetchPolicy: 'no-cache' },
+      }}
+    >
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <OrganizationPeople />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>
+    </MockedProvider>,
+  );
+
+  // Wait for the component to finish rendering
+  await wait();
+
+  // Click on the dropdown toggle to open the menu
+  userEvent.click(screen.getByTestId('addMembers'));
+  await wait();
+
+  // Click on the "Admins" option in the dropdown menu
+  userEvent.click(screen.getByTestId('existingUser'));
+  await wait();
+
+  expect(screen.getByTestId('addExistingUserModal')).toBeInTheDocument();
+  await wait();
+
+  expect(screen.getAllByTestId('user').length).toBeGreaterThan(0);
+  await wait();
+
+  // Check if the image is rendered
+  expect(screen.getAllByTestId('profileImage').length).toBeGreaterThan(0);
+  await wait();
+
+  const images = await screen.findAllByAltText('avatar');
+  expect(images.length).toBeGreaterThan(0);
+  await wait();
+
+  const avatarImages = await screen.findAllByAltText('Dummy Avatar');
+  expect(avatarImages.length).toBeGreaterThan(0);
+  await wait();
+});
diff --git a/src/screens/OrganizationPeople/OrganizationPeople.tsx b/src/screens/OrganizationPeople/OrganizationPeople.tsx
new file mode 100644
index 0000000000..36efdba63c
--- /dev/null
+++ b/src/screens/OrganizationPeople/OrganizationPeople.tsx
@@ -0,0 +1,482 @@
+import { useLazyQuery } from '@apollo/client';
+import { Delete, Search, Sort } from '@mui/icons-material';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  USER_LIST_FOR_TABLE,
+} from 'GraphQl/Queries/Queries';
+import Loader from 'components/Loader/Loader';
+import OrgAdminListCard from 'components/OrgAdminListCard/OrgAdminListCard';
+import OrgPeopleListCard from 'components/OrgPeopleListCard/OrgPeopleListCard';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import AddMember from './AddMember';
+import styles from '../../style/app.module.css';
+import { DataGrid } from '@mui/x-data-grid';
+import type { GridColDef, GridCellParams } from '@mui/x-data-grid';
+import { Stack } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+
+/**
+ * OrganizationPeople component is used to display the list of members, admins and users of the organization.
+ * It also provides the functionality to search the members, admins and users by their full name.
+ * It also provides the functionality to remove the members and admins from the organization.
+ * @returns JSX.Element which contains the list of members, admins and users of the organization.
+ */
+function organizationPeople(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationPeople',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  document.title = t('title');
+
+  const location = useLocation();
+  const role = location?.state;
+
+  const { orgId: currentUrl } = useParams();
+
+  const [state, setState] = useState(role?.role || 0);
+
+  const [filterData, setFilterData] = useState({
+    firstName_contains: '',
+    lastName_contains: '',
+  });
+  const [adminFilteredData, setAdminFilteredData] = useState();
+
+  const [userName, setUserName] = useState('');
+  const [showRemoveModal, setShowRemoveModal] = React.useState(false);
+  const [selectedAdminId, setSelectedAdminId] = React.useState<
+    string | undefined
+  >();
+  const [selectedMemId, setSelectedMemId] = React.useState<
+    string | undefined
+  >();
+  const toggleRemoveModal = (): void => {
+    setShowRemoveModal((prev) => !prev);
+  };
+  const toggleRemoveMemberModal = (id: string): void => {
+    setSelectedMemId(id);
+    setSelectedAdminId(undefined);
+    toggleRemoveModal();
+  };
+  const toggleRemoveAdminModal = (id: string): void => {
+    setSelectedAdminId(id);
+    setSelectedMemId(undefined);
+    toggleRemoveModal();
+  };
+
+  const {
+    data: memberData,
+    loading: memberLoading,
+    error: memberError,
+    refetch: memberRefetch,
+  } = useLazyQuery(ORGANIZATIONS_MEMBER_CONNECTION_LIST, {
+    variables: {
+      firstName_contains: '',
+      lastName_contains: '',
+      orgId: currentUrl,
+    },
+  })[1];
+
+  const {
+    data: adminData,
+    loading: adminLoading,
+    error: adminError,
+    refetch: adminRefetch,
+  } = useLazyQuery(ORGANIZATIONS_LIST, {
+    variables: {
+      id: currentUrl,
+    },
+  })[1];
+
+  const {
+    data: usersData,
+    loading: usersLoading,
+    error: usersError,
+    refetch: usersRefetch,
+  } = useLazyQuery(USER_LIST_FOR_TABLE, {
+    variables: {
+      firstName_contains: '',
+      lastName_contains: '',
+    },
+  })[1];
+
+  useEffect(() => {
+    if (state === 0) {
+      memberRefetch({
+        ...filterData,
+        orgId: currentUrl,
+      });
+    } else if (state === 1) {
+      adminRefetch({
+        id: currentUrl,
+      });
+      setAdminFilteredData(adminData?.organizations[0].admins);
+    } else {
+      usersRefetch({
+        ...filterData,
+      });
+    }
+  }, [state, adminData]);
+
+  /* istanbul ignore next */
+  if (memberError || usersError || adminError) {
+    const error = memberError ?? usersError ?? adminError;
+    toast.error(error?.message);
+  }
+  if (memberLoading || usersLoading || adminLoading) {
+    return (
+      <div className={styles.mainpageright}>
+        <Loader />
+      </div>
+    );
+  }
+
+  const handleFullNameSearchChange = (e: React.FormEvent): void => {
+    e.preventDefault();
+    /* istanbul ignore next */
+    const [firstName, lastName] = userName.split(' ');
+    const newFilterData = {
+      firstName_contains: firstName || '',
+      lastName_contains: lastName || '',
+    };
+
+    setFilterData(newFilterData);
+
+    if (state === 0) {
+      memberRefetch({
+        ...newFilterData,
+        orgId: currentUrl,
+      });
+    } else if (state === 1) {
+      const filterData = adminData.organizations[0].admins.filter(
+        (value: {
+          _id: string;
+          firstName: string;
+          lastName: string;
+          createdAt: string;
+        }) => {
+          return (value.firstName + value.lastName)
+            .toLowerCase()
+            .includes(userName.toLowerCase());
+        },
+      );
+      setAdminFilteredData(filterData);
+    } else {
+      usersRefetch({
+        ...newFilterData,
+      });
+    }
+  };
+
+  const columns: GridColDef[] = [
+    {
+      field: 'profile',
+      headerName: tCommon('profile'),
+      flex: 1,
+      minWidth: 50,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return params.row?.image ? (
+          <img
+            src={params.row?.image}
+            alt="avatar"
+            className={styles.TableImage}
+          />
+        ) : (
+          <Avatar
+            avatarStyle={styles.TableImage}
+            name={`${params.row.firstName} ${params.row.lastName}`}
+          />
+        );
+      },
+    },
+    {
+      field: 'name',
+      headerName: tCommon('name'),
+      flex: 2,
+      minWidth: 150,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Link
+            to={`/member/${currentUrl}`}
+            state={{ id: params.row._id }}
+            className={`${styles.membername} ${styles.subtleBlueGrey}`}
+          >
+            {params.row?.firstName + ' ' + params.row?.lastName}
+          </Link>
+        );
+      },
+    },
+    {
+      field: 'email',
+      headerName: tCommon('email'),
+      minWidth: 150,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      flex: 2,
+      sortable: false,
+    },
+    {
+      field: 'joined',
+      headerName: tCommon('joined'),
+      flex: 2,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return dayjs(params.row.createdAt).format('DD/MM/YYYY');
+      },
+    },
+    {
+      field: 'action',
+      headerName: tCommon('action'),
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return state === 1 ? (
+          <Button
+            onClick={() => toggleRemoveAdminModal(params.row._id)}
+            data-testid="removeAdminModalBtn"
+            aria-label="Remove admin"
+            className={styles.deleteButton}
+          >
+            <Delete />
+          </Button>
+        ) : (
+          <Button
+            onClick={() => toggleRemoveMemberModal(params.row._id)}
+            data-testid="removeMemberModalBtn"
+            aria-label="Remove member"
+            className={styles.deleteButton}
+          >
+            <Delete />
+          </Button>
+        );
+      },
+    },
+  ];
+  return (
+    <>
+      <Row className={styles.head}>
+        <div className={styles.mainpageright}>
+          <div className={styles.btnsContainer}>
+            <div className={styles.input}>
+              <Form onSubmit={handleFullNameSearchChange}>
+                <Form.Control
+                  type="name"
+                  id="searchLastName"
+                  placeholder={t('searchFullName')}
+                  autoComplete="off"
+                  className={styles.inputField}
+                  onChange={(e): void => {
+                    const { value } = e.target;
+                    setUserName(value);
+                  }}
+                />
+                <Button
+                  type="submit"
+                  className={`${styles.searchButton} `}
+                  data-testid={'searchbtn'}
+                >
+                  <Search className={styles.searchIcon} />
+                </Button>
+              </Form>
+            </div>
+            <div className={styles.btnsBlock}>
+              <Dropdown>
+                <Dropdown.Toggle
+                  variant="success"
+                  id="dropdown-basic"
+                  className={styles.dropdown}
+                  data-testid="role"
+                >
+                  <Sort />
+                  {t('sort')}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item
+                    d-inline
+                    id="userslist"
+                    data-value="userslist"
+                    className={styles.dropdownItem}
+                    data-name="displaylist"
+                    data-testid="users"
+                    defaultChecked={state == 2 ? true : false}
+                    onClick={(): void => {
+                      setState(2);
+                    }}
+                  >
+                    <Form.Label htmlFor="userslist">
+                      {tCommon('users')}
+                    </Form.Label>
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    d-inline
+                    id="memberslist"
+                    data-value="memberslist"
+                    className={styles.dropdownItem}
+                    data-name="displaylist"
+                    data-testid="members"
+                    defaultChecked={state == 0 ? true : false}
+                    onClick={(): void => {
+                      setState(0);
+                    }}
+                  >
+                    <Form.Label htmlFor="memberslist">
+                      {tCommon('members')}
+                    </Form.Label>
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    d-inline
+                    id="adminslist"
+                    data-value="adminslist"
+                    data-name="displaylist"
+                    className={styles.dropdownItem}
+                    data-testid="admins"
+                    defaultChecked={state == 1 ? true : false}
+                    onClick={(): void => {
+                      setState(1);
+                    }}
+                  >
+                    <Form.Label htmlFor="adminslist">
+                      {tCommon('admins')}
+                    </Form.Label>
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+            <div className={styles.btnsBlock}>
+              <AddMember></AddMember>
+            </div>
+          </div>
+        </div>
+      </Row>
+      {((state == 0 && memberData) ||
+        (state == 1 && adminFilteredData) ||
+        (state == 2 && usersData)) && (
+        <div className="datatable">
+          <DataGrid
+            disableColumnMenu
+            columnBufferPx={5}
+            hideFooter={true}
+            getRowId={(row) => row._id}
+            slots={{
+              noRowsOverlay: () => (
+                <Stack
+                  height="100%"
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  Nothing Found !!
+                </Stack>
+              ),
+            }}
+            sx={{
+              borderRadius: '20px',
+              backgroundColor: '#EAEBEF',
+              '& .MuiDataGrid-row': {
+                backgroundColor: '#eff1f7',
+                '&:focus-within': {
+                  outline: '2px solid #000',
+                  outlineOffset: '-2px',
+                },
+              },
+              '& .MuiDataGrid-row:hover': {
+                backgroundColor: '#EAEBEF',
+                boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+              },
+              '& .MuiDataGrid-row.Mui-hovered': {
+                backgroundColor: '#EAEBEF',
+                boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+              },
+              '& .MuiDataGrid-cell:focus': {
+                outline: '2px solid #000',
+                outlineOffset: '-2px',
+              },
+            }}
+            getRowClassName={() => `${styles.rowBackground}`}
+            autoHeight
+            rowHeight={70}
+            rows={
+              state === 0
+                ? memberData.organizationsMemberConnection.edges
+                : state === 1
+                  ? adminFilteredData
+                  : convertObject(usersData)
+            }
+            columns={columns}
+            isRowSelectable={() => false}
+          />
+        </div>
+      )}
+      {showRemoveModal && selectedMemId && (
+        <OrgPeopleListCard
+          id={selectedMemId}
+          toggleRemoveModal={toggleRemoveModal}
+        />
+      )}
+      {showRemoveModal && selectedAdminId && (
+        <OrgAdminListCard
+          id={selectedAdminId}
+          toggleRemoveModal={toggleRemoveModal}
+        />
+      )}
+    </>
+  );
+}
+
+export default organizationPeople;
+
+// This code is used to remove 'user' object from the array index of userData and directly use store the properties at array index, this formatting is needed for DataGrid.
+
+interface InterfaceUser {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  image: string;
+  createdAt: string;
+}
+interface InterfaceOriginalObject {
+  users: { user: InterfaceUser }[];
+}
+interface InterfaceConvertedObject {
+  users: InterfaceUser[];
+}
+function convertObject(original: InterfaceOriginalObject): InterfaceUser[] {
+  const convertedObject: InterfaceConvertedObject = {
+    users: [],
+  };
+  original.users.forEach((item) => {
+    convertedObject.users.push({
+      firstName: item.user?.firstName,
+      lastName: item.user?.lastName,
+      email: item.user?.email,
+      image: item.user?.image,
+      createdAt: item.user?.createdAt,
+      _id: item.user?._id,
+    });
+  });
+  return convertedObject.users;
+}
diff --git a/src/screens/OrganizationTags/OrganizationTags.test.tsx b/src/screens/OrganizationTags/OrganizationTags.test.tsx
new file mode 100644
index 0000000000..0d426d20ac
--- /dev/null
+++ b/src/screens/OrganizationTags/OrganizationTags.test.tsx
@@ -0,0 +1,299 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import OrganizationTags from './OrganizationTags';
+import { MOCKS, MOCKS_ERROR } from './OrganizationTagsMocks';
+import type { ApolloLink } from '@apollo/client';
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationTags ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const renderOrganizationTags = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgtags/123']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <Routes>
+              <Route path="/orgtags/:orgId" element={<OrganizationTags />} />
+              <Route
+                path="/orgtags/:orgId/manageTag/:tagId"
+                element={<div data-testid="manageTagScreen"></div>}
+              />
+              <Route
+                path="/orgtags/:orgId/subTags/:tagId"
+                element={<div data-testid="subTagsScreen"></div>}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Organisation Tags Page', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('component loads correctly', async () => {
+    const { getByText } = renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.createTag)).toBeInTheDocument();
+    });
+  });
+
+  test('render error component on unsuccessful userTags query', async () => {
+    const { queryByText } = renderOrganizationTags(link2);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(queryByText(translations.createTag)).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the create tag modal', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createTagBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createTagBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('closeCreateTagModal'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('closeCreateTagModal'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('closeCreateTagModal'),
+    );
+  });
+
+  test('navigates to sub tags screen after clicking on a tag', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('tagName')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('subTagsScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to manage tag page after clicking manage tag option', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('manageTagBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('manageTagBtn')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('manageTagScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('searchs for tags where the name matches the provided search input', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'searchUserTag' } });
+
+    // should render the two searched tags from the mock data
+    // where name starts with "searchUserTag"
+    await waitFor(() => {
+      const buttons = screen.getAllByTestId('manageTagBtn');
+      expect(buttons.length).toEqual(2);
+    });
+  });
+
+  test('fetches the tags by the sort order, i.e. latest or oldest first', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'searchUserTag' } });
+
+    // should render the two searched tags from the mock data
+    // where name starts with "searchUserTag"
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toHaveTextContent(
+        'searchUserTag 1',
+      );
+    });
+
+    // now change the sorting order
+    await waitFor(() => {
+      expect(screen.getByTestId('sortTags')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortTags'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('oldest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('oldest'));
+
+    // returns the tags in reverse order
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toHaveTextContent(
+        'searchUserTag 2',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sortTags')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortTags'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('latest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('latest'));
+
+    // reverse the order again
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toHaveTextContent(
+        'searchUserTag 1',
+      );
+    });
+  });
+
+  test('fetches more tags with infinite scroll', async () => {
+    const { getByText } = renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.createTag)).toBeInTheDocument();
+    });
+
+    const orgUserTagsScrollableDiv = screen.getByTestId(
+      'orgUserTagsScrollableDiv',
+    );
+
+    // Get the initial number of tags loaded
+    const initialTagsDataLength = screen.getAllByTestId('manageTagBtn').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(orgUserTagsScrollableDiv, {
+      target: { scrollY: orgUserTagsScrollableDiv.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalTagsDataLength = screen.getAllByTestId('manageTagBtn').length;
+      expect(finalTagsDataLength).toBeGreaterThan(initialTagsDataLength);
+
+      expect(getByText(translations.createTag)).toBeInTheDocument();
+    });
+  });
+
+  test('creates a new user tag', async () => {
+    renderOrganizationTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createTagBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createTagBtn'));
+
+    userEvent.click(screen.getByTestId('createTagSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(translations.enterTagName);
+    });
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.tagNamePlaceholder),
+      'userTag 12',
+    );
+
+    userEvent.click(screen.getByTestId('createTagSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.tagCreationSuccess,
+      );
+    });
+  });
+});
diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
new file mode 100644
index 0000000000..55134b75ac
--- /dev/null
+++ b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -0,0 +1,501 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { WarningAmberRounded } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
+import Loader from 'components/Loader/Loader';
+import { useNavigate, useParams, Link } from 'react-router-dom';
+import type { ChangeEvent } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Modal from 'react-bootstrap/Modal';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import IconComponent from 'components/IconComponent/IconComponent';
+import type {
+  InterfaceQueryOrganizationUserTags,
+  InterfaceTagData,
+} from 'utils/interfaces';
+import styles from '../../style/app.module.css';
+import { DataGrid } from '@mui/x-data-grid';
+import type {
+  InterfaceOrganizationTagsQuery,
+  SortedByType,
+} from 'utils/organizationTagsUtils';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
+import { Stack } from '@mui/material';
+import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+
+/**
+ * Component that renders the Organization Tags screen when the app navigates to '/orgtags/:orgId'.
+ *
+ * This component does not accept any props and is responsible for displaying
+ * the content associated with the corresponding route.
+ */
+
+function OrganizationTags(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationTags',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [createTagModalIsOpen, setCreateTagModalIsOpen] = useState(false);
+
+  const [tagSearchName, setTagSearchName] = useState('');
+  const [tagSortOrder, setTagSortOrder] = useState<SortedByType>('DESCENDING');
+
+  const { orgId } = useParams();
+  const navigate = useNavigate();
+
+  const [tagName, setTagName] = useState<string>('');
+
+  const showCreateTagModal = (): void => {
+    setTagName('');
+    setCreateTagModalIsOpen(true);
+  };
+
+  const hideCreateTagModal = (): void => {
+    setCreateTagModalIsOpen(false);
+  };
+
+  const {
+    data: orgUserTagsData,
+    loading: orgUserTagsLoading,
+    error: orgUserTagsError,
+    refetch: orgUserTagsRefetch,
+    fetchMore: orgUserTagsFetchMore,
+  }: InterfaceOrganizationTagsQuery = useQuery(ORGANIZATION_USER_TAGS_LIST, {
+    variables: {
+      id: orgId,
+      first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      where: { name: { starts_with: tagSearchName } },
+      sortedBy: { id: tagSortOrder },
+    },
+  });
+
+  const loadMoreUserTags = (): void => {
+    orgUserTagsFetchMore({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after:
+          orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo?.endCursor ??
+          /* istanbul ignore next */
+          null,
+      },
+      updateQuery: (
+        prevResult: { organizations: InterfaceQueryOrganizationUserTags[] },
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult?: {
+            organizations: InterfaceQueryOrganizationUserTags[];
+          };
+        },
+      ) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          organizations: [
+            {
+              ...prevResult.organizations[0],
+              userTags: {
+                ...prevResult.organizations[0].userTags,
+                edges: [
+                  ...prevResult.organizations[0].userTags.edges,
+                  ...fetchMoreResult.organizations[0].userTags.edges,
+                ],
+                pageInfo: fetchMoreResult.organizations[0].userTags.pageInfo,
+              },
+            },
+          ],
+        };
+      },
+    });
+  };
+
+  useEffect(() => {
+    orgUserTagsRefetch();
+  }, []);
+
+  const [create, { loading: createUserTagLoading }] =
+    useMutation(CREATE_USER_TAG);
+
+  const createTag = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    if (!tagName.trim()) {
+      toast.error(t('enterTagName'));
+      return;
+    }
+
+    try {
+      const { data } = await create({
+        variables: {
+          name: tagName,
+          organizationId: orgId,
+        },
+      });
+
+      if (data) {
+        toast.success(t('tagCreationSuccess'));
+        orgUserTagsRefetch();
+        setTagName('');
+        setCreateTagModalIsOpen(false);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  if (orgUserTagsError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occured while loading Organization Tags Data
+            <br />
+            {orgUserTagsError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const userTagsList = orgUserTagsData?.organizations[0].userTags.edges.map(
+    (edge) => edge.node,
+  );
+
+  const redirectToManageTag = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/manageTag/${tagId}`);
+  };
+
+  const redirectToSubTags = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/subTags/${tagId}`);
+  };
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: '#',
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'tagName',
+      headerName: 'Tag Name',
+      flex: 1,
+      minWidth: 100,
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams<InterfaceTagData>) => {
+        return (
+          <div className="d-flex">
+            {params.row.parentTag &&
+              params.row.ancestorTags?.map((tag) => (
+                <div
+                  key={tag._id}
+                  className={styles.tagsBreadCrumbs}
+                  data-testid="ancestorTagsBreadCrumbs"
+                >
+                  {tag.name}
+                  <i className={'mx-2 fa fa-caret-right'} />
+                </div>
+              ))}
+
+            <div
+              className={styles.subTagsLink}
+              data-testid="tagName"
+              onClick={() => redirectToSubTags(params.row._id)}
+            >
+              {params.row.name}
+              <i className={'ms-2 fa fa-caret-right'} />
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      field: 'totalSubTags',
+      headerName: 'Total Sub Tags',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Link
+            className="text-secondary"
+            to={`/orgtags/${orgId}/subTags/${params.row._id}`}
+          >
+            {params.row.childTags.totalCount}
+          </Link>
+        );
+      },
+    },
+    {
+      field: 'totalAssignedUsers',
+      headerName: 'Total Assigned Users',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Link
+            className="text-secondary"
+            to={`/orgtags/${orgId}/manageTag/${params.row._id}`}
+          >
+            {params.row.usersAssignedTo.totalCount}
+          </Link>
+        );
+      },
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Button
+            size="sm"
+            variant="outline-primary"
+            onClick={() => redirectToManageTag(params.row._id)}
+            data-testid="manageTagBtn"
+            className={styles.addButton}
+          >
+            {t('manageTag')}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Row>
+        <div>
+          <div className={styles.btnsContainer}>
+            <div className={styles.input}>
+              <i className="fa fa-search position-absolute text-body-tertiary end-0 top-50 translate-middle" />
+              <Form.Control
+                type="text"
+                id="tagName"
+                className={styles.inputField}
+                placeholder={tCommon('searchByName')}
+                data-testid="searchByName"
+                onChange={(e) => setTagSearchName(e.target.value.trim())}
+                autoComplete="off"
+              />
+            </div>
+            <div className={styles.btnsBlock}>
+              <Dropdown
+                aria-expanded="false"
+                title="Sort Tags"
+                data-testid="sort"
+              >
+                <Dropdown.Toggle
+                  variant="outline-success"
+                  data-testid="sortTags"
+                  className={styles.dropdown}
+                >
+                  <SortIcon className={'me-1'} />
+                  {tagSortOrder === 'DESCENDING'
+                    ? tCommon('Latest')
+                    : tCommon('Oldest')}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item
+                    data-testid="latest"
+                    onClick={() => setTagSortOrder('DESCENDING')}
+                  >
+                    {tCommon('Latest')}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    data-testid="oldest"
+                    onClick={() => setTagSortOrder('ASCENDING')}
+                  >
+                    {tCommon('Oldest')}
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+            <div>
+              <Button
+                // variant="success"
+                onClick={showCreateTagModal}
+                data-testid="createTagBtn"
+                className={styles.createButton}
+              >
+                <i className={'fa fa-plus me-2'} />
+                {t('createTag')}
+              </Button>
+            </div>
+          </div>
+
+          {orgUserTagsLoading || createUserTagLoading ? (
+            <Loader />
+          ) : (
+            <div className="mb-4">
+              <div className="bg-white border light rounded-top mb-0 py-2 d-flex align-items-center">
+                <div className="ms-3 my-1">
+                  <IconComponent name="Tag" />
+                </div>
+
+                <div className={`fs-4 ms-3 my-1 ${styles.tagsBreadCrumbs}`}>
+                  {'Tags'}
+                </div>
+              </div>
+
+              <div
+                id="orgUserTagsScrollableDiv"
+                data-testid="orgUserTagsScrollableDiv"
+                className={styles.orgUserTagsScrollableDiv}
+              >
+                <InfiniteScroll
+                  dataLength={userTagsList?.length ?? 0}
+                  next={loadMoreUserTags}
+                  hasMore={
+                    orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo
+                      ?.hasNextPage ?? /* istanbul ignore next */ false
+                  }
+                  loader={<InfiniteScrollLoader />}
+                  scrollableTarget="orgUserTagsScrollableDiv"
+                >
+                  <DataGrid
+                    disableColumnMenu
+                    columnBufferPx={7}
+                    hideFooter={true}
+                    getRowId={(row) => row.id}
+                    slots={{
+                      noRowsOverlay: /* istanbul ignore next */ () => (
+                        <Stack
+                          height="100%"
+                          alignItems="center"
+                          justifyContent="center"
+                        >
+                          {t('noTagsFound')}
+                        </Stack>
+                      ),
+                    }}
+                    sx={{
+                      borderRadius: '20px',
+                      backgroundColor: '#EAEBEF',
+                      '& .MuiDataGrid-row': {
+                        backgroundColor: '#eff1f7',
+                        '&:focus-within': {
+                          // outline: '2px solid #000',
+                          outlineOffset: '-2px',
+                        },
+                      },
+                      '& .MuiDataGrid-row:hover': {
+                        backgroundColor: '#EAEBEF',
+                        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+                      },
+                      '& .MuiDataGrid-row.Mui-hovered': {
+                        backgroundColor: '#EAEBEF',
+                        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+                      },
+                      '& .MuiDataGrid-cell:focus': {
+                        // outline: '2px solid #000',
+                        outlineOffset: '-2px',
+                      },
+                    }}
+                    getRowClassName={() => `${styles.rowBackground}`}
+                    autoHeight
+                    rowHeight={65}
+                    rows={userTagsList?.map((userTag, index) => ({
+                      id: index + 1,
+                      ...userTag,
+                    }))}
+                    columns={columns}
+                    isRowSelectable={() => false}
+                  />
+                </InfiniteScroll>
+              </div>
+            </div>
+          )}
+        </div>
+      </Row>
+
+      {/* Create Tag Modal */}
+      <Modal
+        show={createTagModalIsOpen}
+        onHide={hideCreateTagModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header
+          className={styles.tableHeader}
+          data-testid="modalOrganizationHeader"
+          closeButton
+        >
+          <Modal.Title>{t('tagDetails')}</Modal.Title>
+        </Modal.Header>
+        <Form onSubmitCapture={createTag}>
+          <Modal.Body>
+            <Form.Label htmlFor="tagName">{t('tagName')}</Form.Label>
+            <Form.Control
+              type="name"
+              id="orgname"
+              className="mb-3"
+              placeholder={t('tagNamePlaceholder')}
+              data-testid="tagNameInput"
+              autoComplete="off"
+              required
+              value={tagName}
+              onChange={(e): void => {
+                setTagName(e.target.value);
+              }}
+            />
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={(): void => hideCreateTagModal()}
+              data-testid="closeCreateTagModal"
+              className={styles.closeButton}
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button
+              type="submit"
+              value="invite"
+              data-testid="createTagSubmitBtn"
+              className={styles.addButton}
+            >
+              {tCommon('create')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+}
+
+export default OrganizationTags;
diff --git a/src/screens/OrganizationTags/OrganizationTagsMocks.ts b/src/screens/OrganizationTags/OrganizationTagsMocks.ts
new file mode 100644
index 0000000000..0fe48ca97f
--- /dev/null
+++ b/src/screens/OrganizationTags/OrganizationTagsMocks.ts
@@ -0,0 +1,426 @@
+import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
+import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '1',
+                    name: 'userTag 1',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 11,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '1',
+                },
+                {
+                  node: {
+                    _id: '2',
+                    name: 'userTag 2',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '2',
+                },
+                {
+                  node: {
+                    _id: '3',
+                    name: 'userTag 3',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 0,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '3',
+                },
+                {
+                  node: {
+                    _id: '4',
+                    name: 'userTag 4',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 0,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '4',
+                },
+                {
+                  node: {
+                    _id: '5',
+                    name: 'userTag 5',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '5',
+                },
+                {
+                  node: {
+                    _id: '6',
+                    name: 'userTag 6',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 6,
+                    },
+                    childTags: {
+                      totalCount: 6,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '6',
+                },
+                {
+                  node: {
+                    _id: '7',
+                    name: 'userTag 7',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 7,
+                    },
+                    childTags: {
+                      totalCount: 7,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '7',
+                },
+                {
+                  node: {
+                    _id: '8',
+                    name: 'userTag 8',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 8,
+                    },
+                    childTags: {
+                      totalCount: 8,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '8',
+                },
+                {
+                  node: {
+                    _id: '9',
+                    name: 'userTag 9',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 9,
+                    },
+                    childTags: {
+                      totalCount: 9,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '9',
+                },
+                {
+                  node: {
+                    _id: '10',
+                    name: 'userTag 10',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 10,
+                    },
+                    childTags: {
+                      totalCount: 10,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '10',
+                },
+              ],
+              pageInfo: {
+                startCursor: '1',
+                endCursor: '10',
+                hasNextPage: true,
+                hasPreviousPage: false,
+              },
+              totalCount: 12,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: '10',
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: '11',
+                    name: 'userTag 11',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '11',
+                },
+                {
+                  node: {
+                    _id: '12',
+                    name: 'userTag 12',
+                    parentTag: null,
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [],
+                  },
+                  cursor: '12',
+                },
+              ],
+              pageInfo: {
+                startCursor: '11',
+                endCursor: '12',
+                hasNextPage: false,
+                hasPreviousPage: true,
+              },
+              totalCount: 12,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: 'searchUserTag' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: 'searchUserTag1',
+                    name: 'searchUserTag 1',
+                    parentTag: {
+                      _id: '1',
+                    },
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [
+                      {
+                        _id: '1',
+                        name: 'userTag 1',
+                      },
+                    ],
+                  },
+                  cursor: 'searchUserTag1',
+                },
+                {
+                  node: {
+                    _id: 'searchUserTag2',
+                    name: 'searchUserTag 2',
+                    parentTag: {
+                      _id: '1',
+                    },
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [
+                      {
+                        _id: '1',
+                        name: 'userTag 1',
+                      },
+                    ],
+                  },
+                  cursor: 'searchUserTag2',
+                },
+              ],
+              pageInfo: {
+                startCursor: 'searchUserTag1',
+                endCursor: 'searchUserTag2',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: 'searchUserTag' } },
+        sortedBy: { id: 'ASCENDING' },
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            userTags: {
+              edges: [
+                {
+                  node: {
+                    _id: 'searchUserTag2',
+                    name: 'searchUserTag 2',
+                    parentTag: {
+                      _id: '1',
+                    },
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 5,
+                    },
+                    ancestorTags: [
+                      {
+                        _id: '1',
+                        name: 'userTag 1',
+                      },
+                    ],
+                  },
+                  cursor: 'searchUserTag2',
+                },
+                {
+                  node: {
+                    _id: 'searchUserTag1',
+                    name: 'searchUserTag 1',
+                    parentTag: {
+                      _id: '1',
+                    },
+                    usersAssignedTo: {
+                      totalCount: 5,
+                    },
+                    childTags: {
+                      totalCount: 0,
+                    },
+                    ancestorTags: [
+                      {
+                        _id: '1',
+                        name: 'userTag 1',
+                      },
+                    ],
+                  },
+                  cursor: 'searchUserTag1',
+                },
+              ],
+              pageInfo: {
+                startCursor: 'searchUserTag2',
+                endCursor: 'searchUserTag1',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_USER_TAG,
+      variables: {
+        name: 'userTag 12',
+        organizationId: '123',
+      },
+    },
+    result: {
+      data: {
+        createUserTag: {
+          _id: '12',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR = [
+  {
+    request: {
+      query: ORGANIZATION_USER_TAGS_LIST,
+      variables: {
+        id: '123',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/screens/OrganizationVenues/OrganizationVenues.module.css b/src/screens/OrganizationVenues/OrganizationVenues.module.css
new file mode 100644
index 0000000000..e4ac9d7575
--- /dev/null
+++ b/src/screens/OrganizationVenues/OrganizationVenues.module.css
@@ -0,0 +1,879 @@
+.navbarbg {
+  height: 60px;
+  background-color: white;
+  display: flex;
+  margin-bottom: 30px;
+  z-index: 1;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  box-shadow: 0px 0px 8px 2px #c8c8c8;
+}
+
+.logo {
+  color: #707070;
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.logo img {
+  margin-top: 0px;
+  margin-left: 10px;
+  height: 64px;
+  width: 70px;
+}
+
+.logo > strong {
+  line-height: 1.5rem;
+  margin-left: -5px;
+  font-family: sans-serif;
+  font-size: 19px;
+  color: #707070;
+}
+.mainpage {
+  display: flex;
+  flex-direction: row;
+}
+
+.sidebar:after {
+  background-color: #f7f7f7;
+  position: absolute;
+  width: 2px;
+  height: 600px;
+  top: 10px;
+  left: 94%;
+  display: block;
+}
+
+.navitem {
+  padding-left: 27%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+
+.logintitleadmin {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 30%;
+}
+.admindetails {
+  display: flex;
+  justify-content: space-between;
+}
+.admindetails > p {
+  margin-top: -12px;
+  margin-right: 30px;
+}
+
+.mainpageright > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+.justifysp {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.addbtn {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60%;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+  max-height: 86vh;
+  overflow: auto;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+.logintitleinvite {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 40%;
+}
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 65%;
+}
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+.modalbody {
+  width: 50px;
+}
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
+}
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  border-color: #e8e5e5;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+.checkboxdiv > label {
+  margin-right: 50px;
+}
+.checkboxdiv > label > input {
+  margin-left: 10px;
+}
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.dispflex {
+  display: flex;
+  align-items: center;
+}
+.dispflex > input {
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+.checkboxdiv {
+  display: flex;
+}
+.checkboxdiv > div {
+  width: 50%;
+}
+
+@media only screen and (max-width: 600px) {
+  .form_wrapper {
+    width: 90%;
+    top: 45%;
+  }
+}
+
+.navbarbg {
+  height: 60px;
+  background-color: white;
+  display: flex;
+  margin-bottom: 30px;
+  z-index: 1;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  box-shadow: 0px 0px 8px 2px #c8c8c8;
+}
+
+.logo {
+  color: #707070;
+  margin-left: 0;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.logo img {
+  margin-top: 0px;
+  margin-left: 10px;
+  height: 64px;
+  width: 70px;
+}
+
+.logo > strong {
+  line-height: 1.5rem;
+  margin-left: -5px;
+  font-family: sans-serif;
+  font-size: 19px;
+  color: #707070;
+}
+.mainpage {
+  display: flex;
+  flex-direction: row;
+}
+.sidebar {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  z-index: 0;
+  padding-top: 10px;
+  margin: 0;
+  height: 100%;
+}
+
+.navitem {
+  padding-left: 27%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+
+.logintitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 30px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 15%;
+}
+.searchtitle {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 60%;
+}
+.justifysp {
+  display: flex;
+  justify-content: space-between;
+}
+@media screen and (max-width: 575.5px) {
+  .justifysp {
+    padding-left: 55px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .mainpageright {
+    width: 98%;
+  }
+}
+
+.logintitleadmin {
+  color: #707070;
+  font-weight: 600;
+  font-size: 18px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 40%;
+}
+.admindetails {
+  display: flex;
+  justify-content: space-between;
+}
+.admindetails > p {
+  margin-top: -12px;
+  margin-right: 30px;
+}
+.mainpageright > hr {
+  margin-top: 10px;
+  width: 97%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+.addbtnmain {
+  width: 60%;
+  margin-right: 50px;
+}
+.addbtn {
+  float: right;
+  width: 23%;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  height: 40px;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  margin-left: 30px;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.flexdir {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: none;
+}
+
+.form_wrapper {
+  margin-top: 27px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 30px;
+  background: #ffffff;
+  border-color: #e8e5e5;
+  border-width: 5px;
+  border-radius: 10px;
+}
+
+.form_wrapper form {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: column;
+}
+.logintitleinvite {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 40%;
+}
+.cancel > i {
+  margin-top: 5px;
+  transform: scale(1.2);
+  cursor: pointer;
+  color: #707070;
+}
+.modalbody {
+  width: 50px;
+}
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 10px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  color: #31bb6b;
+}
+.input {
+  flex: 1;
+  position: relative;
+}
+/* .btnsContainer {
+    display: flex;
+    margin: 2.5rem 0 2.5rem 0;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+  } */
+
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+  min-width: 18rem;
+  width: 25rem;
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+.searchBtn {
+  margin-bottom: 10px;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.TableImage {
+  background-color: #31bb6b !important;
+  width: 50px !important;
+  height: 50px !important;
+  border-radius: 100% !important;
+  margin-right: 10px !important;
+}
+.tableHead {
+  background-color: #31bb6b !important;
+  color: white;
+  border-radius: 20px !important;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.tableHead :nth-first-child() {
+  border-top-left-radius: 20px;
+}
+
+.mainpageright > hr {
+  margin-top: 10px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+.radio_buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: #707070;
+  font-weight: 600;
+  font-size: 14px;
+}
+.radio_buttons > input {
+  transform: scale(1.2);
+}
+.radio_buttons > label {
+  margin-top: -4px;
+  margin-left: 5px;
+  margin-right: 15px;
+}
+.preview {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.preview img {
+  width: 400px;
+  height: auto;
+}
+.postimage {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-width: 100%;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+  color: black;
+}
+.closeButtonP {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+.addbtn {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60%;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.list_box {
+  height: 65vh;
+  overflow-y: auto;
+  width: auto;
+}
+
+.cards h2 {
+  font-size: 20px;
+}
+.cards > h3 {
+  font-size: 17px;
+}
+.card {
+  width: 100%;
+  height: 20rem;
+  margin-bottom: 2rem;
+}
+.postimage {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-width: 100%;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+  color: black;
+}
+.preview {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.preview img {
+  width: 400px;
+  height: auto;
+}
+.preview video {
+  width: 400px;
+  height: auto;
+}
+.novenueimage {
+  border-radius: 0px;
+  width: 100%;
+  height: 12rem;
+  max-height: 12rem;
+  object-fit: cover;
+  position: relative;
+}
+.cards:hover {
+  filter: brightness(0.8);
+}
+.cards:hover::before {
+  opacity: 0.5;
+}
+.knowMoreText {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  color: white;
+  padding: 10px;
+  font-weight: bold;
+  font-size: 1.5rem;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.cards:hover .knowMoreText {
+  opacity: 1;
+}
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.9
+  ); /* Dark grey modal background with transparency */
+  z-index: 9999;
+}
+
+.modalContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  padding: 20px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.modalImage {
+  flex: 1;
+  margin-right: 20px;
+  width: 25rem;
+  height: 15rem;
+}
+.nomodalImage {
+  flex: 1;
+  margin-right: 20px;
+  width: 100%;
+  height: 15rem;
+}
+
+.modalImage img,
+.modalImage video {
+  border-radius: 0px;
+  width: 100%;
+  height: 25rem;
+  max-width: 25rem;
+  max-height: 15rem;
+  object-fit: cover;
+  position: relative;
+}
+.modalInfo {
+  flex: 1;
+}
+.title {
+  font-size: 16px;
+  color: #000;
+  font-weight: 600;
+}
+.text {
+  font-size: 13px;
+  color: #000;
+  font-weight: 300;
+}
+.closeButton {
+  position: relative;
+  bottom: 5rem;
+  right: 10px;
+  padding: 4px;
+  background-color: red; /* Red close button color */
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+.closeButtonP {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+.cards:hover::after {
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+.cards > p {
+  font-size: 14px;
+  margin-top: 0px;
+  margin-bottom: 7px;
+}
+
+.cards:last-child:nth-last-child(odd) {
+  grid-column: auto / span 2;
+}
+.cards:first-child:nth-last-child(even),
+.cards:first-child:nth-last-child(even) ~ .box {
+  grid-column: auto / span 1;
+}
+
+.capacityLabel {
+  background-color: #31bb6b !important;
+  color: white;
+  height: 22.19px;
+  font-size: 12px;
+  font-weight: bolder;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.capacityLabel svg {
+  margin-bottom: 3px;
+}
+
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
diff --git a/src/screens/OrganizationVenues/OrganizationVenues.test.tsx b/src/screens/OrganizationVenues/OrganizationVenues.test.tsx
new file mode 100644
index 0000000000..5b8b9933a1
--- /dev/null
+++ b/src/screens/OrganizationVenues/OrganizationVenues.test.tsx
@@ -0,0 +1,497 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import OrganizationVenues from './OrganizationVenues';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { VENUE_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import type { ApolloLink } from '@apollo/client';
+import { DELETE_VENUE_MUTATION } from 'GraphQl/Mutations/VenueMutations';
+
+const MOCKS = [
+  {
+    request: {
+      query: VENUE_LIST,
+      variables: {
+        orgId: 'orgId',
+        orderBy: 'capacity_ASC',
+        where: {
+          name_starts_with: '',
+          description_starts_with: undefined,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVenueByOrgId: [
+          {
+            _id: 'venue1',
+            capacity: 1000,
+            description: 'Updated description for venue 1',
+            imageUrl: null,
+            name: 'Updated Venue 1',
+            organization: {
+              __typename: 'Organization',
+              _id: 'orgId',
+            },
+            __typename: 'Venue',
+          },
+          {
+            _id: 'venue2',
+            capacity: 1500,
+            description: 'Updated description for venue 2',
+            imageUrl: null,
+            name: 'Updated Venue 2',
+            organization: {
+              __typename: 'Organization',
+              _id: 'orgId',
+            },
+            __typename: 'Venue',
+          },
+          {
+            _id: 'venue3',
+            name: 'Venue with a name longer than 25 characters that should be truncated',
+            description:
+              'Venue description that should be truncated because it is longer than 75 characters',
+            capacity: 2000,
+            imageUrl: null,
+            organization: {
+              _id: 'orgId',
+              __typename: 'Organization',
+            },
+            __typename: 'Venue',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: VENUE_LIST,
+      variables: {
+        orgId: 'orgId',
+        orderBy: 'capacity_DESC',
+        where: {
+          name_starts_with: '',
+          description_starts_with: undefined,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVenueByOrgId: [
+          {
+            _id: 'venue3',
+            name: 'Venue with a name longer than 25 characters that should be truncated',
+            description:
+              'Venue description that should be truncated because it is longer than 75 characters',
+            capacity: 2000,
+            imageUrl: null,
+            organization: {
+              _id: 'orgId',
+              __typename: 'Organization',
+            },
+            __typename: 'Venue',
+          },
+          {
+            _id: 'venue2',
+            capacity: 1500,
+            description: 'Updated description for venue 2',
+            imageUrl: null,
+            name: 'Updated Venue 2',
+            organization: {
+              __typename: 'Organization',
+              _id: 'orgId',
+            },
+            __typename: 'Venue',
+          },
+          {
+            _id: 'venue1',
+            capacity: 1000,
+            description: 'Updated description for venue 1',
+            imageUrl: null,
+            name: 'Updated Venue 1',
+            organization: {
+              __typename: 'Organization',
+              _id: 'orgId',
+            },
+            __typename: 'Venue',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: VENUE_LIST,
+      variables: {
+        orgId: 'orgId',
+        orderBy: 'capacity_DESC',
+        where: {
+          name_starts_with: 'Updated Venue 1',
+          description_starts_with: undefined,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVenueByOrgId: [
+          {
+            _id: 'venue1',
+            capacity: 1000,
+            description: 'Updated description for venue 1',
+            imageUrl: null,
+            name: 'Updated Venue 1',
+            organization: {
+              __typename: 'Organization',
+              _id: 'orgId',
+            },
+            __typename: 'Venue',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: VENUE_LIST,
+      variables: {
+        orgId: 'orgId',
+        orderBy: 'capacity_DESC',
+        where: {
+          name_starts_with: undefined,
+          description_starts_with: 'Updated description for venue 1',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVenueByOrgId: [
+          {
+            _id: 'venue1',
+            capacity: 1000,
+            description: 'Updated description for venue 1',
+            imageUrl: null,
+            name: 'Updated Venue 1',
+            organization: {
+              __typename: 'Organization',
+              _id: 'orgId',
+            },
+            __typename: 'Venue',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_VENUE_MUTATION,
+      variables: {
+        id: 'venue1',
+      },
+    },
+    result: {
+      data: {
+        deleteVenue: {
+          _id: 'venue1',
+          __typename: 'Venue',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_VENUE_MUTATION,
+      variables: {
+        id: 'venue2',
+      },
+    },
+    result: {
+      data: {
+        deleteVenue: {
+          _id: 'venue2',
+          __typename: 'Venue',
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const renderOrganizationVenue = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgvenues/orgId']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Routes>
+              <Route
+                path="/orgvenues/:orgId"
+                element={<OrganizationVenues />}
+              />
+              <Route
+                path="/orglist"
+                element={<div data-testid="paramsError">paramsError</div>}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('OrganizationVenue with missing orgId', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: undefined }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+  test('Redirect to /orglist when orgId is falsy/undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <MemoryRouter initialEntries={['/orgvenues/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/orgvenues/" element={<OrganizationVenues />} />
+                <Route
+                  path="/orglist"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const paramsError = screen.getByTestId('paramsError');
+      expect(paramsError).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Organisation Venues', () => {
+  global.alert = jest.fn();
+
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  test('searches the venue list correctly by Name', async () => {
+    renderOrganizationVenue(link);
+    await wait();
+
+    fireEvent.click(screen.getByTestId('searchByDrpdwn'));
+    fireEvent.click(screen.getByTestId('name'));
+
+    const searchInput = screen.getByTestId('searchBy');
+    fireEvent.change(searchInput, {
+      target: { value: 'Updated Venue 1' },
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('venue-item1')).toBeInTheDocument();
+      expect(screen.queryByTestId('venue-item2')).not.toBeInTheDocument();
+    });
+  });
+
+  test('searches the venue list correctly by Description', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(screen.getByTestId('searchByDrpdwn'));
+    fireEvent.click(screen.getByTestId('desc'));
+
+    const searchInput = screen.getByTestId('searchBy');
+    fireEvent.change(searchInput, {
+      target: { value: 'Updated description for venue 1' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('venue-item1')).toBeInTheDocument();
+      expect(screen.queryByTestId('venue-item2')).not.toBeInTheDocument();
+    });
+  });
+
+  test('sorts the venue list by lowest capacity correctly', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(screen.getByTestId('sortVenues'));
+    fireEvent.click(screen.getByTestId('lowest'));
+    await waitFor(() => {
+      expect(screen.getByTestId('venue-item1')).toHaveTextContent(
+        /Updated Venue 1/i,
+      );
+      expect(screen.getByTestId('venue-item2')).toHaveTextContent(
+        /Updated Venue 2/i,
+      );
+    });
+  });
+
+  test('sorts the venue list by highest capacity correctly', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(screen.getByTestId('sortVenues'));
+    fireEvent.click(screen.getByTestId('highest'));
+    await waitFor(() => {
+      expect(screen.getByTestId('venue-item1')).toHaveTextContent(
+        /Venue with a name longer .../i,
+      );
+      expect(screen.getByTestId('venue-item2')).toHaveTextContent(
+        /Updated Venue 2/i,
+      );
+    });
+  });
+
+  test('renders venue name with ellipsis if name is longer than 25 characters', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    const venue = screen.getByTestId('venue-item1');
+    expect(venue).toHaveTextContent(/Venue with a name longer .../i);
+  });
+
+  test('renders full venue name if name is less than or equal to 25 characters', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    const venueName = screen.getByTestId('venue-item3');
+    expect(venueName).toHaveTextContent('Updated Venue 1');
+  });
+
+  test('renders venue description with ellipsis if description is longer than 75 characters', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    const venue = screen.getByTestId('venue-item1');
+    expect(venue).toHaveTextContent(
+      'Venue description that should be truncated because it is longer than 75 cha...',
+    );
+  });
+
+  test('renders full venue description if description is less than or equal to 75 characters', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    const venue = screen.getByTestId('venue-item3');
+    expect(venue).toHaveTextContent('Updated description for venue 1');
+  });
+
+  test('Render modal to edit venue', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(screen.getByTestId('updateVenueBtn1'));
+    await waitFor(() => {
+      expect(screen.getByTestId('venueForm')).toBeInTheDocument();
+    });
+  });
+
+  test('Render Modal to add event', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    fireEvent.click(screen.getByTestId('createVenueBtn'));
+    await waitFor(() => {
+      expect(screen.getByTestId('venueForm')).toBeInTheDocument();
+    });
+  });
+
+  test('calls handleDelete when delete button is clicked', async () => {
+    renderOrganizationVenue(link);
+    await waitFor(() =>
+      expect(screen.getByTestId('orgvenueslist')).toBeInTheDocument(),
+    );
+
+    const deleteButton = screen.getByTestId('deleteVenueBtn3');
+    fireEvent.click(deleteButton);
+    await wait();
+    await waitFor(() => {
+      const deletedVenue = screen.queryByTestId('venue-item3');
+      expect(deletedVenue).not.toHaveTextContent(/Updated Venue 2/i);
+    });
+  });
+
+  test('displays loader when data is loading', () => {
+    renderOrganizationVenue(link);
+    expect(screen.getByTestId('spinner-wrapper')).toBeInTheDocument();
+  });
+
+  test('renders without crashing', async () => {
+    renderOrganizationVenue(link);
+    waitFor(() => {
+      expect(screen.findByTestId('orgvenueslist')).toBeInTheDocument();
+    });
+  });
+
+  test('renders the venue list correctly', async () => {
+    renderOrganizationVenue(link);
+    waitFor(() => {
+      expect(screen.getByTestId('venueRow2')).toBeInTheDocument();
+      expect(screen.getByTestId('venueRow1')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/OrganizationVenues/OrganizationVenues.tsx b/src/screens/OrganizationVenues/OrganizationVenues.tsx
new file mode 100644
index 0000000000..c2c3afe7e4
--- /dev/null
+++ b/src/screens/OrganizationVenues/OrganizationVenues.tsx
@@ -0,0 +1,286 @@
+import React, { useEffect, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import styles from './OrganizationVenues.module.css';
+import { errorHandler } from 'utils/errorHandler';
+import { useMutation, useQuery } from '@apollo/client';
+import Col from 'react-bootstrap/Col';
+import { VENUE_LIST } from 'GraphQl/Queries/OrganizationQueries';
+import Loader from 'components/Loader/Loader';
+import { Navigate, useParams } from 'react-router-dom';
+import VenueModal from 'components/Venues/VenueModal';
+import { Dropdown, Form } from 'react-bootstrap';
+import { Search, Sort } from '@mui/icons-material';
+import { DELETE_VENUE_MUTATION } from 'GraphQl/Mutations/VenueMutations';
+import type { InterfaceQueryVenueListItem } from 'utils/interfaces';
+import VenueCard from 'components/Venues/VenueCard';
+
+/**
+ * Component to manage and display the list of organization venues.
+ * Handles searching, sorting, and CRUD operations for venues.
+ */
+function organizationVenues(): JSX.Element {
+  // Translation hooks for i18n support
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationVenues',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // Setting the document title using the translation hook
+  document.title = t('title');
+
+  // State hooks for managing component state
+  const [venueModal, setVenueModal] = useState<boolean>(false);
+  const [venueModalMode, setVenueModalMode] = useState<'edit' | 'create'>(
+    'create',
+  );
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchBy, setSearchBy] = useState<'name' | 'desc'>('name');
+  const [sortOrder, setSortOrder] = useState<'highest' | 'lowest'>('highest');
+  const [editVenueData, setEditVenueData] =
+    useState<InterfaceQueryVenueListItem | null>(null);
+  const [venues, setVenues] = useState<InterfaceQueryVenueListItem[]>([]);
+
+  // Getting the organization ID from the URL parameters
+  const { orgId } = useParams();
+  if (!orgId) {
+    return <Navigate to="/orglist" />;
+  }
+
+  // GraphQL query for fetching venue data
+  const {
+    data: venueData,
+    loading: venueLoading,
+    error: venueError,
+    refetch: venueRefetch,
+  } = useQuery(VENUE_LIST, {
+    variables: {
+      orgId: orgId,
+      orderBy: sortOrder === 'highest' ? 'capacity_DESC' : 'capacity_ASC',
+      where: {
+        name_starts_with: searchBy === 'name' ? searchTerm : undefined,
+        description_starts_with: searchBy === 'desc' ? searchTerm : undefined,
+      },
+    },
+  });
+
+  // GraphQL mutation for deleting a venue
+  const [deleteVenue] = useMutation(DELETE_VENUE_MUTATION);
+
+  /**
+   * Handles the deletion of a venue by ID.
+   * @param venueId - The ID of the venue to delete.
+   */
+  const handleDelete = async (venueId: string): Promise<void> => {
+    try {
+      await deleteVenue({
+        variables: { id: venueId },
+      });
+      venueRefetch();
+    } catch (error) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  /**
+   * Updates the search term state when the user types in the search input.
+   * @param event - The input change event.
+   */
+  const handleSearchChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    setSearchTerm(event.target.value);
+  };
+
+  /**
+   * Updates the sort order state when the user selects a sort option.
+   * @param order - The order to sort venues by (highest or lowest capacity).
+   */
+  const handleSortChange = (order: 'highest' | 'lowest'): void => {
+    setSortOrder(order);
+  };
+
+  /**
+   * Toggles the visibility of the venue modal.
+   */
+  const toggleVenueModal = (): void => {
+    setVenueModal(!venueModal);
+  };
+
+  /**
+   * Shows the edit venue modal with the selected venue data.
+   * @param venueItem - The venue data to edit.
+   */
+  const showEditVenueModal = (venueItem: InterfaceQueryVenueListItem): void => {
+    setVenueModalMode('edit');
+    setEditVenueData(venueItem);
+    toggleVenueModal();
+  };
+
+  /**
+   * Shows the create venue modal.
+   */
+  const showCreateVenueModal = (): void => {
+    setVenueModalMode('create');
+    setEditVenueData(null);
+    toggleVenueModal();
+  };
+
+  // Error handling for venue data fetch
+  /* istanbul ignore next */
+  if (venueError) {
+    errorHandler(t, venueError);
+  }
+
+  // Updating venues state when venue data changes
+  useEffect(() => {
+    if (venueData && venueData.getVenueByOrgId) {
+      setVenues(venueData.getVenueByOrgId);
+    }
+  }, [venueData]);
+
+  return (
+    <>
+      <div className={`${styles.btnsContainer} gap-3 flex-wrap`}>
+        <div className={`${styles.input}`}>
+          <Form.Control
+            type="name"
+            id="searchByName"
+            className="bg-white"
+            placeholder={t('searchBy') + ' ' + tCommon(searchBy)}
+            data-testid="searchBy"
+            autoComplete="off"
+            required
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 flex-wrap ">
+          <div className="d-flex gap-3 justify-content-between flex-fill">
+            <Dropdown
+              aria-expanded="false"
+              title="SearchBy"
+              data-tesid="searchByToggle"
+              className="flex-fill"
+            >
+              <Dropdown.Toggle
+                data-testid="searchByDrpdwn"
+                variant="outline-success"
+              >
+                <Sort className={'me-1'} />
+                {t('searchBy')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  id="searchName"
+                  onClick={(e): void => {
+                    setSearchBy('name');
+                    e.preventDefault();
+                  }}
+                  data-testid="name"
+                >
+                  {tCommon('name')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  id="searchDesc"
+                  onClick={(e): void => {
+                    setSearchBy('desc');
+                    e.preventDefault();
+                  }}
+                  data-testid="desc"
+                >
+                  {tCommon('description')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown
+              aria-expanded="false"
+              title="Sort Venues"
+              data-testid="sort"
+              className="flex-fill"
+            >
+              <Dropdown.Toggle
+                variant="outline-success"
+                data-testid="sortVenues"
+              >
+                <Sort className={'me-1'} />
+                {t('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={(): void => handleSortChange('highest')}
+                  data-testid="highest"
+                >
+                  {t('highestCapacity')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={(): void => handleSortChange('lowest')}
+                  data-testid="lowest"
+                >
+                  {t('lowestCapacity')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <Button
+            variant="success"
+            className="ml-3 flex-fill"
+            onClick={showCreateVenueModal}
+            data-testid="createVenueBtn"
+          >
+            <i className="fa fa-plus me-1"></i> {t('addVenue')}
+          </Button>
+        </div>
+      </div>
+
+      <Col>
+        <div className={styles.mainpageright}>
+          {venueLoading ? (
+            <>
+              <Loader />
+            </>
+          ) : (
+            <div
+              className={`${styles.list_box} row `}
+              data-testid="orgvenueslist"
+            >
+              {venues.length ? (
+                venues.map(
+                  (venueItem: InterfaceQueryVenueListItem, index: number) => (
+                    <VenueCard
+                      venueItem={venueItem}
+                      handleDelete={handleDelete}
+                      showEditVenueModal={showEditVenueModal}
+                      index={index}
+                      key={index}
+                    />
+                  ),
+                )
+              ) : (
+                <h6>{t('noVenues')}</h6>
+              )}
+            </div>
+          )}
+        </div>
+      </Col>
+      <VenueModal
+        show={venueModal}
+        onHide={toggleVenueModal}
+        refetchVenues={venueRefetch}
+        orgId={orgId}
+        edit={venueModalMode === 'edit' ? true : false}
+        venueData={editVenueData}
+      />
+    </>
+  );
+}
+
+export default organizationVenues;
diff --git a/src/screens/PageNotFound/PageNotFound.test.tsx b/src/screens/PageNotFound/PageNotFound.test.tsx
new file mode 100644
index 0000000000..501d9f7ef3
--- /dev/null
+++ b/src/screens/PageNotFound/PageNotFound.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+
+import { store } from 'state/store';
+import PageNotFound from './PageNotFound';
+import i18nForTest from 'utils/i18nForTest';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+describe('Testing Page not found component', () => {
+  test('Component should be rendered properly for User', () => {
+    //setItem('AdminFor', undefined);
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <PageNotFound />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByText(/Talawa User/i)).toBeTruthy();
+    expect(screen.getByText(/404/i)).toBeTruthy();
+    expect(
+      screen.getByText(/Oops! The Page you requested was not found!/i),
+    ).toBeTruthy();
+    expect(screen.getByText(/Back to Home/i)).toBeTruthy();
+  });
+
+  test('Component should be rendered properly for ADMIN or SUPERADMIN', () => {
+    setItem('AdminFor', [
+      {
+        _id: '6537904485008f171cf29924',
+        __typename: 'Organization',
+      },
+    ]);
+    render(
+      <BrowserRouter>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <PageNotFound />
+          </I18nextProvider>
+        </Provider>
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByText(/Talawa Admin Portal/i)).toBeTruthy();
+    expect(screen.getByText(/404/i)).toBeTruthy();
+    expect(
+      screen.getByText(/Oops! The Page you requested was not found!/i),
+    ).toBeTruthy();
+    expect(screen.getByText(/Back to Home/i)).toBeTruthy();
+  });
+});
diff --git a/src/screens/PageNotFound/PageNotFound.tsx b/src/screens/PageNotFound/PageNotFound.tsx
new file mode 100644
index 0000000000..62ed90c423
--- /dev/null
+++ b/src/screens/PageNotFound/PageNotFound.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import useLocalStorage from 'utils/useLocalstorage';
+
+import styles from '../../style/app.module.css';
+import Logo from 'assets/images/talawa-logo-600x600.png';
+
+/**
+ * The `PageNotFound` component displays a 404 error page when a user navigates to a non-existent route.
+ * It shows a message indicating that the page was not found and provides a link to redirect users back
+ * to the appropriate home page based on their admin status.
+ *
+ */
+const PageNotFound = (): JSX.Element => {
+  // Translation hooks for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'pageNotFound',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Set the document title to the translated title for the 404 page
+  document.title = t('title');
+
+  // Get the admin status from local storage
+  const { getItem } = useLocalStorage();
+  const adminFor = getItem('AdminFor');
+
+  return (
+    <section className={styles.pageNotFound}>
+      <div className="container text-center">
+        <div className="brand">
+          <img src={Logo} alt="Logo" className="img-fluid" />
+          {/* Display a message based on admin status */}
+          {adminFor != undefined ? (
+            <h3 className="text-uppercase mt-4">
+              {tCommon('talawaAdminPortal')}
+            </h3>
+          ) : (
+            <h3 className="text-uppercase mt-4">{t('talawaUser')}</h3>
+          )}
+        </div>
+        {/* Display the 404 error code */}
+        <h1 className={styles.head}>
+          <span>{t('404')}</span>
+        </h1>
+        {/* Display a not found message */}
+        <p>{tErrors('notFoundMsg')}</p>
+        {/* Provide a link to redirect users based on admin status */}
+        {adminFor != undefined ? (
+          <Link to="/orglist" className="btn btn-outline-success mt-3">
+            <i className="fas fa-home"></i> {t('backToHome')}
+          </Link>
+        ) : (
+          <Link
+            to="/user/organizations"
+            className="btn btn-outline-success mt-3"
+          >
+            <i className="fas fa-home"></i> {t('backToHome')}
+          </Link>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default PageNotFound;
diff --git a/src/screens/Requests/Requests.module.css b/src/screens/Requests/Requests.module.css
new file mode 100644
index 0000000000..b23869c8d0
--- /dev/null
+++ b/src/screens/Requests/Requests.module.css
@@ -0,0 +1,120 @@
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .inputContainer {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer .input {
+  width: 50%;
+  position: relative;
+}
+
+.btnsContainer input {
+  box-sizing: border-box;
+  background: #fcfcfc;
+  border: 1px solid #dddddd;
+  box-shadow: 5px 5px 4px rgba(49, 187, 107, 0.12);
+  border-radius: 8px;
+}
+
+.btnsContainer .inputContainer button {
+  width: 55px;
+  height: 55px;
+}
+
+.listBox {
+  width: 100%;
+  flex: 1;
+}
+
+.listTable {
+  width: 100%;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #0000001f;
+  border-radius: 24px;
+}
+
+.listBox .customTable {
+  margin-bottom: 0%;
+}
+
+.requestsTable thead th {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #000000;
+  border-bottom: 1px solid #dddddd;
+  padding: 1.5rem;
+}
+
+.notFound {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+  .btnsContainer .input {
+    width: 100%;
+  }
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
diff --git a/src/screens/Requests/Requests.test.tsx b/src/screens/Requests/Requests.test.tsx
new file mode 100644
index 0000000000..4606fdae08
--- /dev/null
+++ b/src/screens/Requests/Requests.test.tsx
@@ -0,0 +1,292 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { render, screen } from '@testing-library/react';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import userEvent from '@testing-library/user-event';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import Requests from './Requests';
+import {
+  EMPTY_MOCKS,
+  MOCKS_WITH_ERROR,
+  MOCKS,
+  MOCKS2,
+  EMPTY_REQUEST_MOCKS,
+  MOCKS3,
+  MOCKS4,
+} from './RequestsMocks';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem, removeItem } = useLocalStorage();
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(EMPTY_MOCKS, true);
+const link3 = new StaticMockLink(EMPTY_REQUEST_MOCKS, true);
+const link4 = new StaticMockLink(MOCKS2, true);
+const link5 = new StaticMockLink(MOCKS_WITH_ERROR, true);
+const link6 = new StaticMockLink(MOCKS3, true);
+const link7 = new StaticMockLink(MOCKS4, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+beforeEach(() => {
+  setItem('id', 'user1');
+  setItem('AdminFor', [{ _id: 'org1', __typename: 'Organization' }]);
+  setItem('SuperAdmin', false);
+});
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('Testing Requests screen', () => {
+  test('Component should be rendered properly', async () => {
+    const loadMoreRequests = jest.fn();
+    render(
+      <MockedProvider addTypename={false} link={link7}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByTestId('testComp')).toBeInTheDocument();
+    expect(screen.getByText('Scott Tony')).toBeInTheDocument();
+  });
+
+  test(`Component should be rendered properly when user is not Admin
+  and or userId does not exists in localstorage`, async () => {
+    setItem('id', '');
+    removeItem('AdminFor');
+    removeItem('SuperAdmin');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Component should be rendered properly when user is Admin', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Redirecting on error', async () => {
+    setItem('SuperAdmin', true);
+    render(
+      <MockedProvider addTypename={false} link={link5}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(window.location.href).toEqual('http://localhost/');
+  });
+
+  test('Testing Search requests functionality', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const searchBtn = screen.getByTestId('searchButton');
+    const search1 = 'John';
+    userEvent.type(screen.getByTestId(/searchByName/i), search1);
+    userEvent.click(searchBtn);
+    await wait();
+
+    const search2 = 'Pete{backspace}{backspace}{backspace}{backspace}';
+    userEvent.type(screen.getByTestId(/searchByName/i), search2);
+
+    const search3 =
+      'John{backspace}{backspace}{backspace}{backspace}Sam{backspace}{backspace}{backspace}';
+    userEvent.type(screen.getByTestId(/searchByName/i), search3);
+
+    const search4 = 'Sam{backspace}{backspace}P{backspace}';
+    userEvent.type(screen.getByTestId(/searchByName/i), search4);
+
+    const search5 = 'Xe';
+    userEvent.type(screen.getByTestId(/searchByName/i), search5);
+    userEvent.clear(screen.getByTestId(/searchByName/i));
+    userEvent.type(screen.getByTestId(/searchByName/i), '');
+    userEvent.click(searchBtn);
+    await wait();
+  });
+
+  test('Testing search not found', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const search = 'hello{enter}';
+    await act(() =>
+      userEvent.type(screen.getByTestId(/searchByName/i), search),
+    );
+  });
+
+  test('Testing Request data is not present', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByText(/No Membership Requests Found/i)).toBeTruthy();
+  });
+
+  test('Should render warning alert when there are no organizations', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait(200);
+    expect(screen.queryByText('Organizations Not Found')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Please create an organization through dashboard'),
+    ).toBeInTheDocument();
+  });
+
+  test('Should not render warning alert when there are organizations present', async () => {
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(container.textContent).not.toMatch(
+      'Organizations not found, please create an organization through dashboard',
+    );
+  });
+
+  test('Should render properly when there are no organizations present in requestsData', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link6}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('check for rerendering', async () => {
+    const { rerender } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    rerender(
+      <MockedProvider addTypename={false} link={link4}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Requests />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+});
diff --git a/src/screens/Requests/Requests.tsx b/src/screens/Requests/Requests.tsx
new file mode 100644
index 0000000000..38bc51195e
--- /dev/null
+++ b/src/screens/Requests/Requests.tsx
@@ -0,0 +1,343 @@
+import { useQuery } from '@apollo/client';
+import React, { useEffect, useState } from 'react';
+import { Form, Table } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { Search } from '@mui/icons-material';
+import {
+  MEMBERSHIP_REQUEST,
+  ORGANIZATION_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
+import TableLoader from 'components/TableLoader/TableLoader';
+import RequestsTableItem from 'components/RequestsTableItem/RequestsTableItem';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import type { InterfaceQueryMembershipRequestsListItem } from 'utils/interfaces';
+import styles from './Requests.module.css';
+import useLocalStorage from 'utils/useLocalstorage';
+import { useParams } from 'react-router-dom';
+
+interface InterfaceRequestsListItem {
+  _id: string;
+  user: {
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+}
+
+/**
+ * The `Requests` component fetches and displays a paginated list of membership requests
+ * for an organization, with functionality for searching, filtering, and infinite scrolling.
+ *
+ */
+const Requests = (): JSX.Element => {
+  // Translation hooks for internationalization
+  const { t } = useTranslation('translation', { keyPrefix: 'requests' });
+  const { t: tCommon } = useTranslation('common');
+
+  // Set the document title to the translated title for the requests page
+  document.title = t('title');
+
+  // Hook for managing local storage
+  const { getItem } = useLocalStorage();
+
+  // Define constants and state variables
+  const perPageResult = 8;
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [searchByName, setSearchByName] = useState<string>('');
+  const userRole = getItem('SuperAdmin')
+    ? 'SUPERADMIN'
+    : getItem('AdminFor')
+      ? 'ADMIN'
+      : 'USER';
+  const { orgId = '' } = useParams();
+  const organizationId = orgId;
+
+  // Query to fetch membership requests
+  const { data, loading, fetchMore, refetch } = useQuery(MEMBERSHIP_REQUEST, {
+    variables: {
+      id: organizationId,
+      first: perPageResult,
+      skip: 0,
+      firstName_contains: '',
+    },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  // Query to fetch the list of organizations
+  const { data: orgsData } = useQuery(ORGANIZATION_CONNECTION_LIST);
+  const [displayedRequests, setDisplayedRequests] = useState(
+    data?.organizations[0]?.membershipRequests || [],
+  );
+
+  // Manage loading more state
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    const membershipRequests = data.organizations[0].membershipRequests;
+
+    if (membershipRequests.length < perPageResult) {
+      setHasMore(false);
+    }
+
+    setDisplayedRequests(membershipRequests);
+  }, [data]);
+
+  // Clear the search field when the component is unmounted
+  useEffect(() => {
+    return () => {
+      setSearchByName('');
+    };
+  }, []);
+
+  // Show a warning if there are no organizations
+  useEffect(() => {
+    if (!orgsData) {
+      return;
+    }
+
+    if (orgsData.organizationsConnection.length === 0) {
+      toast.warning(t('noOrgError') as string);
+    }
+  }, [orgsData]);
+
+  // Redirect to orgList page if the user is not an admin
+  useEffect(() => {
+    if (userRole != 'ADMIN' && userRole != 'SUPERADMIN') {
+      window.location.assign('/orglist');
+    }
+  }, []);
+
+  // Manage the loading state
+  useEffect(() => {
+    if (loading && isLoadingMore == false) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [loading]);
+
+  /**
+   * Handles the search input change and refetches the data based on the search value.
+   *
+   * @param value - The search term entered by the user.
+   */
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    if (value === '') {
+      resetAndRefetch();
+      return;
+    }
+    refetch({
+      id: organizationId,
+      firstName_contains: value,
+      // Later on we can add several search and filter options
+    });
+  };
+
+  /**
+   * Handles search input when the Enter key is pressed.
+   *
+   * @param  e - The keyboard event.
+   */
+  const handleSearchByEnter = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.currentTarget;
+      handleSearch(value);
+    }
+  };
+
+  /**
+   * Handles the search button click to trigger the search.
+   */
+  const handleSearchByBtnClick = (): void => {
+    const inputElement = document.getElementById(
+      'searchRequests',
+    ) as HTMLInputElement;
+    const inputValue = inputElement?.value || '';
+    handleSearch(inputValue);
+  };
+
+  /**
+   * Resets search and refetches the data.
+   */
+  const resetAndRefetch = (): void => {
+    refetch({
+      first: perPageResult,
+      skip: 0,
+      firstName_contains: '',
+    });
+    setHasMore(true);
+  };
+
+  /**
+   * Loads more requests when scrolling to the bottom of the page.
+   */
+  /* istanbul ignore next */
+  const loadMoreRequests = (): void => {
+    setIsLoadingMore(true);
+    fetchMore({
+      variables: {
+        id: organizationId,
+        skip: data?.organizations?.[0]?.membershipRequests?.length || 0,
+        firstName_contains: searchByName,
+      },
+      updateQuery: (
+        prev: InterfaceQueryMembershipRequestsListItem | undefined,
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult: InterfaceQueryMembershipRequestsListItem | undefined;
+        },
+      ): InterfaceQueryMembershipRequestsListItem | undefined => {
+        setIsLoadingMore(false);
+        if (!fetchMoreResult) return prev;
+        const newMembershipRequests =
+          fetchMoreResult.organizations[0].membershipRequests || [];
+        if (newMembershipRequests.length < perPageResult) {
+          setHasMore(false);
+        }
+        return {
+          organizations: [
+            {
+              _id: organizationId,
+              membershipRequests: [
+                ...(prev?.organizations[0].membershipRequests || []),
+                ...newMembershipRequests,
+              ],
+            },
+          ],
+        };
+      },
+    });
+  };
+
+  // Header titles for the table
+  const headerTitles: string[] = [
+    t('sl_no'),
+    tCommon('name'),
+    tCommon('email'),
+    t('accept'),
+    t('reject'),
+  ];
+
+  return (
+    <>
+      {/* Buttons Container */}
+      <div className={styles.btnsContainer} data-testid="testComp">
+        <div className={styles.inputContainer}>
+          <div
+            className={styles.input}
+            style={{
+              display:
+                userRole === 'ADMIN' || userRole === 'SUPERADMIN'
+                  ? 'block'
+                  : 'none',
+            }}
+          >
+            <Form.Control
+              type="name"
+              id="searchRequests"
+              className="bg-white"
+              placeholder={t('searchRequests')}
+              data-testid="searchByName"
+              autoComplete="off"
+              required
+              onKeyUp={handleSearchByEnter}
+            />
+            <Button
+              tabIndex={-1}
+              className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+              data-testid="searchButton"
+              onClick={handleSearchByBtnClick}
+            >
+              <Search />
+            </Button>
+          </div>
+        </div>
+      </div>
+      {!isLoading && orgsData?.organizationsConnection.length === 0 ? (
+        <div className={styles.notFound}>
+          <h3 className="m-0">{t('noOrgErrorTitle')}</h3>
+          <h6 className="text-secondary">{t('noOrgErrorDescription')}</h6>
+        </div>
+      ) : !isLoading &&
+        data &&
+        displayedRequests.length === 0 &&
+        searchByName.length > 0 ? (
+        <div className={styles.notFound}>
+          <h4 className="m-0">
+            {tCommon('noResultsFoundFor')} &quot;{searchByName}&quot;
+          </h4>
+        </div>
+      ) : !isLoading && data && displayedRequests.length === 0 ? (
+        <div className={styles.notFound}>
+          <h4>{t('noRequestsFound')}</h4>
+        </div>
+      ) : (
+        <div className={styles.listBox}>
+          {isLoading ? (
+            <TableLoader headerTitles={headerTitles} noOfRows={perPageResult} />
+          ) : (
+            <InfiniteScroll
+              dataLength={displayedRequests.length ?? 0}
+              next={loadMoreRequests}
+              loader={
+                <TableLoader
+                  noOfCols={headerTitles.length}
+                  noOfRows={perPageResult}
+                />
+              }
+              hasMore={hasMore}
+              className={styles.listTable}
+              data-testid="requests-list"
+              endMessage={
+                <div className={'w-100 text-center my-4'}>
+                  <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
+                </div>
+              }
+            >
+              <Table className={styles.requestsTable} responsive borderless>
+                <thead>
+                  <tr>
+                    {headerTitles.map((title: string, index: number) => {
+                      return (
+                        <th key={index} scope="col">
+                          {title}
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+                <tbody>
+                  {data &&
+                    displayedRequests.map(
+                      (request: InterfaceRequestsListItem, index: number) => {
+                        return (
+                          <RequestsTableItem
+                            key={request?._id}
+                            index={index}
+                            resetAndRefetch={resetAndRefetch}
+                            request={request}
+                          />
+                        );
+                      },
+                    )}
+                </tbody>
+              </Table>
+            </InfiniteScroll>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Requests;
diff --git a/src/screens/Requests/RequestsMocks.ts b/src/screens/Requests/RequestsMocks.ts
new file mode 100644
index 0000000000..6dc22dd58e
--- /dev/null
+++ b/src/screens/Requests/RequestsMocks.ts
@@ -0,0 +1,573 @@
+import {
+  MEMBERSHIP_REQUEST,
+  ORGANIZATION_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
+
+export const EMPTY_REQUEST_MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 'org1',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: '',
+        skip: 0,
+        first: 8,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'org1',
+            membershipRequests: [],
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 'org1',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: '',
+        skip: 0,
+        first: 8,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '',
+            membershipRequests: [
+              {
+                _id: '1',
+                user: {
+                  _id: 'user2',
+                  firstName: 'Scott',
+                  lastName: 'Tony',
+                  email: 'testuser3@example.com',
+                },
+              },
+              {
+                _id: '2',
+                user: {
+                  _id: 'user3',
+                  firstName: 'Teresa',
+                  lastName: 'Bradley',
+                  email: 'testuser4@example.com',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const MOCKS4 = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 'org1',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: '',
+        skip: 0,
+        first: 8,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '',
+            membershipRequests: [
+              {
+                _id: '1',
+                user: {
+                  _id: 'user2',
+                  firstName: 'Scott',
+                  lastName: 'Tony',
+                  email: 'testuser3@example.com',
+                },
+              },
+              {
+                _id: '2',
+                user: {
+                  _id: 'user3',
+                  firstName: 'Teresa',
+                  lastName: 'Bradley',
+                  email: 'testuser4@example.com',
+                },
+              },
+              {
+                _id: '3',
+                user: {
+                  _id: 'user4',
+                  firstName: 'Jesse',
+                  lastName: 'Hart',
+                  email: 'testuser5@example.com',
+                },
+              },
+              {
+                _id: '4',
+                user: {
+                  _id: 'user5',
+                  firstName: 'Lena',
+                  lastName: 'Mcdonald',
+                  email: 'testuser6@example.com',
+                },
+              },
+              {
+                _id: '5',
+                user: {
+                  _id: 'user6',
+                  firstName: 'David',
+                  lastName: 'Smith',
+                  email: 'testuser7@example.com',
+                },
+              },
+              {
+                _id: '6',
+                user: {
+                  _id: 'user7',
+                  firstName: 'Emily',
+                  lastName: 'Johnson',
+                  email: 'testuser8@example.com',
+                },
+              },
+              {
+                _id: '7',
+                user: {
+                  _id: 'user8',
+                  firstName: 'Michael',
+                  lastName: 'Davis',
+                  email: 'testuser9@example.com',
+                },
+              },
+              {
+                _id: '8',
+                user: {
+                  _id: 'user9',
+                  firstName: 'Sarah',
+                  lastName: 'Wilson',
+                  email: 'testuser10@example.com',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: '',
+        skip: 8,
+        first: 16,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '',
+            membershipRequests: [
+              {
+                _id: '9',
+                user: {
+                  _id: 'user10',
+                  firstName: 'Daniel',
+                  lastName: 'Brown',
+                  email: 'testuser11@example.com',
+                },
+              },
+              {
+                _id: '10',
+                user: {
+                  _id: 'user11',
+                  firstName: 'Jessica',
+                  lastName: 'Martinez',
+                  email: 'testuser12@example.com',
+                },
+              },
+              {
+                _id: '11',
+                user: {
+                  _id: 'user12',
+                  firstName: 'Matthew',
+                  lastName: 'Taylor',
+                  email: 'testuser13@example.com',
+                },
+              },
+              {
+                _id: '12',
+                user: {
+                  _id: 'user13',
+                  firstName: 'Amanda',
+                  lastName: 'Anderson',
+                  email: 'testuser14@example.com',
+                },
+              },
+              {
+                _id: '13',
+                user: {
+                  _id: 'user14',
+                  firstName: 'Christopher',
+                  lastName: 'Thomas',
+                  email: 'testuser15@example.com',
+                },
+              },
+              {
+                _id: '14',
+                user: {
+                  _id: 'user15',
+                  firstName: 'Ashley',
+                  lastName: 'Hernandez',
+                  email: 'testuser16@example.com',
+                },
+              },
+              {
+                _id: '15',
+                user: {
+                  _id: 'user16',
+                  firstName: 'Andrew',
+                  lastName: 'Young',
+                  email: 'testuser17@example.com',
+                },
+              },
+              {
+                _id: '16',
+                user: {
+                  _id: 'user17',
+                  firstName: 'Nicole',
+                  lastName: 'Garcia',
+                  email: 'testuser18@example.com',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const MOCKS2 = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 'org1',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: 'org1',
+        skip: 0,
+        first: 8,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'org1',
+            membershipRequests: [
+              {
+                _id: '1',
+                user: {
+                  _id: 'user2',
+                  firstName: 'Scott',
+                  lastName: 'Tony',
+                  email: 'testuser3@example.com',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const MOCKS3 = [
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 'org1',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: 'org1',
+        skip: 0,
+        first: 8,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [],
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        id: 'org1',
+        skip: 0,
+        first: 8,
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'org1',
+            membershipRequests: [],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [],
+      },
+    },
+  },
+];
+
+export const MOCKS_WITH_ERROR = [
+  {
+    request: {
+      query: MEMBERSHIP_REQUEST,
+      variables: {
+        first: 0,
+        skip: 0,
+        id: '1',
+        firstName_contains: '',
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+  },
+];
diff --git a/src/screens/SubTags/SubTags.module.css b/src/screens/SubTags/SubTags.module.css
new file mode 100644
index 0000000000..0a210bdfa4
--- /dev/null
+++ b/src/screens/SubTags/SubTags.module.css
@@ -0,0 +1,145 @@
+.btnsContainer {
+  display: flex;
+  margin: 2rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  width: max-content;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+  max-width: 60%;
+  justify-content: space-between;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.subTagsLink {
+  color: var(--bs-blue);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.subTagsLink i {
+  visibility: hidden;
+}
+
+.subTagsLink:hover {
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsLink:hover i {
+  visibility: visible;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
+
+.tagsBreadCrumbs:hover {
+  color: var(--bs-blue);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+}
diff --git a/src/screens/SubTags/SubTags.test.tsx b/src/screens/SubTags/SubTags.test.tsx
new file mode 100644
index 0000000000..145d31109d
--- /dev/null
+++ b/src/screens/SubTags/SubTags.test.tsx
@@ -0,0 +1,369 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import SubTags from './SubTags';
+import { MOCKS, MOCKS_ERROR_SUB_TAGS } from './SubTagsMocks';
+import { InMemoryCache, type ApolloLink } from '@apollo/client';
+
+const translations = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationTags ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_SUB_TAGS, true);
+
+async function wait(ms = 500): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const cache = new InMemoryCache({
+  typePolicies: {
+    Query: {
+      fields: {
+        getUserTag: {
+          merge(existing = {}, incoming) {
+            const merged = {
+              ...existing,
+              ...incoming,
+              childTags: {
+                ...existing.childTags,
+                ...incoming.childTags,
+                edges: [
+                  ...(existing.childTags?.edges || []),
+                  ...(incoming.childTags?.edges || []),
+                ],
+              },
+            };
+
+            return merged;
+          },
+        },
+      },
+    },
+  },
+});
+
+const renderSubTags = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider cache={cache} addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/orgtags/123/subTags/1']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <Routes>
+              <Route
+                path="/orgtags/:orgId"
+                element={<div data-testid="orgtagsScreen"></div>}
+              />
+              <Route
+                path="/orgtags/:orgId/manageTag/:tagId"
+                element={<div data-testid="manageTagScreen"></div>}
+              />
+              <Route
+                path="/orgtags/:orgId/subTags/:tagId"
+                element={<SubTags />}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Organisation Tags Page', () => {
+  beforeEach(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+    cache.reset();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  test('Component loads correctly', async () => {
+    const { getByText } = renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.addChildTag)).toBeInTheDocument();
+    });
+  });
+
+  test('render error component on unsuccessful subtags query', async () => {
+    const { queryByText } = renderSubTags(link2);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(queryByText(translations.addChildTag)).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes the create tag modal', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addSubTagBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('addSubTagBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('addSubTagModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('addSubTagModalCloseBtn'));
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTestId('addSubTagModalCloseBtn'),
+    );
+  });
+
+  test('navigates to manage tag screen after clicking manage tag option', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('manageTagBtn')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('manageTagBtn')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('manageTagScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to sub tags screen after clicking on a tag', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('tagName')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addSubTagBtn')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to the different sub tag screen screen after clicking a tag in the breadcrumbs', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('redirectToSubTags')[0]).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('redirectToSubTags')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addSubTagBtn')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to organization tags screen screen after clicking tha all tags option in the breadcrumbs', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('allTagsBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('allTagsBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('orgtagsScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('navigates to manage tags screen for the current tag after clicking tha manageCurrentTag button', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('manageCurrentTagBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('manageCurrentTagBtn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('manageTagScreen')).toBeInTheDocument();
+    });
+  });
+
+  test('searchs for tags where the name matches the provided search input', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'searchSubTag' } });
+
+    // should render the two searched tags from the mock data
+    // where name starts with "searchUserTag"
+    await waitFor(() => {
+      const buttons = screen.getAllByTestId('manageTagBtn');
+      expect(buttons.length).toEqual(2);
+    });
+  });
+
+  test('fetches the tags by the sort order, i.e. latest or oldest first', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText(translations.searchByName),
+      ).toBeInTheDocument();
+    });
+    const input = screen.getByPlaceholderText(translations.searchByName);
+    fireEvent.change(input, { target: { value: 'searchSubTag' } });
+
+    // should render the two searched tags from the mock data
+    // where name starts with "searchUserTag"
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toHaveTextContent(
+        'searchSubTag 1',
+      );
+    });
+
+    // now change the sorting order
+    await waitFor(() => {
+      expect(screen.getByTestId('sortTags')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortTags'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('oldest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('oldest'));
+
+    // returns the tags in reverse order
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toHaveTextContent(
+        'searchSubTag 2',
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sortTags')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortTags'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('latest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('latest'));
+
+    // reverse the order again
+    await waitFor(() => {
+      expect(screen.getAllByTestId('tagName')[0]).toHaveTextContent(
+        'searchSubTag 1',
+      );
+    });
+  });
+
+  test('Fetches more sub tags with infinite scroll', async () => {
+    const { getByText } = renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(getByText(translations.addChildTag)).toBeInTheDocument();
+    });
+
+    const subTagsScrollableDiv = screen.getByTestId('subTagsScrollableDiv');
+
+    // Get the initial number of tags loaded
+    const initialSubTagsDataLength =
+      screen.getAllByTestId('manageTagBtn').length;
+
+    // Set scroll position to the bottom
+    fireEvent.scroll(subTagsScrollableDiv, {
+      target: { scrollY: subTagsScrollableDiv.scrollHeight },
+    });
+
+    await waitFor(() => {
+      const finalSubTagsDataLength =
+        screen.getAllByTestId('manageTagBtn').length;
+      expect(finalSubTagsDataLength).toBeGreaterThan(initialSubTagsDataLength);
+
+      expect(getByText(translations.addChildTag)).toBeInTheDocument();
+    });
+  });
+
+  test('adds a new sub tag to the current tag', async () => {
+    renderSubTags(link);
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('addSubTagBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('addSubTagBtn'));
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.tagNamePlaceholder),
+      'subTag 12',
+    );
+
+    userEvent.click(screen.getByTestId('addSubTagSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.tagCreationSuccess,
+      );
+    });
+  });
+});
diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx
new file mode 100644
index 0000000000..930232aaca
--- /dev/null
+++ b/src/screens/SubTags/SubTags.tsx
@@ -0,0 +1,494 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { Search, WarningAmberRounded } from '@mui/icons-material';
+import SortIcon from '@mui/icons-material/Sort';
+import Loader from 'components/Loader/Loader';
+import IconComponent from 'components/IconComponent/IconComponent';
+import { useNavigate, useParams, Link } from 'react-router-dom';
+import type { ChangeEvent } from 'react';
+import React, { useState } from 'react';
+import { Form } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Modal from 'react-bootstrap/Modal';
+import Row from 'react-bootstrap/Row';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import type { InterfaceQueryUserTagChildTags } from 'utils/interfaces';
+import styles from '../../style/app.module.css';
+import { DataGrid } from '@mui/x-data-grid';
+import type {
+  InterfaceOrganizationSubTagsQuery,
+  SortedByType,
+} from 'utils/organizationTagsUtils';
+import {
+  dataGridStyle,
+  TAGS_QUERY_DATA_CHUNK_SIZE,
+} from 'utils/organizationTagsUtils';
+import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
+import { Stack } from '@mui/material';
+import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
+import { USER_TAG_SUB_TAGS } from 'GraphQl/Queries/userTagQueries';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
+
+/**
+ * Component that renders the SubTags screen when the app navigates to '/orgtags/:orgId/subtags/:tagId'.
+ *
+ * This component does not accept any props and is responsible for displaying
+ * the content associated with the corresponding route.
+ */
+
+function SubTags(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationTags',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [addSubTagModalIsOpen, setAddSubTagModalIsOpen] = useState(false);
+
+  const { orgId, tagId: parentTagId } = useParams();
+
+  const navigate = useNavigate();
+
+  const [tagName, setTagName] = useState<string>('');
+
+  const [tagSearchName, setTagSearchName] = useState('');
+  const [tagSortOrder, setTagSortOrder] = useState<SortedByType>('DESCENDING');
+
+  const showAddSubTagModal = (): void => {
+    setAddSubTagModalIsOpen(true);
+  };
+
+  const hideAddSubTagModal = (): void => {
+    setAddSubTagModalIsOpen(false);
+    setTagName('');
+  };
+
+  const {
+    data: subTagsData,
+    error: subTagsError,
+    loading: subTagsLoading,
+    refetch: subTagsRefetch,
+    fetchMore: fetchMoreSubTags,
+  }: InterfaceOrganizationSubTagsQuery = useQuery(USER_TAG_SUB_TAGS, {
+    variables: {
+      id: parentTagId,
+      first: TAGS_QUERY_DATA_CHUNK_SIZE,
+      where: { name: { starts_with: tagSearchName } },
+      sortedBy: { id: tagSortOrder },
+    },
+  });
+
+  const loadMoreSubTags = (): void => {
+    fetchMoreSubTags({
+      variables: {
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        after: subTagsData?.getChildTags.childTags.pageInfo.endCursor,
+      },
+      updateQuery: (
+        prevResult: { getChildTags: InterfaceQueryUserTagChildTags },
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult?: { getChildTags: InterfaceQueryUserTagChildTags };
+        },
+      ) => {
+        if (!fetchMoreResult) /* istanbul ignore next */ return prevResult;
+
+        return {
+          getChildTags: {
+            ...fetchMoreResult.getChildTags,
+            childTags: {
+              ...fetchMoreResult.getChildTags.childTags,
+              edges: [
+                ...prevResult.getChildTags.childTags.edges,
+                ...fetchMoreResult.getChildTags.childTags.edges,
+              ],
+            },
+          },
+        };
+      },
+    });
+  };
+
+  const [create, { loading: createUserTagLoading }] =
+    useMutation(CREATE_USER_TAG);
+
+  const addSubTag = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault();
+
+    try {
+      const { data } = await create({
+        variables: {
+          name: tagName,
+          organizationId: orgId,
+          parentTagId,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(t('tagCreationSuccess') as string);
+        subTagsRefetch();
+        setTagName('');
+        setAddSubTagModalIsOpen(false);
+      }
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+  };
+
+  if (subTagsError) {
+    return (
+      <div className={`${styles.errorContainer} bg-white rounded-4 my-3`}>
+        <div className={styles.errorMessage}>
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            Error occured while loading sub tags
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const subTagsList =
+    subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ??
+    /* istanbul ignore next */ [];
+
+  const parentTagName = subTagsData?.getChildTags.name;
+
+  // get the ancestorTags array and push the current tag in it
+  // used for the tag breadcrumbs
+  const orgUserTagAncestors = [
+    ...(subTagsData?.getChildTags.ancestorTags ?? []),
+    {
+      _id: parentTagId,
+      name: parentTagName,
+    },
+  ];
+
+  const redirectToManageTag = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/manageTag/${tagId}`);
+  };
+
+  const redirectToSubTags = (tagId: string): void => {
+    navigate(`/orgtags/${orgId}/subTags/${tagId}`);
+  };
+
+  const columns: GridColDef[] = [
+    {
+      field: 'id',
+      headerName: '#',
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <div>{params.row.id}</div>;
+      },
+    },
+    {
+      field: 'tagName',
+      headerName: 'Tag Name',
+      flex: 1,
+      minWidth: 100,
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className={styles.subTagsLink}
+            data-testid="tagName"
+            onClick={() => redirectToSubTags(params.row._id as string)}
+          >
+            {params.row.name}
+
+            <i className={'ms-2 fa fa-caret-right'} />
+          </div>
+        );
+      },
+    },
+    {
+      field: 'totalSubTags',
+      headerName: 'Total Sub Tags',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Link
+            className="text-secondary"
+            to={`/orgtags/${orgId}/subTags/${params.row._id}`}
+          >
+            {params.row.childTags.totalCount}
+          </Link>
+        );
+      },
+    },
+    {
+      field: 'totalAssignedUsers',
+      headerName: 'Total Assigned Users',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Link
+            className="text-secondary"
+            to={`/orgtags/${orgId}/manageTag/${params.row._id}`}
+          >
+            {params.row.usersAssignedTo.totalCount}
+          </Link>
+        );
+      },
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Button
+            size="sm"
+            variant="outline-primary"
+            onClick={() => redirectToManageTag(params.row._id)}
+            data-testid="manageTagBtn"
+          >
+            {t('manageTag')}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Row>
+        <div>
+          <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+            <div className={`${styles.input} mb-1`}>
+              <Form.Control
+                type="text"
+                id="tagName"
+                className={`${styles.inputField} `}
+                placeholder={tCommon('searchByName')}
+                onChange={(e) => setTagSearchName(e.target.value.trim())}
+                data-testid="searchByName"
+                autoComplete="off"
+              />
+              <Button
+                tabIndex={-1}
+                className={styles.searchButton}
+                data-testid="searchBtn"
+              >
+                <Search />
+              </Button>
+            </div>
+
+            <Dropdown
+              title="Sort Tag"
+              // className={styles.dropdown}
+              // className="ms-4 mb-4"
+              data-testid="sort"
+            >
+              <Dropdown.Toggle
+                data-testid="sortTags"
+                // className="color-red"
+                className={styles.dropdown}
+              >
+                <SortIcon className={'me-1'} />
+                {tagSortOrder === 'DESCENDING'
+                  ? tCommon('Latest')
+                  : tCommon('Oldest')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  data-testid="latest"
+                  onClick={() => setTagSortOrder('DESCENDING')}
+                >
+                  {tCommon('Latest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  data-testid="oldest"
+                  onClick={() => setTagSortOrder('ASCENDING')}
+                >
+                  {tCommon('Oldest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+
+            <Button
+              onClick={() => redirectToManageTag(parentTagId as string)}
+              data-testid="manageCurrentTagBtn"
+              className={`${styles.createButton} mb-3`}
+            >
+              {`${t('manageTag')} ${subTagsData?.getChildTags.name}`}
+            </Button>
+
+            <Button
+              variant="success"
+              onClick={showAddSubTagModal}
+              data-testid="addSubTagBtn"
+              className={`${styles.createButton} mb-3`}
+            >
+              <i className={'fa fa-plus me-2'} />
+              {t('addChildTag')}
+            </Button>
+          </div>
+
+          {subTagsLoading || createUserTagLoading ? (
+            <Loader />
+          ) : (
+            <div className="mb-2 ">
+              <div className="bg-white light border rounded-top mb-0 py-2 d-flex align-items-center">
+                <div className="ms-3 my-1">
+                  <IconComponent name="Tag" />
+                </div>
+
+                <div
+                  onClick={() => navigate(`/orgtags/${orgId}`)}
+                  className={`fs-6 ms-3 my-1 ${styles.tagsBreadCrumbs}`}
+                  data-testid="allTagsBtn"
+                >
+                  {'Tags'}
+                  <i className={'mx-2 fa fa-caret-right'} />
+                </div>
+
+                {orgUserTagAncestors?.map((tag, index) => (
+                  <div
+                    key={index}
+                    className={`ms-2  ${tag._id === parentTagId ? `fs-4 fw-semibold text-secondary` : `${styles.tagsBreadCrumbs} fs-6`}`}
+                    onClick={() => redirectToSubTags(tag._id as string)}
+                    data-testid="redirectToSubTags"
+                  >
+                    {tag.name}
+
+                    {orgUserTagAncestors.length - 1 !== index && (
+                      <i className={'mx-2 fa fa-caret-right'} />
+                    )}
+                  </div>
+                ))}
+              </div>
+              <div
+                id="subTagsScrollableDiv"
+                data-testid="subTagsScrollableDiv"
+                className={styles.subTagsScrollableDiv}
+              >
+                <InfiniteScroll
+                  dataLength={subTagsList?.length ?? 0}
+                  next={loadMoreSubTags}
+                  hasMore={
+                    subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ??
+                    /* istanbul ignore next */
+                    false
+                  }
+                  loader={<InfiniteScrollLoader />}
+                  scrollableTarget="subTagsScrollableDiv"
+                >
+                  <DataGrid
+                    disableColumnMenu
+                    columnBufferPx={7}
+                    hideFooter={true}
+                    getRowId={(row) => row.id}
+                    slots={{
+                      noRowsOverlay: /* istanbul ignore next */ () => (
+                        <Stack
+                          height="100%"
+                          alignItems="center"
+                          justifyContent="center"
+                        >
+                          {t('noTagsFound')}
+                        </Stack>
+                      ),
+                    }}
+                    sx={dataGridStyle}
+                    getRowClassName={() => `${styles.rowBackground}`}
+                    autoHeight
+                    rowHeight={65}
+                    rows={subTagsList?.map((subTag, index) => ({
+                      id: index + 1,
+                      ...subTag,
+                    }))}
+                    columns={columns}
+                    isRowSelectable={() => false}
+                  />
+                </InfiniteScroll>
+              </div>
+            </div>
+          )}
+        </div>
+      </Row>
+
+      {/* Create Tag Modal */}
+      <Modal
+        show={addSubTagModalIsOpen}
+        onHide={hideAddSubTagModal}
+        backdrop="static"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header
+          className={styles.tableHeader}
+          data-testid="tagHeader"
+          closeButton
+        >
+          <Modal.Title>{t('tagDetails')}</Modal.Title>
+        </Modal.Header>
+        <Form onSubmitCapture={addSubTag}>
+          <Modal.Body>
+            <Form.Label htmlFor="tagName">{t('tagName')}</Form.Label>
+            <Form.Control
+              type="name"
+              id="tagname"
+              className="mb-3"
+              placeholder={t('tagNamePlaceholder')}
+              data-testid="modalTitle"
+              autoComplete="off"
+              required
+              value={tagName}
+              onChange={(e): void => {
+                setTagName(e.target.value);
+              }}
+            />
+          </Modal.Body>
+
+          <Modal.Footer>
+            <Button
+              variant="secondary"
+              onClick={(): void => hideAddSubTagModal()}
+              data-testid="addSubTagModalCloseBtn"
+              className={styles.closeButton}
+            >
+              {tCommon('cancel')}
+            </Button>
+            <Button
+              type="submit"
+              value="add"
+              data-testid="addSubTagSubmitBtn"
+              className={styles.addButton}
+            >
+              {tCommon('create')}
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+}
+
+export default SubTags;
diff --git a/src/screens/SubTags/SubTagsMocks.ts b/src/screens/SubTags/SubTagsMocks.ts
new file mode 100644
index 0000000000..5165ea3a53
--- /dev/null
+++ b/src/screens/SubTags/SubTagsMocks.ts
@@ -0,0 +1,502 @@
+import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
+import { USER_TAG_SUB_TAGS } from 'GraphQl/Queries/userTagQueries';
+import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils';
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'userTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'subTag1',
+                  name: 'subTag 1',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag1',
+              },
+              {
+                node: {
+                  _id: 'subTag2',
+                  name: 'subTag 2',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag2',
+              },
+              {
+                node: {
+                  _id: 'subTag3',
+                  name: 'subTag 3',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag3',
+              },
+              {
+                node: {
+                  _id: 'subTag4',
+                  name: 'subTag 4',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag4',
+              },
+              {
+                node: {
+                  _id: 'subTag5',
+                  name: 'subTag 5',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag5',
+              },
+              {
+                node: {
+                  _id: 'subTag6',
+                  name: 'subTag 6',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag6',
+              },
+              {
+                node: {
+                  _id: 'subTag7',
+                  name: 'subTag 7',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag7',
+              },
+              {
+                node: {
+                  _id: 'subTag8',
+                  name: 'subTag 8',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag8',
+              },
+              {
+                node: {
+                  _id: 'subTag9',
+                  name: 'subTag 9',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag9',
+              },
+              {
+                node: {
+                  _id: 'subTag10',
+                  name: 'subTag 10',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag10',
+              },
+            ],
+            pageInfo: {
+              startCursor: '1',
+              endCursor: '10',
+              hasNextPage: true,
+              hasPreviousPage: false,
+            },
+            totalCount: 11,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        after: '10',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'userTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'subTag11',
+                  name: 'subTag 11',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag11',
+              },
+            ],
+            pageInfo: {
+              startCursor: '11',
+              endCursor: '11',
+              hasNextPage: false,
+              hasPreviousPage: true,
+            },
+            totalCount: 11,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: 'subTag1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'subTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'subTag1.1',
+                  name: 'subTag 1.1',
+                  usersAssignedTo: {
+                    totalCount: 5,
+                  },
+                  childTags: {
+                    totalCount: 5,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                    {
+                      _id: 'subTag1',
+                      name: 'subTag 1',
+                    },
+                  ],
+                },
+                cursor: 'subTag1.1',
+              },
+            ],
+            pageInfo: {
+              startCursor: 'subTag1.1',
+              endCursor: 'subTag1.1',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 1,
+          },
+          ancestorTags: [
+            {
+              _id: '1',
+              name: 'userTag 1',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: 'searchSubTag' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'userTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'searchSubTag1',
+                  name: 'searchSubTag 1',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'searchSubTag1',
+              },
+              {
+                node: {
+                  _id: 'searchSubTag2',
+                  name: 'searchSubTag 2',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'searchSubTag2',
+              },
+            ],
+            pageInfo: {
+              startCursor: 'searchSubTag1',
+              endCursor: 'searchSubTag2',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 2,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: 'searchSubTag' } },
+        sortedBy: { id: 'ASCENDING' },
+      },
+    },
+    result: {
+      data: {
+        getChildTags: {
+          name: 'userTag 1',
+          childTags: {
+            edges: [
+              {
+                node: {
+                  _id: 'searchSubTag2',
+                  name: 'searchSubTag 2',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'searchSubTag2',
+              },
+              {
+                node: {
+                  _id: 'searchSubTag1',
+                  name: 'searchSubTag 1',
+                  usersAssignedTo: {
+                    totalCount: 0,
+                  },
+                  childTags: {
+                    totalCount: 0,
+                  },
+                  ancestorTags: [
+                    {
+                      _id: '1',
+                      name: 'userTag 1',
+                    },
+                  ],
+                },
+                cursor: 'searchSubTag1',
+              },
+            ],
+            pageInfo: {
+              startCursor: 'searchSubTag2',
+              endCursor: 'searchSubTag1',
+              hasNextPage: false,
+              hasPreviousPage: false,
+            },
+            totalCount: 2,
+          },
+          ancestorTags: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_USER_TAG,
+      variables: {
+        name: 'subTag 12',
+        organizationId: '123',
+        parentTagId: '1',
+      },
+    },
+    result: {
+      data: {
+        createUserTag: {
+          _id: 'subTag12',
+        },
+      },
+    },
+  },
+];
+
+export const MOCKS_ERROR_SUB_TAGS = [
+  {
+    request: {
+      query: USER_TAG_SUB_TAGS,
+      variables: {
+        id: '1',
+        first: TAGS_QUERY_DATA_CHUNK_SIZE,
+        where: { name: { starts_with: '' } },
+        sortedBy: { id: 'DESCENDING' },
+      },
+    },
+    error: new Error('Mock Graphql Error'),
+  },
+];
diff --git a/src/screens/UserPortal/Campaigns/Campaigns.module.css b/src/screens/UserPortal/Campaigns/Campaigns.module.css
new file mode 100644
index 0000000000..b535b9981c
--- /dev/null
+++ b/src/screens/UserPortal/Campaigns/Campaigns.module.css
@@ -0,0 +1,137 @@
+.btnsContainer {
+  display: flex;
+  margin: 1.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+  background-color: white;
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.accordionSummary {
+  width: 100% !important;
+  padding-right: 0.75rem;
+  display: flex;
+  justify-content: space-between !important;
+  align-items: center;
+}
+
+.accordionSummary button {
+  height: 2.25rem;
+  padding-top: 0.35rem;
+}
+
+.accordionSummary button:hover {
+  background-color: #31bb6a50 !important;
+  color: #31bb6b !important;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.subContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.chipIcon {
+  height: 0.9rem !important;
+}
+
+.chip {
+  height: 1.5rem !important;
+  margin: 0.15rem 0 0 1.25rem;
+}
+
+.active {
+  background-color: #31bb6a50 !important;
+}
+
+.pending {
+  background-color: #ffd76950 !important;
+  color: #bb952bd0 !important;
+  border-color: #bb952bd0 !important;
+}
+
+.progress {
+  display: flex;
+  width: 45rem;
+}
+
+.progressBar {
+  margin: 0rem 0.75rem;
+  width: 100%;
+  font-size: 0.9rem;
+  height: 1.25rem;
+}
+
+/* Pledge Modal */
+
+.pledgeModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
diff --git a/src/screens/UserPortal/Campaigns/Campaigns.test.tsx b/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
new file mode 100644
index 0000000000..17b7eec4d5
--- /dev/null
+++ b/src/screens/UserPortal/Campaigns/Campaigns.test.tsx
@@ -0,0 +1,324 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import type { ApolloLink } from '@apollo/client';
+import useLocalStorage from 'utils/useLocalstorage';
+import Campaigns from './Campaigns';
+import {
+  EMPTY_MOCKS,
+  MOCKS,
+  USER_FUND_CAMPAIGNS_ERROR,
+} from './CampaignsMocks';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(USER_FUND_CAMPAIGNS_ERROR);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const cTranslations = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.userCampaigns,
+  ),
+);
+const pTranslations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges),
+);
+
+const renderCampaigns = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/campaigns/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/user/campaigns/:orgId" element={<Campaigns />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+                <Route
+                  path="/user/pledges/:orgId"
+                  element={<div data-testid="pledgeScreen"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing User Campaigns Screen', () => {
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the User Campaigns screen', async () => {
+    renderCampaigns(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchCampaigns')).toBeInTheDocument();
+      expect(screen.getByText('School Campaign')).toBeInTheDocument();
+      expect(screen.getByText('Hospital Campaign')).toBeInTheDocument();
+    });
+  });
+
+  it('should redirect to fallback URL if userId is null in LocalStorage', async () => {
+    setItem('userId', null);
+    renderCampaigns(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/user/campaigns/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/user/campaigns/" element={<Campaigns />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render the User Campaign screen with error', async () => {
+    renderCampaigns(link2);
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the empty campaign component', async () => {
+    renderCampaigns(link3);
+    await waitFor(() =>
+      expect(screen.getByText(cTranslations.noCampaigns)).toBeInTheDocument(),
+    );
+  });
+
+  it('Check if All details are rendered correctly', async () => {
+    renderCampaigns(link1);
+
+    const detailContainer = await screen.findByTestId('detailContainer1');
+    const detailContainer2 = await screen.findByTestId('detailContainer2');
+    await waitFor(() => {
+      expect(detailContainer).toBeInTheDocument();
+      expect(detailContainer2).toBeInTheDocument();
+      expect(detailContainer).toHaveTextContent('School Campaign');
+      expect(detailContainer).toHaveTextContent('$22000');
+      expect(detailContainer).toHaveTextContent('2024-07-28');
+      expect(detailContainer).toHaveTextContent('2025-08-31');
+      expect(detailContainer).toHaveTextContent('Active');
+      expect(detailContainer2).toHaveTextContent('Hospital Campaign');
+      expect(detailContainer2).toHaveTextContent('$9000');
+      expect(detailContainer2).toHaveTextContent('2024-07-28');
+      expect(detailContainer2).toHaveTextContent('2022-08-30');
+      expect(detailContainer2).toHaveTextContent('Ended');
+    });
+  });
+
+  it('Sort the Campaigns list by lowest fundingGoal', async () => {
+    renderCampaigns(link1);
+
+    const searchCampaigns = await screen.findByTestId('searchCampaigns');
+    expect(searchCampaigns).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('fundingGoal_ASC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('fundingGoal_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('School Campaign')).toBeInTheDocument();
+      expect(screen.getByText('Hospital Campaign')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const detailContainer = screen.getByTestId('detailContainer2');
+      expect(detailContainer).toHaveTextContent('School Campaign');
+      expect(detailContainer).toHaveTextContent('$22000');
+      expect(detailContainer).toHaveTextContent('2024-07-28');
+      expect(detailContainer).toHaveTextContent('2024-08-31');
+    });
+  });
+
+  it('Sort the Campaigns list by highest fundingGoal', async () => {
+    renderCampaigns(link1);
+
+    const searchCampaigns = await screen.findByTestId('searchCampaigns');
+    expect(searchCampaigns).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('fundingGoal_DESC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('fundingGoal_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('School Campaign')).toBeInTheDocument();
+      expect(screen.getByText('Hospital Campaign')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const detailContainer = screen.getByTestId('detailContainer1');
+      expect(detailContainer).toHaveTextContent('School Campaign');
+      expect(detailContainer).toHaveTextContent('$22000');
+      expect(detailContainer).toHaveTextContent('2024-07-28');
+      expect(detailContainer).toHaveTextContent('2024-08-31');
+    });
+  });
+
+  it('Sort the Campaigns list by earliest endDate', async () => {
+    renderCampaigns(link1);
+
+    const searchCampaigns = await screen.findByTestId('searchCampaigns');
+    expect(searchCampaigns).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('endDate_ASC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('endDate_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('School Campaign')).toBeInTheDocument();
+      expect(screen.getByText('Hospital Campaign')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const detailContainer = screen.getByTestId('detailContainer2');
+      expect(detailContainer).toHaveTextContent('School Campaign');
+      expect(detailContainer).toHaveTextContent('$22000');
+      expect(detailContainer).toHaveTextContent('2024-07-28');
+      expect(detailContainer).toHaveTextContent('2024-08-31');
+    });
+  });
+
+  it('Sort the Campaigns list by latest endDate', async () => {
+    renderCampaigns(link1);
+
+    const searchCampaigns = await screen.findByTestId('searchCampaigns');
+    expect(searchCampaigns).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('endDate_DESC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('endDate_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('School Campaign')).toBeInTheDocument();
+      expect(screen.getByText('Hospital Campaign')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const detailContainer = screen.getByTestId('detailContainer1');
+      expect(detailContainer).toHaveTextContent('School Campaign');
+      expect(detailContainer).toHaveTextContent('$22000');
+      expect(detailContainer).toHaveTextContent('2024-07-28');
+      expect(detailContainer).toHaveTextContent('2025-08-31');
+    });
+  });
+
+  it('Search the Campaigns list by name', async () => {
+    renderCampaigns(link1);
+
+    const searchCampaigns = await screen.findByTestId('searchCampaigns');
+    expect(searchCampaigns).toBeInTheDocument();
+
+    fireEvent.change(searchCampaigns, {
+      target: { value: 'Hospital' },
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('School Campaign')).toBeNull();
+      expect(screen.getByText('Hospital Campaign')).toBeInTheDocument();
+    });
+  });
+
+  it('open and closes add pledge modal', async () => {
+    renderCampaigns(link1);
+
+    const addPledgeBtn = await screen.findAllByTestId('addPledgeBtn');
+    await waitFor(() => expect(addPledgeBtn[0]).toBeInTheDocument());
+    userEvent.click(addPledgeBtn[0]);
+
+    await waitFor(() =>
+      expect(screen.getAllByText(pTranslations.createPledge)).toHaveLength(2),
+    );
+    userEvent.click(screen.getByTestId('pledgeModalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('pledgeModalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('Redirect to My Pledges screen', async () => {
+    renderCampaigns(link1);
+
+    const myPledgesBtn = await screen.findByText(cTranslations.myPledges);
+    expect(myPledgesBtn).toBeInTheDocument();
+    userEvent.click(myPledgesBtn);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('pledgeScreen')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Campaigns/Campaigns.tsx b/src/screens/UserPortal/Campaigns/Campaigns.tsx
new file mode 100644
index 0000000000..e4483f87fe
--- /dev/null
+++ b/src/screens/UserPortal/Campaigns/Campaigns.tsx
@@ -0,0 +1,305 @@
+import React, { useEffect, useState } from 'react';
+import { Dropdown, Form, Button, ProgressBar } from 'react-bootstrap';
+import styles from './Campaigns.module.css';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { Circle, Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Chip,
+  Stack,
+} from '@mui/material';
+import { GridExpandMoreIcon } from '@mui/x-data-grid';
+import useLocalStorage from 'utils/useLocalstorage';
+import PledgeModal from './PledgeModal';
+import { USER_FUND_CAMPAIGNS } from 'GraphQl/Queries/fundQueries';
+import { useQuery } from '@apollo/client';
+import type { InterfaceUserCampaign } from 'utils/interfaces';
+import { currencySymbols } from 'utils/currency';
+import Loader from 'components/Loader/Loader';
+
+/**
+ * The `Campaigns` component displays a list of fundraising campaigns for a specific organization.
+ * It allows users to search, sort, and view details about each campaign. Users can also add pledges to active campaigns.
+ *
+ * @returns The rendered component displaying the campaigns.
+ */
+const Campaigns = (): JSX.Element => {
+  // Retrieves translation functions for various namespaces
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userCampaigns',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Retrieves stored user ID from local storage
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  // Extracts organization ID from the URL parameters
+  const { orgId } = useParams();
+  if (!orgId || !userId) {
+    // Redirects to the homepage if orgId or userId is missing
+    return <Navigate to={'/'} replace />;
+  }
+
+  // Navigation hook to programmatically navigate between routes
+  const navigate = useNavigate();
+
+  // State for managing search term, campaigns, selected campaign, modal state, and sorting order
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [campaigns, setCampaigns] = useState<InterfaceUserCampaign[]>([]);
+  const [selectedCampaign, setSelectedCampaign] =
+    useState<InterfaceUserCampaign | null>(null);
+  const [modalState, setModalState] = useState<boolean>(false);
+  const [sortBy, setSortBy] = useState<
+    'fundingGoal_ASC' | 'fundingGoal_DESC' | 'endDate_ASC' | 'endDate_DESC'
+  >('endDate_DESC');
+
+  // Fetches campaigns based on the organization ID, search term, and sorting order
+  const {
+    data: campaignData,
+    loading: campaignLoading,
+    error: campaignError,
+    refetch: refetchCampaigns,
+  }: {
+    data?: {
+      getFundraisingCampaigns: InterfaceUserCampaign[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(USER_FUND_CAMPAIGNS, {
+    variables: {
+      where: {
+        organizationId: orgId,
+        name_contains: searchTerm,
+      },
+      campaignOrderBy: sortBy,
+    },
+  });
+
+  /**
+   * Opens the modal for adding a pledge to a selected campaign.
+   *
+   * @param campaign - The campaign to which the user wants to add a pledge.
+   */
+  const openModal = (campaign: InterfaceUserCampaign): void => {
+    setSelectedCampaign(campaign);
+    setModalState(true);
+  };
+
+  /**
+   * Closes the modal and clears the selected campaign.
+   */
+  const closeModal = (): void => {
+    setModalState(false);
+    setSelectedCampaign(null);
+  };
+
+  // Updates the campaigns state when the fetched campaign data changes
+  useEffect(() => {
+    if (campaignData) {
+      setCampaigns(campaignData.getFundraisingCampaigns);
+    }
+  }, [campaignData]);
+
+  // Renders a loader while campaigns are being fetched
+  if (campaignLoading) return <Loader size="xl" />;
+  if (campaignError) {
+    // Displays an error message if there is an issue loading the campaigns
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {tErrors('errorLoading', { entity: 'Campaigns' })}
+            <br />
+            {campaignError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  // Renders the campaign list and UI elements for searching, sorting, and adding pledges
+  return (
+    <>
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        {/* Search input field and button */}
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={t('searchByName')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-testid="searchCampaigns"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center`}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <div className="d-flex justify-space-between">
+            {/* Dropdown menu for sorting campaigns */}
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('fundingGoal_ASC')}
+                  data-testid="fundingGoal_ASC"
+                >
+                  {t('lowestGoal')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('fundingGoal_DESC')}
+                  data-testid="fundingGoal_DESC"
+                >
+                  {t('highestGoal')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('endDate_DESC')}
+                  data-testid="endDate_DESC"
+                >
+                  {t('latestEndDate')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('endDate_ASC')}
+                  data-testid="endDate_ASC"
+                >
+                  {t('earliestEndDate')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div>
+            {/* Button to navigate to the user's pledges */}
+            <Button
+              variant="success"
+              data-testid="myPledgesBtn"
+              onClick={() =>
+                navigate(`/user/pledges/${orgId}`, { replace: true })
+              }
+            >
+              {t('myPledges')}
+              <i className="fa fa-angle-right ms-2" />
+            </Button>
+          </div>
+        </div>
+      </div>
+      {campaigns.length < 1 ? (
+        <Stack height="100%" alignItems="center" justifyContent="center">
+          {/* Displayed if no campaigns are found */}
+          {t('noCampaigns')}
+        </Stack>
+      ) : (
+        campaigns.map((campaign: InterfaceUserCampaign, index: number) => (
+          <Accordion className="mt-3 rounded" key={index}>
+            <AccordionSummary expandIcon={<GridExpandMoreIcon />}>
+              <div className={styles.accordionSummary}>
+                <div
+                  className={styles.titleContainer}
+                  data-testid={`detailContainer${index + 1}`}
+                >
+                  <div className="d-flex">
+                    <h3>{campaign.name}</h3>
+                    <Chip
+                      icon={<Circle className={styles.chipIcon} />}
+                      label={
+                        new Date(campaign.endDate) < new Date()
+                          ? 'Ended'
+                          : 'Active'
+                      }
+                      variant="outlined"
+                      color="primary"
+                      className={`${styles.chip} ${new Date(campaign.endDate) < new Date() ? styles.pending : styles.active}`}
+                    />
+                  </div>
+
+                  <div className={`d-flex gap-4 ${styles.subContainer}`}>
+                    <span>
+                      Goal:{' '}
+                      {
+                        currencySymbols[
+                          campaign.currency as keyof typeof currencySymbols
+                        ]
+                      }
+                      {campaign.fundingGoal}
+                    </span>
+                    <span>Raised: $0</span>
+                    <span>
+                      Start Date: {campaign.startDate as unknown as string}
+                    </span>
+                    <span>
+                      End Date: {campaign.endDate as unknown as string}
+                    </span>
+                  </div>
+                </div>
+                <div className="d-flex gap-3">
+                  <Button
+                    variant={
+                      new Date(campaign.endDate) < new Date()
+                        ? 'outline-secondary'
+                        : 'outline-success'
+                    }
+                    data-testid="addPledgeBtn"
+                    disabled={new Date(campaign.endDate) < new Date()}
+                    onClick={() => openModal(campaign)}
+                  >
+                    <i className={'fa fa-plus me-2'} />
+                    {t('addPledge')}
+                  </Button>
+                </div>
+              </div>
+            </AccordionSummary>
+            <AccordionDetails className="d-flex gap-3 ms-2">
+              <span className="fw-bold">Amount Raised: </span>
+              <div className={styles.progress}>
+                <span>$0</span>
+                <ProgressBar
+                  now={0}
+                  label={`${(200 / 1000) * 100}%`}
+                  max={1000}
+                  className={styles.progressBar}
+                  data-testid="progressBar"
+                />
+                <span>$1000</span>
+              </div>
+            </AccordionDetails>
+          </Accordion>
+        ))
+      )}
+
+      {/* Modal for adding pledges to campaigns */}
+      <PledgeModal
+        isOpen={modalState}
+        hide={closeModal}
+        campaignId={selectedCampaign?._id ?? ''}
+        userId={userId}
+        pledge={null}
+        refetchPledge={refetchCampaigns}
+        endDate={selectedCampaign?.endDate ?? new Date()}
+        mode="create"
+      />
+    </>
+  );
+};
+
+export default Campaigns;
diff --git a/src/screens/UserPortal/Campaigns/CampaignsMocks.ts b/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
new file mode 100644
index 0000000000..f64401bca5
--- /dev/null
+++ b/src/screens/UserPortal/Campaigns/CampaignsMocks.ts
@@ -0,0 +1,272 @@
+import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { USER_FUND_CAMPAIGNS } from 'GraphQl/Queries/fundQueries';
+
+const userDetailsQuery = {
+  request: {
+    query: USER_DETAILS,
+    variables: {
+      id: 'userId',
+    },
+  },
+  result: {
+    data: {
+      user: {
+        user: {
+          _id: 'userId',
+          joinedOrganizations: [
+            {
+              _id: '6537904485008f171cf29924',
+              __typename: 'Organization',
+            },
+          ],
+          firstName: 'Harve',
+          lastName: 'Lance',
+          email: 'testuser1@example.com',
+          image: null,
+          createdAt: '2023-04-13T04:53:17.742Z',
+          birthDate: null,
+          educationGrade: null,
+          employmentStatus: null,
+          gender: null,
+          maritalStatus: null,
+          phone: null,
+          address: {
+            line1: 'Line1',
+            countryCode: 'CountryCode',
+            city: 'CityName',
+            state: 'State',
+            __typename: 'Address',
+          },
+          registeredEvents: [],
+          membershipRequests: [],
+          __typename: 'User',
+        },
+        appUserProfile: {
+          _id: '67078abd85008f171cf2991d',
+          adminFor: [],
+          isSuperAdmin: false,
+          appLanguageCode: 'en',
+          pluginCreationAllowed: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          __typename: 'AppUserProfile',
+        },
+        __typename: 'UserData',
+      },
+    },
+  },
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: '',
+        },
+        campaignOrderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            _id: 'campaignId1',
+            startDate: '2024-07-28',
+            endDate: '2025-08-31',
+            name: 'School Campaign',
+            fundingGoal: 22000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+          {
+            _id: 'campaignId2',
+            startDate: '2024-07-28',
+            endDate: '2022-08-30',
+            name: 'Hospital Campaign',
+            fundingGoal: 9000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: '',
+        },
+        campaignOrderBy: 'endDate_ASC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            _id: 'campaignId2',
+            startDate: '2024-07-28',
+            endDate: '2024-08-30',
+            name: 'Hospital Campaign',
+            fundingGoal: 9000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+          {
+            _id: 'campaignId1',
+            startDate: '2024-07-28',
+            endDate: '2024-08-31',
+            name: 'School Campaign',
+            fundingGoal: 22000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: '',
+        },
+        campaignOrderBy: 'fundingGoal_ASC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            _id: 'campaignId2',
+            startDate: '2024-07-28',
+            endDate: '2024-08-30',
+            name: 'Hospital Campaign',
+            fundingGoal: 9000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+          {
+            _id: 'campaignId1',
+            startDate: '2024-07-28',
+            endDate: '2024-08-31',
+            name: 'School Campaign',
+            fundingGoal: 22000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: '',
+        },
+        campaignOrderBy: 'fundingGoal_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            _id: 'campaignId1',
+            startDate: '2024-07-28',
+            endDate: '2024-08-31',
+            name: 'School Campaign',
+            fundingGoal: 22000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+          {
+            _id: 'campaignId2',
+            startDate: '2024-07-28',
+            endDate: '2024-08-30',
+            name: 'Hospital Campaign',
+            fundingGoal: 9000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: 'Hospital',
+        },
+        campaignOrderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [
+          {
+            _id: 'campaignId2',
+            startDate: '2024-07-28',
+            endDate: '2024-08-30',
+            name: 'Hospital Campaign',
+            fundingGoal: 9000,
+            currency: 'USD',
+            __typename: 'FundraisingCampaign',
+          },
+        ],
+      },
+    },
+  },
+  userDetailsQuery,
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: '',
+        },
+        campaignOrderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getFundraisingCampaigns: [],
+      },
+    },
+  },
+  userDetailsQuery,
+];
+
+export const USER_FUND_CAMPAIGNS_ERROR = [
+  {
+    request: {
+      query: USER_FUND_CAMPAIGNS,
+      variables: {
+        where: {
+          organizationId: 'orgId',
+          name_contains: '',
+        },
+        campaignOrderBy: 'endDate_DESC',
+      },
+    },
+    error: new Error('Error fetching campaigns'),
+  },
+  userDetailsQuery,
+];
diff --git a/src/screens/UserPortal/Campaigns/PledgeModal.test.tsx b/src/screens/UserPortal/Campaigns/PledgeModal.test.tsx
new file mode 100644
index 0000000000..b9fd7a7d4d
--- /dev/null
+++ b/src/screens/UserPortal/Campaigns/PledgeModal.test.tsx
@@ -0,0 +1,310 @@
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfacePledgeModal } from './PledgeModal';
+import PledgeModal from './PledgeModal';
+import React from 'react';
+import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { CREATE_PlEDGE, UPDATE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+
+const pledgeProps: InterfacePledgeModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    pledge: {
+      _id: '1',
+      amount: 100,
+      currency: 'USD',
+      startDate: '2024-01-01',
+      endDate: '2024-01-10',
+      users: [
+        {
+          _id: '1',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: undefined,
+        },
+      ],
+    },
+    refetchPledge: jest.fn(),
+    campaignId: 'campaignId',
+    userId: 'userId',
+    endDate: new Date(),
+    mode: 'create',
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    pledge: {
+      _id: '1',
+      amount: 100,
+      currency: 'USD',
+      startDate: '2024-01-01',
+      endDate: '2024-01-10',
+      users: [
+        {
+          _id: '1',
+          firstName: 'John',
+          lastName: 'Doe',
+          image: undefined,
+        },
+      ],
+    },
+    refetchPledge: jest.fn(),
+    campaignId: 'campaignId',
+    userId: 'userId',
+    endDate: new Date(),
+    mode: 'edit',
+  },
+];
+
+const PLEDGE_MODAL_MOCKS = [
+  {
+    request: {
+      query: USER_DETAILS,
+      variables: {
+        id: 'userId',
+      },
+    },
+    result: {
+      data: {
+        user: {
+          user: {
+            _id: 'userId',
+            joinedOrganizations: [
+              {
+                _id: '6537904485008f171cf29924',
+                __typename: 'Organization',
+              },
+            ],
+            firstName: 'Harve',
+            lastName: 'Lance',
+            email: 'testuser1@example.com',
+            image: null,
+            createdAt: '2023-04-13T04:53:17.742Z',
+            birthDate: null,
+            educationGrade: null,
+            employmentStatus: null,
+            gender: null,
+            maritalStatus: null,
+            phone: null,
+            address: {
+              line1: 'Line1',
+              countryCode: 'CountryCode',
+              city: 'CityName',
+              state: 'State',
+              __typename: 'Address',
+            },
+            registeredEvents: [],
+            membershipRequests: [],
+            __typename: 'User',
+          },
+          appUserProfile: {
+            _id: '67078abd85008f171cf2991d',
+            adminFor: [],
+            isSuperAdmin: false,
+            appLanguageCode: 'en',
+            pluginCreationAllowed: true,
+            createdOrganizations: [],
+            createdEvents: [],
+            eventAdmin: [],
+            __typename: 'AppUserProfile',
+          },
+          __typename: 'UserData',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_PLEDGE,
+      variables: {
+        id: '1',
+        amount: 200,
+      },
+    },
+    result: {
+      data: {
+        updateFundraisingCampaignPledge: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_PlEDGE,
+      variables: {
+        campaignId: 'campaignId',
+        amount: 200,
+        currency: 'USD',
+        startDate: '2024-01-02',
+        endDate: '2024-01-02',
+        userIds: ['1'],
+      },
+    },
+    result: {
+      data: {
+        createFundraisingCampaignPledge: {
+          _id: '3',
+        },
+      },
+    },
+  },
+];
+
+const link1 = new StaticMockLink(PLEDGE_MODAL_MOCKS);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges),
+);
+
+const renderPledgeModal = (
+  link: ApolloLink,
+  props: InterfacePledgeModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <PledgeModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('PledgeModal', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId', fundCampaignId: 'fundCampaignId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+  it('should populate form fields with correct values in edit mode', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    await waitFor(() =>
+      expect(screen.getByText(translations.editPledge)).toBeInTheDocument(),
+    );
+    expect(screen.getByTestId('pledgerSelect')).toHaveTextContent('John Doe');
+    expect(screen.getByLabelText('Start Date')).toHaveValue('01/01/2024');
+    expect(screen.getByLabelText('End Date')).toHaveValue('10/01/2024');
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD ($)');
+    expect(screen.getByLabelText('Amount')).toHaveValue('100');
+  });
+
+  it('should update pledgeAmount when input value changes', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const amountInput = screen.getByLabelText('Amount');
+    expect(amountInput).toHaveValue('100');
+    fireEvent.change(amountInput, { target: { value: '200' } });
+    expect(amountInput).toHaveValue('200');
+  });
+
+  it('should not update pledgeAmount when input value is less than or equal to 0', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const amountInput = screen.getByLabelText('Amount');
+    expect(amountInput).toHaveValue('100');
+    fireEvent.change(amountInput, { target: { value: '-10' } });
+    expect(amountInput).toHaveValue('100');
+  });
+
+  it('should update pledgeStartDate when a new date is selected', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const startDateInput = screen.getByLabelText('Start Date');
+    fireEvent.change(startDateInput, { target: { value: '02/01/2024' } });
+    expect(startDateInput).toHaveValue('02/01/2024');
+    expect(pledgeProps[1].pledge?.startDate).toEqual('2024-01-01');
+  });
+
+  it('pledgeStartDate onChange when its null', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const startDateInput = screen.getByLabelText('Start Date');
+    fireEvent.change(startDateInput, { target: { value: null } });
+    expect(pledgeProps[1].pledge?.startDate).toEqual('2024-01-01');
+  });
+
+  it('should update pledgeEndDate when a new date is selected', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const startDateInput = screen.getByLabelText('End Date');
+    fireEvent.change(startDateInput, { target: { value: '02/01/2024' } });
+    expect(startDateInput).toHaveValue('02/01/2024');
+    expect(pledgeProps[1].pledge?.endDate).toEqual('2024-01-10');
+  });
+
+  it('pledgeEndDate onChange when its null', async () => {
+    renderPledgeModal(link1, pledgeProps[1]);
+    const endDateInput = screen.getByLabelText('End Date');
+    fireEvent.change(endDateInput, { target: { value: null } });
+    expect(pledgeProps[1].pledge?.endDate).toEqual('2024-01-10');
+  });
+
+  it('should create pledge', async () => {
+    renderPledgeModal(link1, pledgeProps[0]);
+
+    fireEvent.change(screen.getByLabelText('Amount'), {
+      target: { value: '200' },
+    });
+    fireEvent.change(screen.getByLabelText('Start Date'), {
+      target: { value: '02/01/2024' },
+    });
+    fireEvent.change(screen.getByLabelText('End Date'), {
+      target: { value: '02/01/2024' },
+    });
+
+    expect(screen.getByLabelText('Amount')).toHaveValue('200');
+    expect(screen.getByLabelText('Start Date')).toHaveValue('02/01/2024');
+    expect(screen.getByLabelText('End Date')).toHaveValue('02/01/2024');
+    expect(screen.getByTestId('submitPledgeBtn')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('submitPledgeBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalled();
+      expect(pledgeProps[0].refetchPledge).toHaveBeenCalled();
+      expect(pledgeProps[0].hide).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Campaigns/PledgeModal.tsx b/src/screens/UserPortal/Campaigns/PledgeModal.tsx
new file mode 100644
index 0000000000..44cc82401b
--- /dev/null
+++ b/src/screens/UserPortal/Campaigns/PledgeModal.tsx
@@ -0,0 +1,373 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import dayjs, { type Dayjs } from 'dayjs';
+import type { ChangeEvent } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { currencyOptions, currencySymbols } from 'utils/currency';
+import type {
+  InterfaceCreatePledge,
+  InterfacePledgeInfo,
+  InterfaceUserInfo,
+} from 'utils/interfaces';
+import styles from './Campaigns.module.css';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
+import { CREATE_PlEDGE, UPDATE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
+import { toast } from 'react-toastify';
+import {
+  Autocomplete,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
+import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+
+/**
+ * Interface representing the properties for the `PledgeModal` component.
+ */
+export interface InterfacePledgeModal {
+  isOpen: boolean;
+  hide: () => void;
+  campaignId: string;
+  userId: string;
+  pledge: InterfacePledgeInfo | null;
+  refetchPledge: () => void;
+  endDate: Date;
+  mode: 'create' | 'edit';
+}
+
+/**
+ * `PledgeModal` is a React component that allows users to create or edit a pledge for a specific campaign.
+ * It displays a form with inputs for pledge details such as amount, currency, dates, and users involved in the pledge.
+ *
+ * @param isOpen - Determines if the modal is visible or hidden.
+ * @param hide - Function to close the modal.
+ * @param campaignId - The ID of the campaign for which the pledge is being made.
+ * @param userId - The ID of the user making or editing the pledge.
+ * @param pledge - The current pledge information if in edit mode, or null if creating a new pledge.
+ * @param refetchPledge - Function to refresh the pledge data after a successful operation.
+ * @param endDate - The maximum date allowed for the pledge's end date, based on the campaign's end date.
+ * @param mode - Specifies whether the modal is used for creating a new pledge or editing an existing one.
+ */
+const PledgeModal: React.FC<InterfacePledgeModal> = ({
+  isOpen,
+  hide,
+  campaignId,
+  userId,
+  pledge,
+  refetchPledge,
+  endDate,
+  mode,
+}) => {
+  // Translation functions to support internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'pledges',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  // State to manage the form inputs for the pledge
+  const [formState, setFormState] = useState<InterfaceCreatePledge>({
+    pledgeUsers: [],
+    pledgeAmount: pledge?.amount ?? 0,
+    pledgeCurrency: pledge?.currency ?? 'USD',
+    pledgeEndDate: new Date(pledge?.endDate ?? new Date()),
+    pledgeStartDate: new Date(pledge?.startDate ?? new Date()),
+  });
+
+  // State to manage the list of pledgers (users who are part of the pledge)
+  const [pledgers, setPledgers] = useState<InterfaceUserInfo[]>([]);
+
+  // Mutation to update an existing pledge
+  const [updatePledge] = useMutation(UPDATE_PLEDGE);
+
+  // Mutation to create a new pledge
+  const [createPledge] = useMutation(CREATE_PlEDGE);
+
+  // Effect to update the form state when the pledge prop changes (e.g., when editing a pledge)
+  useEffect(() => {
+    setFormState({
+      pledgeUsers: pledge?.users ?? [],
+      pledgeAmount: pledge?.amount ?? 0,
+      pledgeCurrency: pledge?.currency ?? 'USD',
+      pledgeEndDate: new Date(pledge?.endDate ?? new Date()),
+      pledgeStartDate: new Date(pledge?.startDate ?? new Date()),
+    });
+  }, [pledge]);
+
+  // Destructuring the form state for easier access
+  const {
+    pledgeUsers,
+    pledgeAmount,
+    pledgeCurrency,
+    pledgeStartDate,
+    pledgeEndDate,
+  } = formState;
+
+  // Query to get the user details based on the userId prop
+  const { data: userData } = useQuery(USER_DETAILS, {
+    variables: {
+      id: userId,
+    },
+  });
+
+  // Effect to update the pledgers state when user data is fetched
+  useEffect(() => {
+    if (userData) {
+      setPledgers([
+        {
+          _id: userData.user.user._id,
+          firstName: userData.user.user.firstName,
+          lastName: userData.user.user.lastName,
+          image: userData.user.user.image,
+        },
+      ]);
+    }
+  }, [userData]);
+
+  /**
+   * Handler function to update an existing pledge.
+   * It compares the current form state with the existing pledge and updates only the changed fields.
+   *
+   * @param e - The form submission event.
+   * @returns A promise that resolves when the pledge is successfully updated.
+   */
+  /*istanbul ignore next*/
+  const updatePledgeHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      e.preventDefault();
+      const startDate = dayjs(pledgeStartDate).format('YYYY-MM-DD');
+      const endDate = dayjs(pledgeEndDate).format('YYYY-MM-DD');
+
+      const updatedFields: {
+        [key: string]: number | string | string[] | undefined;
+      } = {};
+      // checks if there are changes to the pledge and adds them to the updatedFields object
+      if (pledgeAmount !== pledge?.amount) {
+        updatedFields.amount = pledgeAmount;
+      }
+      if (pledgeCurrency !== pledge?.currency) {
+        updatedFields.currency = pledgeCurrency;
+      }
+      if (startDate !== dayjs(pledge?.startDate).format('YYYY-MM-DD')) {
+        updatedFields.startDate = startDate;
+      }
+      if (endDate !== dayjs(pledge?.endDate).format('YYYY-MM-DD')) {
+        updatedFields.endDate = endDate;
+      }
+      if (pledgeUsers !== pledge?.users) {
+        updatedFields.users = pledgeUsers.map((user) => user._id);
+      }
+      try {
+        await updatePledge({
+          variables: {
+            id: pledge?._id,
+            ...updatedFields,
+          },
+        });
+        toast.success(t('pledgeUpdated') as string);
+        refetchPledge();
+        hide();
+      } catch (error: unknown) {
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, pledge],
+  );
+
+  /**
+   * Handler function to create a new pledge.
+   * It collects the form data and sends a request to create a pledge with the specified details.
+   *
+   * @param e - The form submission event.
+   * @returns A promise that resolves when the pledge is successfully created.
+   */
+  const createPledgeHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      try {
+        e.preventDefault();
+        await createPledge({
+          variables: {
+            campaignId,
+            amount: pledgeAmount,
+            currency: pledgeCurrency,
+            startDate: dayjs(pledgeStartDate).format('YYYY-MM-DD'),
+            endDate: dayjs(pledgeEndDate).format('YYYY-MM-DD'),
+            userIds: pledgeUsers.map((user) => user._id),
+          },
+        });
+
+        toast.success(t('pledgeCreated') as string);
+        refetchPledge();
+        setFormState({
+          pledgeUsers: [],
+          pledgeAmount: 0,
+          pledgeCurrency: 'USD',
+          pledgeEndDate: new Date(),
+          pledgeStartDate: new Date(),
+        });
+        hide();
+      } catch (error: unknown) {
+        /*istanbul ignore next*/
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, campaignId],
+  );
+
+  return (
+    <Modal className={styles.pledgeModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>
+          {t(mode === 'edit' ? 'editPledge' : 'createPledge')}
+        </p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="pledgeModalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <Form
+          data-testid="pledgeForm"
+          onSubmitCapture={
+            mode === 'edit' ? updatePledgeHandler : createPledgeHandler
+          }
+          className="p-3"
+        >
+          {/* A Multi-select dropdown enables user to view participating pledgers */}
+          <Form.Group className="d-flex mb-3 w-100">
+            <Autocomplete
+              multiple
+              className={`${styles.noOutline} w-100`}
+              limitTags={2}
+              data-testid="pledgerSelect"
+              options={[...pledgers, ...pledgeUsers]}
+              value={pledgeUsers}
+              // TODO: Remove readOnly function once User Family implementation is done
+              readOnly={mode === 'edit' ? true : false}
+              isOptionEqualToValue={(option, value) => option._id === value._id}
+              filterSelectedOptions={true}
+              getOptionLabel={(member: InterfaceUserInfo): string =>
+                `${member.firstName} ${member.lastName}`
+              }
+              onChange={
+                /*istanbul ignore next*/
+                (_, newPledgers): void => {
+                  setFormState({
+                    ...formState,
+                    pledgeUsers: newPledgers,
+                  });
+                }
+              }
+              renderInput={(params) => (
+                <TextField {...params} label="Pledgers" />
+              )}
+            />
+          </Form.Group>
+          <Form.Group className="d-flex gap-3 mx-auto  mb-3">
+            {/* Date Calendar Component to select start date of an event */}
+            <DatePicker
+              format="DD/MM/YYYY"
+              label={tCommon('startDate')}
+              value={dayjs(pledgeStartDate)}
+              className={styles.noOutline}
+              onChange={(date: Dayjs | null): void => {
+                if (date) {
+                  setFormState({
+                    ...formState,
+                    pledgeStartDate: date.toDate(),
+                    pledgeEndDate:
+                      pledgeEndDate &&
+                      /*istanbul ignore next*/
+                      (pledgeEndDate < date?.toDate()
+                        ? date.toDate()
+                        : pledgeEndDate),
+                  });
+                }
+              }}
+              minDate={dayjs(pledgeStartDate)}
+              maxDate={dayjs(endDate)}
+            />
+            {/* Date Calendar Component to select end Date of an event */}
+            <DatePicker
+              format="DD/MM/YYYY"
+              label={tCommon('endDate')}
+              className={styles.noOutline}
+              value={dayjs(pledgeEndDate)}
+              onChange={(date: Dayjs | null): void => {
+                if (date) {
+                  setFormState({
+                    ...formState,
+                    pledgeEndDate: date.toDate(),
+                  });
+                }
+              }}
+              minDate={dayjs(pledgeStartDate)}
+              maxDate={dayjs(endDate)}
+            />
+          </Form.Group>
+          <Form.Group className="d-flex gap-3 mb-4">
+            {/* Dropdown to select the currency in which amount is to be pledged */}
+            <FormControl fullWidth>
+              <InputLabel id="demo-simple-select-label">
+                {t('currency')}
+              </InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                value={pledgeCurrency}
+                label={t('currency')}
+                data-testid="currencySelect"
+                onChange={
+                  /*istanbul ignore next*/
+                  (e) => {
+                    setFormState({
+                      ...formState,
+                      pledgeCurrency: e.target.value,
+                    });
+                  }
+                }
+              >
+                {currencyOptions.map((currency) => (
+                  <MenuItem key={currency.label} value={currency.value}>
+                    {currency.label} ({currencySymbols[currency.value]})
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            {/* Input field to enter amount to be pledged */}
+            <FormControl fullWidth>
+              <TextField
+                label={t('amount')}
+                variant="outlined"
+                className={styles.noOutline}
+                value={pledgeAmount}
+                onChange={(e) => {
+                  if (parseInt(e.target.value) > 0) {
+                    setFormState({
+                      ...formState,
+                      pledgeAmount: parseInt(e.target.value),
+                    });
+                  }
+                }}
+              />
+            </FormControl>
+          </Form.Group>
+          {/* Button to submit the pledge form */}
+          <Button
+            type="submit"
+            className={styles.greenregbtn}
+            data-testid="submitPledgeBtn"
+          >
+            {t(mode === 'edit' ? 'updatePledge' : 'createPledge')}
+          </Button>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default PledgeModal;
diff --git a/src/screens/UserPortal/Chat/Chat.module.css b/src/screens/UserPortal/Chat/Chat.module.css
new file mode 100644
index 0000000000..5f9a672dea
--- /dev/null
+++ b/src/screens/UserPortal/Chat/Chat.module.css
@@ -0,0 +1,218 @@
+.containerHeight {
+  padding: 1rem 1.5rem 0 calc(300px);
+  height: 100vh;
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.9s ease-in-out;
+}
+
+.contract {
+  padding-left: calc(300px);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: 300px;
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+
+.containerHeight {
+  height: 100vh;
+}
+
+.mainContainer {
+  width: 50%;
+  margin-left: 20px;
+  flex-grow: 3;
+  max-height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: row;
+  border: 1px solid rgb(220, 220, 220);
+  margin-top: 15px;
+  border-radius: 24px;
+  background-color: white;
+}
+
+.chatContainer {
+  flex-grow: 6;
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  border: 1px solid rgb(220, 220, 220);
+  border-radius: 24px;
+  overflow-y: scroll;
+  margin-left: 0px;
+}
+
+.chatContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.contactContainer {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: 25%;
+  overflow-y: scroll;
+}
+
+.addChatContainer {
+  margin: 0 20px;
+  padding: 20px 0px 10px 0px;
+  border-bottom: 2px solid black;
+}
+
+.contactCardContainer {
+  padding: 10px 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.chatHeadingContainer {
+  padding: 10px;
+}
+
+.borderNone {
+  border: none;
+}
+
+.accordion-button:focus {
+  box-shadow: none;
+}
+
+.accordion-button:not(.collapsed) {
+  color: #212529;
+  background-color: white;
+}
+
+.chatType {
+  --bs-accordion-btn-bg: white;
+  --bs-accordion-active-bg: white;
+  --bs-accordion-active-color: black;
+  --bs-accordion-btn-focus-box-shadow: none;
+  --bs-accordion-border-width: 0px;
+}
+
+.chatType > button {
+  padding-bottom: 0;
+}
+
+.createChat {
+  background-color: white;
+  border: none;
+}
+
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+.opendrawer:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+.collapseSidebarButton:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+
+.customToggle {
+  padding: 0;
+  background: none;
+  border: none;
+  margin-right: 1rem;
+  --bs-btn-active-bg: none;
+}
+.customToggle svg {
+  color: black;
+}
+
+.customToggle::after {
+  content: none;
+}
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
+  border: none;
+}
+.customToggle svg {
+  color: black;
+}
+
+@media (max-width: 1120px) {
+  .collapseSidebarButton {
+    width: calc(250px);
+  }
+}
+
+@media (max-height: 650px) {
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .containerHeight {
+    height: 100vh;
+    padding: 2rem;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
+
+.accordionBody {
+  height: calc(100vh / 2 - 2rem - 60px) !important;
+  overflow-y: scroll;
+}
+
+.accordionBody::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/screens/UserPortal/Chat/Chat.test.tsx b/src/screens/UserPortal/Chat/Chat.test.tsx
new file mode 100644
index 0000000000..660eeaa236
--- /dev/null
+++ b/src/screens/UserPortal/Chat/Chat.test.tsx
@@ -0,0 +1,1695 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import {
+  USERS_CONNECTION_LIST,
+  USER_JOINED_ORGANIZATIONS,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import Chat from './Chat';
+import useLocalStorage from 'utils/useLocalstorage';
+import { MESSAGE_SENT_TO_CHAT } from 'GraphQl/Mutations/OrganizationMutations';
+import { CHATS_LIST, CHAT_BY_ID } from 'GraphQl/Queries/PlugInQueries';
+
+const { setItem } = useLocalStorage();
+
+const USER_JOINED_ORG_MOCK = [
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  name: 'Any Organization',
+                  image: '',
+                  description: 'New Desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+const UserConnectionListMock = [
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              firstName: 'Deanne',
+              lastName: 'Marks',
+              image: null,
+              _id: '6589389d2caa9d8d69087487',
+              email: 'testuser8@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              organizationsBlockedBy: [],
+              joinedOrganizations: [
+                {
+                  _id: '6537904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Queens',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Coffee Street',
+                    line2: 'Apartment 501',
+                    postalCode: '11427',
+                    sortingCode: 'ABC-133',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6637904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Staten Island',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 church Street',
+                    line2: 'Apartment 499',
+                    postalCode: '10301',
+                    sortingCode: 'ABC-122',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6737904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Brooklyn',
+                    countryCode: 'US',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Main Street',
+                    line2: 'Apt 456',
+                    postalCode: '10004',
+                    sortingCode: 'ABC-789',
+                    state: 'NY',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+                {
+                  _id: '6437904485008f171cf29924',
+                  name: 'Unity Foundation',
+                  image: null,
+                  address: {
+                    city: 'Bronx',
+                    countryCode: 'US',
+                    dependentLocality: 'Some Dependent Locality',
+                    line1: '123 Random Street',
+                    line2: 'Apartment 456',
+                    postalCode: '10451',
+                    sortingCode: 'ABC-123',
+                    state: 'NYC',
+                    __typename: 'Address',
+                  },
+                  createdAt: '2023-04-13T05:16:52.827Z',
+                  creator: {
+                    _id: '64378abd85008f171cf2990d',
+                    firstName: 'Wilt',
+                    lastName: 'Shepherd',
+                    image: null,
+                    email: 'testsuperadmin@example.com',
+                    createdAt: '2023-04-13T04:53:17.742Z',
+                    __typename: 'User',
+                  },
+                  __typename: 'Organization',
+                },
+              ],
+              __typename: 'User',
+            },
+            appUserProfile: {
+              _id: '64378abd85308f171cf2993d',
+              adminFor: [],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+              __typename: 'AppUserProfile',
+            },
+            __typename: 'UserData',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: {
+          user: [
+            {
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              image: 'img',
+              _id: '1',
+              email: 'disha@email.com',
+              createdAt: '',
+              appUserProfile: {
+                _id: '12',
+                isSuperAdmin: 'false',
+                createdOrganizations: {
+                  _id: '345678',
+                },
+                createdEvents: {
+                  _id: '34567890',
+                },
+              },
+              organizationsBlockedBy: [],
+              joinedOrganizations: [],
+            },
+            {
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              image: 'img',
+              _id: '1',
+              email: 'disha@email.com',
+              createdAt: '',
+              appUserProfile: {
+                _id: '12',
+                isSuperAdmin: 'false',
+                createdOrganizations: {
+                  _id: '345678',
+                },
+                createdEvents: {
+                  _id: '34567890',
+                },
+              },
+              organizationsBlockedBy: [],
+              joinedOrganizations: [],
+            },
+            {
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              image: 'img',
+              _id: '1',
+              email: 'disha@email.com',
+              createdAt: '',
+              appUserProfile: {
+                _id: '12',
+                isSuperAdmin: 'false',
+                createdOrganizations: {
+                  _id: '345678',
+                },
+                createdEvents: {
+                  _id: '34567890',
+                },
+              },
+              organizationsBlockedBy: [],
+              joinedOrganizations: [],
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const MESSAGE_SENT_TO_CHAT_MOCK = [
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: null,
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          type: 'STRING',
+          replyTo: null,
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '2',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f1df364e03ac47a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          type: 'STRING',
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: MESSAGE_SENT_TO_CHAT,
+      variables: {
+        userId: '1',
+      },
+    },
+    result: {
+      data: {
+        messageSentToChat: {
+          _id: '668ec1f13603ac4697a151',
+          createdAt: '2024-07-10T17:16:33.248Z',
+          messageContent: 'Test ',
+          replyTo: null,
+          type: 'STRING',
+          sender: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: '',
+          },
+          updatedAt: '2024-07-10',
+        },
+      },
+    },
+  },
+];
+
+const CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          createdAt: '2345678903456',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '1',
+          isGroup: false,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: null,
+          name: '',
+          createdAt: '2345678903456',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+              appUserProfile: {
+                _id: '64378abd85308f171cf2993d',
+                adminFor: [],
+                isSuperAdmin: false,
+                createdOrganizations: [],
+                createdEvents: [],
+                eventAdmin: [],
+                __typename: 'AppUserProfile',
+              },
+              __typename: 'UserData',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USERS_CONNECTION_LIST,
+      variables: {
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: {
+          user: [
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const CHATS_LIST_MOCK = [
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: null,
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dd40fgh03db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844efc814ddgh4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844ghjefc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: 'ujhgtrdtyuiop',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CHATS_LIST,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        chatsByUserId: [
+          {
+            _id: '65844efc814dhjmkdftyd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+          {
+            _id: '65844ewsedrffc814dd4003db811c4',
+            isGroup: true,
+            creator: {
+              _id: '64378abd85008f171cf2990d',
+              firstName: 'Wilt',
+              lastName: 'Shepherd',
+              image: null,
+              email: 'testsuperadmin@example.com',
+              createdAt: '2023-04-13T04:53:17.742Z',
+              __typename: 'User',
+            },
+            organization: {
+              _id: 'pw3ertyuiophgfre45678',
+              name: 'rtyu',
+            },
+            createdAt: '2345678903456',
+            name: 'Test Group Chat',
+            messages: [
+              {
+                _id: '345678',
+                createdAt: '345678908765',
+                messageContent: 'Hello',
+                replyTo: null,
+                type: 'STRING',
+                sender: {
+                  _id: '2',
+                  firstName: 'Test',
+                  lastName: 'User',
+                  email: 'test@example.com',
+                  image: '',
+                },
+              },
+            ],
+            users: [
+              {
+                _id: '1',
+                firstName: 'Disha',
+                lastName: 'Talreja',
+                email: 'disha@example.com',
+                image: '',
+              },
+              {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+              {
+                _id: '3',
+                firstName: 'Test',
+                lastName: 'User1',
+                email: 'test1@example.com',
+                image: '',
+              },
+              {
+                _id: '4',
+                firstName: 'Test',
+                lastName: 'User2',
+                email: 'test2@example.com',
+                image: '',
+              },
+              {
+                _id: '5',
+                firstName: 'Test',
+                lastName: 'User4',
+                email: 'test4@example.com',
+                image: '',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const GROUP_CHAT_BY_ID_QUERY_MOCK = [
+  {
+    request: {
+      query: CHAT_BY_ID,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        chatById: {
+          _id: '65844efc814dd4003db811c4',
+          isGroup: true,
+          creator: {
+            _id: '64378abd85008f171cf2990d',
+            firstName: 'Wilt',
+            lastName: 'Shepherd',
+            image: null,
+            email: 'testsuperadmin@example.com',
+            createdAt: '2023-04-13T04:53:17.742Z',
+            __typename: 'User',
+          },
+          organization: {
+            _id: 'pw3ertyuiophgfre45678',
+            name: 'rtyu',
+          },
+          createdAt: '2345678903456',
+          name: 'Test Group Chat',
+          messages: [
+            {
+              _id: '345678',
+              createdAt: '345678908765',
+              messageContent: 'Hello',
+              replyTo: null,
+              type: 'STRING',
+              sender: {
+                _id: '2',
+                firstName: 'Test',
+                lastName: 'User',
+                email: 'test@example.com',
+                image: '',
+              },
+            },
+          ],
+          users: [
+            {
+              _id: '1',
+              firstName: 'Disha',
+              lastName: 'Talreja',
+              email: 'disha@example.com',
+              image: '',
+            },
+            {
+              _id: '2',
+              firstName: 'Test',
+              lastName: 'User',
+              email: 'test@example.com',
+              image: '',
+            },
+            {
+              _id: '3',
+              firstName: 'Test',
+              lastName: 'User1',
+              email: 'test1@example.com',
+              image: '',
+            },
+            {
+              _id: '4',
+              firstName: 'Test',
+              lastName: 'User2',
+              email: 'test2@example.com',
+              image: '',
+            },
+            {
+              _id: '5',
+              firstName: 'Test',
+              lastName: 'User4',
+              email: 'test4@example.com',
+              image: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Chat Screen [User Portal]', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('Screen should be rendered properly', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+    ];
+
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('User is able to select a contact', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+    ];
+
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(await screen.findByText('Messages')).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('contactCardContainer'),
+    ).toBeInTheDocument();
+  });
+
+  test('create new direct chat', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+    const newDirectChatBtn = await screen.findByTestId('newDirectChat');
+    expect(newDirectChatBtn).toBeInTheDocument();
+    fireEvent.click(newDirectChatBtn);
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    expect(closeButton).toBeInTheDocument();
+
+    const submitBtn = await screen.findByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+  });
+
+  test('create new group chat', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+    ];
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const dropdown = await screen.findByTestId('dropdown');
+    expect(dropdown).toBeInTheDocument();
+    fireEvent.click(dropdown);
+
+    const newGroupChatBtn = await screen.findByTestId('newGroupChat');
+    expect(newGroupChatBtn).toBeInTheDocument();
+
+    fireEvent.click(newGroupChatBtn);
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+  });
+
+  test('sidebar', async () => {
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+    ];
+    setItem('userId', '1');
+
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    screen.debug();
+    await waitFor(async () => {
+      const closeMenuBtn = await screen.findByTestId('closeMenu');
+      expect(closeMenuBtn).toBeInTheDocument();
+      if (closeMenuBtn) {
+        closeMenuBtn.click();
+      } else {
+        throw new Error('Close menu button not found');
+      }
+    });
+  });
+
+  test('Testing sidebar when the screen size is less than or equal to 820px', async () => {
+    setItem('userId', '1');
+    const mock = [
+      ...USER_JOINED_ORG_MOCK,
+      ...GROUP_CHAT_BY_ID_QUERY_MOCK,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...UserConnectionListMock,
+      ...MESSAGE_SENT_TO_CHAT_MOCK,
+      ...CHAT_BY_ID_QUERY_MOCK,
+      ...CHATS_LIST_MOCK,
+      ...UserConnectionListMock,
+    ];
+    resizeWindow(800);
+    render(
+      <MockedProvider addTypename={false} mocks={mock}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(screen.getByText('My Organizations')).toBeInTheDocument();
+    expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+
+    expect(await screen.findByTestId('openMenu')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('openMenu'));
+    expect(await screen.findByTestId('closeMenu')).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/UserPortal/Chat/Chat.tsx b/src/screens/UserPortal/Chat/Chat.tsx
new file mode 100644
index 0000000000..441ce7d4ba
--- /dev/null
+++ b/src/screens/UserPortal/Chat/Chat.tsx
@@ -0,0 +1,249 @@
+import React, { useEffect, useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown } from 'react-bootstrap';
+import { SearchOutlined, Search } from '@mui/icons-material';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import ContactCard from 'components/UserPortal/ContactCard/ContactCard';
+import ChatRoom from 'components/UserPortal/ChatRoom/ChatRoom';
+import useLocalStorage from 'utils/useLocalstorage';
+import NewChat from 'assets/svgs/newChat.svg?react';
+import styles from './Chat.module.css';
+import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
+import { CHATS_LIST } from 'GraphQl/Queries/PlugInQueries';
+import CreateGroupChat from '../../../components/UserPortal/CreateGroupChat/CreateGroupChat';
+import CreateDirectChat from 'components/UserPortal/CreateDirectChat/CreateDirectChat';
+
+interface InterfaceContactCardProps {
+  id: string;
+  title: string;
+  image: string;
+  selectedContact: string;
+  setSelectedContact: React.Dispatch<React.SetStateAction<string>>;
+  isGroup: boolean;
+}
+/**
+ * The `chat` component provides a user interface for interacting with contacts and chat rooms within an organization.
+ * It features a contact list with search functionality and displays the chat room for the selected contact.
+ * The component uses GraphQL to fetch and manage contact data, and React state to handle user interactions.
+ *
+ * ## Features:
+ * - **Search Contacts:** Allows users to search for contacts by their first name.
+ * - **Contact List:** Displays a list of contacts with their details and a profile image.
+ * - **Chat Room:** Shows the chat room for the selected contact.
+ *
+ * ## GraphQL Queries:
+ * - `ORGANIZATIONS_MEMBER_CONNECTION_LIST`: Fetches a list of members within an organization, with optional filtering based on the first name.
+ *
+ * ## Event Handlers:
+ * - `handleSearch`: Updates the filterName state and refetches the contact data based on the search query.
+ * - `handleSearchByEnter`: Handles search input when the Enter key is pressed.
+ * - `handleSearchByBtnClick`: Handles search input when the search button is clicked.
+ *
+ * ## Rendering:
+ * - Displays a search input field and a search button for filtering contacts.
+ * - Shows a list of contacts with their details and profile images.
+ * - Renders a chat room component for the selected contact.
+ * - Displays a loading indicator while contact data is being fetched.
+ *
+ * @returns  The rendered `chat` component.
+ */
+export default function chat(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'chat',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+  const [chats, setChats] = useState<any>([]);
+  const [selectedContact, setSelectedContact] = useState('');
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const [createDirectChatModalisOpen, setCreateDirectChatModalisOpen] =
+    useState(false);
+
+  function openCreateDirectChatModal(): void {
+    setCreateDirectChatModalisOpen(true);
+  }
+
+  const toggleCreateDirectChatModal = /* istanbul ignore next */ (): void =>
+    setCreateDirectChatModalisOpen(!createDirectChatModalisOpen);
+
+  const [createGroupChatModalisOpen, setCreateGroupChatModalisOpen] =
+    useState(false);
+
+  function openCreateGroupChatModal(): void {
+    setCreateGroupChatModalisOpen(true);
+  }
+
+  const toggleCreateGroupChatModal = /* istanbul ignore next */ (): void => {
+    setCreateGroupChatModalisOpen(!createGroupChatModalisOpen);
+  };
+
+  const {
+    data: chatsListData,
+    loading: chatsListLoading,
+    refetch: chatsListRefetch,
+  } = useQuery(CHATS_LIST, {
+    variables: {
+      id: userId,
+    },
+  });
+
+  React.useEffect(() => {
+    if (chatsListData) {
+      setChats(chatsListData.chatsByUserId);
+    }
+  }, [chatsListData]);
+
+  // const handleSearch = (value: string): void => {
+  //   setFilterName(value);
+
+  //   contactRefetch();
+  // };
+  // const handleSearchByEnter = (e: any): void => {
+  //   if (e.key === 'Enter') {
+  //     const { value } = e.target;
+  //     handleSearch(value);
+  //   }
+  // };
+  // const handleSearchByBtnClick = (): void => {
+  //   const value =
+  //     (document.getElementById('searchChats') as HTMLInputElement)?.value || '';
+  //   handleSearch(value);
+  // };
+
+  return (
+    <>
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="closeMenu"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <UserSidebar hideDrawer={hideDrawer} setHideDrawer={setHideDrawer} />
+      <div className={`d-flex flex-row ${styles.containerHeight}`}>
+        <div data-testid="chat" className={`${styles.mainContainer}`}>
+          <div className={styles.contactContainer}>
+            <div
+              className={`d-flex justify-content-between ${styles.addChatContainer}`}
+            >
+              <h4>Messages</h4>
+              <Dropdown style={{ cursor: 'pointer' }}>
+                <Dropdown.Toggle
+                  className={styles.customToggle}
+                  data-testid={'dropdown'}
+                >
+                  <NewChat />
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item
+                    onClick={openCreateDirectChatModal}
+                    data-testid="newDirectChat"
+                  >
+                    New Chat
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={openCreateGroupChatModal}
+                    data-testid="newGroupChat"
+                  >
+                    New Group Chat
+                  </Dropdown.Item>
+                  <Dropdown.Item href="#/action-3">
+                    Starred Messages
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+            <div className={styles.contactListContainer}>
+              {chatsListLoading ? (
+                <div className={`d-flex flex-row justify-content-center`}>
+                  <HourglassBottomIcon /> <span>Loading...</span>
+                </div>
+              ) : (
+                <div
+                  data-testid="contactCardContainer"
+                  className={styles.contactCardContainer}
+                >
+                  {!!chats.length &&
+                    chats.map((chat: any) => {
+                      const cardProps: InterfaceContactCardProps = {
+                        id: chat._id,
+                        title: !chat.isGroup
+                          ? chat.users[0]?._id === userId
+                            ? `${chat.users[1]?.firstName} ${chat.users[1]?.lastName}`
+                            : `${chat.users[0]?.firstName} ${chat.users[0]?.lastName}`
+                          : chat.name,
+                        image: chat.isGroup
+                          ? userId
+                            ? chat.users[1]?.image
+                            : chat.users[0]?.image
+                          : chat.image,
+                        setSelectedContact,
+                        selectedContact,
+                        isGroup: chat.isGroup,
+                      };
+                      return (
+                        <ContactCard
+                          data-testid="chatContact"
+                          {...cardProps}
+                          key={chat._id}
+                        />
+                      );
+                    })}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className={styles.chatContainer} id="chat-container">
+            <ChatRoom selectedContact={selectedContact} />
+          </div>
+        </div>
+      </div>
+      {createGroupChatModalisOpen && (
+        <CreateGroupChat
+          toggleCreateGroupChatModal={toggleCreateGroupChatModal}
+          createGroupChatModalisOpen={createGroupChatModalisOpen}
+          chatsListRefetch={chatsListRefetch}
+        ></CreateGroupChat>
+      )}
+      {createDirectChatModalisOpen && (
+        <CreateDirectChat
+          toggleCreateDirectChatModal={toggleCreateDirectChatModal}
+          createDirectChatModalisOpen={createDirectChatModalisOpen}
+          chatsListRefetch={chatsListRefetch}
+        ></CreateDirectChat>
+      )}
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/Donate/Donate.module.css b/src/screens/UserPortal/Donate/Donate.module.css
new file mode 100644
index 0000000000..8f19db3ff8
--- /dev/null
+++ b/src/screens/UserPortal/Donate/Donate.module.css
@@ -0,0 +1,84 @@
+.mainContainer {
+  width: 50%;
+  flex-grow: 3;
+  display: flex;
+  flex-direction: column;
+  background-color: #f2f7ff;
+}
+
+.inputContainer {
+  flex: 1;
+  position: relative;
+}
+.input {
+  position: relative;
+  box-shadow: 5px 5px 4px 0px #31bb6b1f;
+}
+
+.box {
+  width: auto;
+  /* height: 200px; */
+  background-color: white;
+  margin-top: 1rem;
+  padding: 20px;
+  border: 1px solid #dddddd;
+  border-radius: 10px;
+}
+
+.heading {
+  font-size: 1.1rem;
+}
+
+.donationInputContainer {
+  display: flex;
+  flex-direction: row;
+  margin-top: 20px;
+}
+
+.donateBtn {
+  padding-inline: 1rem !important;
+}
+
+.dropdown {
+  min-width: 6rem;
+}
+
+.inputArea {
+  border: none;
+  outline: none;
+  background-color: #f1f3f6;
+}
+
+.maxWidth {
+  width: 100%;
+}
+
+.donateActions {
+  margin-top: 1rem;
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.donationsContainer {
+  padding-top: 4rem;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.donationCardsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  --bs-gutter-x: 0;
+}
+
+.colorLight {
+  background-color: #f5f5f5;
+}
+
+.content {
+  padding-top: 10px;
+  flex-grow: 1;
+}
diff --git a/src/screens/UserPortal/Donate/Donate.test.tsx b/src/screens/UserPortal/Donate/Donate.test.tsx
new file mode 100644
index 0000000000..c4d435415e
--- /dev/null
+++ b/src/screens/UserPortal/Donate/Donate.test.tsx
@@ -0,0 +1,390 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import {
+  ORGANIZATION_DONATION_CONNECTION_LIST,
+  USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Donate from './Donate';
+import userEvent from '@testing-library/user-event';
+import useLocalStorage from 'utils/useLocalstorage';
+import { DONATE_TO_ORGANIZATION } from 'GraphQl/Mutations/mutations';
+import { toast } from 'react-toastify';
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_DONATION_CONNECTION_LIST,
+      variables: {
+        orgId: '',
+      },
+    },
+    result: {
+      data: {
+        getDonationByOrgIdConnection: [
+          {
+            _id: '6391a15bcb738c181d238957',
+            nameOfUser: 'firstName lastName',
+            amount: 1,
+            userId: '6391a15bcb738c181d238952',
+            payPalId: 'payPalId',
+            updatedAt: '2024-04-03T16:43:01.514Z',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_CONNECTION,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: '6401ff65ce8e8406b8f07af3',
+            image: '',
+            name: 'anyOrganization2',
+            description: 'desc',
+            address: {
+              city: 'abc',
+              countryCode: '123',
+              postalCode: '456',
+              state: 'def',
+              dependentLocality: 'ghi',
+              line1: 'asdfg',
+              line2: 'dfghj',
+              sortingCode: '4567',
+            },
+            userRegistrationRequired: true,
+            createdAt: '12345678900',
+            creator: { firstName: 'John', lastName: 'Doe' },
+            members: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+            admins: [
+              {
+                _id: '45gj5678jk45678fvgbhnr4rtgh',
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: DONATE_TO_ORGANIZATION,
+      variables: {
+        userId: '123',
+        createDonationOrgId2: '',
+        payPalId: 'paypalId',
+        nameOfUser: 'name',
+        amount: 123,
+        nameOfOrg: 'anyOrganization2',
+      },
+    },
+    result: {
+      data: {
+        createDonation: [
+          {
+            _id: '',
+            amount: 123,
+            nameOfUser: 'name',
+            nameOfOrg: 'anyOrganization2',
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: '' }),
+}));
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
+describe('Testing Donate Screen [User Portal]', () => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Screen should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByPlaceholderText('Search donations')).toBeInTheDocument();
+    expect(screen.getByTestId('currency0')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Amount')).toBeInTheDocument();
+  });
+
+  test('Currency is swtiched to USD', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('changeCurrencyBtn'));
+
+    userEvent.click(screen.getByTestId('currency0'));
+    await wait();
+
+    expect(screen.getByTestId('currency0')).toBeInTheDocument();
+  });
+
+  test('Currency is swtiched to INR', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('changeCurrencyBtn'));
+
+    userEvent.click(screen.getByTestId('currency1'));
+
+    await wait();
+  });
+
+  test('Currency is swtiched to EUR', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('changeCurrencyBtn'));
+
+    userEvent.click(screen.getByTestId('currency2'));
+
+    await wait();
+  });
+
+  test('Checking the existence of Donation Cards', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getAllByTestId('donationCard')[0]).toBeInTheDocument();
+  });
+
+  test('For Donation functionality', async () => {
+    const { setItem } = useLocalStorage();
+    setItem('userId', '123');
+    setItem('name', 'name');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), '123');
+    userEvent.click(screen.getByTestId('donateBtn'));
+    await wait();
+  });
+
+  test('displays error toast for donation amount below minimum', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), '0.5');
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Donation amount must be between 1 and 10000000.',
+    );
+  });
+
+  test('displays error toast for donation amount above maximum', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), '10000001');
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Donation amount must be between 1 and 10000000.',
+    );
+  });
+
+  test('displays error toast for empty donation amount', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Please enter a numerical value for the donation amount.',
+    );
+  });
+
+  test('displays error toast for invalid (non-numeric) donation amount', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Donate />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('donationAmount'), 'abc');
+    userEvent.click(screen.getByTestId('donateBtn'));
+
+    await wait();
+
+    expect(toast.error).toHaveBeenCalledWith(
+      'Please enter a numerical value for the donation amount.',
+    );
+  });
+});
diff --git a/src/screens/UserPortal/Donate/Donate.tsx b/src/screens/UserPortal/Donate/Donate.tsx
new file mode 100644
index 0000000000..c6e6d918d5
--- /dev/null
+++ b/src/screens/UserPortal/Donate/Donate.tsx
@@ -0,0 +1,319 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import { useQuery, useMutation } from '@apollo/client';
+import { Search } from '@mui/icons-material';
+import SendIcon from '@mui/icons-material/Send';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import { useTranslation } from 'react-i18next';
+
+import {
+  ORGANIZATION_DONATION_CONNECTION_LIST,
+  USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/Queries';
+import { DONATE_TO_ORGANIZATION } from 'GraphQl/Mutations/mutations';
+import styles from './Donate.module.css';
+import DonationCard from 'components/UserPortal/DonationCard/DonationCard';
+import useLocalStorage from 'utils/useLocalstorage';
+import { errorHandler } from 'utils/errorHandler';
+import OrganizationSidebar from 'components/UserPortal/OrganizationSidebar/OrganizationSidebar';
+import PaginationList from 'components/PaginationList/PaginationList';
+
+export interface InterfaceDonationCardProps {
+  id: string;
+  name: string;
+  amount: string;
+  userId: string;
+  payPalId: string;
+  updatedAt: string;
+}
+
+interface InterfaceDonation {
+  _id: string;
+  nameOfUser: string;
+  amount: string;
+  userId: string;
+  payPalId: string;
+  updatedAt: string;
+}
+
+/**
+ * `donate` component allows users to make donations to an organization and view their previous donations.
+ *
+ * This component fetches donation-related data using GraphQL queries and allows users to make donations
+ * using a mutation. It supports currency selection, donation amount input, and displays a paginated list
+ * of previous donations.
+ *
+ * It includes:
+ * - An input field for searching donations.
+ * - A dropdown to select currency.
+ * - An input field for entering donation amount.
+ * - A button to submit the donation.
+ * - A list of previous donations displayed in a paginated format.
+ * - An organization sidebar for navigation.
+ *
+ * ### GraphQL Queries
+ * - `ORGANIZATION_DONATION_CONNECTION_LIST`: Fetches the list of donations for the organization.
+ * - `USER_ORGANIZATION_CONNECTION`: Fetches organization details.
+ *
+ * ### GraphQL Mutations
+ * - `DONATE_TO_ORGANIZATION`: Performs the donation action.
+ *
+ * @returns The rendered component.
+ */
+export default function donate(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'donate',
+  });
+
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+  const userName = getItem('name');
+
+  const { orgId: organizationId } = useParams();
+  const [amount, setAmount] = useState<string>('');
+  const [organizationDetails, setOrganizationDetails] = useState<{
+    name: string;
+  }>({ name: '' });
+  const [donations, setDonations] = useState([]);
+  const [selectedCurrency, setSelectedCurrency] = useState(0);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const currencies = ['USD', 'INR', 'EUR'];
+
+  const {
+    data: donationData,
+    loading,
+    refetch,
+  } = useQuery(ORGANIZATION_DONATION_CONNECTION_LIST, {
+    variables: { orgId: organizationId },
+  });
+
+  const { data } = useQuery(USER_ORGANIZATION_CONNECTION, {
+    variables: { id: organizationId },
+  });
+
+  const [donate] = useMutation(DONATE_TO_ORGANIZATION);
+
+  /* istanbul ignore next */
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number,
+  ): void => {
+    setPage(newPage);
+  };
+
+  /* istanbul ignore next */
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    const newRowsPerPage = event.target.value;
+
+    setRowsPerPage(parseInt(newRowsPerPage, 10));
+    setPage(0);
+  };
+
+  useEffect(() => {
+    if (data) {
+      setOrganizationDetails(data.organizationsConnection[0]);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (donationData) {
+      setDonations(donationData.getDonationByOrgIdConnection);
+    }
+  }, [donationData]);
+
+  const donateToOrg = (): void => {
+    // check if the amount is non empty and is a number
+    if (amount === '' || Number.isNaN(Number(amount))) {
+      toast.error(t(`invalidAmount`));
+      return;
+    }
+
+    // check if the amount is non negative and within the range
+    const minDonation = 1;
+    const maxDonation = 10000000;
+    if (
+      Number(amount) <= 0 ||
+      Number(amount) < minDonation ||
+      Number(amount) > maxDonation
+    ) {
+      toast.error(
+        t(`donationOutOfRange`, { min: minDonation, max: maxDonation }),
+      );
+      return;
+    }
+
+    const formattedAmount = Number(amount.trim());
+
+    try {
+      donate({
+        variables: {
+          userId,
+          createDonationOrgId2: organizationId,
+          payPalId: 'paypalId',
+          nameOfUser: userName,
+          amount: formattedAmount,
+          nameOfOrg: organizationDetails.name,
+        },
+      });
+      refetch();
+      toast.success(t(`success`) as string);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  return (
+    <>
+      <div className={`d-flex flex-row mt-4`}>
+        <div className={`${styles.mainContainer} me-4`}>
+          <div className={styles.inputContainer}>
+            <div className={styles.input}>
+              <Form.Control
+                type="name"
+                id="searchUsers"
+                className="bg-white"
+                placeholder={t('searchDonations')}
+                data-testid="searchByName"
+                autoComplete="off"
+                required
+                // onKeyUp={handleSearchByEnter}
+              />
+              <Button
+                tabIndex={-1}
+                className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+                data-testid="searchButton"
+                // onClick={handleSearchByBtnClick}
+              >
+                <Search />
+              </Button>
+            </div>
+          </div>
+          <div className={`${styles.box}`}>
+            <div className={`${styles.heading}`}>
+              {t('donateForThe')} {organizationDetails.name}
+            </div>
+            <div className={styles.donationInputContainer}>
+              <InputGroup className={styles.maxWidth}>
+                <Dropdown drop="down-centered">
+                  <Dropdown.Toggle
+                    className={`${styles.colorPrimary} ${styles.dropdown}`}
+                    variant="success"
+                    id="dropdown-basic"
+                    data-testid={`modeChangeBtn`}
+                  >
+                    <span data-testid={`changeCurrencyBtn`}>
+                      {currencies[selectedCurrency]}
+                    </span>
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    {currencies.map((currency, index) => {
+                      return (
+                        <Dropdown.Item
+                          key={index}
+                          onClick={(): void => setSelectedCurrency(index)}
+                          data-testid={`currency${index}`}
+                        >
+                          {currency}
+                        </Dropdown.Item>
+                      );
+                    })}
+                  </Dropdown.Menu>
+                </Dropdown>
+                <Form.Control
+                  type="text"
+                  className={styles.inputArea}
+                  data-testid="donationAmount"
+                  placeholder={t('amount')}
+                  value={amount}
+                  onChange={(e) => {
+                    setAmount(e.target.value);
+                  }}
+                />
+              </InputGroup>
+            </div>
+            <Form.Text className="text-muted">
+              {t('donationAmountDescription')}
+            </Form.Text>
+            <div className={styles.donateActions}>
+              <Button
+                size="sm"
+                data-testid={'donateBtn'}
+                onClick={donateToOrg}
+                className={`${styles.donateBtn}`}
+              >
+                {t('donate')} <SendIcon />
+              </Button>
+            </div>
+          </div>
+          <div className={styles.donationsContainer}>
+            <h5>{t('yourPreviousDonations')}</h5>
+            <div
+              className={`d-flex flex-column justify-content-between ${styles.content}`}
+            >
+              <div className={` ${styles.donationCardsContainer}`}>
+                {loading ? (
+                  <div className={`d-flex flex-row justify-content-center`}>
+                    <HourglassBottomIcon /> <span>Loading...</span>
+                  </div>
+                ) : (
+                  <>
+                    {donations && donations.length > 0 ? (
+                      (rowsPerPage > 0
+                        ? donations.slice(
+                            page * rowsPerPage,
+                            page * rowsPerPage + rowsPerPage,
+                          )
+                        : /* istanbul ignore next */
+                          donations
+                      ).map((donation: InterfaceDonation, index) => {
+                        const cardProps: InterfaceDonationCardProps = {
+                          name: donation.nameOfUser,
+                          id: donation._id,
+                          amount: donation.amount,
+                          userId: donation.userId,
+                          payPalId: donation.payPalId,
+                          updatedAt: donation.updatedAt,
+                        };
+                        return (
+                          <div key={index} data-testid="donationCard">
+                            <DonationCard {...cardProps} />
+                          </div>
+                        );
+                      })
+                    ) : (
+                      <span>{t('nothingToShow')}</span>
+                    )}
+                  </>
+                )}
+              </div>
+              <table>
+                <tbody>
+                  <tr>
+                    <PaginationList
+                      count={
+                        /* istanbul ignore next */
+                        donations ? donations.length : 0
+                      }
+                      rowsPerPage={rowsPerPage}
+                      page={page}
+                      onPageChange={handleChangePage}
+                      onRowsPerPageChange={handleChangeRowsPerPage}
+                    />
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <OrganizationSidebar />
+      </div>
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/Events/Events.module.css b/src/screens/UserPortal/Events/Events.module.css
new file mode 100644
index 0000000000..eadbf63d0f
--- /dev/null
+++ b/src/screens/UserPortal/Events/Events.module.css
@@ -0,0 +1,156 @@
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.backgroundWhite {
+  background-color: white;
+}
+
+.maxWidth {
+  max-width: 800px;
+}
+
+.mainContainer {
+  margin-top: 2rem;
+  width: 50%;
+  flex-grow: 3;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.content {
+  height: fit-content;
+  min-height: calc(100% - 40px);
+}
+.selectType {
+  border-radius: 10px;
+}
+.dropdown__item {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.gap {
+  gap: 20px;
+}
+
+.paddingY {
+  padding: 30px 0px;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+  color: white;
+}
+
+.eventActionsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+}
+
+.datePicker {
+  border-radius: 10px;
+  height: 40px;
+  text-align: center;
+  background-color: #f2f2f2;
+  border: none;
+  width: 100%;
+}
+
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.switchContainer {
+  display: flex;
+  align-items: center;
+}
+
+.switches {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid #31bb6b;
+  width: 65%;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
+}
+
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  border-color: #e8e5e5;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.checkboxdiv > label {
+  margin-right: 50px;
+}
+.checkboxdiv > label > input {
+  margin-left: 10px;
+}
+
+.checkboxdiv {
+  display: flex;
+}
+.checkboxdiv > div {
+  width: 50%;
+}
+
+.dispflex {
+  display: flex;
+  align-items: center;
+}
+.dispflex > input {
+  border: none;
+  box-shadow: none;
+  margin-top: 5px;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
diff --git a/src/screens/UserPortal/Events/Events.test.tsx b/src/screens/UserPortal/Events/Events.test.tsx
new file mode 100644
index 0000000000..8c0b7c6912
--- /dev/null
+++ b/src/screens/UserPortal/Events/Events.test.tsx
@@ -0,0 +1,521 @@
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import { ORGANIZATION_EVENTS_CONNECTION } from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Events from './Events';
+import userEvent from '@testing-library/user-event';
+import { CREATE_EVENT_MUTATION } from 'GraphQl/Mutations/mutations';
+import { toast } from 'react-toastify';
+import dayjs from 'dayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { ThemeProvider } from 'react-bootstrap';
+import { createTheme } from '@mui/material';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem, getItem } = useLocalStorage();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    info: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
+jest.mock('@mui/x-date-pickers/DatePicker', () => {
+  return {
+    DatePicker: jest.requireActual('@mui/x-date-pickers/DesktopDatePicker')
+      .DesktopDatePicker,
+  };
+});
+
+jest.mock('@mui/x-date-pickers/TimePicker', () => {
+  return {
+    TimePicker: jest.requireActual('@mui/x-date-pickers/DesktopTimePicker')
+      .DesktopTimePicker,
+  };
+});
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: '' }),
+}));
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#31bb6b',
+    },
+  },
+});
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_EVENTS_CONNECTION,
+      variables: {
+        organization_id: '',
+        title_contains: '',
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [
+          {
+            _id: '6404a267cc270739118e2349',
+            title: 'NewEvent',
+            description: 'sdadsasad',
+            startDate: '2023-03-05',
+            endDate: '2023-03-05',
+            location: 'NewLocation',
+            startTime: null,
+            endTime: null,
+            allDay: true,
+            recurring: false,
+            isPublic: true,
+            isRegisterable: false,
+            creator: {
+              _id: '63d649417ffe6e4d5174ea32',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              __typename: 'User',
+            },
+            attendees: [
+              {
+                _id: '63d649417ffe6e4d5174ea32',
+                __typename: 'User',
+              },
+              {
+                _id: '63d6064458fce20ee25c3bf7',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'Event',
+          },
+          {
+            _id: '6404e952c651df745358849d',
+            title: '1parti',
+            description: 'asddas',
+            startDate: '2023-03-06',
+            endDate: '2023-03-06',
+            location: 'das',
+            startTime: '00:40:00.000',
+            endTime: '02:40:00.000',
+            allDay: false,
+            recurring: false,
+            isPublic: true,
+            isRegisterable: true,
+            creator: {
+              _id: '63d649417ffe6e4d5174ea32',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              __typename: 'User',
+            },
+            attendees: [
+              {
+                _id: '63d649417ffe6e4d5174ea32',
+                __typename: 'User',
+              },
+              {
+                _id: '63dd52bbe69f63814b0a5dd4',
+                __typename: 'User',
+              },
+              {
+                _id: '63d6064458fce20ee25c3bf7',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'Event',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_EVENTS_CONNECTION,
+      variables: {
+        organization_id: '',
+        title_contains: 'test',
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [
+          {
+            _id: '6404a267cc270739118e2349',
+            title: 'NewEvent',
+            description: 'sdadsasad',
+            startDate: '2023-03-05',
+            endDate: '2023-03-05',
+            location: 'NewLocation',
+            startTime: null,
+            endTime: null,
+            allDay: true,
+            recurring: false,
+            isPublic: true,
+            isRegisterable: false,
+            creator: {
+              _id: '63d649417ffe6e4d5174ea32',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              __typename: 'User',
+            },
+            attendees: [
+              {
+                _id: '63d649417ffe6e4d5174ea32',
+                __typename: 'User',
+              },
+              {
+                _id: '63d6064458fce20ee25c3bf7',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'Event',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'testEventTitle',
+        description: 'testEventDescription',
+        location: 'testEventLocation',
+        isPublic: true,
+        recurring: false,
+        isRegisterable: true,
+        organizationId: '',
+        startDate: dayjs(new Date()).format('YYYY-MM-DD'),
+        endDate: dayjs(new Date()).format('YYYY-MM-DD'),
+        allDay: false,
+        startTime: '08:00:00',
+        endTime: '10:00:00',
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '2',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_EVENT_MUTATION,
+      variables: {
+        title: 'testEventTitle',
+        description: 'testEventDescription',
+        location: 'testEventLocation',
+        isPublic: true,
+        recurring: false,
+        isRegisterable: true,
+        organizationId: '',
+        startDate: dayjs(new Date()).format('YYYY-MM-DD'),
+        endDate: dayjs(new Date()).format('YYYY-MM-DD'),
+        allDay: true,
+        startTime: null,
+        endTime: null,
+      },
+    },
+    result: {
+      data: {
+        createEvent: {
+          _id: '1',
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Events Screen [User Portal]', () => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('Screen should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Events />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    setItem('SuperAdmin', true); // testing userRole as Superadmin
+    await wait();
+    setItem('SuperAdmin', false);
+    setItem('AdminFor', ['123']); // testing userRole as Admin
+    await wait();
+  });
+
+  test('Create event works as expected when event is not an all day event.', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <Events />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    const randomEventTitle = 'testEventTitle';
+    const randomEventDescription = 'testEventDescription';
+    const randomEventLocation = 'testEventLocation';
+
+    userEvent.type(screen.getByTestId('eventTitleInput'), randomEventTitle);
+    userEvent.type(
+      screen.getByTestId('eventDescriptionInput'),
+      randomEventDescription,
+    );
+    userEvent.type(
+      screen.getByTestId('eventLocationInput'),
+      randomEventLocation,
+    );
+
+    userEvent.click(screen.getByTestId('publicEventCheck'));
+    userEvent.click(screen.getByTestId('publicEventCheck'));
+
+    userEvent.click(screen.getByTestId('registerableEventCheck'));
+    userEvent.click(screen.getByTestId('registerableEventCheck'));
+
+    userEvent.click(screen.getByTestId('recurringEventCheck'));
+    userEvent.click(screen.getByTestId('recurringEventCheck'));
+
+    userEvent.click(screen.getByTestId('recurringEventCheck'));
+    userEvent.click(screen.getByTestId('recurringEventCheck'));
+
+    userEvent.click(screen.getByTestId('allDayEventCheck'));
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith(
+      'Event created and posted successfully.',
+    );
+  });
+
+  test('Create event works as expected when event is an all day event.', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <Events />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    const randomEventTitle = 'testEventTitle';
+    const randomEventDescription = 'testEventDescription';
+    const randomEventLocation = 'testEventLocation';
+
+    userEvent.type(screen.getByTestId('eventTitleInput'), randomEventTitle);
+    userEvent.type(
+      screen.getByTestId('eventDescriptionInput'),
+      randomEventDescription,
+    );
+    userEvent.type(
+      screen.getByTestId('eventLocationInput'),
+      randomEventLocation,
+    );
+
+    userEvent.click(screen.getByTestId('createEventBtn'));
+
+    await wait();
+
+    expect(toast.success).toHaveBeenCalledWith(
+      'Event created and posted successfully.',
+    );
+  });
+
+  test('Switch to calendar view works as expected.', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <Events />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    // await wait();
+
+    // userEvent.click(screen.getByTestId('modeChangeBtn'));
+    // userEvent.click(screen.getByTestId('modeBtn1'));
+
+    await wait();
+    const calenderView = 'Calendar View';
+
+    expect(screen.queryAllByText(calenderView)).not.toBeNull();
+    expect(screen.getByText('Sun')).toBeInTheDocument();
+  });
+
+  test('Testing DatePicker and TimePicker', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <Events />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const startDate = '03/23/2024';
+    const endDate = '04/23/2024';
+    const startTime = '02:00 PM';
+    const endTime = '06:00 PM';
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    expect(endDate).not.toBeNull();
+    const endDateDatePicker = screen.getByLabelText('End Date');
+    expect(startDate).not.toBeNull();
+    const startDateDatePicker = screen.getByLabelText('Start Date');
+
+    fireEvent.change(startDateDatePicker, {
+      target: { value: startDate },
+    });
+    fireEvent.change(endDateDatePicker, {
+      target: { value: endDate },
+    });
+
+    await wait();
+
+    expect(endDateDatePicker).toHaveValue(endDate);
+    expect(startDateDatePicker).toHaveValue(startDate);
+
+    userEvent.click(screen.getByTestId('allDayEventCheck'));
+
+    expect(endTime).not.toBeNull();
+    const endTimePicker = screen.getByLabelText('End Time');
+    expect(startTime).not.toBeNull();
+    const startTimePicker = screen.getByLabelText('Start Time');
+
+    fireEvent.change(startTimePicker, {
+      target: { value: startTime },
+    });
+    fireEvent.change(endTimePicker, {
+      target: { value: endTime },
+    });
+
+    await wait();
+    expect(endTimePicker).toHaveValue(endTime);
+    expect(startTimePicker).toHaveValue(startTime);
+  });
+
+  test('EndDate null', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <ThemeProvider theme={theme}>
+                <I18nextProvider i18n={i18nForTest}>
+                  <Events />
+                </I18nextProvider>
+              </ThemeProvider>
+            </LocalizationProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('createEventModalBtn'));
+
+    const endDateDatePicker = screen.getByLabelText('End Date');
+    const startDateDatePicker = screen.getByLabelText('Start Date');
+
+    fireEvent.change(startDateDatePicker, {
+      target: { value: null },
+    });
+    fireEvent.change(endDateDatePicker, {
+      target: { value: null },
+    });
+
+    userEvent.click(screen.getByTestId('allDayEventCheck'));
+
+    const endTimePicker = screen.getByLabelText('End Time');
+    const startTimePicker = screen.getByLabelText('Start Time');
+
+    fireEvent.change(startTimePicker, {
+      target: { value: null },
+    });
+    fireEvent.change(endTimePicker, {
+      target: { value: null },
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx
new file mode 100644
index 0000000000..d3fabf9469
--- /dev/null
+++ b/src/screens/UserPortal/Events/Events.tsx
@@ -0,0 +1,408 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { DatePicker, TimePicker } from '@mui/x-date-pickers';
+import { CREATE_EVENT_MUTATION } from 'GraphQl/Mutations/mutations';
+import {
+  ORGANIZATIONS_LIST,
+  ORGANIZATION_EVENTS_CONNECTION,
+} from 'GraphQl/Queries/Queries';
+import EventCalendar from 'components/EventCalendar/EventCalendar';
+import EventHeader from 'components/EventCalendar/EventHeader';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import { Button, Form } from 'react-bootstrap';
+import Modal from 'react-bootstrap/Modal';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
+import { errorHandler } from 'utils/errorHandler';
+import useLocalStorage from 'utils/useLocalstorage';
+import styles from './Events.module.css';
+
+/**
+ * Converts a time string to a Dayjs object.
+ *
+ * @param time - The time string to convert, in HH:mm:ss format.
+ * @returns A Dayjs object representing the time.
+ */
+const timeToDayJs = (time: string): Dayjs => {
+  const dateTimeString = dayjs().format('YYYY-MM-DD') + ' ' + time;
+  return dayjs(dateTimeString, { format: 'YYYY-MM-DD HH:mm:ss' });
+};
+
+/**
+ * Component to manage and display events for an organization.
+ *
+ * This component allows users to view, create, and manage events within an organization.
+ * It includes a calendar view, a form to create new events, and various filters and settings.
+ *
+ * @returns The JSX element for the events management interface.
+ */
+export default function events(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userEvents',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const { getItem } = useLocalStorage();
+
+  // State variables to manage event details and UI
+  const [events, setEvents] = React.useState([]);
+  const [eventTitle, setEventTitle] = React.useState('');
+  const [eventDescription, setEventDescription] = React.useState('');
+  const [eventLocation, setEventLocation] = React.useState('');
+  const [startDate, setStartDate] = React.useState<Date | null>(new Date());
+  const [endDate, setEndDate] = React.useState<Date | null>(new Date());
+  const [isPublic, setIsPublic] = React.useState(true);
+  const [isRegisterable, setIsRegisterable] = React.useState(true);
+  const [isRecurring, setIsRecurring] = React.useState(false);
+  const [isAllDay, setIsAllDay] = React.useState(true);
+  const [startTime, setStartTime] = React.useState('08:00:00');
+  const [endTime, setEndTime] = React.useState('10:00:00');
+  const [viewType, setViewType] = React.useState<ViewType>(ViewType.MONTH);
+  const [createEventModal, setCreateEventmodalisOpen] = React.useState(false);
+  const { orgId: organizationId } = useParams();
+
+  // Query to fetch events for the organization
+  const { data, refetch } = useQuery(ORGANIZATION_EVENTS_CONNECTION, {
+    variables: {
+      organization_id: organizationId,
+      title_contains: '',
+    },
+  });
+
+  // Query to fetch organization details
+  const { data: orgData } = useQuery(ORGANIZATIONS_LIST, {
+    variables: { id: organizationId },
+  });
+
+  // Mutation to create a new event
+  const [create] = useMutation(CREATE_EVENT_MUTATION);
+
+  // Get user details from local storage
+  const userId = getItem('id') as string;
+
+  const superAdmin = getItem('SuperAdmin');
+  const adminFor = getItem('AdminFor');
+  const userRole = superAdmin
+    ? 'SUPERADMIN'
+    : adminFor?.length > 0
+      ? 'ADMIN'
+      : 'USER';
+
+  /**
+   * Handles the form submission for creating a new event.
+   *
+   * @param e - The form submit event.
+   * @returns A promise that resolves when the event is created.
+   */
+  const createEvent = async (
+    e: ChangeEvent<HTMLFormElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+    try {
+      const { data: createEventData } = await create({
+        variables: {
+          title: eventTitle,
+          description: eventDescription,
+          isPublic,
+          recurring: isRecurring,
+          isRegisterable: isRegisterable,
+          organizationId,
+          startDate: dayjs(startDate).format('YYYY-MM-DD'),
+          endDate: dayjs(endDate).format('YYYY-MM-DD'),
+          allDay: isAllDay,
+          location: eventLocation,
+          startTime: !isAllDay ? startTime : null,
+          endTime: !isAllDay ? endTime : null,
+        },
+      });
+
+      /* istanbul ignore next */
+      if (createEventData) {
+        toast.success(t('eventCreated') as string);
+        refetch();
+        setEventTitle('');
+        setEventDescription('');
+        setEventLocation('');
+        setStartDate(new Date());
+        setEndDate(new Date());
+        setStartTime('08:00:00');
+        setEndTime('10:00:00');
+      }
+      setCreateEventmodalisOpen(false);
+    } catch (error: unknown) {
+      /* istanbul ignore next */
+      errorHandler(t, error);
+    }
+  };
+
+  /**
+   * Toggles the visibility of the event creation modal.
+   *
+   * @returns Void.
+   */
+  /* istanbul ignore next */
+  const toggleCreateEventModal = (): void =>
+    setCreateEventmodalisOpen(!createEventModal);
+
+  /**
+   * Updates the event title state when the input changes.
+   *
+   * @param event - The input change event.
+   * @returns Void.
+   */
+  const handleEventTitleChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    setEventTitle(event.target.value);
+  };
+
+  /**
+   * Updates the event location state when the input changes.
+   *
+   * @param event - The input change event.
+   * @returns Void.
+   */
+  const handleEventLocationChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    setEventLocation(event.target.value);
+  };
+
+  /**
+   * Updates the event description state when the input changes.
+   *
+   * @param event - The input change event.
+   * @returns Void.
+   */
+  const handleEventDescriptionChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    setEventDescription(event.target.value);
+  };
+
+  // Update the list of events when the data from the query changes
+  /* istanbul ignore next */
+  React.useEffect(() => {
+    if (data) {
+      setEvents(data.eventsByOrganizationConnection);
+    }
+  }, [data]);
+
+  /**
+   * Shows the modal for creating a new event.
+   *
+   * @returns Void.
+   */
+  /* istanbul ignore next */
+  const showInviteModal = (): void => {
+    setCreateEventmodalisOpen(true);
+  };
+
+  /**
+   * Updates the calendar view type.
+   *
+   * @param item - The view type to set, or null to reset.
+   * @returns Void.
+   */
+  /* istanbul ignore next */
+  const handleChangeView = (item: string | null): void => {
+    /*istanbul ignore next*/
+    if (item) {
+      setViewType(item as ViewType);
+    }
+  };
+
+  return (
+    <>
+      <div className={`d-flex flex-row`}>
+        <div className={`${styles.mainContainer}`}>
+          <EventHeader
+            viewType={viewType}
+            showInviteModal={showInviteModal}
+            handleChangeView={handleChangeView}
+          />
+          <div className="mt-4">
+            <EventCalendar
+              viewType={viewType}
+              eventData={events}
+              orgData={orgData}
+              userRole={userRole}
+              userId={userId}
+            />
+          </div>
+          <Modal show={createEventModal} onHide={toggleCreateEventModal}>
+            <Modal.Header>
+              <p className={styles.titlemodal}>{t('eventDetails')}</p>
+              <Button
+                variant="danger"
+                onClick={toggleCreateEventModal}
+                data-testid="createEventModalCloseBtn"
+              >
+                <i className="fa fa-times"></i>
+              </Button>
+            </Modal.Header>
+            <Modal.Body>
+              <Form onSubmitCapture={createEvent}>
+                <label htmlFor="eventtitle">{t('eventTitle')}</label>
+                <Form.Control
+                  type="title"
+                  id="eventitle"
+                  placeholder={t('enterTitle')}
+                  autoComplete="off"
+                  required
+                  value={eventTitle}
+                  onChange={handleEventTitleChange}
+                  data-testid="eventTitleInput"
+                />
+                <label htmlFor="eventdescrip">{tCommon('description')}</label>
+                <Form.Control
+                  type="eventdescrip"
+                  id="eventdescrip"
+                  placeholder={t('enterDescription')}
+                  autoComplete="off"
+                  required
+                  value={eventDescription}
+                  onChange={handleEventDescriptionChange}
+                  data-testid="eventDescriptionInput"
+                />
+                <label htmlFor="eventLocation">{tCommon('location')}</label>
+                <Form.Control
+                  type="text"
+                  id="eventLocation"
+                  placeholder={tCommon('enterLocation')}
+                  autoComplete="off"
+                  required
+                  value={eventLocation}
+                  onChange={handleEventLocationChange}
+                  data-testid="eventLocationInput"
+                />
+                <div className={styles.datediv}>
+                  <div>
+                    <DatePicker
+                      label={tCommon('startDate')}
+                      className={styles.datebox}
+                      value={dayjs(startDate)}
+                      onChange={(date: Dayjs | null): void => {
+                        if (date) {
+                          setStartDate(date?.toDate());
+                          setEndDate(date?.toDate());
+                        }
+                      }}
+                      data-testid="eventStartDate"
+                    />
+                  </div>
+                  <div>
+                    <DatePicker
+                      label={tCommon('endDate')}
+                      className={styles.datebox}
+                      value={dayjs(endDate)}
+                      onChange={(date: Dayjs | null): void => {
+                        if (date) {
+                          setEndDate(date?.toDate());
+                        }
+                      }}
+                      minDate={dayjs(startDate)}
+                      data-testid="eventEndDate"
+                    />
+                  </div>
+                </div>
+                <div className={styles.datediv}>
+                  <div className="mr-3">
+                    <TimePicker
+                      label={tCommon('startTime')}
+                      className={styles.datebox}
+                      timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+                      value={timeToDayJs(startTime)}
+                      onChange={(time): void => {
+                        if (time) {
+                          setStartTime(time?.format('HH:mm:ss'));
+                          setEndTime(time?.format('HH:mm:ss'));
+                        }
+                      }}
+                      disabled={isAllDay}
+                    />
+                  </div>
+                  <div>
+                    <TimePicker
+                      label={tCommon('endTime')}
+                      className={styles.datebox}
+                      timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+                      value={timeToDayJs(endTime)}
+                      onChange={(time): void => {
+                        if (time) {
+                          setEndTime(time?.format('HH:mm:ss'));
+                        }
+                      }}
+                      minTime={timeToDayJs(startTime)}
+                      disabled={isAllDay}
+                    />
+                  </div>
+                </div>
+                <div className={styles.checkboxdiv}>
+                  <div className={styles.dispflex}>
+                    <label htmlFor="allday">{t('allDay')}?</label>
+                    <Form.Switch
+                      className="ms-2 mt-3"
+                      id="allday"
+                      type="checkbox"
+                      checked={isAllDay}
+                      data-testid="allDayEventCheck"
+                      onChange={(): void => setIsAllDay(!isAllDay)}
+                    />
+                  </div>
+                  <div className={styles.dispflex}>
+                    <label htmlFor="recurring">{t('recurring')}:</label>
+                    <Form.Switch
+                      className="ms-2 mt-3"
+                      id="recurring"
+                      type="checkbox"
+                      checked={isRecurring}
+                      data-testid="recurringEventCheck"
+                      onChange={(): void => setIsRecurring(!isRecurring)}
+                    />
+                  </div>
+                </div>
+                <div className={styles.checkboxdiv}>
+                  <div className={styles.dispflex}>
+                    <label htmlFor="ispublic">{t('publicEvent')}?</label>
+                    <Form.Switch
+                      className="ms-2 mt-3"
+                      id="ispublic"
+                      type="checkbox"
+                      checked={isPublic}
+                      data-testid="publicEventCheck"
+                      onChange={(): void => setIsPublic(!isPublic)}
+                    />
+                  </div>
+                  <div className={styles.dispflex}>
+                    <label htmlFor="registrable">{t('registerable')}?</label>
+                    <Form.Switch
+                      className="ms-2 mt-3"
+                      id="registrable"
+                      type="checkbox"
+                      checked={isRegisterable}
+                      data-testid="registerableEventCheck"
+                      onChange={(): void => setIsRegisterable(!isRegisterable)}
+                    />
+                  </div>
+                </div>
+                <Button
+                  type="submit"
+                  className={styles.greenregbtn}
+                  value="createevent"
+                  data-testid="createEventBtn"
+                >
+                  {t('createEvent')}
+                </Button>
+              </Form>
+            </Modal.Body>
+          </Modal>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
new file mode 100644
index 0000000000..27262932d5
--- /dev/null
+++ b/src/screens/UserPortal/Organizations/Organizations.module.css
@@ -0,0 +1,145 @@
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.colorLight {
+  background-color: #f5f5f5;
+}
+
+.mainContainer {
+  max-height: 100%;
+  overflow: auto;
+}
+
+.content {
+  height: fit-content;
+  min-height: calc(100% - 40px);
+}
+
+.paddingY {
+  padding: 30px 0px;
+}
+
+.containerHeight {
+  height: 100vh;
+  padding: 1rem 1.5rem 0 calc(300px + 1.5rem);
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.9s ease-in-out;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+}
+
+.backgroundWhite {
+  background-color: white;
+}
+
+.input {
+  flex: 1;
+  position: relative;
+  margin-right: 10px;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+.opendrawer:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+.collapseSidebarButton:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+
+@media screen and (max-width: 850px) {
+  .mainContainer {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1120px) {
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+@media (max-height: 650px) {
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .containerHeight {
+    height: 100vh;
+    padding: 2rem;
+  }
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/src/screens/UserPortal/Organizations/Organizations.test.tsx b/src/screens/UserPortal/Organizations/Organizations.test.tsx
new file mode 100644
index 0000000000..f8a6fc06a5
--- /dev/null
+++ b/src/screens/UserPortal/Organizations/Organizations.test.tsx
@@ -0,0 +1,562 @@
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+
+import userEvent from '@testing-library/user-event';
+import {
+  USER_CREATED_ORGANIZATIONS,
+  USER_JOINED_ORGANIZATIONS,
+  USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/Queries';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import useLocalStorage from 'utils/useLocalstorage';
+import Organizations from './Organizations';
+import React, { act } from 'react';
+const { getItem } = useLocalStorage();
+
+const MOCKS = [
+  {
+    request: {
+      query: USER_CREATED_ORGANIZATIONS,
+      variables: {
+        id: getItem('userId'),
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            appUserProfile: {
+              createdOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  image: '',
+                  name: 'anyOrganization1',
+                  description: 'desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_CONNECTION,
+      variables: {
+        filter: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            __typename: 'Organization',
+            _id: '6401ff65ce8e8406b8f07af2',
+            image: '',
+            name: 'anyOrganization1',
+            description: 'desc',
+            address: {
+              city: 'abc',
+              countryCode: '123',
+              postalCode: '456',
+              state: 'def',
+              dependentLocality: 'ghi',
+              line1: 'asdfg',
+              line2: 'dfghj',
+              sortingCode: '4567',
+            },
+            createdAt: '1234567890',
+            userRegistrationRequired: true,
+            creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+            members: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+            admins: [
+              {
+                _id: '45gj5678jk45678fvgbhnr4rtgh',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+          },
+          {
+            __typename: 'Organization',
+            _id: '6401ff65ce8e8406b8f07af3',
+            image: '',
+            name: 'anyOrganization2',
+            createdAt: '1234567890',
+            address: {
+              city: 'abc',
+              countryCode: '123',
+              postalCode: '456',
+              state: 'def',
+              dependentLocality: 'ghi',
+              line1: 'asdfg',
+              line2: 'dfghj',
+              sortingCode: '4567',
+            },
+            description: 'desc',
+            userRegistrationRequired: true,
+            creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+            members: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+            admins: [
+              {
+                _id: '45gj5678jk45678fvgbhnr4rtgh',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_JOINED_ORGANIZATIONS,
+      variables: {
+        id: getItem('userId'),
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              joinedOrganizations: [
+                {
+                  __typename: 'Organization',
+                  _id: '6401ff65ce8e8406b8f07af2',
+                  image: '',
+                  name: 'anyOrganization1',
+                  description: 'desc',
+                  address: {
+                    city: 'abc',
+                    countryCode: '123',
+                    postalCode: '456',
+                    state: 'def',
+                    dependentLocality: 'ghi',
+                    line1: 'asdfg',
+                    line2: 'dfghj',
+                    sortingCode: '4567',
+                  },
+                  createdAt: '1234567890',
+                  userRegistrationRequired: true,
+                  creator: {
+                    __typename: 'User',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                  },
+                  members: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  admins: [
+                    {
+                      _id: '45gj5678jk45678fvgbhnr4rtgh',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                  membershipRequests: [
+                    {
+                      _id: '56gheqyr7deyfuiwfewifruy8',
+                      user: {
+                        _id: '45ydeg2yet721rtgdu32ry',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_ORGANIZATION_CONNECTION,
+      variables: {
+        filter: '2',
+      },
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            __typename: 'Organization',
+            _id: '6401ff65ce8e8406b8f07af3',
+            image: '',
+            name: 'anyOrganization2',
+            description: 'desc',
+            address: {
+              city: 'abc',
+              countryCode: '123',
+              postalCode: '456',
+              state: 'def',
+              dependentLocality: 'ghi',
+              line1: 'asdfg',
+              line2: 'dfghj',
+              sortingCode: '4567',
+            },
+            userRegistrationRequired: true,
+            createdAt: '1234567890',
+            creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+            members: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+            admins: [
+              {
+                _id: '45gj5678jk45678fvgbhnr4rtgh',
+                user: {
+                  _id: '4567890fgvhbjn',
+                },
+              },
+            ],
+            membershipRequests: [
+              {
+                _id: '56gheqyr7deyfuiwfewifruy8',
+                user: {
+                  _id: '45ydeg2yet721rtgdu32ry',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+describe('Testing Organizations Screen [User Portal]', () => {
+  test('Screen should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Search works properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const searchBtn = screen.getByTestId('searchBtn');
+    userEvent.type(screen.getByTestId('searchInput'), '2{enter}');
+    await wait();
+
+    expect(screen.queryByText('anyOrganization2')).toBeInTheDocument();
+
+    userEvent.clear(screen.getByTestId('searchInput'));
+    userEvent.click(searchBtn);
+    await wait();
+  });
+
+  test('Mode is changed to joined organizations', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('modeChangeBtn'));
+    await wait();
+    userEvent.click(screen.getByTestId('modeBtn1'));
+    await wait();
+
+    expect(screen.queryAllByText('joinedOrganization')).not.toBe([]);
+  });
+
+  test('Mode is changed to created organizations', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('modeChangeBtn'));
+    await wait();
+    userEvent.click(screen.getByTestId('modeBtn2'));
+    await wait();
+
+    expect(screen.queryAllByText('createdOrganization')).not.toBe([]);
+  });
+
+  test('Join Now button render correctly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    // Assert "Join Now" button
+    const joinNowButtons = screen.getAllByTestId('joinBtn');
+    expect(joinNowButtons.length).toBeGreaterThan(0);
+  });
+
+  test('Mode is changed to created organisations', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('modeChangeBtn'));
+    await wait();
+    userEvent.click(screen.getByTestId('modeBtn2'));
+    await wait();
+
+    expect(screen.queryAllByText('createdOrganization')).not.toBe([]);
+  });
+
+  test('Testing Sidebar', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      const closeMenuBtn = screen.getByTestId('closeMenu');
+      expect(closeMenuBtn).toBeInTheDocument();
+    });
+    await act(async () => {
+      const closeMenuBtn = screen.getByTestId('closeMenu');
+      closeMenuBtn.click();
+    });
+    await waitFor(() => {
+      const openMenuBtn = screen.getByTestId('openMenu');
+      expect(openMenuBtn).toBeInTheDocument();
+    });
+    await act(async () => {
+      const openMenuBtn = screen.getByTestId('openMenu');
+      openMenuBtn.click();
+    });
+  });
+
+  test('Testing sidebar when the screen size is less than or equal to 820px', async () => {
+    resizeWindow(800);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('My Organizations')).toBeInTheDocument();
+      expect(screen.getByText('Talawa User Portal')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      const settingsBtn = screen.getByTestId('settingsBtn');
+
+      settingsBtn.click();
+    });
+  });
+  test('Rows per Page values', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    const dropdown = screen.getByTestId('table-pagination');
+    userEvent.click(dropdown);
+    expect(screen.queryByText('-1')).not.toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('All')).toBeInTheDocument();
+  });
+
+  test('Search input has correct placeholder text', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Organizations />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const searchInput = screen.getByPlaceholderText('Search Organization');
+    expect(searchInput).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
new file mode 100644
index 0000000000..59f5500d02
--- /dev/null
+++ b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -0,0 +1,428 @@
+import { useQuery } from '@apollo/client';
+import { SearchOutlined } from '@mui/icons-material';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import {
+  USER_CREATED_ORGANIZATIONS,
+  USER_JOINED_ORGANIZATIONS,
+  USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/Queries';
+import PaginationList from 'components/PaginationList/PaginationList';
+import OrganizationCard from 'components/UserPortal/OrganizationCard/OrganizationCard';
+import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
+import React, { useEffect, useState } from 'react';
+import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import useLocalStorage from 'utils/useLocalstorage';
+import styles from './Organizations.module.css';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+
+const { getItem } = useLocalStorage();
+
+interface InterfaceOrganizationCardProps {
+  id: string;
+  name: string;
+  image: string;
+  description: string;
+  admins: [];
+  members: [];
+  address: {
+    city: string;
+    countryCode: string;
+    line1: string;
+    postalCode: string;
+    state: string;
+  };
+  membershipRequestStatus: string;
+  userRegistrationRequired: boolean;
+  membershipRequests: {
+    _id: string;
+    user: {
+      _id: string;
+    };
+  }[];
+}
+
+/**
+ * Interface defining the structure of organization properties.
+ */
+interface InterfaceOrganization {
+  _id: string;
+  name: string;
+  image: string;
+  description: string;
+  admins: [];
+  members: [];
+  address: {
+    city: string;
+    countryCode: string;
+    line1: string;
+    postalCode: string;
+    state: string;
+  };
+  membershipRequestStatus: string;
+  userRegistrationRequired: boolean;
+  membershipRequests: {
+    _id: string;
+    user: {
+      _id: string;
+    };
+  }[];
+}
+
+/**
+ * Component for displaying and managing user organizations.
+ *
+ */
+export default function organizations(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userOrganizations',
+  });
+
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+
+  /**
+   * Handles window resize events to toggle drawer visibility.
+   */
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [organizations, setOrganizations] = React.useState([]);
+  const [filterName, setFilterName] = React.useState('');
+  const [mode, setMode] = React.useState(0);
+
+  const modes = [
+    t('allOrganizations'),
+    t('joinedOrganizations'),
+    t('createdOrganizations'),
+  ];
+
+  const userId: string | null = getItem('userId');
+
+  const {
+    data,
+    refetch,
+    loading: loadingOrganizations,
+  } = useQuery(USER_ORGANIZATION_CONNECTION, {
+    variables: { filter: filterName },
+  });
+
+  const { data: joinedOrganizationsData } = useQuery(
+    USER_JOINED_ORGANIZATIONS,
+    {
+      variables: { id: userId },
+    },
+  );
+
+  const { data: createdOrganizationsData } = useQuery(
+    USER_CREATED_ORGANIZATIONS,
+    {
+      variables: { id: userId },
+    },
+  );
+
+  /**
+   * Handles page change in pagination.
+   *
+   * @param _event - The event triggering the page change.
+   * @param  newPage - The new page number.
+   */
+  /* istanbul ignore next */
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number,
+  ): void => {
+    setPage(newPage);
+  };
+
+  /**
+   * Handles change in the number of rows per page.
+   *
+   * @param  event - The event triggering the change.
+   */
+  /* istanbul ignore next */
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    const newRowsPerPage = event.target.value;
+
+    setRowsPerPage(parseInt(newRowsPerPage, 10));
+    setPage(0);
+  };
+
+  /**
+   * Searches organizations based on the provided filter value.
+   *
+   * @param  value - The search filter value.
+   */
+  const handleSearch = (value: string): void => {
+    setFilterName(value);
+
+    refetch({
+      filter: value,
+    });
+  };
+
+  /**
+   * Handles search input submission by pressing the Enter key.
+   *
+   * @param  e - The keyboard event.
+   */
+  const handleSearchByEnter = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.target as HTMLInputElement;
+      handleSearch(value);
+    }
+  };
+
+  /**
+   * Handles search button click to search organizations.
+   */
+  const handleSearchByBtnClick = (): void => {
+    const value =
+      (document.getElementById('searchUserOrgs') as HTMLInputElement)?.value ||
+      '';
+    handleSearch(value);
+  };
+
+  /**
+   * Updates the list of organizations based on query results and selected mode.
+   */
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (data) {
+      const organizations = data.organizationsConnection.map(
+        (organization: InterfaceOrganization) => {
+          let membershipRequestStatus = '';
+          if (
+            organization.members.find(
+              (member: { _id: string }) => member._id === userId,
+            )
+          )
+            membershipRequestStatus = 'accepted';
+          else if (
+            organization.membershipRequests.find(
+              (request: { user: { _id: string } }) =>
+                request.user._id === userId,
+            )
+          )
+            membershipRequestStatus = 'pending';
+          return { ...organization, membershipRequestStatus };
+        },
+      );
+      setOrganizations(organizations);
+    }
+  }, [data]);
+
+  /**
+   * Updates the list of organizations based on the selected mode and query results.
+   */
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (mode === 0) {
+      if (data) {
+        const organizations = data.organizationsConnection.map(
+          (organization: InterfaceOrganization) => {
+            let membershipRequestStatus = '';
+            if (
+              organization.members.find(
+                (member: { _id: string }) => member._id === userId,
+              )
+            )
+              membershipRequestStatus = 'accepted';
+            else if (
+              organization.membershipRequests.find(
+                (request: { user: { _id: string } }) =>
+                  request.user._id === userId,
+              )
+            )
+              membershipRequestStatus = 'pending';
+            return { ...organization, membershipRequestStatus };
+          },
+        );
+        setOrganizations(organizations);
+      }
+    } else if (mode === 1) {
+      if (joinedOrganizationsData && joinedOrganizationsData.users.length > 0) {
+        const organizations =
+          joinedOrganizationsData.users[0]?.user?.joinedOrganizations || [];
+        setOrganizations(organizations);
+      }
+    } else if (mode === 2) {
+      if (
+        createdOrganizationsData &&
+        createdOrganizationsData.users.length > 0
+      ) {
+        const organizations =
+          createdOrganizationsData.users[0]?.appUserProfile
+            ?.createdOrganizations || [];
+        setOrganizations(organizations);
+      }
+    }
+  }, [mode, data, joinedOrganizationsData, createdOrganizationsData, userId]);
+
+  return (
+    <>
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="closeMenu"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <UserSidebar hideDrawer={hideDrawer} setHideDrawer={setHideDrawer} />
+      <div
+        className={`${styles.containerHeight} ${
+          hideDrawer === null
+            ? ''
+            : hideDrawer
+              ? styles.expand
+              : styles.contract
+        }`}
+      >
+        <div className={`${styles.mainContainer}`}>
+          <div className="d-flex justify-content-between align-items-center">
+            <div style={{ flex: 1 }}>
+              <h1>{t('selectOrganization')}</h1>
+            </div>
+            <ProfileDropdown />
+          </div>
+
+          <div className="mt-4">
+            <InputGroup className={styles.maxWidth}>
+              <Form.Control
+                placeholder={t('searchOrganizations')}
+                id="searchOrganizations"
+                type="text"
+                className={`${styles.borderNone} ${styles.backgroundWhite}`}
+                onKeyUp={handleSearchByEnter}
+                data-testid="searchInput"
+              />
+              <InputGroup.Text
+                className={`${styles.colorPrimary} ${styles.borderNone}`}
+                style={{ cursor: 'pointer' }}
+                onClick={handleSearchByBtnClick}
+                data-testid="searchBtn"
+              >
+                <SearchOutlined className={`${styles.colorWhite}`} />
+              </InputGroup.Text>
+            </InputGroup>
+            <Dropdown drop="down-centered">
+              <Dropdown.Toggle
+                className={`${styles.colorPrimary} ${styles.borderNone}`}
+                variant="success"
+                id="dropdown-basic"
+                data-testid={`modeChangeBtn`}
+              >
+                {modes[mode]}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {modes.map((value, index) => {
+                  return (
+                    <Dropdown.Item
+                      key={index}
+                      data-testid={`modeBtn${index}`}
+                      onClick={(): void => setMode(index)}
+                    >
+                      {value}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+
+          <div
+            className={`d-flex flex-column justify-content-between ${styles.content}`}
+          >
+            <div
+              className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
+            >
+              {loadingOrganizations ? (
+                <div className={`d-flex flex-row justify-content-center`}>
+                  <HourglassBottomIcon /> <span>Loading...</span>
+                </div>
+              ) : (
+                <>
+                  {' '}
+                  {organizations && organizations.length > 0 ? (
+                    (rowsPerPage > 0
+                      ? organizations.slice(
+                          page * rowsPerPage,
+                          page * rowsPerPage + rowsPerPage,
+                        )
+                      : /* istanbul ignore next */
+                        organizations
+                    ).map((organization: InterfaceOrganization, index) => {
+                      const cardProps: InterfaceOrganizationCardProps = {
+                        name: organization.name,
+                        image: organization.image,
+                        id: organization._id,
+                        description: organization.description,
+                        admins: organization.admins,
+                        members: organization.members,
+                        address: organization.address,
+                        membershipRequestStatus:
+                          organization.membershipRequestStatus,
+                        userRegistrationRequired:
+                          organization.userRegistrationRequired,
+                        membershipRequests: organization.membershipRequests,
+                      };
+                      return <OrganizationCard key={index} {...cardProps} />;
+                    })
+                  ) : (
+                    <span>{t('nothingToShow')}</span>
+                  )}
+                </>
+              )}
+            </div>
+            <table>
+              <tbody>
+                <tr>
+                  <PaginationList
+                    count={
+                      /* istanbul ignore next */
+                      organizations ? organizations.length : 0
+                    }
+                    rowsPerPage={rowsPerPage}
+                    page={page}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/People/People.module.css b/src/screens/UserPortal/People/People.module.css
new file mode 100644
index 0000000000..a87a03f3d8
--- /dev/null
+++ b/src/screens/UserPortal/People/People.module.css
@@ -0,0 +1,78 @@
+.borderNone {
+  border: none;
+}
+.borderBox {
+  border: 1px solid #dddddd;
+}
+
+.borderRounded5 {
+  border-radius: 5px;
+}
+
+.borderRounded8 {
+  border-radius: 8px;
+}
+
+.borderRounded24 {
+  border-radius: 24px;
+}
+
+.topRadius {
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+}
+
+.bottomRadius {
+  border-bottom-left-radius: 24px;
+  border-bottom-right-radius: 24px;
+}
+
+.shadow {
+  box-shadow: 5px 5px 4px 0px #31bb6b1f;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.colorGreen {
+  color: #31bb6b;
+}
+
+.backgroundWhite {
+  background-color: white;
+}
+
+.maxWidth {
+  max-width: 600px;
+}
+
+.mainContainer {
+  width: 50%;
+  flex-grow: 3;
+}
+
+.content {
+  height: fit-content;
+  min-height: calc(100% - 40px);
+}
+
+.gap {
+  gap: 20px;
+}
+
+.colorPrimary {
+  background: #31bb6b;
+}
+
+.greenBorder {
+  border: 1px solid #31bb6b;
+}
+
+.semiBold {
+  font-weight: 500;
+}
+
+.placeholderColor::placeholder {
+  color: #737373;
+}
diff --git a/src/screens/UserPortal/People/People.test.tsx b/src/screens/UserPortal/People/People.test.tsx
new file mode 100644
index 0000000000..c978a0a5a3
--- /dev/null
+++ b/src/screens/UserPortal/People/People.test.tsx
@@ -0,0 +1,225 @@
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import {
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  ORGANIZATION_ADMINS_LIST,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import People from './People';
+import userEvent from '@testing-library/user-event';
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: '',
+        firstName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              image: null,
+              email: 'noble@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+            {
+              _id: '64001660a711c62d5b4076a3',
+              firstName: 'Noble',
+              lastName: 'Mittal',
+              image: 'mockImage',
+              email: 'noble@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_ADMINS_LIST,
+      variables: {
+        id: '',
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            __typename: 'Organization',
+            _id: '6401ff65ce8e8406b8f07af2',
+            admins: [
+              {
+                _id: '64001660a711c62d5b4076a2',
+                firstName: 'Noble',
+                lastName: 'Admin',
+                image: null,
+                email: 'noble@gmail.com',
+                createdAt: '2023-03-02T03:22:08.101Z',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+      variables: {
+        orgId: '',
+        firstName_contains: 'j',
+      },
+    },
+    result: {
+      data: {
+        organizationsMemberConnection: {
+          edges: [
+            {
+              _id: '64001660a711c62d5b4076a2',
+              firstName: 'John',
+              lastName: 'Cena',
+              image: null,
+              email: 'john@gmail.com',
+              createdAt: '2023-03-02T03:22:08.101Z',
+            },
+          ],
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: '' }),
+}));
+
+describe('Testing People Screen [User Portal]', () => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+
+  test('Screen should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <People />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(screen.queryAllByText('Noble Mittal')).not.toBe([]);
+  });
+
+  test('Search works properly by pressing enter', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <People />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('searchInput'), 'j{enter}');
+    await wait();
+
+    expect(screen.queryByText('John Cena')).toBeInTheDocument();
+    expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
+  });
+
+  test('Search works properly by clicking search Btn', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <People />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const searchBtn = screen.getByTestId('searchBtn');
+    userEvent.type(screen.getByTestId('searchInput'), '');
+    userEvent.click(searchBtn);
+    await wait();
+    userEvent.type(screen.getByTestId('searchInput'), 'j');
+    userEvent.click(searchBtn);
+    await wait();
+
+    expect(screen.queryByText('John Cena')).toBeInTheDocument();
+    expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
+  });
+
+  test('Mode is changed to Admins', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <People />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('modeChangeBtn'));
+    await wait();
+    userEvent.click(screen.getByTestId('modeBtn1'));
+    await wait();
+
+    expect(screen.queryByText('Noble Admin')).toBeInTheDocument();
+    expect(screen.queryByText('Noble Mittal')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/screens/UserPortal/People/People.tsx b/src/screens/UserPortal/People/People.tsx
new file mode 100644
index 0000000000..4904e75b20
--- /dev/null
+++ b/src/screens/UserPortal/People/People.tsx
@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react';
+import PeopleCard from 'components/UserPortal/PeopleCard/PeopleCard';
+import { Dropdown, Form, InputGroup } from 'react-bootstrap';
+import PaginationList from 'components/PaginationList/PaginationList';
+import {
+  ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+  ORGANIZATION_ADMINS_LIST,
+} from 'GraphQl/Queries/Queries';
+import { useQuery } from '@apollo/client';
+import { FilterAltOutlined, SearchOutlined } from '@mui/icons-material';
+import styles from './People.module.css';
+import { useTranslation } from 'react-i18next';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import { useParams } from 'react-router-dom';
+
+interface InterfaceOrganizationCardProps {
+  id: string;
+  name: string;
+  image: string;
+  email: string;
+  role: string;
+  sno: string;
+}
+
+interface InterfaceMember {
+  firstName: string;
+  lastName: string;
+  image: string;
+  _id: string;
+  email: string;
+  userType: string;
+}
+
+/**
+ * `People` component displays a list of people associated with an organization.
+ * It allows users to filter between all members and admins, search for members by their first name,
+ * and paginate through the list.
+ */
+export default function people(): JSX.Element {
+  // i18n translation hook for user organization related translations
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'people',
+  });
+
+  // i18n translation hook for common translations
+  const { t: tCommon } = useTranslation('common');
+
+  // State for managing current page in pagination
+  const [page, setPage] = useState<number>(0);
+
+  // State for managing the number of rows per page in pagination
+  const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+  const [members, setMembers] = useState([]);
+  const [mode, setMode] = useState<number>(0);
+
+  // Extracting organization ID from URL parameters
+  const { orgId: organizationId } = useParams();
+
+  // Filter modes for dropdown selection
+  const modes = ['All Members', 'Admins'];
+
+  // Query to fetch list of members of the organization
+  const { data, loading, refetch } = useQuery(
+    ORGANIZATIONS_MEMBER_CONNECTION_LIST,
+    {
+      variables: {
+        orgId: organizationId,
+        firstName_contains: '',
+      },
+    },
+  );
+
+  // Query to fetch list of admins of the organization
+  const { data: data2 } = useQuery(ORGANIZATION_ADMINS_LIST, {
+    variables: { id: organizationId },
+  });
+
+  /**
+   * Handles page change in pagination.
+   *
+   */
+  /* istanbul ignore next */
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number,
+  ): void => {
+    setPage(newPage);
+  };
+
+  /**
+   * Handles change in the number of rows per page.
+   *
+   */
+  /* istanbul ignore next */
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
+    const newRowsPerPage = event.target.value;
+
+    setRowsPerPage(parseInt(newRowsPerPage, 10));
+    setPage(0);
+  };
+
+  /**
+   * Searches for members based on the filter value.
+   *
+   */
+  const handleSearch = (newFilter: string): void => {
+    refetch({
+      firstName_contains: newFilter,
+    });
+  };
+
+  /**
+   * Handles search operation triggered by pressing the Enter key.
+   *
+   */
+  const handleSearchByEnter = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.currentTarget;
+      handleSearch(value);
+    }
+  };
+
+  /**
+   * Handles search operation triggered by clicking the search button.
+   */
+  const handleSearchByBtnClick = (): void => {
+    const inputValue =
+      (document.getElementById('searchPeople') as HTMLInputElement)?.value ||
+      '';
+    handleSearch(inputValue);
+  };
+
+  useEffect(() => {
+    if (data) {
+      setMembers(data.organizationsMemberConnection.edges);
+    }
+  }, [data]);
+
+  /**
+   * Updates the list of members based on the selected filter mode.
+   */
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (mode == 0) {
+      if (data) {
+        setMembers(data.organizationsMemberConnection.edges);
+      }
+    } else if (mode == 1) {
+      if (data2) {
+        setMembers(data2.organizations[0].admins);
+      }
+    }
+  }, [mode]);
+
+  return (
+    <>
+      <div className={`d-flex flex-row`}>
+        <div className={`${styles.mainContainer}`}>
+          <div
+            className={`mt-4 d-flex flex-row justify-content-between flex-wrap ${styles.gap}`}
+          >
+            <InputGroup className={`${styles.maxWidth} ${styles.shadow}`}>
+              <Form.Control
+                placeholder={t('searchUsers')}
+                id="searchPeople"
+                type="text"
+                className={`${styles.borderBox} ${styles.backgroundWhite} ${styles.placeholderColor}`}
+                onKeyUp={handleSearchByEnter}
+                data-testid="searchInput"
+              />
+              <InputGroup.Text
+                className={`${styles.colorPrimary} ${styles.borderRounded5}`}
+                style={{ cursor: 'pointer' }}
+                onClick={handleSearchByBtnClick}
+                data-testid="searchBtn"
+              >
+                <SearchOutlined className={`${styles.colorWhite}`} />
+              </InputGroup.Text>
+            </InputGroup>
+            <Dropdown drop="down-centered">
+              <Dropdown.Toggle
+                className={`${styles.greenBorder} ${styles.backgroundWhite} ${styles.colorGreen} ${styles.semiBold} ${styles.shadow} ${styles.borderRounded8}`}
+                id="dropdown-basic"
+                data-testid={`modeChangeBtn`}
+              >
+                <FilterAltOutlined />
+                {tCommon('filter').toUpperCase()}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {modes.map((value, index) => {
+                  return (
+                    <Dropdown.Item
+                      key={index}
+                      data-testid={`modeBtn${index}`}
+                      onClick={(): void => setMode(index)}
+                    >
+                      {value}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+          <div className={`d-flex flex-column ${styles.content}`}>
+            <div
+              className={`d-flex border py-3 px-4 mt-4 bg-white ${styles.topRadius}`}
+            >
+              <span style={{ flex: '1' }} className="d-flex">
+                <span style={{ flex: '1' }}>S.No</span>
+                <span style={{ flex: '1' }}>Avatar</span>
+              </span>
+              <span style={{ flex: '2' }}>Name</span>
+              <span style={{ flex: '2' }}>Email</span>
+              <span style={{ flex: '2' }}>Role</span>
+            </div>
+
+            <div
+              className={`d-flex flex-column border px-4 p-3 mt-0 ${styles.gap} ${styles.bottomRadius} ${styles.backgroundWhite}`}
+            >
+              {loading ? (
+                <div className={`d-flex flex-row justify-content-center`}>
+                  <HourglassBottomIcon /> <span>Loading...</span>
+                </div>
+              ) : (
+                <>
+                  {members && members.length > 0 ? (
+                    (rowsPerPage > 0
+                      ? members.slice(
+                          page * rowsPerPage,
+                          page * rowsPerPage + rowsPerPage,
+                        )
+                      : /* istanbul ignore next */
+                        members
+                    ).map((member: InterfaceMember, index) => {
+                      const name = `${member.firstName} ${member.lastName}`;
+
+                      const cardProps: InterfaceOrganizationCardProps = {
+                        name,
+                        image: member.image,
+                        id: member._id,
+                        email: member.email,
+                        role: member.userType,
+                        sno: (index + 1).toString(),
+                      };
+                      return <PeopleCard key={index} {...cardProps} />;
+                    })
+                  ) : (
+                    <span>{t('nothingToShow')}</span>
+                  )}
+                </>
+              )}
+            </div>
+            <table>
+              <tbody>
+                <tr>
+                  <PaginationList
+                    count={
+                      /* istanbul ignore next */
+                      members ? members.length : 0
+                    }
+                    rowsPerPage={rowsPerPage}
+                    page={page}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        {/* <OrganizationSidebar /> */}
+      </div>
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/Pledges/Pledge.test.tsx b/src/screens/UserPortal/Pledges/Pledge.test.tsx
new file mode 100644
index 0000000000..3d5eef94c2
--- /dev/null
+++ b/src/screens/UserPortal/Pledges/Pledge.test.tsx
@@ -0,0 +1,355 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import { EMPTY_MOCKS, MOCKS, USER_PLEDGES_ERROR } from './PledgesMocks';
+import type { ApolloLink } from '@apollo/client';
+import Pledges from './Pledges';
+import useLocalStorage from 'utils/useLocalstorage';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
+  return {
+    DateTimePicker: jest.requireActual(
+      '@mui/x-date-pickers/DesktopDateTimePicker',
+    ).DesktopDateTimePicker,
+  };
+});
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(USER_PLEDGES_ERROR);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const translations = JSON.parse(
+  JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.pledges),
+);
+
+const renderMyPledges = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/pledges/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/user/pledges/:orgId" element={<Pledges />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing User Pledge Screen', () => {
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the Campaign Pledge screen', async () => {
+    renderMyPledges(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledges')).toBeInTheDocument();
+      expect(screen.getByText('Harve Lance')).toBeInTheDocument();
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+  });
+
+  it('should redirect to fallback URL if userId is null in LocalStorage', async () => {
+    setItem('userId', null);
+    renderMyPledges(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/user/pledges/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/user/pledges/" element={<Pledges />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('check if user image renders', async () => {
+    renderMyPledges(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledges')).toBeInTheDocument();
+    });
+
+    const image = await screen.findByTestId('image1');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'image-url');
+  });
+
+  it('Sort the Pledges list by Lowest Amount', async () => {
+    renderMyPledges(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledges');
+    expect(searchPledger).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('amount_ASC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('amount_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Harve Lance')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('100');
+    });
+  });
+
+  it('Sort the Pledges list by Highest Amount', async () => {
+    renderMyPledges(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledges');
+    expect(searchPledger).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('amount_DESC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('amount_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Harve Lance')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('700');
+    });
+  });
+
+  it('Sort the Pledges list by earliest endDate', async () => {
+    renderMyPledges(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledges');
+    expect(searchPledger).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('endDate_ASC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('endDate_ASC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Harve Lance')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('700');
+    });
+  });
+
+  it('Sort the Pledges list by latest endDate', async () => {
+    renderMyPledges(link1);
+
+    const searchPledger = await screen.findByTestId('searchPledges');
+    expect(searchPledger).toBeInTheDocument();
+
+    userEvent.click(screen.getByTestId('filter'));
+    await waitFor(() => {
+      expect(screen.getByTestId('endDate_DESC')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('endDate_DESC'));
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Harve Lance')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('amountCell')[0]).toHaveTextContent('100');
+    });
+  });
+
+  it('Search the Pledges list by User name', async () => {
+    renderMyPledges(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledges')).toBeInTheDocument();
+    });
+
+    userEvent.click(screen.getByTestId('searchByDrpdwn'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('pledgers')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('pledgers'));
+
+    const searchPledger = screen.getByTestId('searchPledges');
+    fireEvent.change(searchPledger, {
+      target: { value: 'Harve' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Harve Lance')).toBeInTheDocument();
+      expect(screen.queryByText('John Doe')).toBeNull();
+    });
+  });
+
+  it('Search the Pledges list by Campaign name', async () => {
+    renderMyPledges(link1);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledges')).toBeInTheDocument();
+    });
+
+    const searchByToggle = await screen.findByTestId('searchByDrpdwn');
+    fireEvent.click(searchByToggle);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('campaigns')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByTestId('campaigns'));
+
+    const searchPledger = await screen.findByTestId('searchPledges');
+    fireEvent.change(searchPledger, {
+      target: { value: 'School' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+      expect(screen.queryByText('Harve Lance')).toBeNull();
+    });
+  });
+
+  it('should render extraUserDetails in Popup', async () => {
+    renderMyPledges(link1);
+    await waitFor(() => {
+      expect(screen.getByTestId('searchPledges')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Harve Lance')).toBeInTheDocument();
+      expect(screen.queryByText('Jeramy Gracia')).toBeNull();
+      expect(screen.queryByText('Praise Norris')).toBeNull();
+    });
+
+    const moreContainer = await screen.findAllByTestId('moreContainer');
+    userEvent.click(moreContainer[0]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('extra1')).toBeInTheDocument();
+      expect(screen.getByTestId('extra2')).toBeInTheDocument();
+      expect(screen.getByTestId('extraAvatar2')).toBeInTheDocument();
+      const image = screen.getByTestId('extraImage1');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', 'image-url3');
+    });
+
+    userEvent.click(moreContainer[0]);
+    await waitFor(() => {
+      expect(screen.queryByText('Jeramy Gracia')).toBeNull();
+      expect(screen.queryByText('Praise Norris')).toBeNull();
+    });
+  });
+
+  it('open and closes delete pledge modal', async () => {
+    renderMyPledges(link1);
+
+    const deletePledgeBtn = await screen.findAllByTestId('deletePledgeBtn');
+    await waitFor(() => expect(deletePledgeBtn[0]).toBeInTheDocument());
+    userEvent.click(deletePledgeBtn[0]);
+
+    await waitFor(() =>
+      expect(screen.getByText(translations.deletePledge)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('deletePledgeCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('deletePledgeCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('open and closes update pledge modal', async () => {
+    renderMyPledges(link1);
+
+    const editPledgeBtn = await screen.findAllByTestId('editPledgeBtn');
+    await waitFor(() => expect(editPledgeBtn[0]).toBeInTheDocument());
+    userEvent.click(editPledgeBtn[0]);
+
+    await waitFor(() =>
+      expect(screen.getByText(translations.editPledge)).toBeInTheDocument(),
+    );
+    userEvent.click(screen.getByTestId('pledgeModalCloseBtn'));
+    await waitFor(() =>
+      expect(screen.queryByTestId('pledgeModalCloseBtn')).toBeNull(),
+    );
+  });
+
+  it('should render the Campaign Pledge screen with error', async () => {
+    renderMyPledges(link2);
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the empty pledge component', async () => {
+    renderMyPledges(link3);
+    await waitFor(() =>
+      expect(screen.getByText(translations.noPledges)).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/src/screens/UserPortal/Pledges/Pledges.module.css b/src/screens/UserPortal/Pledges/Pledges.module.css
new file mode 100644
index 0000000000..99b1b5f78f
--- /dev/null
+++ b/src/screens/UserPortal/Pledges/Pledges.module.css
@@ -0,0 +1,202 @@
+.btnsContainer {
+  display: flex;
+  margin: 1.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+  background-color: white;
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.subContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.progress {
+  display: flex;
+  width: 45rem;
+}
+
+.progressBar {
+  margin: 0rem 0.75rem;
+  width: 100%;
+  font-size: 0.9rem;
+  height: 1.25rem;
+}
+
+/* Pledge Modal */
+
+.pledgeModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+/* Error Loading Styles */
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container {
+  min-height: 100vh;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+/* Data Grid Styles */
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.TableImage {
+  object-fit: cover;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 100% !important;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pledgerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.1rem 0.25rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.45rem;
+  border-radius: 0.35rem;
+  background-color: #31bb6b33;
+  height: 2.2rem;
+  margin-top: 0.75rem;
+}
+
+.progressBar {
+  margin: 0rem 0.75rem;
+  width: 100%;
+  font-size: 0.7rem;
+  height: 1.55rem;
+}
+
+/* ExtraPledgers Popup */
+.popup {
+  z-index: 50;
+  border-radius: 0.5rem;
+  font-family: sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #e2e8f0;
+  background-color: white;
+  color: #1e293b;
+  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.popupExtra {
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.moreContainer {
+  display: flex;
+  align-items: center;
+}
+
+.moreContainer:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
diff --git a/src/screens/UserPortal/Pledges/Pledges.tsx b/src/screens/UserPortal/Pledges/Pledges.tsx
new file mode 100644
index 0000000000..33e8bf63c2
--- /dev/null
+++ b/src/screens/UserPortal/Pledges/Pledges.tsx
@@ -0,0 +1,557 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Dropdown, Form, Button, ProgressBar } from 'react-bootstrap';
+import styles from './Pledges.module.css';
+import { useTranslation } from 'react-i18next';
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+import useLocalStorage from 'utils/useLocalstorage';
+import type { InterfacePledgeInfo, InterfaceUserInfo } from 'utils/interfaces';
+import { Unstable_Popup as BasePopup } from '@mui/base/Unstable_Popup';
+import { type ApolloQueryResult, useQuery } from '@apollo/client';
+import { USER_PLEDGES } from 'GraphQl/Queries/fundQueries';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { Stack } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+import dayjs from 'dayjs';
+import { currencySymbols } from 'utils/currency';
+import PledgeDeleteModal from 'screens/FundCampaignPledge/PledgeDeleteModal';
+import { Navigate, useParams } from 'react-router-dom';
+import PledgeModal from '../Campaigns/PledgeModal';
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+enum ModalState {
+  UPDATE = 'update',
+  DELETE = 'delete',
+}
+/**
+ * The `Pledges` component is responsible for rendering a user's pledges within a campaign.
+ * It fetches pledges data using Apollo Client's `useQuery` hook and displays the data
+ * in a DataGrid with various features such as search, sorting, and modal dialogs for updating
+ * or deleting a pledge. The component also handles various UI interactions including opening
+ * modals for editing or deleting a pledge, showing additional pledgers in a popup, and
+ * applying filters for searching pledges by campaign or pledger name.
+ *
+ * Key functionalities include:
+ * - Fetching pledges data from the backend using GraphQL query `USER_PLEDGES`.
+ * - Displaying pledges in a table with columns for pledgers, associated campaigns,
+ *   end dates, pledged amounts, and actions.
+ * - Handling search and sorting of pledges.
+ * - Opening and closing modals for updating and deleting pledges.
+ * - Displaying additional pledgers in a popup when the list of pledgers exceeds a certain limit.
+ *
+ * @returns  The rendered Pledges component.
+ */
+
+const Pledges = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userCampaigns',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+  const { orgId } = useParams();
+  if (!orgId || !userId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
+  const [extraUsers, setExtraUsers] = useState<InterfaceUserInfo[]>([]);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [pledges, setPledges] = useState<InterfacePledgeInfo[]>([]);
+  const [pledge, setPledge] = useState<InterfacePledgeInfo | null>(null);
+  const [searchBy, setSearchBy] = useState<'pledgers' | 'campaigns'>(
+    'pledgers',
+  );
+  const [sortBy, setSortBy] = useState<
+    'amount_ASC' | 'amount_DESC' | 'endDate_ASC' | 'endDate_DESC'
+  >('endDate_DESC');
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.UPDATE]: false,
+    [ModalState.DELETE]: false,
+  });
+
+  const open = Boolean(anchor);
+  const id = open ? 'simple-popup' : undefined;
+
+  const {
+    data: pledgeData,
+    loading: pledgeLoading,
+    error: pledgeError,
+    refetch: refetchPledge,
+  }: {
+    data?: {
+      getPledgesByUserId: InterfacePledgeInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => Promise<
+      ApolloQueryResult<{
+        getPledgesByUserId: InterfacePledgeInfo[];
+      }>
+    >;
+  } = useQuery(USER_PLEDGES, {
+    variables: {
+      userId: userId,
+      where: {
+        firstName_contains: searchBy === 'pledgers' ? searchTerm : undefined,
+        name_contains: searchBy === 'campaigns' ? searchTerm : undefined,
+      },
+      orderBy: sortBy,
+    },
+  });
+
+  const openModal = (modal: ModalState): void => {
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+  };
+
+  const closeModal = (modal: ModalState): void => {
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+  };
+
+  const handleOpenModal = useCallback(
+    (pledge: InterfacePledgeInfo | null): void => {
+      setPledge(pledge);
+      openModal(ModalState.UPDATE);
+    },
+    [openModal],
+  );
+
+  const handleDeleteClick = useCallback(
+    (pledge: InterfacePledgeInfo): void => {
+      setPledge(pledge);
+      openModal(ModalState.DELETE);
+    },
+    [openModal],
+  );
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLElement>,
+    users: InterfaceUserInfo[],
+  ): void => {
+    setExtraUsers(users);
+    setAnchor(anchor ? null : event.currentTarget);
+  };
+
+  useEffect(() => {
+    if (pledgeData) {
+      setPledges(pledgeData.getPledgesByUserId);
+    }
+  }, [pledgeData]);
+
+  if (pledgeLoading) return <Loader size="xl" />;
+  if (pledgeError) {
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {tErrors('errorLoading', { entity: 'Pledges' })}
+            <br />
+            {pledgeError.message}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'pledgers',
+      headerName: 'Pledgers',
+      flex: 4,
+      minWidth: 50,
+      align: 'left',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex flex-wrap gap-1" style={{ maxHeight: 120 }}>
+            {params.row.users
+              .slice(0, 2)
+              .map((user: InterfaceUserInfo, index: number) => (
+                <div className={styles.pledgerContainer} key={index}>
+                  {user.image ? (
+                    <img
+                      src={user.image}
+                      alt="pledge"
+                      data-testid={`image${index + 1}`}
+                      className={styles.TableImage}
+                    />
+                  ) : (
+                    <div className={styles.avatarContainer}>
+                      <Avatar
+                        key={user._id + '1'}
+                        containerStyle={styles.imageContainer}
+                        avatarStyle={styles.TableImage}
+                        name={user.firstName + ' ' + user.lastName}
+                        alt={user.firstName + ' ' + user.lastName}
+                      />
+                    </div>
+                  )}
+                  <span key={user._id + '2'}>
+                    {user.firstName + ' ' + user.lastName}
+                  </span>
+                </div>
+              ))}
+            {params.row.users.length > 2 && (
+              <div
+                className={styles.moreContainer}
+                aria-describedby={id}
+                data-testid="moreContainer"
+                onClick={(e) => handleClick(e, params.row.users.slice(2))}
+              >
+                <span>+{params.row.users.length - 2} more...</span>
+              </div>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'associatedCampaign',
+      headerName: 'Associated Campaign',
+      flex: 2,
+      minWidth: 100,
+      align: 'left',
+      headerAlign: 'left',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return <>{params.row.campaign?.name}</>;
+      },
+    },
+    {
+      field: 'endDate',
+      headerName: 'End Date',
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return dayjs(params.row.endDate).format('DD/MM/YYYY');
+      },
+    },
+    {
+      field: 'amount',
+      headerName: 'Pledged',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="amountCell"
+          >
+            {
+              currencySymbols[
+                params.row.currency as keyof typeof currencySymbols
+              ]
+            }
+            {params.row.amount}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'donated',
+      headerName: 'Donated',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="paidCell"
+          >
+            {
+              currencySymbols[
+                params.row.currency as keyof typeof currencySymbols
+              ]
+            }
+            0
+          </div>
+        );
+      },
+    },
+    {
+      field: 'progress',
+      headerName: 'Progress',
+      flex: 2,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: () => {
+        return (
+          <div className="d-flex justify-content-center align-items-center h-100">
+            <ProgressBar
+              now={200}
+              label={`${(200 / 1000) * 100}%`}
+              max={1000}
+              className={styles.progressBar}
+              data-testid="progressBar"
+            />
+          </div>
+        );
+      },
+    },
+    {
+      field: 'action',
+      headerName: 'Action',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              className="me-2 rounded"
+              data-testid="editPledgeBtn"
+              onClick={() => handleOpenModal(params.row as InterfacePledgeInfo)}
+            >
+              {' '}
+              <i className="fa fa-edit" />
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              className="rounded"
+              data-testid="deletePledgeBtn"
+              onClick={() =>
+                handleDeleteClick(params.row as InterfacePledgeInfo)
+              }
+            >
+              <i className="fa fa-trash" />
+            </Button>
+          </>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={t('searchBy') + ' ' + t(searchBy)}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            data-testid="searchPledges"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center`}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <Dropdown
+            aria-expanded="false"
+            title="SearchBy"
+            data-tesid="searchByToggle"
+            className="flex-fill"
+          >
+            <Dropdown.Toggle
+              data-testid="searchByDrpdwn"
+              variant="outline-success"
+            >
+              <Sort className={'me-1'} />
+              {t('searchBy')}
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item
+                id="searchPledgers"
+                onClick={(): void => setSearchBy('pledgers')}
+                data-testid="pledgers"
+              >
+                {t('pledgers')}
+              </Dropdown.Item>
+              <Dropdown.Item
+                id="searchCampaigns"
+                onClick={(): void => setSearchBy('campaigns')}
+                data-testid="campaigns"
+              >
+                {t('campaigns')}
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+
+          <Dropdown>
+            <Dropdown.Toggle
+              variant="success"
+              id="dropdown-basic"
+              className={styles.dropdown}
+              data-testid="filter"
+            >
+              <Sort className={'me-1'} />
+              {tCommon('sort')}
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item
+                onClick={() => setSortBy('amount_ASC')}
+                data-testid="amount_ASC"
+              >
+                {t('lowestAmount')}
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => setSortBy('amount_DESC')}
+                data-testid="amount_DESC"
+              >
+                {t('highestAmount')}
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => setSortBy('endDate_DESC')}
+                data-testid="endDate_DESC"
+              >
+                {t('latestEndDate')}
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => setSortBy('endDate_ASC')}
+                data-testid="endDate_ASC"
+              >
+                {t('earliestEndDate')}
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      </div>
+
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={8}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noPledges')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={pledges.map((pledge) => ({
+          _id: pledge._id,
+          users: pledge.users,
+          startDate: pledge.startDate,
+          endDate: pledge.endDate,
+          amount: pledge.amount,
+          currency: pledge.currency,
+          campaign: pledge.campaign,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      <PledgeModal
+        isOpen={modalState[ModalState.UPDATE]}
+        hide={() => closeModal(ModalState.UPDATE)}
+        campaignId={pledge?.campaign ? pledge?.campaign._id : ''}
+        userId={userId}
+        pledge={pledge}
+        refetchPledge={refetchPledge}
+        endDate={pledge?.campaign ? pledge?.campaign.endDate : new Date()}
+        mode={'edit'}
+      />
+
+      <PledgeDeleteModal
+        isOpen={modalState[ModalState.DELETE]}
+        hide={() => closeModal(ModalState.DELETE)}
+        pledge={pledge}
+        refetchPledge={refetchPledge}
+      />
+
+      <BasePopup
+        id={id}
+        open={open}
+        anchor={anchor}
+        disablePortal
+        className={`${styles.popup} ${extraUsers.length > 4 ? styles.popupExtra : ''}`}
+      >
+        {extraUsers.map((user: InterfaceUserInfo, index: number) => (
+          <div
+            className={styles.pledgerContainer}
+            key={index}
+            data-testid={`extra${index + 1}`}
+          >
+            {user.image ? (
+              <img
+                src={user.image}
+                alt="pledger"
+                data-testid={`extraImage${index + 1}`}
+                className={styles.TableImage}
+              />
+            ) : (
+              <div className={styles.avatarContainer}>
+                <Avatar
+                  key={user._id + '1'}
+                  containerStyle={styles.imageContainer}
+                  avatarStyle={styles.TableImage}
+                  name={user.firstName + ' ' + user.lastName}
+                  alt={user.firstName + ' ' + user.lastName}
+                  dataTestId={`extraAvatar${index + 1}`}
+                />
+              </div>
+            )}
+            <span key={user._id + '2'}>
+              {user.firstName + ' ' + user.lastName}
+            </span>
+          </div>
+        ))}
+      </BasePopup>
+    </div>
+  );
+};
+
+export default Pledges;
diff --git a/src/screens/UserPortal/Pledges/PledgesMocks.ts b/src/screens/UserPortal/Pledges/PledgesMocks.ts
new file mode 100644
index 0000000000..c7666987ff
--- /dev/null
+++ b/src/screens/UserPortal/Pledges/PledgesMocks.ts
@@ -0,0 +1,596 @@
+import { DELETE_PLEDGE } from 'GraphQl/Mutations/PledgeMutation';
+import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { USER_PLEDGES } from 'GraphQl/Queries/fundQueries';
+
+const userDetailsQuery = {
+  request: {
+    query: USER_DETAILS,
+    variables: {
+      id: 'userId',
+    },
+  },
+  result: {
+    data: {
+      user: {
+        user: {
+          _id: 'userId',
+          joinedOrganizations: [
+            {
+              _id: '6537904485008f171cf29924',
+              __typename: 'Organization',
+            },
+          ],
+          firstName: 'Harve',
+          lastName: 'Lance',
+          email: 'testuser1@example.com',
+          image: null,
+          createdAt: '2023-04-13T04:53:17.742Z',
+          birthDate: null,
+          educationGrade: null,
+          employmentStatus: null,
+          gender: null,
+          maritalStatus: null,
+          phone: null,
+          address: {
+            line1: 'Line1',
+            countryCode: 'CountryCode',
+            city: 'CityName',
+            state: 'State',
+            __typename: 'Address',
+          },
+          registeredEvents: [],
+          membershipRequests: [],
+          __typename: 'User',
+        },
+        appUserProfile: {
+          _id: '67078abd85008f171cf2991d',
+          adminFor: [],
+          isSuperAdmin: false,
+          appLanguageCode: 'en',
+          pluginCreationAllowed: true,
+          createdOrganizations: [],
+          createdEvents: [],
+          eventAdmin: [],
+          __typename: 'AppUserProfile',
+        },
+        __typename: 'UserData',
+      },
+    },
+  },
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          name_contains: '',
+        },
+        orderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId1',
+            amount: 700,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId1',
+              name: 'Hospital Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId2',
+                firstName: 'Deanne',
+                lastName: 'Marks',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId3',
+                firstName: 'Jeramy',
+                lastName: 'Garcia',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId4',
+                firstName: 'Praise',
+                lastName: 'Norris',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+          {
+            _id: 'pledgeId2',
+            amount: 100,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId2',
+              name: 'School Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId5',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId6',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: 'Harve',
+        },
+        orderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId1',
+            amount: 700,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId1',
+              name: 'Hospital Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          name_contains: 'School',
+        },
+        orderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId2',
+            amount: 100,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId2',
+              name: 'School Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId5',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId6',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: '',
+        },
+        orderBy: 'amount_ASC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId2',
+            amount: 100,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId2',
+              name: 'School Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId5',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+          {
+            _id: 'pledgeId1',
+            amount: 700,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId1',
+              name: 'Hospital Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                image: 'image-url',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: '',
+        },
+        orderBy: 'amount_DESC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId1',
+            amount: 700,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId1',
+              name: 'Hospital Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                image: 'image-url',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+          {
+            _id: 'pledgeId2',
+            amount: 100,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId2',
+              name: 'School Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId5',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: '',
+        },
+        orderBy: 'endDate_ASC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId1',
+            amount: 700,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId1',
+              name: 'Hospital Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                image: 'image-url',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+          {
+            _id: 'pledgeId2',
+            amount: 100,
+            startDate: '2024-07-28',
+            endDate: '2024-08-14',
+            campaign: {
+              _id: 'campaignId2',
+              name: 'School Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId5',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: '',
+        },
+        orderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [
+          {
+            _id: 'pledgeId2',
+            amount: 100,
+            startDate: '2024-07-28',
+            endDate: '2024-08-14',
+            campaign: {
+              _id: 'campaignId2',
+              name: 'School Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId5',
+                firstName: 'John',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId6',
+                firstName: 'Jane',
+                lastName: 'Doe',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId7',
+                firstName: 'John2',
+                lastName: 'Doe2',
+                image: 'image-url3',
+                __typename: 'User',
+              },
+              {
+                _id: 'userId8',
+                firstName: 'Jane2',
+                lastName: 'Doe2',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId9',
+                firstName: 'John3',
+                lastName: 'Doe3',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId10',
+                firstName: 'Jane3',
+                lastName: 'Doe3',
+                image: null,
+                __typename: 'User',
+              },
+              {
+                _id: 'userId11',
+                firstName: 'John4',
+                lastName: 'Doe4',
+                image: null,
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+          {
+            _id: 'pledgeId1',
+            amount: 700,
+            startDate: '2024-07-28',
+            endDate: '2024-08-13',
+            campaign: {
+              _id: 'campaignId1',
+              name: 'Hospital Campaign',
+              endDate: '2024-08-30',
+              __typename: 'FundraisingCampaign',
+            },
+            currency: 'USD',
+            users: [
+              {
+                _id: 'userId',
+                firstName: 'Harve',
+                lastName: 'Lance',
+                image: 'image-url',
+                __typename: 'User',
+              },
+            ],
+            __typename: 'FundraisingCampaignPledge',
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_PLEDGE,
+      variables: {
+        id: '1',
+      },
+    },
+    result: {
+      data: {
+        removeFundraisingCampaignPledge: {
+          _id: '1',
+        },
+      },
+    },
+  },
+  userDetailsQuery,
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: '',
+        },
+        orderBy: 'endDate_DESC',
+      },
+    },
+    result: {
+      data: {
+        getPledgesByUserId: [],
+      },
+    },
+  },
+  userDetailsQuery,
+];
+
+export const USER_PLEDGES_ERROR = [
+  {
+    request: {
+      query: USER_PLEDGES,
+      variables: {
+        userId: 'userId',
+        where: {
+          firstName_contains: '',
+        },
+        orderBy: 'endDate_DESC',
+      },
+    },
+    error: new Error('Error fetching pledges'),
+  },
+  userDetailsQuery,
+];
diff --git a/src/screens/UserPortal/Posts/Posts.module.css b/src/screens/UserPortal/Posts/Posts.module.css
new file mode 100644
index 0000000000..fc0263833e
--- /dev/null
+++ b/src/screens/UserPortal/Posts/Posts.module.css
@@ -0,0 +1,191 @@
+.borderNone {
+  border: none;
+}
+
+.colorWhite {
+  color: white;
+}
+
+.colorLight {
+  background-color: #f5f5f5;
+}
+
+.mainContainer {
+  width: 50%;
+  flex-grow: 3;
+  padding: 1rem;
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f2f7ff;
+}
+
+.containerHeight {
+  height: 100vh;
+}
+
+.link {
+  text-decoration: none !important;
+  color: black;
+}
+
+.postInputContainer {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.maxWidth {
+  width: 100%;
+  /* min-width: 3rem; */
+  /* padding: 0; */
+}
+
+.inputArea {
+  border: none;
+  outline: none;
+  background-color: #f1f3f6;
+}
+
+.postActionContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.postActionBtn {
+  background-color: white;
+  border: none;
+  color: black;
+}
+
+.postActionBtn:hover {
+  background-color: ghostwhite;
+  border: none;
+  color: black;
+}
+
+.postInput {
+  resize: none;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background-color: white;
+  margin-bottom: 10px;
+}
+
+.postInput:focus {
+  box-shadow: none;
+}
+
+.postContainer {
+  width: auto;
+  background-color: white;
+  margin-top: 1rem;
+  padding: 1rem;
+  border: 1px solid #dddddd;
+  border-radius: 10px;
+}
+
+.heading {
+  font-size: 1.1rem;
+}
+
+.pinnedPostsCardsContainer {
+  overflow-x: scroll;
+  display: flex;
+  gap: 1rem;
+  --bs-gutter-x: 0;
+}
+
+.postsCardsContainer {
+  /* display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  --bs-gutter-x: 0; */
+}
+
+.userImage {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  margin-left: 1rem;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 50%;
+  position: relative;
+  border: 2px solid #31bb6b;
+}
+
+.userImage img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  scale: 1.5;
+}
+
+.startPostBtn {
+  width: 100%;
+  border-radius: 25px;
+  background-color: transparent;
+  /* border: 1px solid #acacac; */
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  outline: none;
+  border: none;
+  color: #000;
+  font-weight: 900;
+}
+
+.startPostBtn:hover {
+  background-color: #00000010;
+  border: 0;
+  color: #000 !important;
+}
+
+.icons {
+  width: 25px;
+}
+
+.icons svg {
+  stroke: #000;
+}
+
+.icons.dark {
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+.icons.dark svg {
+  stroke: #000;
+}
+
+.iconLabel {
+  margin: 0;
+  color: #000;
+  font-weight: 900;
+}
+
+.uploadLink {
+  text-align: center;
+  width: min-content;
+  padding: 8px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.uploadLink:hover {
+  background-color: #00000010;
+}
+
+.modal {
+  width: 100dvw;
+  margin: 0 auto;
+}
+
+.imageInput {
+  display: none;
+}
diff --git a/src/screens/UserPortal/Posts/Posts.test.tsx b/src/screens/UserPortal/Posts/Posts.test.tsx
new file mode 100644
index 0000000000..aa5f03fdcf
--- /dev/null
+++ b/src/screens/UserPortal/Posts/Posts.test.tsx
@@ -0,0 +1,399 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import {
+  ORGANIZATION_ADVERTISEMENT_LIST,
+  ORGANIZATION_POST_LIST,
+} from 'GraphQl/Queries/Queries';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import Home from './Posts';
+import useLocalStorage from 'utils/useLocalstorage';
+import { DELETE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
+
+const { setItem } = useLocalStorage();
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+    info: jest.fn(),
+    success: jest.fn(),
+  },
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATION_POST_LIST,
+      variables: {
+        id: 'orgId',
+        first: 10,
+      },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            posts: {
+              edges: [
+                {
+                  node: {
+                    _id: '6411e53835d7ba2344a78e21',
+                    title: 'post one',
+                    text: 'This is the first post',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2024-03-03T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Glen',
+                      lastName: 'Dsza',
+                      email: 'glendsza@gmail.com',
+                    },
+                    likeCount: 0,
+                    commentCount: 0,
+                    comments: [],
+                    pinned: true,
+                    likedBy: [],
+                  },
+                  cursor: '6411e53835d7ba2344a78e21',
+                },
+                {
+                  node: {
+                    _id: '6411e54835d7ba2344a78e29',
+                    title: 'post two',
+                    text: 'This is the post two',
+                    imageUrl: null,
+                    videoUrl: null,
+                    createdAt: '2024-03-03T09:26:56.524+00:00',
+                    creator: {
+                      _id: '640d98d9eb6a743d75341067',
+                      firstName: 'Glen',
+                      lastName: 'Dsza',
+                      email: 'glendsza@gmail.com',
+                    },
+                    likeCount: 2,
+                    commentCount: 1,
+                    pinned: false,
+                    likedBy: [
+                      {
+                        _id: '640d98d9eb6a743d75341067',
+                        firstName: 'Glen',
+                        lastName: 'Dsza',
+                      },
+                      {
+                        _id: '640d98d9eb6a743d75341068',
+                        firstName: 'Glen2',
+                        lastName: 'Dsza2',
+                      },
+                    ],
+                    comments: [
+                      {
+                        _id: '6411e54835d7ba2344a78e29',
+                        creator: {
+                          _id: '640d98d9eb6a743d75341067',
+                          firstName: 'Glen',
+                          lastName: 'Dsza',
+                          email: 'glendsza@gmail.com',
+                        },
+                        likeCount: 2,
+                        likedBy: [
+                          {
+                            _id: '640d98d9eb6a743d75341067',
+                            firstName: 'Glen',
+                            lastName: 'Dsza',
+                          },
+                          {
+                            _id: '640d98d9eb6a743d75341068',
+                            firstName: 'Glen2',
+                            lastName: 'Dsza2',
+                          },
+                        ],
+                        text: 'This is the post two',
+                        createdAt: '2024-03-03T09:26:56.524+00:00',
+                      },
+                    ],
+                  },
+                  cursor: '6411e54835d7ba2344a78e29',
+                },
+              ],
+              pageInfo: {
+                startCursor: '6411e53835d7ba2344a78e21',
+                endCursor: '6411e54835d7ba2344a78e31',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_ADVERTISEMENT_LIST,
+      variables: { id: 'orgId', first: 6 },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: 'orgId',
+            advertisements: {
+              edges: [
+                {
+                  node: {
+                    _id: '1234',
+                    name: 'Ad 1',
+                    type: 'Type 1',
+                    organization: {
+                      _id: 'orgId',
+                    },
+                    mediaUrl: 'Link 1',
+                    endDate: '2024-12-31',
+                    startDate: '2022-01-01',
+                  },
+                  cursor: '1234',
+                },
+                {
+                  node: {
+                    _id: '2345',
+                    name: 'Ad 2',
+                    type: 'Type 1',
+                    organization: {
+                      _id: 'orgId',
+                    },
+                    mediaUrl: 'Link 2',
+                    endDate: '2024-09-31',
+                    startDate: '2023-04-01',
+                  },
+                  cursor: '1234',
+                },
+                {
+                  node: {
+                    _id: '3456',
+                    name: 'name3',
+                    type: 'Type 2',
+                    organization: {
+                      _id: 'orgId',
+                    },
+                    mediaUrl: 'link3',
+                    startDate: '2023-01-30',
+                    endDate: '2023-12-31',
+                  },
+                  cursor: '1234',
+                },
+                {
+                  node: {
+                    _id: '4567',
+                    name: 'name4',
+                    type: 'Type 2',
+                    organization: {
+                      _id: 'orgId1',
+                    },
+                    mediaUrl: 'link4',
+                    startDate: '2023-01-30',
+                    endDate: '2023-12-01',
+                  },
+                  cursor: '1234',
+                },
+              ],
+              pageInfo: {
+                startCursor: '6411e53835d7ba2344a78e21',
+                endCursor: '6411e54835d7ba2344a78e31',
+                hasNextPage: false,
+                hasPreviousPage: false,
+              },
+              totalCount: 2,
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: DELETE_POST_MUTATION,
+      variables: { id: '6411e54835d7ba2344a78e29' },
+    },
+    result: {
+      data: {
+        removePost: { _id: '6411e54835d7ba2344a78e29' },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+async function wait(ms = 100): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+const renderHomeScreen = (): RenderResult =>
+  render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/organization/orgId']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18nForTest}>
+            <Routes>
+              <Route path="/user/organization/:orgId" element={<Home />} />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+describe('Testing Home Screen: User Portal', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Check if HomeScreen renders properly', async () => {
+    renderHomeScreen();
+
+    await wait();
+    const startPostBtn = await screen.findByTestId('postBtn');
+    expect(startPostBtn).toBeInTheDocument();
+  });
+
+  test('StartPostModal should render on click of StartPost btn', async () => {
+    renderHomeScreen();
+
+    await wait();
+    const startPostBtn = await screen.findByTestId('postBtn');
+    expect(startPostBtn).toBeInTheDocument();
+
+    userEvent.click(startPostBtn);
+    const startPostModal = screen.getByTestId('startPostModal');
+    expect(startPostModal).toBeInTheDocument();
+  });
+
+  test('StartPostModal should close on clicking the close button', async () => {
+    renderHomeScreen();
+
+    await wait();
+    userEvent.upload(
+      screen.getByTestId('postImageInput'),
+      new File(['image content'], 'image.png', { type: 'image/png' }),
+    );
+    await wait();
+
+    const startPostBtn = await screen.findByTestId('postBtn');
+    expect(startPostBtn).toBeInTheDocument();
+
+    userEvent.click(startPostBtn);
+    const startPostModal = screen.getByTestId('startPostModal');
+    expect(startPostModal).toBeInTheDocument();
+
+    userEvent.type(screen.getByTestId('postInput'), 'some content');
+
+    // Check that the content and image have been added
+    expect(screen.getByTestId('postInput')).toHaveValue('some content');
+    await screen.findByAltText('Post Image Preview');
+    expect(screen.getByAltText('Post Image Preview')).toBeInTheDocument();
+
+    const closeButton = within(startPostModal).getByRole('button', {
+      name: /close/i,
+    });
+    userEvent.click(closeButton);
+
+    const closedModalText = screen.queryByText(/somethingOnYourMind/i);
+    expect(closedModalText).not.toBeInTheDocument();
+
+    expect(screen.getByTestId('postInput')).toHaveValue('');
+    expect(screen.getByTestId('postImageInput')).toHaveValue('');
+  });
+
+  test('Check whether Posts render in PostCard', async () => {
+    setItem('userId', '640d98d9eb6a743d75341067');
+    renderHomeScreen();
+    await wait();
+
+    const postCardContainers = screen.findAllByTestId('postCardContainer');
+    expect(postCardContainers).not.toBeNull();
+
+    expect(screen.queryAllByText('post one')[0]).toBeInTheDocument();
+    expect(
+      screen.queryAllByText('This is the first post')[0],
+    ).toBeInTheDocument();
+
+    expect(screen.queryByText('post two')).toBeInTheDocument();
+    expect(screen.queryByText('This is the post two')).toBeInTheDocument();
+  });
+
+  test('Checking if refetch works after deleting this post', async () => {
+    setItem('userId', '640d98d9eb6a743d75341067');
+    renderHomeScreen();
+    expect(screen.queryAllByTestId('dropdown')).not.toBeNull();
+    const dropdowns = await screen.findAllByTestId('dropdown');
+    userEvent.click(dropdowns[1]);
+    const deleteButton = await screen.findByTestId('deletePost');
+    userEvent.click(deleteButton);
+  });
+});
+
+describe('HomeScreen with invalid orgId', () => {
+  test('Redirect to /user when organizationId is falsy', async () => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: undefined }),
+    }));
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <MemoryRouter initialEntries={['/user/organization/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Routes>
+                <Route path="/user/organization/" element={<Home />} />
+                <Route
+                  path="/user"
+                  element={<div data-testid="homeEl"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    const homeEl = await screen.findByTestId('homeEl');
+    expect(homeEl).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/UserPortal/Posts/Posts.tsx b/src/screens/UserPortal/Posts/Posts.tsx
new file mode 100644
index 0000000000..ceb10c9b49
--- /dev/null
+++ b/src/screens/UserPortal/Posts/Posts.tsx
@@ -0,0 +1,379 @@
+import { useQuery } from '@apollo/client';
+import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
+import SendIcon from '@mui/icons-material/Send';
+import {
+  ORGANIZATION_ADVERTISEMENT_LIST,
+  ORGANIZATION_POST_LIST,
+  USER_DETAILS,
+} from 'GraphQl/Queries/Queries';
+import PostCard from 'components/UserPortal/PostCard/PostCard';
+import type {
+  InterfacePostCard,
+  InterfaceQueryOrganizationAdvertisementListItem,
+  InterfaceQueryUserListItem,
+} from 'utils/interfaces';
+import PromotedPost from 'components/UserPortal/PromotedPost/PromotedPost';
+import StartPostModal from 'components/UserPortal/StartPostModal/StartPostModal';
+import React, { useEffect, useState } from 'react';
+import { Button, Col, Form, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { Navigate, useParams } from 'react-router-dom';
+import useLocalStorage from 'utils/useLocalstorage';
+import styles from './Posts.module.css';
+import convertToBase64 from 'utils/convertToBase64';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+
+const responsive = {
+  superLargeDesktop: {
+    breakpoint: { max: 4000, min: 3000 },
+    items: 5,
+  },
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 3,
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 600 },
+    items: 2,
+  },
+  mobile: {
+    breakpoint: { max: 600, min: 0 },
+    items: 1,
+  },
+};
+
+type Ad = {
+  _id: string;
+  name: string;
+  type: 'BANNER' | 'MENU' | 'POPUP';
+  mediaUrl: string;
+  endDate: string; // Assuming it's a string in the format 'yyyy-MM-dd'
+  startDate: string; // Assuming it's a string in the format 'yyyy-MM-dd'
+};
+
+type InterfacePostComments = {
+  id: string;
+  creator: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+
+  likeCount: number;
+  likedBy: {
+    id: string;
+  }[];
+  text: string;
+}[];
+
+type InterfacePostLikes = {
+  firstName: string;
+  lastName: string;
+  id: string;
+}[];
+
+type InterfacePostNode = {
+  commentCount: number;
+  createdAt: string;
+  creator: {
+    email: string;
+    firstName: string;
+    lastName: string;
+    _id: string;
+  };
+  imageUrl: string | null;
+  likeCount: number;
+  likedBy: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+  }[];
+  pinned: boolean;
+  text: string;
+  title: string;
+  videoUrl: string | null;
+  _id: string;
+
+  comments: InterfacePostComments;
+  likes: InterfacePostLikes;
+};
+
+/**
+ * `home` component displays the main feed for a user, including posts, promoted content, and options to create a new post.
+ *
+ * It utilizes Apollo Client for fetching and managing data through GraphQL queries. The component fetches and displays posts from an organization, promoted advertisements, and handles user interactions for creating new posts. It also manages state for displaying modal dialogs and handling file uploads for new posts.
+ *
+ * @returns JSX.Element - The rendered `home` component.
+ */
+export default function home(): JSX.Element {
+  // Translation hook for localized text
+  const { t } = useTranslation('translation', { keyPrefix: 'home' });
+  const { t: tCommon } = useTranslation('common');
+
+  // Custom hook for accessing local storage
+  const { getItem } = useLocalStorage();
+  const [posts, setPosts] = useState([]);
+  const [pinnedPosts, setPinnedPosts] = useState([]);
+
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [postImg, setPostImg] = useState<string | null>('');
+
+  // Fetching the organization ID from URL parameters
+  const { orgId } = useParams();
+
+  // Redirect to user page if organization ID is not available
+  if (!orgId) {
+    return <Navigate to={'/user'} />;
+  }
+
+  // Query hooks for fetching posts, advertisements, and user details
+  const {
+    data: promotedPostsData,
+  }: {
+    data?: {
+      organizations: InterfaceQueryOrganizationAdvertisementListItem[];
+    };
+    refetch: () => void;
+  } = useQuery(ORGANIZATION_ADVERTISEMENT_LIST, {
+    variables: {
+      id: orgId,
+      first: 6,
+    },
+  });
+
+  const {
+    data,
+    refetch,
+    loading: loadingPosts,
+  } = useQuery(ORGANIZATION_POST_LIST, {
+    variables: { id: orgId, first: 10 },
+  });
+
+  const [adContent, setAdContent] = useState<Ad[]>([]);
+  const userId: string | null = getItem('userId');
+
+  const { data: userData } = useQuery(USER_DETAILS, {
+    variables: { id: userId },
+  });
+
+  const user: InterfaceQueryUserListItem | undefined = userData?.user;
+
+  // Effect hook to update posts state when data changes
+  useEffect(() => {
+    if (data) {
+      setPosts(data.organizations[0].posts.edges);
+    }
+  }, [data]);
+
+  // Effect hook to update advertisements state when data changes
+  useEffect(() => {
+    if (promotedPostsData && promotedPostsData.organizations) {
+      const ads: Ad[] =
+        promotedPostsData.organizations[0].advertisements?.edges.map(
+          (edge) => edge.node,
+        ) || [];
+
+      setAdContent(ads);
+    }
+  }, [promotedPostsData]);
+
+  useEffect(() => {
+    setPinnedPosts(
+      posts.filter(({ node }: { node: InterfacePostNode }) => {
+        return node.pinned;
+      }),
+    );
+  }, [posts]);
+
+  /**
+   * Converts a post node into props for the `PostCard` component.
+   *
+   * @param node - The post node to convert.
+   * @returns The props for the `PostCard` component.
+   */
+  const getCardProps = (node: InterfacePostNode): InterfacePostCard => {
+    const {
+      creator,
+      _id,
+      imageUrl,
+      videoUrl,
+      title,
+      text,
+      likeCount,
+      commentCount,
+      likedBy,
+      comments,
+    } = node;
+
+    const allLikes: InterfacePostLikes = likedBy.map((value) => ({
+      firstName: value.firstName,
+      lastName: value.lastName,
+      id: value._id,
+    }));
+
+    const postComments: InterfacePostComments = comments?.map((value) => ({
+      id: value.id,
+      creator: {
+        firstName: value.creator?.firstName ?? '',
+        lastName: value.creator?.lastName ?? '',
+        id: value.creator?.id ?? '',
+        email: value.creator?.email ?? '',
+      },
+      likeCount: value.likeCount,
+      likedBy: value.likedBy?.map((like) => ({ id: like?.id ?? '' })) ?? [],
+      text: value.text,
+    }));
+
+    const date = new Date(node.createdAt);
+    const formattedDate = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    }).format(date);
+
+    const cardProps: InterfacePostCard = {
+      id: _id,
+      creator: {
+        id: creator._id,
+        firstName: creator.firstName,
+        lastName: creator.lastName,
+        email: creator.email,
+      },
+      postedAt: formattedDate,
+      image: imageUrl,
+      video: videoUrl,
+      title,
+      text,
+      likeCount,
+      commentCount,
+      comments: postComments,
+      likedBy: allLikes,
+      fetchPosts: () => refetch(),
+    };
+
+    return cardProps;
+  };
+
+  /**
+   * Opens the post creation modal.
+   */
+  const handlePostButtonClick = (): void => {
+    setShowModal(true);
+  };
+
+  /**
+   * Closes the post creation modal.
+   */
+  const handleModalClose = (): void => {
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <div className={`d-flex flex-row ${styles.containerHeight}`}>
+        <div className={`${styles.colorLight} ${styles.mainContainer}`}>
+          <div className={`${styles.postContainer}`}>
+            <div className={`${styles.heading}`}>{t('startPost')}</div>
+            <div className={styles.postInputContainer}>
+              <Row className="d-flex gap-1">
+                <Col className={styles.maxWidth}>
+                  <Form.Control
+                    type="file"
+                    accept="image/*"
+                    multiple={false}
+                    className={styles.inputArea}
+                    data-testid="postImageInput"
+                    autoComplete="off"
+                    onChange={async (
+                      e: React.ChangeEvent<HTMLInputElement>,
+                    ): Promise<void> => {
+                      setPostImg('');
+                      const target = e.target as HTMLInputElement;
+                      const file = target.files && target.files[0];
+                      const base64file = file && (await convertToBase64(file));
+                      setPostImg(base64file);
+                    }}
+                  />
+                </Col>
+              </Row>
+            </div>
+            <div className="d-flex justify-content-end">
+              <Button
+                size="sm"
+                data-testid={'postBtn'}
+                onClick={handlePostButtonClick}
+                className="px-4 py-sm-2"
+              >
+                {t('post')} <SendIcon />
+              </Button>
+            </div>
+          </div>
+          <div
+            style={{
+              justifyContent: `space-between`,
+              alignItems: `center`,
+              marginTop: `1rem`,
+            }}
+          >
+            <h2>{t('feed')}</h2>
+            {pinnedPosts.length > 0 && (
+              <Carousel responsive={responsive}>
+                {pinnedPosts.map(({ node }: { node: InterfacePostNode }) => {
+                  const cardProps = getCardProps(node);
+                  return <PostCard key={node._id} {...cardProps} />;
+                })}
+              </Carousel>
+            )}
+          </div>
+
+          {adContent.length > 0 && (
+            <div data-testid="promotedPostsContainer">
+              {adContent.map((post: Ad) => (
+                <PromotedPost
+                  key={post._id}
+                  id={post._id}
+                  image={post.mediaUrl}
+                  title={post.name}
+                  data-testid="postid"
+                />
+              ))}
+            </div>
+          )}
+          <p className="fs-5 mt-5">{t(`yourFeed`)}</p>
+          <div className={` ${styles.postsCardsContainer}`}></div>
+          {loadingPosts ? (
+            <div className={`d-flex flex-row justify-content-center`}>
+              <HourglassBottomIcon /> <span>{tCommon('loading')}</span>
+            </div>
+          ) : (
+            <>
+              {posts.length > 0 ? (
+                <Row className="my-2">
+                  {posts.map(({ node }: { node: InterfacePostNode }) => {
+                    const cardProps = getCardProps(node);
+                    return <PostCard key={node._id} {...cardProps} />;
+                  })}
+                </Row>
+              ) : (
+                <p className="container flex justify-content-center my-4">
+                  {t(`nothingToShowHere`)}
+                </p>
+              )}
+            </>
+          )}
+          <StartPostModal
+            show={showModal}
+            onHide={handleModalClose}
+            fetchPosts={refetch}
+            userData={user}
+            organizationId={orgId}
+            img={postImg}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/Settings/Settings.module.css b/src/screens/UserPortal/Settings/Settings.module.css
new file mode 100644
index 0000000000..2558ea9f63
--- /dev/null
+++ b/src/screens/UserPortal/Settings/Settings.module.css
@@ -0,0 +1,188 @@
+.mainContainer {
+  flex-grow: 3;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.containerHeight {
+  padding: 1rem 1.5rem 0 calc(300px + 1.5rem);
+  height: 100vh;
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.9s ease-in-out;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+.scrollableCardBody {
+  max-height: min(220px, 50vh);
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardBody {
+  padding: 1.25rem 1rem 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+.cardLabel {
+  font-weight: bold;
+  padding-bottom: 1px;
+  font-size: 14px;
+  color: #707070;
+  margin-bottom: 10px;
+}
+
+.cardControl {
+  margin-bottom: 20px;
+}
+
+.cardButton {
+  width: fit-content;
+}
+
+.imgContianer {
+  margin: 0 2rem 0 0;
+}
+
+.imgContianer img {
+  height: 120px;
+  width: 120px;
+  border-radius: 50%;
+}
+
+.profileDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+
+.opendrawer:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+.collapseSidebarButton:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+
+@media (max-width: 1120px) {
+  .collapseSidebarButton {
+    width: calc(250px);
+  }
+}
+
+@media (max-height: 650px) {
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .containerHeight {
+    height: 100vh;
+    padding: 2rem;
+  }
+
+  .scrollableCardBody {
+    max-height: 40vh;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
+
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .imgContianer {
+    margin: 1rem auto;
+  }
+  .profileContainer {
+    flex-direction: column;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .profileContainer {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  .imgContianer {
+    margin: 1rem auto;
+  }
+  .profileContainer {
+    flex-direction: column;
+  }
+}
diff --git a/src/screens/UserPortal/Settings/Settings.test.tsx b/src/screens/UserPortal/Settings/Settings.test.tsx
new file mode 100644
index 0000000000..fd9e1ed350
--- /dev/null
+++ b/src/screens/UserPortal/Settings/Settings.test.tsx
@@ -0,0 +1,416 @@
+import React, { act } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Settings from './Settings';
+import userEvent from '@testing-library/user-event';
+import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
+const MOCKS = [
+  {
+    request: {
+      query: UPDATE_USER_MUTATION,
+      variables: {
+        firstName: 'Noble',
+        lastName: 'Mittal',
+        createdAt: '2021-03-01',
+        gender: 'MALE',
+        phoneNumber: '+174567890',
+        birthDate: '2024-03-01',
+        grade: 'GRADE_1',
+        empStatus: 'UNEMPLOYED',
+        maritalStatus: 'SINGLE',
+        address: 'random',
+        state: 'random',
+        country: 'IN',
+      },
+      result: {
+        data: {
+          updateUserProfile: {
+            _id: '453',
+          },
+        },
+      },
+    },
+  },
+];
+
+const Mocks1 = [
+  {
+    request: {
+      query: CHECK_AUTH,
+    },
+    result: {
+      data: {
+        checkAuth: {
+          email: 'johndoe@gmail.com',
+          firstName: 'John',
+          lastName: 'Doe',
+          createdAt: '2021-03-01T00:00:00.000Z',
+          gender: 'MALE',
+          maritalStatus: 'SINGLE',
+          educationGrade: 'GRADUATE',
+          employmentStatus: 'PART_TIME',
+          birthDate: '2024-03-01',
+          address: {
+            state: 'random',
+            countryCode: 'IN',
+            line1: 'random',
+          },
+          eventsAttended: [{ _id: 'event1' }, { _id: 'event2' }],
+          phone: {
+            mobile: '+174567890',
+          },
+          image: 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+          _id: '65ba1621b7b00c20e5f1d8d2',
+        },
+      },
+    },
+  },
+];
+
+const Mocks2 = [
+  {
+    request: {
+      query: CHECK_AUTH,
+    },
+    result: {
+      data: {
+        checkAuth: {
+          email: 'johndoe@gmail.com',
+          firstName: '',
+          lastName: '',
+          createdAt: '',
+          gender: '',
+          maritalStatus: '',
+          educationGrade: '',
+          employmentStatus: '',
+          eventsAttended: [],
+          birthDate: '',
+          address: {
+            state: '',
+            countryCode: '',
+            line1: '',
+          },
+          phone: {
+            mobile: '',
+          },
+          image: '',
+          _id: '65ba1621b7b00c20e5f1d8d2',
+        },
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link1 = new StaticMockLink(Mocks1, true);
+const link2 = new StaticMockLink(Mocks2, true);
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+async function wait(ms = 100): Promise<void> {
+  await act(async () => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+
+describe('Testing Settings Screen [User Portal]', () => {
+  // Mock implementation of matchMedia
+  beforeAll(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+  });
+
+  test('Screen should be rendered properly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Settings />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+
+    expect(screen.queryAllByText('Settings')).not.toBe([]);
+  });
+
+  test('input works properly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Settings />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+
+    userEvent.type(screen.getByTestId('inputFirstName'), 'Noble');
+    await wait();
+    userEvent.type(screen.getByTestId('inputLastName'), 'Mittal');
+    await wait();
+    userEvent.selectOptions(screen.getByTestId('inputGender'), 'Male');
+    await wait();
+    userEvent.type(screen.getByTestId('inputPhoneNumber'), '1234567890');
+    await wait();
+    userEvent.selectOptions(screen.getByTestId('inputGrade'), 'Grade-1');
+    await wait();
+    userEvent.selectOptions(screen.getByTestId('inputEmpStatus'), 'Unemployed');
+    await wait();
+    userEvent.selectOptions(screen.getByTestId('inputMaritalStatus'), 'Single');
+    await wait();
+    userEvent.type(screen.getByTestId('inputAddress'), 'random');
+    await wait();
+    userEvent.type(screen.getByTestId('inputState'), 'random');
+    await wait();
+    userEvent.selectOptions(screen.getByTestId('inputCountry'), 'IN');
+    await wait();
+    expect(screen.getByTestId('resetChangesBtn')).toBeInTheDocument();
+    await wait();
+    fireEvent.change(screen.getByLabelText('Birth Date'), {
+      target: { value: '2024-03-01' },
+    });
+    expect(screen.getByLabelText('Birth Date')).toHaveValue('2024-03-01');
+    await wait();
+    const fileInp = screen.getByTestId('fileInput');
+    fileInp.style.display = 'block';
+    userEvent.click(screen.getByTestId('uploadImageBtn'));
+    await wait();
+    const imageFile = new File(['(⌐□_□)'], 'profile-image.jpg', {
+      type: 'image/jpeg',
+    });
+    const files = [imageFile];
+    userEvent.upload(fileInp, files);
+    await wait();
+    expect(screen.getByTestId('profile-picture')).toBeInTheDocument();
+  });
+
+  test('resetChangesBtn works properly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link1}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Settings />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+    userEvent.type(screen.getByTestId('inputAddress'), 'random');
+    await wait();
+    userEvent.click(screen.getByTestId('resetChangesBtn'));
+    await wait();
+    expect(screen.getByTestId('inputFirstName')).toHaveValue('John');
+    expect(screen.getByTestId('inputLastName')).toHaveValue('Doe');
+    expect(screen.getByTestId('inputGender')).toHaveValue('MALE');
+    expect(screen.getByTestId('inputPhoneNumber')).toHaveValue('+174567890');
+    expect(screen.getByTestId('inputGrade')).toHaveValue('GRADUATE');
+    expect(screen.getByTestId('inputEmpStatus')).toHaveValue('PART_TIME');
+    expect(screen.getByTestId('inputMaritalStatus')).toHaveValue('SINGLE');
+    expect(screen.getByTestId('inputAddress')).toHaveValue('random');
+    expect(screen.getByTestId('inputState')).toHaveValue('random');
+    expect(screen.getByTestId('inputCountry')).toHaveValue('IN');
+    expect(screen.getByLabelText('Birth Date')).toHaveValue('2024-03-01');
+  });
+
+  test('resetChangesBtn works properly when the details are empty', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Settings />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+    userEvent.type(screen.getByTestId('inputAddress'), 'random');
+    await wait();
+    userEvent.click(screen.getByTestId('resetChangesBtn'));
+    await wait();
+    expect(screen.getByTestId('inputFirstName')).toHaveValue('');
+    expect(screen.getByTestId('inputLastName')).toHaveValue('');
+    expect(screen.getByTestId('inputGender')).toHaveValue('');
+    expect(screen.getByTestId('inputPhoneNumber')).toHaveValue('');
+    expect(screen.getByTestId('inputGrade')).toHaveValue('');
+    expect(screen.getByTestId('inputEmpStatus')).toHaveValue('');
+    expect(screen.getByTestId('inputMaritalStatus')).toHaveValue('');
+    expect(screen.getByTestId('inputAddress')).toHaveValue('');
+    expect(screen.getByTestId('inputState')).toHaveValue('');
+    expect(screen.getByTestId('inputCountry')).toHaveValue('');
+    expect(screen.getByLabelText('Birth Date')).toHaveValue('');
+  });
+
+  test('sidebar', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Settings />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+
+    const closeMenubtn = screen.getByTestId('closeMenu');
+    expect(closeMenubtn).toBeInTheDocument();
+    act(() => closeMenubtn.click());
+    const openMenuBtn = screen.getByTestId('openMenu');
+    expect(openMenuBtn).toBeInTheDocument();
+    act(() => openMenuBtn.click());
+  });
+
+  test('Testing sidebar when the screen size is less than or equal to 820px', async () => {
+    resizeWindow(800);
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Settings />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+
+    await wait();
+
+    screen.debug();
+
+    const openMenuBtn = screen.queryByTestId('openMenu');
+    console.log('Open Menu Button:', openMenuBtn);
+    expect(openMenuBtn).toBeInTheDocument();
+
+    if (openMenuBtn) {
+      act(() => openMenuBtn.click());
+    }
+
+    const closeMenuBtn = screen.queryByTestId('closeMenu');
+    console.log('Close Menu Button:', closeMenuBtn);
+    expect(closeMenuBtn).toBeInTheDocument();
+
+    if (closeMenuBtn) {
+      act(() => closeMenuBtn.click());
+    }
+  });
+
+  test('renders events attended card correctly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Settings />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    // Check if the card title is rendered
+    expect(screen.getByText('Events Attended')).toBeInTheDocument();
+    await wait(1000);
+    // Check for empty state immediately
+    expect(screen.getByText('No Events Attended')).toBeInTheDocument();
+  });
+
+  test('renders events attended card correctly with events', async () => {
+    const mockEventsAttended = [
+      { _id: '1', title: 'Event 1' },
+      { _id: '2', title: 'Event 2' },
+    ];
+
+    const MocksWithEvents = [
+      {
+        ...Mocks1[0],
+        result: {
+          data: {
+            checkAuth: {
+              ...Mocks1[0].result.data.checkAuth,
+              eventsAttended: mockEventsAttended,
+            },
+          },
+        },
+      },
+    ];
+
+    const linkWithEvents = new StaticMockLink(MocksWithEvents, true);
+
+    render(
+      <MockedProvider addTypename={false} link={linkWithEvents}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Settings />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait(1000);
+
+    expect(screen.getByText('Events Attended')).toBeInTheDocument();
+    const eventsCards = screen.getAllByTestId('usereventsCard');
+    expect(eventsCards.length).toBe(2);
+
+    eventsCards.forEach((card) => {
+      expect(card).toBeInTheDocument();
+      expect(card.children.length).toBe(1);
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx
new file mode 100644
index 0000000000..6038879b7f
--- /dev/null
+++ b/src/screens/UserPortal/Settings/Settings.tsx
@@ -0,0 +1,593 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './Settings.module.css';
+import { Button, Card, Col, Form, Row } from 'react-bootstrap';
+import convertToBase64 from 'utils/convertToBase64';
+import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
+import { useMutation, useQuery } from '@apollo/client';
+import { errorHandler } from 'utils/errorHandler';
+import { toast } from 'react-toastify';
+import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
+import useLocalStorage from 'utils/useLocalstorage';
+import {
+  educationGradeEnum,
+  employmentStatusEnum,
+  genderEnum,
+  maritalStatusEnum,
+} from 'utils/formEnumFields';
+import DeleteUser from 'components/UserProfileSettings/DeleteUser';
+import OtherSettings from 'components/UserProfileSettings/OtherSettings';
+import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+import Avatar from 'components/Avatar/Avatar';
+import type { InterfaceEvent } from 'components/EventManagement/EventAttendance/InterfaceEvents';
+import { EventsAttendedByUser } from 'components/UserPortal/UserProfile/EventsAttendedByUser';
+import UserAddressFields from 'components/UserPortal/UserProfile/UserAddressFields';
+
+/**
+ * The Settings component allows users to view and update their profile settings.
+ * It includes functionality to handle image uploads, reset changes, and save updated user details.
+ *
+ * @returns The Settings component.
+ */
+export default function settings(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'settings',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const [isUpdated, setisUpdated] = useState<boolean>(false);
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+
+  /**
+   * Handler to adjust sidebar visibility based on window width.
+   * This function is invoked on window resize and when the component mounts.
+   */
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const { setItem } = useLocalStorage();
+  const { data } = useQuery(CHECK_AUTH, { fetchPolicy: 'network-only' });
+  const [updateUserDetails] = useMutation(UPDATE_USER_MUTATION);
+  const [userDetails, setUserDetails] = React.useState({
+    firstName: '',
+    lastName: '',
+    createdAt: '',
+    gender: '',
+    email: '',
+    phoneNumber: '',
+    birthDate: '',
+    grade: '',
+    empStatus: '',
+    maritalStatus: '',
+    address: '',
+    state: '',
+    country: '',
+    image: '',
+    eventsAttended: [] as InterfaceEvent[],
+  });
+
+  /**
+   * Ref to store the original image URL for comparison during updates.
+   */
+  const originalImageState = React.useRef<string>('');
+  /**
+   * Ref to access the file input element for image uploads.
+   */
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  /**
+   * Handles the update of user details.
+   * This function sends a mutation request to update the user details
+   * and reloads the page on success.
+   */
+  /*istanbul ignore next*/
+  const handleUpdateUserDetails = async (): Promise<void> => {
+    try {
+      let updatedUserDetails = { ...userDetails };
+      if (updatedUserDetails.image === originalImageState.current) {
+        updatedUserDetails = { ...updatedUserDetails, image: '' };
+      }
+      const { data } = await updateUserDetails({
+        variables: updatedUserDetails,
+      });
+      /* istanbul ignore next */
+      if (data) {
+        toast.success(
+          tCommon('updatedSuccessfully', { item: 'Profile' }) as string,
+        );
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+        const userFullName = `${userDetails.firstName} ${userDetails.lastName}`;
+        setItem('name', userFullName);
+      }
+    } catch (error: unknown) {
+      /*istanbul ignore next*/
+      errorHandler(t, error);
+    }
+  };
+
+  /**
+   * Handles the change of a specific field in the user details state.
+   *
+   * @param fieldName - The name of the field to be updated.
+   * @param value - The new value for the field.
+   */
+  const handleFieldChange = (fieldName: string, value: string): void => {
+    setisUpdated(true);
+    setUserDetails((prevState) => ({
+      ...prevState,
+      [fieldName]: value,
+    }));
+  };
+
+  /**
+   * Triggers the file input click event to open the file picker dialog.
+   */
+  const handleImageUpload = (): void => {
+    setisUpdated(true);
+    if (fileInputRef.current) {
+      (fileInputRef.current as HTMLInputElement).click();
+    }
+  };
+
+  /**
+   * Resets the user details to the values fetched from the server.
+   */
+  const handleResetChanges = (): void => {
+    setisUpdated(false);
+    /* istanbul ignore next */
+    if (data) {
+      const {
+        firstName,
+        lastName,
+        createdAt,
+        gender,
+        phone,
+        birthDate,
+        educationGrade,
+        employmentStatus,
+        maritalStatus,
+        address,
+      } = data.checkAuth;
+
+      setUserDetails({
+        ...userDetails,
+        firstName: firstName || '',
+        lastName: lastName || '',
+        createdAt: createdAt || '',
+        gender: gender || '',
+        phoneNumber: phone?.mobile || '',
+        birthDate: birthDate || '',
+        grade: educationGrade || '',
+        empStatus: employmentStatus || '',
+        maritalStatus: maritalStatus || '',
+        address: address?.line1 || '',
+        state: address?.state || '',
+        country: address?.countryCode || '',
+      });
+    }
+  };
+
+  useEffect(() => {
+    /* istanbul ignore next */
+    if (data) {
+      const {
+        firstName,
+        lastName,
+        createdAt,
+        gender,
+        email,
+        phone,
+        birthDate,
+        educationGrade,
+        employmentStatus,
+        maritalStatus,
+        address,
+        image,
+        eventsAttended,
+      } = data.checkAuth;
+
+      setUserDetails({
+        firstName,
+        lastName,
+        createdAt,
+        gender,
+        email,
+        phoneNumber: phone?.mobile || '',
+        birthDate,
+        grade: educationGrade || '',
+        empStatus: employmentStatus || '',
+        maritalStatus: maritalStatus || '',
+        address: address?.line1 || '',
+        state: address?.state || '',
+        country: address?.countryCode || '',
+        eventsAttended,
+        image,
+      });
+      originalImageState.current = image;
+    }
+  }, [data]);
+  return (
+    <>
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="closeMenu"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <UserSidebar hideDrawer={hideDrawer} setHideDrawer={setHideDrawer} />
+      <div
+        className={`d-flex flex-row ${styles.containerHeight} ${
+          hideDrawer === null
+            ? ''
+            : hideDrawer
+              ? styles.expand
+              : styles.contract
+        }`}
+      >
+        <div className={`${styles.mainContainer}`}>
+          <div className="d-flex justify-content-between align-items-center">
+            <div style={{ flex: 1 }}>
+              <h1>{tCommon('settings')}</h1>
+            </div>
+            <ProfileDropdown />
+          </div>
+          <h3>{tCommon('settings')}</h3>
+          <Row>
+            <Col lg={7}>
+              <Card border="0" className="rounded-4 mb-4">
+                <div className={`${styles.cardHeader}`}>
+                  <div className={`${styles.cardTitle}`}>
+                    {t('profileSettings')}
+                  </div>
+                </div>
+                <Card.Body className={`${styles.cardBody}`}>
+                  <Row className="mb-1">
+                    <Col lg={12} className="mb-2">
+                      <div className="text-center mb-3">
+                        <div className="position-relative d-inline-block">
+                          {userDetails?.image ? (
+                            <img
+                              className="rounded-circle"
+                              style={{
+                                width: '60px',
+                                height: '60px',
+                                objectFit: 'cover',
+                              }}
+                              src={userDetails.image}
+                              alt="User"
+                              data-testid="profile-picture"
+                            />
+                          ) : (
+                            <Avatar
+                              name={`${userDetails.firstName} ${userDetails.lastName}`}
+                              alt="User Image"
+                              size={60}
+                              dataTestId="profile-picture"
+                              radius={150}
+                            />
+                          )}
+                          <i
+                            className="fas fa-edit position-absolute bottom-0 right-0 p-2 bg-white rounded-circle"
+                            onClick={handleImageUpload}
+                            data-testid="uploadImageBtn"
+                            style={{ cursor: 'pointer', fontSize: '1.2rem' }}
+                            title="Edit profile picture"
+                            role="button"
+                            aria-label="Edit profile picture"
+                            tabIndex={0}
+                            onKeyDown={
+                              /*istanbul ignore next*/
+                              (e) => e.key === 'Enter' && handleImageUpload()
+                            }
+                          />
+                        </div>
+                      </div>
+                      <Form.Control
+                        accept="image/*"
+                        id="postphoto"
+                        name="photo"
+                        type="file"
+                        className={styles.cardControl}
+                        data-testid="fileInput"
+                        multiple={false}
+                        ref={fileInputRef}
+                        onChange={
+                          /* istanbul ignore next */
+                          async (
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ): Promise<void> => {
+                            const file = e.target?.files?.[0];
+                            if (file) {
+                              const image = await convertToBase64(file);
+                              setUserDetails({ ...userDetails, image });
+                            }
+                          }
+                        }
+                        style={{ display: 'none' }}
+                      />
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="inputFirstName"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {tCommon('firstName')}
+                      </Form.Label>
+                      <Form.Control
+                        type="text"
+                        id="inputFirstName"
+                        value={userDetails.firstName}
+                        onChange={(e) =>
+                          handleFieldChange('firstName', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputFirstName"
+                      />
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="inputLastName"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {tCommon('lastName')}
+                      </Form.Label>
+                      <Form.Control
+                        type="text"
+                        id="inputLastName"
+                        value={userDetails.lastName}
+                        onChange={(e) =>
+                          handleFieldChange('lastName', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputLastName"
+                      />
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="gender"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {t('gender')}
+                      </Form.Label>
+                      <Form.Control
+                        as="select"
+                        id="gender"
+                        value={userDetails.gender}
+                        onChange={(e) =>
+                          handleFieldChange('gender', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputGender"
+                      >
+                        <option value="" disabled>
+                          {t('sgender')}
+                        </option>
+                        {genderEnum.map((g) => (
+                          <option key={g.value.toLowerCase()} value={g.value}>
+                            {g.label}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    </Col>
+                  </Row>
+                  <Row className="mb-1">
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="inputEmail"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {tCommon('emailAddress')}
+                      </Form.Label>
+                      <Form.Control
+                        type="email"
+                        id="inputEmail"
+                        value={userDetails.email}
+                        className={`${styles.cardControl}`}
+                        disabled
+                      />
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="phoneNo"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {t('phoneNumber')}
+                      </Form.Label>
+                      <Form.Control
+                        type="tel"
+                        id="phoneNo"
+                        placeholder="1234567890"
+                        value={userDetails.phoneNumber}
+                        onChange={(e) =>
+                          handleFieldChange('phoneNumber', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputPhoneNumber"
+                      />
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="birthDate"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {t('birthDate')}
+                      </Form.Label>
+                      <Form.Control
+                        type="date"
+                        id="birthDate"
+                        value={userDetails.birthDate}
+                        onChange={(e) =>
+                          handleFieldChange('birthDate', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                      />
+                    </Col>
+                  </Row>
+                  <Row className="mb-1">
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="grade"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {t('grade')}
+                      </Form.Label>
+                      <Form.Control
+                        as="select"
+                        id="grade"
+                        value={userDetails.grade}
+                        onChange={(e) =>
+                          handleFieldChange('grade', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputGrade"
+                      >
+                        <option value="" disabled>
+                          {t('gradePlaceholder')}
+                        </option>
+                        {educationGradeEnum.map((grade) => (
+                          <option
+                            key={grade.value.toLowerCase()}
+                            value={grade.value}
+                          >
+                            {grade.label}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="empStatus"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {t('empStatus')}
+                      </Form.Label>
+                      <Form.Control
+                        as="select"
+                        id="empStatus"
+                        value={userDetails.empStatus}
+                        onChange={(e) =>
+                          handleFieldChange('empStatus', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputEmpStatus"
+                      >
+                        <option value="" disabled>
+                          {t('sEmpStatus')}
+                        </option>
+                        {employmentStatusEnum.map((status) => (
+                          <option
+                            key={status.value.toLowerCase()}
+                            value={status.value}
+                          >
+                            {status.label}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    </Col>
+                    <Col lg={4}>
+                      <Form.Label
+                        htmlFor="maritalStatus"
+                        className={`${styles.cardLabel}`}
+                      >
+                        {t('maritalStatus')}
+                      </Form.Label>
+                      <Form.Control
+                        as="select"
+                        id="maritalStatus"
+                        value={userDetails.maritalStatus}
+                        onChange={(e) =>
+                          handleFieldChange('maritalStatus', e.target.value)
+                        }
+                        className={`${styles.cardControl}`}
+                        data-testid="inputMaritalStatus"
+                      >
+                        <option value="" disabled>
+                          {t('sMaritalStatus')}
+                        </option>
+                        {maritalStatusEnum.map((status) => (
+                          <option
+                            key={status.value.toLowerCase()}
+                            value={status.value}
+                          >
+                            {status.label}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    </Col>
+                  </Row>
+                  <UserAddressFields
+                    tCommon={tCommon}
+                    t={t}
+                    handleFieldChange={handleFieldChange}
+                    userDetails={userDetails}
+                  />
+                  {isUpdated && (
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        marginTop: '1.5em',
+                      }}
+                    >
+                      <Button
+                        onClick={handleResetChanges}
+                        variant="outline-success"
+                        data-testid="resetChangesBtn"
+                      >
+                        {t('resetChanges')}
+                      </Button>
+                      <Button
+                        onClick={handleUpdateUserDetails}
+                        data-testid="updateUserBtn"
+                        className={`${styles.cardButton}`}
+                      >
+                        {tCommon('saveChanges')}
+                      </Button>
+                    </div>
+                  )}
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col lg={5} className="d-none d-lg-block">
+              <DeleteUser />
+              <OtherSettings />
+            </Col>
+            <Col lg={5} className="d-lg-none">
+              <DeleteUser />
+              <OtherSettings />
+            </Col>
+          </Row>
+          <EventsAttendedByUser userDetails={userDetails} t={t} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/screens/UserPortal/UserScreen/UserScreen.module.css b/src/screens/UserPortal/UserScreen/UserScreen.module.css
new file mode 100644
index 0000000000..f8ad1c5bfd
--- /dev/null
+++ b/src/screens/UserPortal/UserScreen/UserScreen.module.css
@@ -0,0 +1,173 @@
+.pageContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+}
+
+.expand {
+  padding-left: 4rem;
+  animation: moveLeft 0.9s ease-in-out;
+}
+.avatarStyle {
+  border-radius: 100%;
+}
+.profileContainer {
+  border: none;
+  padding: 2.1rem 0.5rem;
+  height: 52px;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  align-items: center;
+  background-color: white !important;
+  box-shadow:
+    0 4px 4px 0 rgba(177, 177, 177, 0.2),
+    0 6px 20px 0 rgba(151, 151, 151, 0.19);
+}
+.profileContainer:focus {
+  outline: none;
+  background-color: var(--bs-gray-100);
+}
+.imageContainer {
+  width: 56px;
+}
+.profileContainer .profileText {
+  flex: 1;
+  text-align: start;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.angleDown {
+  margin-left: 4px;
+}
+.profileContainer .profileText .primaryText {
+  font-size: 1rem;
+  font-weight: 600;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.profileContainer .profileText .secondaryText {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--bs-secondary);
+  display: block;
+  text-transform: capitalize;
+}
+
+.contract {
+  padding-left: calc(300px + 2rem + 1.5rem);
+  animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+  position: fixed;
+  height: 40px;
+  bottom: 0;
+  z-index: 9999;
+  width: calc(300px + 2rem);
+  background-color: rgba(245, 245, 245, 0.7);
+  color: black;
+  border: none;
+  border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+  opacity: 1;
+  color: black !important;
+}
+.opendrawer {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100vh;
+  z-index: 9999;
+  background-color: rgba(245, 245, 245);
+  border: none;
+  border-radius: 0px;
+  margin-right: 20px;
+  color: black;
+}
+.profileDropdown {
+  background-color: transparent !important;
+}
+.profileDropdown .dropdown-toggle .btn .btn-normal {
+  display: none !important;
+  background-color: transparent !important;
+}
+.dropdownToggle {
+  background-image: url(/public/images/svg/angleDown.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: azure;
+}
+
+.dropdownToggle::after {
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+.opendrawer:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+.collapseSidebarButton:hover {
+  transition: background-color 0.5s ease;
+  background-color: var(--bs-primary);
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(276px + 2rem + 1.5rem);
+  }
+  .collapseSidebarButton {
+    width: calc(250px + 2rem);
+  }
+}
+
+@media (max-height: 900px) {
+  .collapseSidebarButton {
+    width: calc(300px + 1rem);
+  }
+}
+@media (max-height: 650px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(270px);
+  }
+  .collapseSidebarButton {
+    width: 250px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+  .pageContainer {
+    padding-left: 2.5rem;
+  }
+
+  .opendrawer {
+    width: 25px;
+  }
+
+  .contract,
+  .expand {
+    animation: none;
+  }
+
+  .collapseSidebarButton {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/src/screens/UserPortal/UserScreen/UserScreen.test.tsx b/src/screens/UserPortal/UserScreen/UserScreen.test.tsx
new file mode 100644
index 0000000000..642b231a66
--- /dev/null
+++ b/src/screens/UserPortal/UserScreen/UserScreen.test.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import 'jest-location-mock';
+import { Provider } from 'react-redux';
+import { BrowserRouter, useNavigate } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import UserScreen from './UserScreen';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+let mockID: string | undefined = '123';
+let mockLocation: string | undefined = '/user/organization/123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ orgId: mockID }),
+  useLocation: () => ({ pathname: mockLocation }),
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: ORGANIZATIONS_LIST,
+      variables: { id: '123' },
+    },
+    result: {
+      data: {
+        organizations: [
+          {
+            _id: '123',
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+              email: 'JohnDoe@example.com',
+            },
+            name: 'Test Organization',
+            description: 'Testing this organization',
+            address: {
+              city: 'Mountain View',
+              countryCode: 'US',
+              dependentLocality: 'Some Dependent Locality',
+              line1: '123 Main Street',
+              line2: 'Apt 456',
+              postalCode: '94040',
+              sortingCode: 'XYZ-789',
+              state: 'CA',
+            },
+            userRegistrationRequired: true,
+            visibleInSearch: true,
+            members: [],
+            admins: [],
+            membershipRequests: [],
+            blockedUsers: [],
+          },
+        ],
+      },
+    },
+  },
+];
+const link = new StaticMockLink(MOCKS, true);
+
+const resizeWindow = (width: number): void => {
+  window.innerWidth = width;
+  fireEvent(window, new Event('resize'));
+};
+
+const clickToggleMenuBtn = (toggleButton: HTMLElement): void => {
+  fireEvent.click(toggleButton);
+};
+
+describe('Testing LeftDrawer in OrganizationScreen', () => {
+  test('renders the correct title based on the titleKey for posts', () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const titleElement = screen.getByRole('heading', { level: 1 });
+    expect(titleElement).toHaveTextContent('Posts');
+  });
+
+  test('renders the correct title based on the titleKey', () => {
+    mockLocation = '/user/people/123';
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const titleElement = screen.getByRole('heading', { level: 1 });
+    expect(titleElement).toHaveTextContent('People');
+  });
+
+  test('LeftDrawer should toggle correctly based on window size and user interaction', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    const toggleButton = screen.getByTestId('closeMenu') as HTMLElement;
+    const icon = toggleButton.querySelector('i');
+
+    // Resize window to a smaller width
+    resizeWindow(800);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
+
+    // Resize window back to a larger width
+    resizeWindow(1000);
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-right');
+
+    clickToggleMenuBtn(toggleButton);
+    expect(icon).toHaveClass('fa fa-angle-double-left');
+  });
+
+  test('should be redirected to root when orgId is undefined', async () => {
+    mockID = undefined;
+    const navigate = jest.fn();
+    jest.spyOn({ useNavigate }, 'useNavigate').mockReturnValue(navigate);
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <UserScreen />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    expect(window.location.pathname).toEqual('/');
+  });
+});
diff --git a/src/screens/UserPortal/UserScreen/UserScreen.tsx b/src/screens/UserPortal/UserScreen/UserScreen.tsx
new file mode 100644
index 0000000000..bcb1d867f3
--- /dev/null
+++ b/src/screens/UserPortal/UserScreen/UserScreen.tsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
+import { updateTargets } from 'state/action-creators';
+import { useAppDispatch } from 'state/hooks';
+import type { RootState } from 'state/reducers';
+import type { TargetsType } from 'state/reducers/routesReducer';
+import styles from './UserScreen.module.css';
+import { Button } from 'react-bootstrap';
+import UserSidebarOrg from 'components/UserPortal/UserSidebarOrg/UserSidebarOrg';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+import type { InterfaceMapType } from 'utils/interfaces';
+import { useTranslation } from 'react-i18next';
+
+const map: InterfaceMapType = {
+  organization: 'home',
+  people: 'people',
+  events: 'userEvents',
+  donate: 'donate',
+  campaigns: 'userCampaigns',
+  pledges: 'userPledges',
+  volunteer: 'userVolunteer',
+};
+
+/**
+ * The UserScreen component serves as a container for user-specific pages
+ * within an organization context. It provides layout and sidebar navigation
+ * functionality based on the current organization ID and user roles.
+ *
+ * @returns The UserScreen component.
+ */
+const UserScreen = (): JSX.Element => {
+  // Get the current location path for debugging or conditional rendering
+  const location = useLocation();
+
+  /**
+   * State to manage the visibility of the sidebar (drawer).
+   */
+
+  const { orgId } = useParams();
+
+  // Redirect to home if orgId is not present
+  if (!orgId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const titleKey: string | undefined = map[location.pathname.split('/')[2]];
+  const { t } = useTranslation('translation', { keyPrefix: titleKey });
+
+  const userRoutes: {
+    targets: TargetsType[];
+  } = useSelector((state: RootState) => state.userRoutes);
+
+  const { targets } = userRoutes;
+  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
+
+  /**
+   * Retrieves the organization ID from the URL parameters.
+   */
+
+  // Initialize Redux dispatch
+  const dispatch = useAppDispatch();
+
+  /**
+   * Effect hook to update targets based on the organization ID.
+   * This hook is triggered when the orgId changes.
+   */
+  useEffect(() => {
+    dispatch(updateTargets(orgId));
+  }, [orgId]);
+
+  /**
+   * Handles window resize events to toggle the sidebar visibility
+   * based on the screen width.
+   */
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
+  };
+
+  // Set up event listener for window resize and clean up on unmount
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      {hideDrawer ? (
+        <Button
+          className={styles.opendrawer}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="openMenu"
+        >
+          <i className="fa fa-angle-double-right" aria-hidden="true"></i>
+        </Button>
+      ) : (
+        <Button
+          className={styles.collapseSidebarButton}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
+          data-testid="closeMenu"
+        >
+          <i className="fa fa-angle-double-left" aria-hidden="true"></i>
+        </Button>
+      )}
+      <div className={styles.drawer}>
+        <UserSidebarOrg
+          orgId={orgId}
+          targets={targets}
+          hideDrawer={hideDrawer}
+          setHideDrawer={setHideDrawer}
+        />
+      </div>
+      <div
+        className={`${styles.pageContainer} ${
+          hideDrawer === null
+            ? ''
+            : hideDrawer
+              ? styles.expand
+              : styles.contract
+        } `}
+        data-testid="mainpageright"
+      >
+        <div className="d-flex justify-content-between align-items-center">
+          <div style={{ flex: 1 }}>
+            <h1>{t('title')}</h1>
+          </div>
+          <ProfileDropdown />
+        </div>
+        <Outlet />
+      </div>
+    </>
+  );
+};
+
+export default UserScreen;
diff --git a/src/screens/UserPortal/Volunteer/Actions/Actions.mocks.ts b/src/screens/UserPortal/Volunteer/Actions/Actions.mocks.ts
new file mode 100644
index 0000000000..5162134c65
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Actions/Actions.mocks.ts
@@ -0,0 +1,268 @@
+import { ACTION_ITEMS_BY_USER } from 'GraphQl/Queries/ActionItemQueries';
+
+const action1 = {
+  _id: 'actionId1',
+  assignee: {
+    _id: 'volunteerId1',
+    user: {
+      _id: 'userId',
+      firstName: 'Teresa',
+      lastName: 'Bradley',
+      image: null,
+    },
+  },
+  assigneeGroup: null,
+  assigneeType: 'EventVolunteer',
+  assigner: {
+    _id: 'userId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  actionItemCategory: {
+    _id: 'categoryId1',
+    name: 'Category 1',
+  },
+  preCompletionNotes: '',
+  postCompletionNotes: '',
+  assignmentDate: '2024-10-25',
+  dueDate: '2025-10-25',
+  completionDate: '2024-11-01',
+  isCompleted: false,
+  event: {
+    _id: 'eventId1',
+    title: 'Event 1',
+  },
+  creator: {
+    _id: 'userId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+  },
+  allottedHours: 8,
+};
+
+const action2 = {
+  _id: 'actionId2',
+  assignee: null,
+  assigneeGroup: {
+    _id: 'groupId1',
+    name: 'Group 1',
+  },
+  assigneeType: 'EventVolunteerGroup',
+  assigner: {
+    _id: 'userId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  actionItemCategory: {
+    _id: 'categoryId2',
+    name: 'Category 2',
+  },
+  preCompletionNotes: '',
+  postCompletionNotes: '',
+  assignmentDate: '2024-10-25',
+  dueDate: '2025-10-26',
+  completionDate: '2024-11-01',
+  isCompleted: false,
+  event: {
+    _id: 'eventId1',
+    title: 'Event 1',
+  },
+  creator: {
+    _id: 'userId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+  },
+  allottedHours: 8,
+};
+
+const action3 = {
+  _id: 'actionId3',
+  assignee: {
+    _id: 'volunteerId3',
+    user: {
+      _id: 'userId',
+      firstName: 'Teresa',
+      lastName: 'Bradley',
+      image: 'img-url',
+    },
+  },
+  assigneeGroup: null,
+  assigneeType: 'EventVolunteer',
+  assigner: {
+    _id: 'userId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  actionItemCategory: {
+    _id: 'categoryId3',
+    name: 'Category 3',
+  },
+  preCompletionNotes: '',
+  postCompletionNotes: '',
+  assignmentDate: '2024-10-25',
+  dueDate: '2024-10-27',
+  completionDate: '2024-11-01',
+  isCompleted: true,
+  event: {
+    _id: 'eventId2',
+    title: 'Event 2',
+  },
+  creator: {
+    _id: 'userId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+  },
+  allottedHours: null,
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: null,
+        where: {
+          orgId: 'orgId',
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [action1, action2, action3],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: 'dueDate_DESC',
+        where: {
+          orgId: 'orgId',
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [action2, action1],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: 'dueDate_ASC',
+        where: {
+          orgId: 'orgId',
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [action1, action2],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: null,
+        where: {
+          orgId: 'orgId',
+          assigneeName: '1',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [action2],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: null,
+        where: {
+          orgId: 'orgId',
+          categoryName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [action1, action2],
+      },
+    },
+  },
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: null,
+        where: {
+          orgId: 'orgId',
+          categoryName: '1',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [action1],
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: null,
+        where: {
+          orgId: 'orgId',
+          assigneeName: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        actionItemsByUser: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: ACTION_ITEMS_BY_USER,
+      variables: {
+        userId: 'userId',
+        orderBy: null,
+        where: {
+          orgId: 'orgId',
+          assigneeName: '',
+        },
+      },
+    },
+    error: new Error('Mock Graphql ACTION_ITEMS_BY_USER Error'),
+  },
+];
diff --git a/src/screens/UserPortal/Volunteer/Actions/Actions.test.tsx b/src/screens/UserPortal/Volunteer/Actions/Actions.test.tsx
new file mode 100644
index 0000000000..ce64d98adf
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Actions/Actions.test.tsx
@@ -0,0 +1,221 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import Actions from './Actions';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, EMPTY_MOCKS, ERROR_MOCKS } from './Actions.mocks';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.organizationActionItems ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderActions = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/volunteer/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/user/volunteer/:orgId" element={<Actions />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Actions Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    setItem('userId', null);
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/user/volunteer/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/user/volunteer/" element={<Actions />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Actions screen', async () => {
+    renderActions(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const assigneeName = await screen.findAllByTestId('assigneeName');
+    expect(assigneeName[0]).toHaveTextContent('Teresa Bradley');
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderActions(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    let sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by dueDate_DESC
+    fireEvent.click(sortBtn);
+    const dueDateDESC = await screen.findByTestId('dueDate_DESC');
+    expect(dueDateDESC).toBeInTheDocument();
+    fireEvent.click(dueDateDESC);
+
+    let assigneeName = await screen.findAllByTestId('assigneeName');
+    expect(assigneeName[0]).toHaveTextContent('Group 1');
+
+    // Sort by dueDate_ASC
+    sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const dueDateASC = await screen.findByTestId('dueDate_ASC');
+    expect(dueDateASC).toBeInTheDocument();
+    fireEvent.click(dueDateASC);
+
+    assigneeName = await screen.findAllByTestId('assigneeName');
+    expect(assigneeName[0]).toHaveTextContent('Teresa Bradley');
+  });
+
+  it('Search by Assignee name', async () => {
+    renderActions(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByAssignee = await screen.findByTestId('assignee');
+    expect(searchByAssignee).toBeInTheDocument();
+    userEvent.click(searchByAssignee);
+
+    userEvent.type(searchInput, '1');
+    await debounceWait();
+
+    const assigneeName = await screen.findAllByTestId('assigneeName');
+    expect(assigneeName[0]).toHaveTextContent('Group 1');
+  });
+
+  it('Search by Category name', async () => {
+    renderActions(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByCategory = await screen.findByTestId('category');
+    expect(searchByCategory).toBeInTheDocument();
+    userEvent.click(searchByCategory);
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, '1');
+    await debounceWait();
+
+    const assigneeName = await screen.findAllByTestId('assigneeName');
+    expect(assigneeName[0]).toHaveTextContent('Teresa Bradley');
+  });
+
+  it('should render screen with No Actions', async () => {
+    renderActions(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noActionItems)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching Actions data', async () => {
+    renderActions(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Open and close ItemUpdateStatusModal', async () => {
+    renderActions(link1);
+
+    const checkbox = await screen.findAllByTestId('statusCheckbox');
+    userEvent.click(checkbox[0]);
+
+    expect(await screen.findByText(t.actionItemStatus)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+
+  it('Open and close ItemViewModal', async () => {
+    renderActions(link1);
+
+    const viewItemBtn = await screen.findAllByTestId('viewItemBtn');
+    userEvent.click(viewItemBtn[0]);
+
+    expect(await screen.findByText(t.actionItemDetails)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+});
diff --git a/src/screens/UserPortal/Volunteer/Actions/Actions.tsx b/src/screens/UserPortal/Volunteer/Actions/Actions.tsx
new file mode 100644
index 0000000000..36b1f29b83
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Actions/Actions.tsx
@@ -0,0 +1,471 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
+
+import { Circle, Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+import dayjs from 'dayjs';
+
+import { useQuery } from '@apollo/client';
+
+import type { InterfaceActionItemInfo } from 'utils/interfaces';
+import styles from 'screens/OrganizationActionItems/OrganizationActionItems.module.css';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { Chip, debounce, Stack } from '@mui/material';
+import ItemViewModal from 'screens/OrganizationActionItems/ItemViewModal';
+import Avatar from 'components/Avatar/Avatar';
+import ItemUpdateStatusModal from 'screens/OrganizationActionItems/ItemUpdateStatusModal';
+import { ACTION_ITEMS_BY_USER } from 'GraphQl/Queries/ActionItemQueries';
+import useLocalStorage from 'utils/useLocalstorage';
+
+enum ModalState {
+  VIEW = 'view',
+  STATUS = 'status',
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Component for managing and displaying action items within an organization.
+ *
+ * This component allows users to view, filter, sort, and create action items. It also handles fetching and displaying related data such as action item categories and members.
+ *
+ * @returns The rendered component.
+ */
+function actions(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'organizationActionItems',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Get the organization ID from URL parameters
+  const { orgId } = useParams();
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  if (!orgId || !userId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [actionItem, setActionItem] = useState<InterfaceActionItemInfo | null>(
+    null,
+  );
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<'dueDate_ASC' | 'dueDate_DESC' | null>(
+    null,
+  );
+  const [searchBy, setSearchBy] = useState<'assignee' | 'category'>('assignee');
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.VIEW]: false,
+    [ModalState.STATUS]: false,
+  });
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const openModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+
+  const closeModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+  const handleModalClick = useCallback(
+    (actionItem: InterfaceActionItemInfo | null, modal: ModalState): void => {
+      setActionItem(actionItem);
+      openModal(modal);
+    },
+    [openModal],
+  );
+
+  /**
+   * Query to fetch action items for the organization based on filters and sorting.
+   */
+  const {
+    data: actionItemsData,
+    loading: actionItemsLoading,
+    error: actionItemsError,
+    refetch: actionItemsRefetch,
+  }: {
+    data?: {
+      actionItemsByUser: InterfaceActionItemInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(ACTION_ITEMS_BY_USER, {
+    variables: {
+      userId,
+      orderBy: sortBy,
+      where: {
+        orgId,
+        assigneeName: searchBy === 'assignee' ? searchTerm : undefined,
+        categoryName: searchBy === 'category' ? searchTerm : undefined,
+      },
+    },
+  });
+
+  const actionItems = useMemo(
+    () => actionItemsData?.actionItemsByUser || [],
+    [actionItemsData],
+  );
+
+  if (actionItemsLoading) {
+    return <Loader size="xl" />;
+  }
+
+  if (actionItemsError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Action Items' })}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'assignee',
+      headerName: 'Assignee',
+      flex: 1,
+      align: 'left',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { _id, firstName, lastName, image } =
+          params.row.assignee?.user || {};
+
+        return (
+          <>
+            {params.row.assigneeType === 'EventVolunteer' ? (
+              <>
+                <div
+                  className="d-flex fw-bold align-items-center ms-2"
+                  data-testid="assigneeName"
+                >
+                  {image ? (
+                    <img
+                      src={image}
+                      alt="Assignee"
+                      data-testid={`image${_id + 1}`}
+                      className={styles.TableImage}
+                    />
+                  ) : (
+                    <div className={styles.avatarContainer}>
+                      <Avatar
+                        key={_id + '1'}
+                        containerStyle={styles.imageContainer}
+                        avatarStyle={styles.TableImage}
+                        name={firstName + ' ' + lastName}
+                        alt={firstName + ' ' + lastName}
+                      />
+                    </div>
+                  )}
+                  {firstName + ' ' + lastName}
+                </div>
+              </>
+            ) : (
+              <>
+                <div
+                  className="d-flex fw-bold align-items-center ms-2"
+                  data-testid="assigneeName"
+                >
+                  <div className={styles.avatarContainer}>
+                    <Avatar
+                      key={_id + '1'}
+                      containerStyle={styles.imageContainer}
+                      avatarStyle={styles.TableImage}
+                      name={params.row.assigneeGroup?.name as string}
+                      alt={params.row.assigneeGroup?.name as string}
+                    />
+                  </div>
+                  {params.row.assigneeGroup?.name as string}
+                </div>
+              </>
+            )}
+          </>
+        );
+      },
+    },
+    {
+      field: 'itemCategory',
+      headerName: 'Item Category',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="categoryName"
+          >
+            {params.row.actionItemCategory?.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'status',
+      headerName: 'Status',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <Chip
+            icon={<Circle className={styles.chipIcon} />}
+            label={params.row.isCompleted ? 'Completed' : 'Pending'}
+            variant="outlined"
+            color="primary"
+            className={`${styles.chip} ${params.row.isCompleted ? styles.active : styles.pending}`}
+          />
+        );
+      },
+    },
+    {
+      field: 'allottedHours',
+      headerName: 'Allotted Hours',
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="allottedHours">
+            {params.row.allottedHours ?? '-'}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'dueDate',
+      headerName: 'Due Date',
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      flex: 1,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div data-testid="createdOn">
+            {dayjs(params.row.dueDate).format('DD/MM/YYYY')}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'options',
+      headerName: 'Options',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              style={{ minWidth: '32px' }}
+              className="me-2 rounded"
+              data-testid={`viewItemBtn`}
+              onClick={() => handleModalClick(params.row, ModalState.VIEW)}
+            >
+              <i className="fa fa-info" />
+            </Button>
+          </>
+        );
+      },
+    },
+    {
+      field: 'completed',
+      headerName: 'Completed',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex align-items-center justify-content-center mt-3">
+            <Form.Check
+              type="checkbox"
+              data-testid={`statusCheckbox`}
+              checked={params.row.isCompleted}
+              onChange={() => handleModalClick(params.row, ModalState.STATUS)}
+            />
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: searchBy.charAt(0).toUpperCase() + searchBy.slice(1),
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                className={styles.dropdown}
+                data-testid="searchByToggle"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('searchBy', { item: '' })}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('assignee')}
+                  data-testid="assignee"
+                >
+                  {t('assignee')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('category')}
+                  data-testid="category"
+                >
+                  {t('category')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('dueDate_DESC')}
+                  data-testid="dueDate_DESC"
+                >
+                  {t('latestDueDate')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('dueDate_ASC')}
+                  data-testid="dueDate_ASC"
+                >
+                  {t('earliestDueDate')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Action Items */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noActionItems')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={actionItems}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      {/* View Modal */}
+      {actionItem && (
+        <>
+          <ItemViewModal
+            isOpen={modalState[ModalState.VIEW]}
+            hide={() => closeModal(ModalState.VIEW)}
+            item={actionItem}
+          />
+
+          <ItemUpdateStatusModal
+            actionItem={actionItem}
+            isOpen={modalState[ModalState.STATUS]}
+            hide={() => closeModal(ModalState.STATUS)}
+            actionItemsRefetch={actionItemsRefetch}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default actions;
diff --git a/src/screens/UserPortal/Volunteer/Groups/GroupModal.test.tsx b/src/screens/UserPortal/Volunteer/Groups/GroupModal.test.tsx
new file mode 100644
index 0000000000..1d83d9a872
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Groups/GroupModal.test.tsx
@@ -0,0 +1,308 @@
+import React from 'react';
+import type { ApolloLink } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import i18n from 'utils/i18nForTest';
+import { MOCKS, UPDATE_ERROR_MOCKS } from './Groups.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import { toast } from 'react-toastify';
+import type { InterfaceGroupModal } from './GroupModal';
+import GroupModal from './GroupModal';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(UPDATE_ERROR_MOCKS);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const itemProps: InterfaceGroupModal[] = [
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    eventId: 'eventId',
+    refetchGroups: jest.fn(),
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: 'desc',
+      volunteersRequired: null,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: null,
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: 'img-url',
+      },
+      volunteers: [
+        {
+          _id: 'volunteerId1',
+          user: {
+            _id: 'userId',
+            firstName: 'Teresa',
+            lastName: 'Bradley',
+            image: null,
+          },
+        },
+      ],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+  {
+    isOpen: true,
+    hide: jest.fn(),
+    eventId: 'eventId',
+    refetchGroups: jest.fn(),
+    group: {
+      _id: 'groupId',
+      name: 'Group 1',
+      description: null,
+      volunteersRequired: null,
+      createdAt: '2024-10-25T16:16:32.978Z',
+      creator: {
+        _id: 'creatorId1',
+        firstName: 'Wilt',
+        lastName: 'Shepherd',
+        image: null,
+      },
+      leader: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: 'img-url',
+      },
+      volunteers: [],
+      assignments: [],
+      event: {
+        _id: 'eventId',
+      },
+    },
+  },
+];
+
+const renderGroupModal = (
+  link: ApolloLink,
+  props: InterfaceGroupModal,
+): RenderResult => {
+  return render(
+    <MockedProvider link={link} addTypename={false}>
+      <Provider store={store}>
+        <BrowserRouter>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <GroupModal {...props} />
+            </I18nextProvider>
+          </LocalizationProvider>
+        </BrowserRouter>
+      </Provider>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing GroupModal', () => {
+  it('GroupModal -> Requests -> Accept', async () => {
+    renderGroupModal(link1, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const requestsBtn = screen.getByText(t.requests);
+    expect(requestsBtn).toBeInTheDocument();
+    userEvent.click(requestsBtn);
+
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(2);
+    expect(userName[0]).toHaveTextContent('John Doe');
+    expect(userName[1]).toHaveTextContent('Teresa Bradley');
+
+    const acceptBtn = screen.getAllByTestId('acceptBtn');
+    expect(acceptBtn).toHaveLength(2);
+    userEvent.click(acceptBtn[0]);
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.requestAccepted);
+    });
+  });
+
+  it('GroupModal -> Requests -> Reject', async () => {
+    renderGroupModal(link1, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const requestsBtn = screen.getByText(t.requests);
+    expect(requestsBtn).toBeInTheDocument();
+    userEvent.click(requestsBtn);
+
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(2);
+    expect(userName[0]).toHaveTextContent('John Doe');
+    expect(userName[1]).toHaveTextContent('Teresa Bradley');
+
+    const rejectBtn = screen.getAllByTestId('rejectBtn');
+    expect(rejectBtn).toHaveLength(2);
+    userEvent.click(rejectBtn[0]);
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.requestRejected);
+    });
+  });
+
+  it('GroupModal -> Click Requests -> Click Details', async () => {
+    renderGroupModal(link1, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const requestsBtn = screen.getByText(t.requests);
+    expect(requestsBtn).toBeInTheDocument();
+    userEvent.click(requestsBtn);
+
+    const detailsBtn = await screen.findByText(t.details);
+    expect(detailsBtn).toBeInTheDocument();
+    userEvent.click(detailsBtn);
+  });
+
+  it('GroupModal -> Details -> Update', async () => {
+    renderGroupModal(link1, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText(`${t.name} *`);
+    expect(nameInput).toBeInTheDocument();
+    fireEvent.change(nameInput, { target: { value: 'Group 2' } });
+    expect(nameInput).toHaveValue('Group 2');
+
+    const descInput = screen.getByLabelText(t.description);
+    expect(descInput).toBeInTheDocument();
+    fireEvent.change(descInput, { target: { value: 'desc new' } });
+    expect(descInput).toHaveValue('desc new');
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '10' } });
+    expect(vrInput).toHaveValue('10');
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerGroupUpdated);
+      expect(itemProps[0].refetchGroups).toHaveBeenCalled();
+      expect(itemProps[0].hide).toHaveBeenCalled();
+    });
+  });
+
+  it('GroupModal -> Details -> Update -> Error', async () => {
+    renderGroupModal(link2, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText(`${t.name} *`);
+    expect(nameInput).toBeInTheDocument();
+    fireEvent.change(nameInput, { target: { value: 'Group 2' } });
+    expect(nameInput).toHaveValue('Group 2');
+
+    const descInput = screen.getByLabelText(t.description);
+    expect(descInput).toBeInTheDocument();
+    fireEvent.change(descInput, { target: { value: 'desc new' } });
+    expect(descInput).toHaveValue('desc new');
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '10' } });
+    expect(vrInput).toHaveValue('10');
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  it('GroupModal -> Requests -> Accept -> Error', async () => {
+    renderGroupModal(link2, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const requestsBtn = screen.getByText(t.requests);
+    expect(requestsBtn).toBeInTheDocument();
+    userEvent.click(requestsBtn);
+
+    const userName = await screen.findAllByTestId('userName');
+    expect(userName).toHaveLength(2);
+    expect(userName[0]).toHaveTextContent('John Doe');
+    expect(userName[1]).toHaveTextContent('Teresa Bradley');
+
+    const acceptBtn = screen.getAllByTestId('acceptBtn');
+    expect(acceptBtn).toHaveLength(2);
+    userEvent.click(acceptBtn[0]);
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  it('Try adding different values for volunteersRequired', async () => {
+    renderGroupModal(link1, itemProps[1]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const vrInput = screen.getByLabelText(t.volunteersRequired);
+    expect(vrInput).toBeInTheDocument();
+    fireEvent.change(vrInput, { target: { value: '-1' } });
+
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('');
+    });
+
+    userEvent.clear(vrInput);
+    userEvent.type(vrInput, '1{backspace}');
+
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('');
+    });
+
+    fireEvent.change(vrInput, { target: { value: '0' } });
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('');
+    });
+
+    fireEvent.change(vrInput, { target: { value: '19' } });
+    await waitFor(() => {
+      expect(vrInput).toHaveValue('19');
+    });
+  });
+
+  it('GroupModal -> Details -> No values updated', async () => {
+    renderGroupModal(link1, itemProps[0]);
+    expect(screen.getByText(t.manageGroup)).toBeInTheDocument();
+
+    const submitBtn = screen.getByTestId('submitBtn');
+    expect(submitBtn).toBeInTheDocument();
+    userEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx b/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx
new file mode 100644
index 0000000000..4ae162cd70
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Groups/GroupModal.tsx
@@ -0,0 +1,415 @@
+import type { ChangeEvent } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import type {
+  InterfaceCreateVolunteerGroup,
+  InterfaceVolunteerGroupInfo,
+  InterfaceVolunteerMembership,
+} from 'utils/interfaces';
+import styles from 'screens/EventVolunteers/EventVolunteers.module.css';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
+import { toast } from 'react-toastify';
+import {
+  FormControl,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+} from '@mui/material';
+import {
+  UPDATE_VOLUNTEER_GROUP,
+  UPDATE_VOLUNTEER_MEMBERSHIP,
+} from 'GraphQl/Mutations/EventVolunteerMutation';
+import { PiUserListBold } from 'react-icons/pi';
+import { TbListDetails } from 'react-icons/tb';
+import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
+import Avatar from 'components/Avatar/Avatar';
+import { FaXmark } from 'react-icons/fa6';
+
+export interface InterfaceGroupModal {
+  isOpen: boolean;
+  hide: () => void;
+  eventId: string;
+  group: InterfaceVolunteerGroupInfo;
+  refetchGroups: () => void;
+}
+
+/**
+ * A modal dialog for creating or editing a volunteer group.
+ *
+ * @param isOpen - Indicates whether the modal is open.
+ * @param hide - Function to close the modal.
+ * @param eventId - The ID of the event associated with volunteer group.
+ * @param orgId - The ID of the organization associated with volunteer group.
+ * @param group - The volunteer group object to be edited.
+ * @param refetchGroups - Function to refetch the volunteer groups after creation or update.
+ * @returns The rendered modal component.
+ *
+ * The `VolunteerGroupModal` component displays a form within a modal dialog for creating or editing a Volunteer Group.
+ * It includes fields for entering the group name, description, volunteersRequired, and selecting volunteers/leaders.
+ *
+ * The modal includes:
+ * - A header with a title indicating the current mode (create or edit) and a close button.
+ * - A form with:
+ *   - An input field for entering the group name.
+ *   - A textarea for entering the group description.
+ *   - An input field for entering the number of volunteers required.
+ * - A submit button to create or update the pledge.
+ *
+ * On form submission, the component either:
+ * - Calls `updateVoluneerGroup` mutation to update an existing group, or
+ *
+ * Success or error messages are displayed using toast notifications based on the result of the mutation.
+ */
+
+const GroupModal: React.FC<InterfaceGroupModal> = ({
+  isOpen,
+  hide,
+  eventId,
+  group,
+  refetchGroups,
+}) => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+
+  const [modalType, setModalType] = useState<'details' | 'requests'>('details');
+  const [formState, setFormState] = useState<InterfaceCreateVolunteerGroup>({
+    name: group.name,
+    description: group.description ?? '',
+    leader: group.leader,
+    volunteerUsers: group.volunteers.map((volunteer) => volunteer.user),
+    volunteersRequired: group.volunteersRequired ?? null,
+  });
+
+  const [updateVolunteerGroup] = useMutation(UPDATE_VOLUNTEER_GROUP);
+  const [updateMembership] = useMutation(UPDATE_VOLUNTEER_MEMBERSHIP);
+
+  const updateMembershipStatus = async (
+    id: string,
+    status: 'accepted' | 'rejected',
+  ): Promise<void> => {
+    try {
+      await updateMembership({
+        variables: {
+          id: id,
+          status: status,
+        },
+      });
+      toast.success(
+        t(
+          status === 'accepted' ? 'requestAccepted' : 'requestRejected',
+        ) as string,
+      );
+      refetchRequests();
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  /**
+   * Query to fetch volunteer Membership requests for the event.
+   */
+  const {
+    data: requestsData,
+    refetch: refetchRequests,
+  }: {
+    data?: {
+      getVolunteerMembership: InterfaceVolunteerMembership[];
+    };
+    refetch: () => void;
+  } = useQuery(USER_VOLUNTEER_MEMBERSHIP, {
+    variables: {
+      where: {
+        eventId,
+        groupId: group._id,
+        status: 'requested',
+      },
+    },
+  });
+
+  const requests = useMemo(() => {
+    if (!requestsData) return [];
+    return requestsData.getVolunteerMembership;
+  }, [requestsData]);
+
+  useEffect(() => {
+    setFormState({
+      name: group.name,
+      description: group.description ?? '',
+      leader: group.leader,
+      volunteerUsers: group.volunteers.map((volunteer) => volunteer.user),
+      volunteersRequired: group.volunteersRequired ?? null,
+    });
+  }, [group]);
+
+  const { name, description, volunteersRequired } = formState;
+
+  const updateGroupHandler = useCallback(
+    async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
+      e.preventDefault();
+
+      const updatedFields: {
+        [key: string]: number | string | undefined | null;
+      } = {};
+
+      if (name !== group?.name) {
+        updatedFields.name = name;
+      }
+      if (description !== group?.description) {
+        updatedFields.description = description;
+      }
+      if (volunteersRequired !== group?.volunteersRequired) {
+        updatedFields.volunteersRequired = volunteersRequired;
+      }
+      try {
+        await updateVolunteerGroup({
+          variables: {
+            id: group?._id,
+            data: { ...updatedFields, eventId },
+          },
+        });
+        toast.success(t('volunteerGroupUpdated'));
+        refetchGroups();
+        hide();
+      } catch (error: unknown) {
+        console.log(error);
+        toast.error((error as Error).message);
+      }
+    },
+    [formState, group],
+  );
+
+  return (
+    <Modal className={styles.groupModal} onHide={hide} show={isOpen}>
+      <Modal.Header>
+        <p className={styles.titlemodal}>{t('manageGroup')}</p>
+        <Button
+          variant="danger"
+          onClick={hide}
+          className={styles.modalCloseBtn}
+          data-testid="modalCloseBtn"
+        >
+          <i className="fa fa-times"></i>
+        </Button>
+      </Modal.Header>
+      <Modal.Body>
+        <div
+          className={`btn-group ${styles.toggleGroup} mt-0 px-3 mb-4 w-100`}
+          role="group"
+        >
+          <input
+            type="radio"
+            className={`btn-check ${styles.toggleBtn}`}
+            name="btnradio"
+            id="detailsRadio"
+            checked={modalType === 'details'}
+            onChange={() => setModalType('details')}
+          />
+          <label
+            className={`btn btn-outline-primary ${styles.toggleBtn}`}
+            htmlFor="detailsRadio"
+          >
+            <TbListDetails className="me-2" />
+            {t('details')}
+          </label>
+
+          <input
+            type="radio"
+            className={`btn-check ${styles.toggleBtn}`}
+            name="btnradio"
+            id="groupsRadio"
+            onChange={() => setModalType('requests')}
+            checked={modalType === 'requests'}
+          />
+          <label
+            className={`btn btn-outline-primary ${styles.toggleBtn}`}
+            htmlFor="groupsRadio"
+          >
+            <PiUserListBold className="me-2" size={21} />
+            {t('requests')}
+          </label>
+        </div>
+
+        {modalType === 'details' ? (
+          <Form
+            data-testid="pledgeForm"
+            onSubmitCapture={updateGroupHandler}
+            className="p-3"
+          >
+            {/* Input field to enter the group name */}
+            <Form.Group className="mb-3">
+              <FormControl fullWidth>
+                <TextField
+                  required
+                  label={tCommon('name')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={name}
+                  data-testid="nameInput"
+                  onChange={(e) =>
+                    setFormState({ ...formState, name: e.target.value })
+                  }
+                />
+              </FormControl>
+            </Form.Group>
+            {/* Input field to enter the group description */}
+            <Form.Group className="mb-3">
+              <FormControl fullWidth>
+                <TextField
+                  multiline
+                  rows={3}
+                  label={tCommon('description')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={description}
+                  onChange={(e) =>
+                    setFormState({ ...formState, description: e.target.value })
+                  }
+                />
+              </FormControl>
+            </Form.Group>
+
+            <Form.Group className="mb-3">
+              <FormControl fullWidth>
+                <TextField
+                  label={t('volunteersRequired')}
+                  variant="outlined"
+                  className={styles.noOutline}
+                  value={volunteersRequired ?? ''}
+                  onChange={(e) => {
+                    if (parseInt(e.target.value) > 0) {
+                      setFormState({
+                        ...formState,
+                        volunteersRequired: parseInt(e.target.value),
+                      });
+                    } else if (e.target.value === '') {
+                      setFormState({
+                        ...formState,
+                        volunteersRequired: null,
+                      });
+                    }
+                  }}
+                />
+              </FormControl>
+            </Form.Group>
+
+            {/* Button to submit the pledge form */}
+            <Button
+              type="submit"
+              className={styles.greenregbtn}
+              data-testid="submitBtn"
+            >
+              {t('updateGroup')}
+            </Button>
+          </Form>
+        ) : (
+          <div className="px-3">
+            {requests.length === 0 ? (
+              <Stack height="100%" alignItems="center" justifyContent="center">
+                {t('noRequests')}
+              </Stack>
+            ) : (
+              <TableContainer
+                component={Paper}
+                variant="outlined"
+                className={styles.modalTable}
+              >
+                <Table aria-label="group table">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell className="fw-bold">Name</TableCell>
+                      <TableCell className="fw-bold">Actions</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {requests.map((request, index) => {
+                      const { _id, firstName, lastName, image } =
+                        request.volunteer.user;
+                      return (
+                        <TableRow
+                          key={index + 1}
+                          sx={{
+                            '&:last-child td, &:last-child th': { border: 0 },
+                          }}
+                        >
+                          <TableCell
+                            component="th"
+                            scope="row"
+                            className="d-flex gap-1 align-items-center"
+                            data-testid="userName"
+                          >
+                            {image ? (
+                              <img
+                                src={image}
+                                alt="volunteer"
+                                data-testid={`image${_id + 1}`}
+                                className={styles.TableImage}
+                              />
+                            ) : (
+                              <div className={styles.avatarContainer}>
+                                <Avatar
+                                  key={_id + '1'}
+                                  containerStyle={styles.imageContainer}
+                                  avatarStyle={styles.TableImage}
+                                  name={firstName + ' ' + lastName}
+                                  alt={firstName + ' ' + lastName}
+                                />
+                              </div>
+                            )}
+                            {firstName + ' ' + lastName}
+                          </TableCell>
+                          <TableCell component="th" scope="row">
+                            <div className="d-flex gap-2">
+                              <Button
+                                variant="success"
+                                size="sm"
+                                style={{ minWidth: '32px' }}
+                                className="me-2 rounded"
+                                data-testid={`acceptBtn`}
+                                onClick={() =>
+                                  updateMembershipStatus(
+                                    request._id,
+                                    'accepted',
+                                  )
+                                }
+                              >
+                                <i className="fa fa-check" />
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="danger"
+                                className="rounded"
+                                data-testid={`rejectBtn`}
+                                onClick={() =>
+                                  updateMembershipStatus(
+                                    request._id,
+                                    'rejected',
+                                  )
+                                }
+                              >
+                                <FaXmark size={18} fontWeight={900} />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </div>
+        )}
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default GroupModal;
diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.mocks.ts b/src/screens/UserPortal/Volunteer/Groups/Groups.mocks.ts
new file mode 100644
index 0000000000..204326ee8d
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Groups/Groups.mocks.ts
@@ -0,0 +1,468 @@
+import {
+  UPDATE_VOLUNTEER_GROUP,
+  UPDATE_VOLUNTEER_MEMBERSHIP,
+} from 'GraphQl/Mutations/EventVolunteerMutation';
+import {
+  EVENT_VOLUNTEER_GROUP_LIST,
+  USER_VOLUNTEER_MEMBERSHIP,
+} from 'GraphQl/Queries/EventVolunteerQueries';
+
+const group1 = {
+  _id: 'groupId1',
+  name: 'Group 1',
+  description: 'desc',
+  volunteersRequired: null,
+  createdAt: '2024-10-25T16:16:32.978Z',
+  creator: {
+    _id: 'creatorId1',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  leader: {
+    _id: 'userId',
+    firstName: 'Teresa',
+    lastName: 'Bradley',
+    image: 'img-url',
+  },
+  volunteers: [
+    {
+      _id: 'volunteerId1',
+      user: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+    },
+  ],
+  assignments: [],
+  event: {
+    _id: 'eventId1',
+  },
+};
+
+const group2 = {
+  _id: 'groupId2',
+  name: 'Group 2',
+  description: 'desc',
+  volunteersRequired: null,
+  createdAt: '2024-10-27T15:25:13.044Z',
+  creator: {
+    _id: 'creatorId2',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  leader: {
+    _id: 'userId',
+    firstName: 'Teresa',
+    lastName: 'Bradley',
+    image: null,
+  },
+  volunteers: [
+    {
+      _id: 'volunteerId2',
+      user: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+    },
+  ],
+  assignments: [],
+  event: {
+    _id: 'eventId2',
+  },
+};
+
+const group3 = {
+  _id: 'groupId3',
+  name: 'Group 3',
+  description: 'desc',
+  volunteersRequired: null,
+  createdAt: '2024-10-27T15:34:15.889Z',
+  creator: {
+    _id: 'creatorId3',
+    firstName: 'Wilt',
+    lastName: 'Shepherd',
+    image: null,
+  },
+  leader: {
+    _id: 'userId1',
+    firstName: 'Bruce',
+    lastName: 'Garza',
+    image: null,
+  },
+  volunteers: [
+    {
+      _id: 'volunteerId3',
+      user: {
+        _id: 'userId',
+        firstName: 'Teresa',
+        lastName: 'Bradley',
+        image: null,
+      },
+    },
+  ],
+  assignments: [],
+  event: {
+    _id: 'eventId3',
+  },
+};
+
+const membership1 = {
+  _id: 'membershipId1',
+  status: 'requested',
+  createdAt: '2024-10-29T10:18:05.851Z',
+  event: {
+    _id: 'eventId',
+    title: 'Event 1',
+    startDate: '2044-10-31',
+  },
+  volunteer: {
+    _id: 'volunteerId1',
+    user: {
+      _id: 'userId1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: 'img-url',
+    },
+  },
+  group: {
+    _id: 'groupId',
+    name: 'Group 1',
+  },
+};
+
+const membership2 = {
+  _id: 'membershipId2',
+  status: 'requested',
+  createdAt: '2024-10-29T10:18:05.851Z',
+  event: {
+    _id: 'eventId',
+    title: 'Event 1',
+    startDate: '2044-10-31',
+  },
+  volunteer: {
+    _id: 'volunteerId2',
+    user: {
+      _id: 'userId2',
+      firstName: 'Teresa',
+      lastName: 'Bradley',
+      image: null,
+    },
+  },
+  group: {
+    _id: 'groupId',
+    name: 'Group 2',
+  },
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1, group2, group3],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: 'volunteers_DESC',
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1, group2],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: 'volunteers_ASC',
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group2, group1],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: null,
+          name_contains: '1',
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: '',
+          name_contains: null,
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group1, group2, group3],
+      },
+    },
+  },
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: 'Bruce',
+          name_contains: null,
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [group3],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          groupId: 'groupId',
+          status: 'requested',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    result: {
+      data: {
+        updateVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'rejected',
+      },
+    },
+    result: {
+      data: {
+        updateVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+        data: {
+          eventId: 'eventId',
+          name: 'Group 2',
+          description: 'desc new',
+          volunteersRequired: 10,
+        },
+      },
+    },
+    result: {
+      data: {
+        updateEventVolunteerGroup: {
+          _id: 'groupId',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+        data: {
+          eventId: 'eventId',
+        },
+      },
+    },
+    result: {
+      data: {
+        updateEventVolunteerGroup: {
+          _id: 'groupId',
+        },
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: null,
+      },
+    },
+    result: {
+      data: {
+        getEventVolunteerGroups: [],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          group: 'groupId',
+          status: 'requested',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: EVENT_VOLUNTEER_GROUP_LIST,
+      variables: {
+        where: {
+          userId: 'userId',
+          orgId: 'orgId',
+          leaderName: null,
+          name_contains: '',
+        },
+        orderBy: null,
+      },
+    },
+    error: new Error('Mock Graphql EVENT_VOLUNTEER_GROUP_LIST Error'),
+  },
+];
+
+export const UPDATE_ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          eventId: 'eventId',
+          groupId: 'groupId',
+          status: 'requested',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    error: new Error('Mock Graphql UPDATE_VOLUNTEER_MEMBERSHIP Error'),
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_GROUP,
+      variables: {
+        id: 'groupId',
+        data: {
+          eventId: 'eventId',
+          name: 'Group 2',
+          description: 'desc new',
+          volunteersRequired: 10,
+        },
+      },
+    },
+    error: new Error('Mock Graphql UPDATE_VOLUNTEER_GROUP Error'),
+  },
+];
diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx
new file mode 100644
index 0000000000..bc0a4993b9
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Groups/Groups.test.tsx
@@ -0,0 +1,217 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import Groups from './Groups';
+import type { ApolloLink } from '@apollo/client';
+import { MOCKS, EMPTY_MOCKS, ERROR_MOCKS } from './Groups.mocks';
+import useLocalStorage from 'utils/useLocalstorage';
+
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.eventVolunteers ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderGroups = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/volunteer/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/user/volunteer/:orgId" element={<Groups />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Groups Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    setItem('userId', null);
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/user/volunteer/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/user/volunteer/" element={<Groups />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Groups screen', async () => {
+    renderGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    let sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by members_DESC
+    fireEvent.click(sortBtn);
+    const volunteersDESC = await screen.findByTestId('volunteers_DESC');
+    expect(volunteersDESC).toBeInTheDocument();
+    fireEvent.click(volunteersDESC);
+
+    let groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 1');
+
+    // Sort by members_ASC
+    sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const volunteersASC = await screen.findByTestId('volunteers_ASC');
+    expect(volunteersASC).toBeInTheDocument();
+    fireEvent.click(volunteersASC);
+
+    groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 2');
+  });
+
+  it('Search by Groups', async () => {
+    renderGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByGroup = await screen.findByTestId('group');
+    expect(searchByGroup).toBeInTheDocument();
+    userEvent.click(searchByGroup);
+
+    userEvent.type(searchInput, '1');
+    await debounceWait();
+
+    const groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 1');
+  });
+
+  it('Search by Leader', async () => {
+    renderGroups(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByLeader = await screen.findByTestId('leader');
+    expect(searchByLeader).toBeInTheDocument();
+    userEvent.click(searchByLeader);
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, 'Bruce');
+    await debounceWait();
+
+    const groupName = await screen.findAllByTestId('groupName');
+    expect(groupName[0]).toHaveTextContent('Group 1');
+  });
+
+  it('should render screen with No Groups', async () => {
+    renderGroups(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noVolunteerGroups)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching groups data', async () => {
+    renderGroups(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Open and close ViewModal', async () => {
+    renderGroups(link1);
+
+    const viewGroupBtn = await screen.findAllByTestId('viewGroupBtn');
+    userEvent.click(viewGroupBtn[0]);
+
+    expect(await screen.findByText(t.groupDetails)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('volunteerViewModalCloseBtn'));
+  });
+
+  it('Open and close GroupModal', async () => {
+    renderGroups(link1);
+
+    const editGroupBtn = await screen.findAllByTestId('editGroupBtn');
+    userEvent.click(editGroupBtn[0]);
+
+    expect(await screen.findByText(t.manageGroup)).toBeInTheDocument();
+    userEvent.click(await screen.findByTestId('modalCloseBtn'));
+  });
+});
diff --git a/src/screens/UserPortal/Volunteer/Groups/Groups.tsx b/src/screens/UserPortal/Volunteer/Groups/Groups.tsx
new file mode 100644
index 0000000000..3941f461d5
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Groups/Groups.tsx
@@ -0,0 +1,415 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Form } from 'react-bootstrap';
+import { Navigate, useParams } from 'react-router-dom';
+
+import { Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+
+import { useQuery } from '@apollo/client';
+
+import type { InterfaceVolunteerGroupInfo } from 'utils/interfaces';
+import Loader from 'components/Loader/Loader';
+import {
+  DataGrid,
+  type GridCellParams,
+  type GridColDef,
+} from '@mui/x-data-grid';
+import { debounce, Stack } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
+import styles from 'screens/EventVolunteers/EventVolunteers.module.css';
+import { EVENT_VOLUNTEER_GROUP_LIST } from 'GraphQl/Queries/EventVolunteerQueries';
+import VolunteerGroupViewModal from 'screens/EventVolunteers/VolunteerGroups/VolunteerGroupViewModal';
+import useLocalStorage from 'utils/useLocalstorage';
+import GroupModal from './GroupModal';
+
+enum ModalState {
+  EDIT = 'edit',
+  VIEW = 'view',
+}
+
+const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.5rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.5rem',
+  },
+};
+
+/**
+ * Component for managing volunteer groups for an event.
+ * This component allows users to view, filter, sort, and create action items. It also provides a modal for creating and editing action items.
+ * @returns The rendered component.
+ */
+function groups(): JSX.Element {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'eventVolunteers',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  // Get the organization ID from URL parameters
+  const { orgId } = useParams();
+
+  if (!orgId || !userId) {
+    return <Navigate to={'/'} replace />;
+  }
+
+  const [group, setGroup] = useState<InterfaceVolunteerGroupInfo | null>(null);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [sortBy, setSortBy] = useState<
+    'volunteers_ASC' | 'volunteers_DESC' | null
+  >(null);
+  const [searchBy, setSearchBy] = useState<'leader' | 'group'>('group');
+  const [modalState, setModalState] = useState<{
+    [key in ModalState]: boolean;
+  }>({
+    [ModalState.EDIT]: false,
+    [ModalState.VIEW]: false,
+  });
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  /**
+   * Query to fetch the list of volunteer groups for the event.
+   */
+  const {
+    data: groupsData,
+    loading: groupsLoading,
+    error: groupsError,
+    refetch: refetchGroups,
+  }: {
+    data?: {
+      getEventVolunteerGroups: InterfaceVolunteerGroupInfo[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(EVENT_VOLUNTEER_GROUP_LIST, {
+    variables: {
+      where: {
+        eventId: undefined,
+        userId,
+        orgId,
+        leaderName: searchBy === 'leader' ? searchTerm : null,
+        name_contains: searchBy === 'group' ? searchTerm : null,
+      },
+      orderBy: sortBy,
+    },
+  });
+
+  const openModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: true }));
+
+  const closeModal = (modal: ModalState): void =>
+    setModalState((prevState) => ({ ...prevState, [modal]: false }));
+
+  const handleModalClick = useCallback(
+    (group: InterfaceVolunteerGroupInfo | null, modal: ModalState): void => {
+      setGroup(group);
+      openModal(modal);
+    },
+    [openModal],
+  );
+
+  const groups = useMemo(
+    () => groupsData?.getEventVolunteerGroups || [],
+    [groupsData],
+  );
+
+  if (groupsLoading) {
+    return <Loader size="xl" />;
+  }
+
+  if (groupsError) {
+    return (
+      <div className={styles.message} data-testid="errorMsg">
+        <WarningAmberRounded className={styles.icon} fontSize="large" />
+        <h6 className="fw-bold text-danger text-center">
+          {tErrors('errorLoading', { entity: 'Volunteer Groups' })}
+        </h6>
+      </div>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'group',
+      headerName: 'Group',
+      flex: 1,
+      align: 'left',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="groupName"
+          >
+            {params.row.name}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'leader',
+      headerName: 'Leader',
+      flex: 1,
+      align: 'center',
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        const { _id, firstName, lastName, image } = params.row.leader;
+        return (
+          <div
+            className="d-flex fw-bold align-items-center ms-2"
+            data-testid="leaderName"
+          >
+            {image ? (
+              <img
+                src={image}
+                alt="Assignee"
+                data-testid={`image${_id + 1}`}
+                className={styles.TableImage}
+              />
+            ) : (
+              <div className={styles.avatarContainer}>
+                <Avatar
+                  key={_id + '1'}
+                  containerStyle={styles.imageContainer}
+                  avatarStyle={styles.TableImage}
+                  name={firstName + ' ' + lastName}
+                  alt={firstName + ' ' + lastName}
+                />
+              </div>
+            )}
+            {firstName + ' ' + lastName}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'actions',
+      headerName: 'Actions Completed',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex justify-content-center fw-bold">
+            {params.row.assignments.length}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'volunteers',
+      headerName: 'No. of Volunteers',
+      flex: 1,
+      align: 'center',
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div className="d-flex justify-content-center fw-bold">
+            {params.row.volunteers.length}
+          </div>
+        );
+      },
+    },
+    {
+      field: 'options',
+      headerName: 'Options',
+      align: 'center',
+      flex: 1,
+      minWidth: 100,
+      headerAlign: 'center',
+      sortable: false,
+      headerClassName: `${styles.tableHeader}`,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <>
+            <Button
+              variant="success"
+              size="sm"
+              style={{ minWidth: '32px' }}
+              className="me-2 rounded"
+              data-testid="viewGroupBtn"
+              onClick={() => handleModalClick(params.row, ModalState.VIEW)}
+            >
+              <i className="fa fa-info" />
+            </Button>
+            {params.row.leader._id === userId && (
+              <Button
+                variant="success"
+                size="sm"
+                className="me-2 rounded"
+                data-testid="editGroupBtn"
+                onClick={() => handleModalClick(params.row, ModalState.EDIT)}
+              >
+                <i className="fa fa-edit" />
+              </Button>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header with search, filter  and Create Button */}
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: searchBy.charAt(0).toUpperCase() + searchBy.slice(1),
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
+            style={{ marginBottom: '10px' }}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-3 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="searchByToggle"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('searchBy', { item: '' })}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('leader')}
+                  data-testid="leader"
+                >
+                  {t('leader')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('group')}
+                  data-testid="group"
+                >
+                  {t('group')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('volunteers_DESC')}
+                  data-testid="volunteers_DESC"
+                >
+                  {t('mostVolunteers')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('volunteers_ASC')}
+                  data-testid="volunteers_ASC"
+                >
+                  {t('leastVolunteers')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+
+      {/* Table with Volunteer Groups */}
+      <DataGrid
+        disableColumnMenu
+        columnBufferPx={7}
+        hideFooter={true}
+        getRowId={(row) => row._id}
+        slots={{
+          noRowsOverlay: () => (
+            <Stack height="100%" alignItems="center" justifyContent="center">
+              {t('noVolunteerGroups')}
+            </Stack>
+          ),
+        }}
+        sx={dataGridStyle}
+        getRowClassName={() => `${styles.rowBackground}`}
+        autoHeight
+        rowHeight={65}
+        rows={groups.map((group, index) => ({
+          id: index + 1,
+          ...group,
+        }))}
+        columns={columns}
+        isRowSelectable={() => false}
+      />
+
+      {group && (
+        <>
+          <GroupModal
+            isOpen={modalState[ModalState.EDIT]}
+            hide={() => closeModal(ModalState.EDIT)}
+            refetchGroups={refetchGroups}
+            group={group}
+            eventId={group.event._id}
+          />
+          <VolunteerGroupViewModal
+            isOpen={modalState[ModalState.VIEW]}
+            hide={() => closeModal(ModalState.VIEW)}
+            group={group}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default groups;
diff --git a/src/screens/UserPortal/Volunteer/Invitations/Invitations.mocks.ts b/src/screens/UserPortal/Volunteer/Invitations/Invitations.mocks.ts
new file mode 100644
index 0000000000..c400d96939
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Invitations/Invitations.mocks.ts
@@ -0,0 +1,263 @@
+import { UPDATE_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Mutations/EventVolunteerMutation';
+import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
+
+const membership1 = {
+  _id: 'membershipId1',
+  status: 'invited',
+  createdAt: '2024-10-29T10:18:05.851Z',
+  event: {
+    _id: 'eventId',
+    title: 'Event 1',
+    startDate: '2044-10-31',
+  },
+  volunteer: {
+    _id: 'volunteerId1',
+    user: {
+      _id: 'userId',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: 'img-url',
+    },
+  },
+  group: null,
+};
+
+const membership2 = {
+  _id: 'membershipId2',
+  status: 'invited',
+  createdAt: '2024-10-30T10:18:05.851Z',
+  event: {
+    _id: 'eventId',
+    title: 'Event 2',
+    startDate: '2044-11-31',
+  },
+  volunteer: {
+    _id: 'volunteerId1',
+    user: {
+      _id: 'userId',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: null,
+    },
+  },
+  group: {
+    _id: 'groupId1',
+    name: 'Group 1',
+  },
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+        },
+        orderBy: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership2, membership1],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+        },
+        orderBy: 'createdAt_ASC',
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: 'group',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: 'individual',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+          eventTitle: '1',
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    result: {
+      data: {
+        updateVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'rejected',
+      },
+    },
+    result: {
+      data: {
+        updateVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+        },
+      },
+    },
+    error: new Error('Mock Graphql USER_VOLUNTEER_MEMBERSHIP Error'),
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    error: new Error('Mock Graphql UPDATE_VOLUNTEER_MEMBERSHIP Error'),
+  },
+];
+
+export const UPDATE_ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        where: {
+          userId: 'userId',
+          status: 'invited',
+          filter: null,
+        },
+      },
+    },
+    result: {
+      data: {
+        getVolunteerMembership: [membership1, membership2],
+      },
+    },
+  },
+  {
+    request: {
+      query: UPDATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        id: 'membershipId1',
+        status: 'accepted',
+      },
+    },
+    error: new Error('Mock Graphql UPDATE_VOLUNTEER_MEMBERSHIP Error'),
+  },
+];
diff --git a/src/screens/UserPortal/Volunteer/Invitations/Invitations.test.tsx b/src/screens/UserPortal/Volunteer/Invitations/Invitations.test.tsx
new file mode 100644
index 0000000000..2c0cafc6a9
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Invitations/Invitations.test.tsx
@@ -0,0 +1,303 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import Invitations from './Invitations';
+import type { ApolloLink } from '@apollo/client';
+import {
+  MOCKS,
+  EMPTY_MOCKS,
+  ERROR_MOCKS,
+  UPDATE_ERROR_MOCKS,
+} from './Invitations.mocks';
+import { toast } from 'react-toastify';
+import useLocalStorage from 'utils/useLocalstorage';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const link4 = new StaticMockLink(UPDATE_ERROR_MOCKS);
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.userVolunteer ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderInvitations = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/volunteer/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/user/volunteer/:orgId"
+                  element={<Invitations />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Invvitations Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    setItem('userId', null);
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/user/volunteer/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/user/volunteer/" element={<Invitations />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Invitations screen', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('Check Sorting Functionality', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    let sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+
+    // Sort by createdAt_DESC
+    fireEvent.click(sortBtn);
+    const createdAtDESC = await screen.findByTestId('createdAt_DESC');
+    expect(createdAtDESC).toBeInTheDocument();
+    fireEvent.click(createdAtDESC);
+
+    let inviteSubject = await screen.findAllByTestId('inviteSubject');
+    expect(inviteSubject[0]).toHaveTextContent(
+      'Invitation to join volunteer group',
+    );
+
+    // Sort by createdAt_ASC
+    sortBtn = await screen.findByTestId('sort');
+    expect(sortBtn).toBeInTheDocument();
+    fireEvent.click(sortBtn);
+    const createdAtASC = await screen.findByTestId('createdAt_ASC');
+    expect(createdAtASC).toBeInTheDocument();
+    fireEvent.click(createdAtASC);
+
+    inviteSubject = await screen.findAllByTestId('inviteSubject');
+    expect(inviteSubject[0]).toHaveTextContent(
+      'Invitation to volunteer for event',
+    );
+  });
+
+  it('Filter Invitations (all)', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    // Filter by All
+    const filter = await screen.findByTestId('filter');
+    expect(filter).toBeInTheDocument();
+
+    fireEvent.click(filter);
+    const filterAll = await screen.findByTestId('filterAll');
+    expect(filterAll).toBeInTheDocument();
+
+    fireEvent.click(filterAll);
+    const inviteSubject = await screen.findAllByTestId('inviteSubject');
+    expect(inviteSubject).toHaveLength(2);
+  });
+
+  it('Filter Invitations (group)', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    // Filter by All
+    const filter = await screen.findByTestId('filter');
+    expect(filter).toBeInTheDocument();
+
+    fireEvent.click(filter);
+    const filterGroup = await screen.findByTestId('filterGroup');
+    expect(filterGroup).toBeInTheDocument();
+
+    fireEvent.click(filterGroup);
+    const inviteSubject = await screen.findAllByTestId('inviteSubject');
+    expect(inviteSubject).toHaveLength(1);
+    expect(inviteSubject[0]).toHaveTextContent(
+      'Invitation to join volunteer group',
+    );
+  });
+
+  it('Filter Invitations (individual)', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    // Filter by All
+    const filter = await screen.findByTestId('filter');
+    expect(filter).toBeInTheDocument();
+
+    fireEvent.click(filter);
+    const filterIndividual = await screen.findByTestId('filterIndividual');
+    expect(filterIndividual).toBeInTheDocument();
+
+    fireEvent.click(filterIndividual);
+    const inviteSubject = await screen.findAllByTestId('inviteSubject');
+    expect(inviteSubject).toHaveLength(1);
+    expect(inviteSubject[0]).toHaveTextContent(
+      'Invitation to volunteer for event',
+    );
+  });
+
+  it('Search Invitations', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, '1');
+    await debounceWait();
+
+    await waitFor(() => {
+      const inviteSubject = screen.getAllByTestId('inviteSubject');
+      expect(inviteSubject).toHaveLength(1);
+      expect(inviteSubject[0]).toHaveTextContent(
+        'Invitation to volunteer for event',
+      );
+    });
+  });
+
+  it('should render screen with No Invitations', async () => {
+    renderInvitations(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noInvitations)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching invitations data', async () => {
+    renderInvitations(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Accept Invite', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const acceptBtn = await screen.findAllByTestId('acceptBtn');
+    expect(acceptBtn).toHaveLength(2);
+
+    // Accept Request
+    userEvent.click(acceptBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.invitationAccepted);
+    });
+  });
+
+  it('Reject Invite', async () => {
+    renderInvitations(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const rejectBtn = await screen.findAllByTestId('rejectBtn');
+    expect(rejectBtn).toHaveLength(2);
+
+    // Reject Request
+    userEvent.click(rejectBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.invitationRejected);
+    });
+  });
+
+  it('Error in Update Invite Mutation', async () => {
+    renderInvitations(link4);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const acceptBtn = await screen.findAllByTestId('acceptBtn');
+    expect(acceptBtn).toHaveLength(2);
+
+    // Accept Request
+    userEvent.click(acceptBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx b/src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx
new file mode 100644
index 0000000000..a79b64251d
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/Invitations/Invitations.tsx
@@ -0,0 +1,297 @@
+import React, { useMemo, useState } from 'react';
+import { Dropdown, Form, Button } from 'react-bootstrap';
+import styles from '../VolunteerManagement.module.css';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useParams } from 'react-router-dom';
+import {
+  FilterAltOutlined,
+  Search,
+  Sort,
+  WarningAmberRounded,
+} from '@mui/icons-material';
+import { TbCalendarEvent } from 'react-icons/tb';
+import { FaUserGroup } from 'react-icons/fa6';
+import { debounce, Stack } from '@mui/material';
+
+import useLocalStorage from 'utils/useLocalstorage';
+import { useMutation, useQuery } from '@apollo/client';
+import type { InterfaceVolunteerMembership } from 'utils/interfaces';
+import { FaRegClock } from 'react-icons/fa';
+import Loader from 'components/Loader/Loader';
+import { USER_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Queries/EventVolunteerQueries';
+import { UPDATE_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Mutations/EventVolunteerMutation';
+import { toast } from 'react-toastify';
+
+enum ItemFilter {
+  Group = 'group',
+  Individual = 'individual',
+}
+
+/**
+ * The `Invitations` component displays list of invites for the user to volunteer.
+ * It allows the user to search, sort, and accept/reject invites.
+ *
+ * @returns The rendered component displaying the upcoming events.
+ */
+const Invitations = (): JSX.Element => {
+  // Retrieves translation functions for various namespaces
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userVolunteer',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Retrieves stored user ID from local storage
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  // Extracts organization ID from the URL parameters
+  const { orgId } = useParams();
+  if (!orgId || !userId) {
+    // Redirects to the homepage if orgId or userId is missing
+    return <Navigate to={'/'} replace />;
+  }
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [filter, setFilter] = useState<ItemFilter | null>(null);
+  const [sortBy, setSortBy] = useState<
+    'createdAt_ASC' | 'createdAt_DESC' | null
+  >(null);
+
+  const [updateMembership] = useMutation(UPDATE_VOLUNTEER_MEMBERSHIP);
+
+  const updateMembershipStatus = async (
+    id: string,
+    status: 'accepted' | 'rejected',
+  ): Promise<void> => {
+    try {
+      await updateMembership({
+        variables: {
+          id: id,
+          status: status,
+        },
+      });
+      toast.success(
+        t(
+          status === 'accepted' ? 'invitationAccepted' : 'invitationRejected',
+        ) as string,
+      );
+      refetchInvitations();
+    } catch (error: unknown) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  const {
+    data: invitationData,
+    loading: invitationLoading,
+    error: invitationError,
+    refetch: refetchInvitations,
+  }: {
+    data?: {
+      getVolunteerMembership: InterfaceVolunteerMembership[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(USER_VOLUNTEER_MEMBERSHIP, {
+    variables: {
+      where: {
+        userId: userId,
+        status: 'invited',
+        filter: filter,
+        eventTitle: searchTerm ? searchTerm : undefined,
+      },
+      orderBy: sortBy ? sortBy : undefined,
+    },
+  });
+
+  const invitations = useMemo(() => {
+    if (!invitationData) return [];
+    return invitationData.getVolunteerMembership;
+  }, [invitationData]);
+
+  // loads the invitations when the component mounts
+  if (invitationLoading) return <Loader size="xl" />;
+  if (invitationError) {
+    // Displays an error message if there is an issue loading the invvitations
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {tErrors('errorLoading', { entity: 'Volunteership Invitations' })}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  // Renders the invitations list and UI elements for searching, sorting, and accepting/rejecting invites
+  return (
+    <>
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        {/* Search input field and button */}
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={t('searchByEventName')}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center`}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <div className="d-flex gap-3 justify-space-between">
+            {/* Dropdown menu for sorting invitations */}
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                className={styles.dropdown}
+                data-testid="sort"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('sort')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_DESC')}
+                  data-testid="createdAt_DESC"
+                >
+                  {t('receivedLatest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSortBy('createdAt_ASC')}
+                  data-testid="createdAt_ASC"
+                >
+                  {t('receivedEarliest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="filter"
+              >
+                <FilterAltOutlined className={'me-1'} />
+                {t('filter')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setFilter(null)}
+                  data-testid="filterAll"
+                >
+                  {tCommon('all')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setFilter(ItemFilter.Group)}
+                  data-testid="filterGroup"
+                >
+                  {t('groupInvite')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setFilter(ItemFilter.Individual)}
+                  data-testid="filterIndividual"
+                >
+                  {t('individualInvite')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+      {invitations.length < 1 ? (
+        <Stack height="100%" alignItems="center" justifyContent="center">
+          {/* Displayed if no invitations are found */}
+          {t('noInvitations')}
+        </Stack>
+      ) : (
+        invitations.map((invite: InterfaceVolunteerMembership) => (
+          <div
+            className="bg-white p-4  rounded shadow-sm d-flex justify-content-between mb-3"
+            key={invite._id}
+          >
+            <div className="d-flex flex-column gap-2">
+              <div className="fw-bold" data-testid="inviteSubject">
+                {invite.group ? (
+                  <>{t('groupInvitationSubject')}</>
+                ) : (
+                  <>{t('eventInvitationSubject')}</>
+                )}
+              </div>
+              <div className="d-flex gap-3">
+                {invite.group && (
+                  <>
+                    <div>
+                      <FaUserGroup className="mb-1 me-1" color="grey" />
+                      <span className="text-muted">Group:</span>{' '}
+                      <span>{invite.group.name} </span>
+                    </div>
+                    |
+                  </>
+                )}
+                <div>
+                  <TbCalendarEvent
+                    className="mb-1 me-1"
+                    color="grey"
+                    size={20}
+                  />
+                  <span className="text-muted">Event:</span>{' '}
+                  <span>{invite.event.title}</span>
+                </div>
+                |
+                <div>
+                  <FaRegClock className="mb-1 me-1" color="grey" />
+                  <span className="text-muted">Received:</span>{' '}
+                  {new Date(invite.createdAt).toLocaleString()}
+                </div>
+              </div>
+            </div>
+            <div className="d-flex gap-2">
+              <Button
+                variant="outline-success"
+                size="sm"
+                data-testid="acceptBtn"
+                onClick={() => updateMembershipStatus(invite._id, 'accepted')}
+              >
+                {t('accept')}
+              </Button>
+              <Button
+                variant="outline-danger"
+                size="sm"
+                data-testid="rejectBtn"
+                onClick={() => updateMembershipStatus(invite._id, 'rejected')}
+              >
+                {t('reject')}
+              </Button>
+            </div>
+          </div>
+        ))
+      )}
+    </>
+  );
+};
+
+export default Invitations;
diff --git a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.mocks.ts b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.mocks.ts
new file mode 100644
index 0000000000..ae00d52dbe
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.mocks.ts
@@ -0,0 +1,281 @@
+import { CREATE_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Mutations/EventVolunteerMutation';
+import { USER_EVENTS_VOLUNTEER } from 'GraphQl/Queries/PlugInQueries';
+
+const event1 = {
+  _id: 'eventId1',
+  title: 'Event 1',
+  startDate: '2044-10-30',
+  endDate: '2044-10-30',
+  location: 'Mumbai',
+  startTime: null,
+  endTime: null,
+  allDay: true,
+  recurring: true,
+  volunteerGroups: [
+    {
+      _id: 'groupId1',
+      name: 'Group 1',
+      volunteersRequired: null,
+      description: 'desc',
+      volunteers: [
+        {
+          _id: 'volunteerId1',
+        },
+        {
+          _id: 'volunteerId2',
+        },
+      ],
+    },
+  ],
+  volunteers: [
+    {
+      _id: 'volunteerId1',
+      user: {
+        _id: 'userId1',
+      },
+    },
+    {
+      _id: 'volunteerId2',
+      user: {
+        _id: 'userId2',
+      },
+    },
+  ],
+};
+
+const event2 = {
+  _id: 'eventId2',
+  title: 'Event 2',
+  startDate: '2044-10-31',
+  endDate: '2044-10-31',
+  location: 'Pune',
+  startTime: null,
+  endTime: null,
+  allDay: true,
+  recurring: false,
+  volunteerGroups: [
+    {
+      _id: 'groupId2',
+      name: 'Group 2',
+      volunteersRequired: null,
+      description: 'desc',
+      volunteers: [
+        {
+          _id: 'volunteerId3',
+        },
+      ],
+    },
+  ],
+  volunteers: [
+    {
+      _id: 'volunteerId3',
+      user: {
+        _id: 'userId3',
+      },
+    },
+  ],
+};
+
+const event3 = {
+  _id: 'eventId3',
+  title: 'Event 3',
+  startDate: '2044-10-31',
+  endDate: '2022-10-31',
+  location: 'Delhi',
+  startTime: null,
+  endTime: null,
+  description: 'desc',
+  allDay: true,
+  recurring: true,
+  volunteerGroups: [
+    {
+      _id: 'groupId3',
+      name: 'Group 3',
+      volunteersRequired: null,
+      description: 'desc',
+      volunteers: [
+        {
+          _id: 'userId',
+        },
+      ],
+    },
+  ],
+  volunteers: [
+    {
+      _id: 'volunteerId',
+      user: {
+        _id: 'userId',
+      },
+    },
+  ],
+};
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_EVENTS_VOLUNTEER,
+      variables: {
+        organization_id: 'orgId',
+        title_contains: '',
+        location_contains: '',
+        upcomingOnly: true,
+        first: null,
+        skip: null,
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [event1, event2, event3],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_EVENTS_VOLUNTEER,
+      variables: {
+        organization_id: 'orgId',
+        title_contains: '1',
+        location_contains: '',
+        upcomingOnly: true,
+        first: null,
+        skip: null,
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [event1],
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_EVENTS_VOLUNTEER,
+      variables: {
+        organization_id: 'orgId',
+        title_contains: '',
+        location_contains: 'M',
+        upcomingOnly: true,
+        first: null,
+        skip: null,
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [event1],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        data: {
+          event: 'eventId1',
+          group: null,
+          status: 'requested',
+          userId: 'userId',
+        },
+      },
+    },
+    result: {
+      data: {
+        createVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        data: {
+          event: 'eventId1',
+          group: 'groupId1',
+          status: 'requested',
+          userId: 'userId',
+        },
+      },
+    },
+    result: {
+      data: {
+        createVolunteerMembership: {
+          _id: 'membershipId1',
+        },
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: USER_EVENTS_VOLUNTEER,
+      variables: {
+        organization_id: 'orgId',
+        title_contains: '',
+        location_contains: '',
+        upcomingOnly: true,
+        first: null,
+        skip: null,
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [],
+      },
+    },
+  },
+];
+
+export const ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_EVENTS_VOLUNTEER,
+      variables: {
+        organization_id: 'orgId',
+        title_contains: '',
+        location_contains: '',
+        upcomingOnly: true,
+        first: null,
+        skip: null,
+      },
+    },
+    error: new Error('Mock Graphql USER_EVENTS_VOLUNTEER Error'),
+  },
+];
+
+export const CREATE_ERROR_MOCKS = [
+  {
+    request: {
+      query: USER_EVENTS_VOLUNTEER,
+      variables: {
+        organization_id: 'orgId',
+        title_contains: '',
+        location_contains: '',
+        upcomingOnly: true,
+        first: null,
+        skip: null,
+      },
+    },
+    result: {
+      data: {
+        eventsByOrganizationConnection: [event1, event2],
+      },
+    },
+  },
+  {
+    request: {
+      query: CREATE_VOLUNTEER_MEMBERSHIP,
+      variables: {
+        data: {
+          event: 'eventId1',
+          group: null,
+          status: 'requested',
+          userId: 'userId',
+        },
+      },
+    },
+    error: new Error('Mock Graphql CREATE_VOLUNTEER_MEMBERSHIP Error'),
+  },
+];
diff --git a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx
new file mode 100644
index 0000000000..43e0b15cdb
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.test.tsx
@@ -0,0 +1,224 @@
+import React, { act } from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18n from 'utils/i18nForTest';
+import UpcomingEvents from './UpcomingEvents';
+import type { ApolloLink } from '@apollo/client';
+import {
+  MOCKS,
+  EMPTY_MOCKS,
+  ERROR_MOCKS,
+  CREATE_ERROR_MOCKS,
+} from './UpcomingEvents.mocks';
+import { toast } from 'react-toastify';
+import useLocalStorage from 'utils/useLocalstorage';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+const link2 = new StaticMockLink(ERROR_MOCKS);
+const link3 = new StaticMockLink(EMPTY_MOCKS);
+const link4 = new StaticMockLink(CREATE_ERROR_MOCKS);
+
+const t = {
+  ...JSON.parse(
+    JSON.stringify(
+      i18n.getDataByLanguage('en')?.translation.userVolunteer ?? {},
+    ),
+  ),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
+  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
+};
+
+const debounceWait = async (ms = 300): Promise<void> => {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+};
+
+const renderUpcomingEvents = (link: ApolloLink): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link}>
+      <MemoryRouter initialEntries={['/user/volunteer/orgId']}>
+        <Provider store={store}>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/user/volunteer/:orgId"
+                  element={<UpcomingEvents />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </LocalizationProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Testing Upcoming Events Screen', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    setItem('userId', null);
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <MemoryRouter initialEntries={['/user/volunteer/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route path="/user/volunteer/" element={<UpcomingEvents />} />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  it('should render Upcoming Events screen', async () => {
+    renderUpcomingEvents(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('Search by event title', async () => {
+    renderUpcomingEvents(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByTitle = await screen.findByTestId('title');
+    expect(searchByTitle).toBeInTheDocument();
+    userEvent.click(searchByTitle);
+
+    userEvent.type(searchInput, '1');
+    await debounceWait();
+
+    const eventTitle = await screen.findAllByTestId('eventTitle');
+    expect(eventTitle[0]).toHaveTextContent('Event 1');
+  });
+
+  it('Search by event location on click of search button', async () => {
+    renderUpcomingEvents(link1);
+    const searchInput = await screen.findByTestId('searchBy');
+    expect(searchInput).toBeInTheDocument();
+
+    const searchToggle = await screen.findByTestId('searchByToggle');
+    expect(searchToggle).toBeInTheDocument();
+    userEvent.click(searchToggle);
+
+    const searchByLocation = await screen.findByTestId('location');
+    expect(searchByLocation).toBeInTheDocument();
+    userEvent.click(searchByLocation);
+
+    // Search by name on press of ENTER
+    userEvent.type(searchInput, 'M');
+    await debounceWait();
+
+    const eventTitle = await screen.findAllByTestId('eventTitle');
+    expect(eventTitle[0]).toHaveTextContent('Event 1');
+  });
+
+  it('should render screen with No Events', async () => {
+    renderUpcomingEvents(link3);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('searchBy')).toBeInTheDocument();
+      expect(screen.getByText(t.noEvents)).toBeInTheDocument();
+    });
+  });
+
+  it('Error while fetching Events data', async () => {
+    renderUpcomingEvents(link2);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('errorMsg')).toBeInTheDocument();
+    });
+  });
+
+  it('Click on Individual volunteer button', async () => {
+    renderUpcomingEvents(link1);
+
+    const volunteerBtn = await screen.findAllByTestId('volunteerBtn');
+    userEvent.click(volunteerBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerSuccess);
+    });
+  });
+
+  it('Join Volunteer Group', async () => {
+    renderUpcomingEvents(link1);
+
+    const eventTitle = await screen.findAllByTestId('eventTitle');
+    expect(eventTitle[0]).toHaveTextContent('Event 1');
+    userEvent.click(eventTitle[0]);
+
+    const joinGroupBtn = await screen.findAllByTestId('joinBtn');
+    expect(joinGroupBtn).toHaveLength(3);
+    userEvent.click(joinGroupBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith(t.volunteerSuccess);
+    });
+  });
+
+  it('Error on Create Volunteer Membership', async () => {
+    renderUpcomingEvents(link4);
+
+    const volunteerBtn = await screen.findAllByTestId('volunteerBtn');
+    userEvent.click(volunteerBtn[0]);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx
new file mode 100644
index 0000000000..bd61ca97e0
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/UpcomingEvents/UpcomingEvents.tsx
@@ -0,0 +1,377 @@
+import React, { useMemo, useState } from 'react';
+import { Dropdown, Form, Button } from 'react-bootstrap';
+import styles from '../VolunteerManagement.module.css';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useParams } from 'react-router-dom';
+import { IoLocationOutline } from 'react-icons/io5';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Chip,
+  Stack,
+  debounce,
+} from '@mui/material';
+import { Circle, Search, Sort, WarningAmberRounded } from '@mui/icons-material';
+
+import { GridExpandMoreIcon } from '@mui/x-data-grid';
+import useLocalStorage from 'utils/useLocalstorage';
+import { useMutation, useQuery } from '@apollo/client';
+import type { InterfaceUserEvents } from 'utils/interfaces';
+import { IoIosHand } from 'react-icons/io';
+import Loader from 'components/Loader/Loader';
+import { USER_EVENTS_VOLUNTEER } from 'GraphQl/Queries/PlugInQueries';
+import { CREATE_VOLUNTEER_MEMBERSHIP } from 'GraphQl/Mutations/EventVolunteerMutation';
+import { toast } from 'react-toastify';
+import { FaCheck } from 'react-icons/fa';
+
+/**
+ * The `UpcomingEvents` component displays list of upcoming events for the user to volunteer.
+ * It allows the user to search, sort, and volunteer for events/volunteer groups.
+ *
+ * @returns The rendered component displaying the upcoming events.
+ */
+const UpcomingEvents = (): JSX.Element => {
+  // Retrieves translation functions for various namespaces
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userVolunteer',
+  });
+  const { t: tCommon } = useTranslation('common');
+  const { t: tErrors } = useTranslation('errors');
+
+  // Retrieves stored user ID from local storage
+  const { getItem } = useLocalStorage();
+  const userId = getItem('userId');
+
+  // Extracts organization ID from the URL parameters
+  const { orgId } = useParams();
+  if (!orgId || !userId) {
+    // Redirects to the homepage if orgId or userId is missing
+    return <Navigate to={'/'} replace />;
+  }
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [searchBy, setSearchBy] = useState<'title' | 'location'>('title');
+
+  const [createVolunteerMembership] = useMutation(CREATE_VOLUNTEER_MEMBERSHIP);
+
+  const debouncedSearch = useMemo(
+    () => debounce((value: string) => setSearchTerm(value), 300),
+    [],
+  );
+
+  const handleVolunteer = async (
+    eventId: string,
+    group: string | null,
+    status: string,
+  ): Promise<void> => {
+    try {
+      await createVolunteerMembership({
+        variables: {
+          data: {
+            event: eventId,
+            group,
+            status,
+            userId,
+          },
+        },
+      });
+      toast.success(t('volunteerSuccess'));
+      refetchEvents();
+    } catch (error) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  // Fetches upcomin events based on the organization ID, search term, and sorting order
+  const {
+    data: eventsData,
+    loading: eventsLoading,
+    error: eventsError,
+    refetch: refetchEvents,
+  }: {
+    data?: {
+      eventsByOrganizationConnection: InterfaceUserEvents[];
+    };
+    loading: boolean;
+    error?: Error | undefined;
+    refetch: () => void;
+  } = useQuery(USER_EVENTS_VOLUNTEER, {
+    variables: {
+      organization_id: orgId,
+      title_contains: searchBy === 'title' ? searchTerm : '',
+      location_contains: searchBy === 'location' ? searchTerm : '',
+      upcomingOnly: true,
+      first: null,
+      skip: null,
+    },
+  });
+
+  // Extracts the list of upcoming events from the fetched data
+  const events = useMemo(() => {
+    if (eventsData) {
+      return eventsData.eventsByOrganizationConnection;
+    }
+    return [];
+  }, [eventsData]);
+
+  // Renders a loader while events are being fetched
+  if (eventsLoading) return <Loader size="xl" />;
+  if (eventsError) {
+    // Displays an error message if there is an issue loading the events
+    return (
+      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+        <div className={styles.message} data-testid="errorMsg">
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <h6 className="fw-bold text-danger text-center">
+            {tErrors('errorLoading', { entity: 'Events' })}
+          </h6>
+        </div>
+      </div>
+    );
+  }
+
+  // Renders the upcoming events list and UI elements for searching, sorting, and adding pledges
+  return (
+    <>
+      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
+        {/* Search input field and button */}
+        <div className={`${styles.input} mb-1`}>
+          <Form.Control
+            type="name"
+            placeholder={tCommon('searchBy', {
+              item: searchBy.charAt(0).toUpperCase() + searchBy.slice(1),
+            })}
+            autoComplete="off"
+            required
+            className={styles.inputField}
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              debouncedSearch(e.target.value);
+            }}
+            data-testid="searchBy"
+          />
+          <Button
+            tabIndex={-1}
+            className={`position-absolute z-10 bottom-0 end-0  d-flex justify-content-center align-items-center`}
+            data-testid="searchBtn"
+          >
+            <Search />
+          </Button>
+        </div>
+        <div className="d-flex gap-4 mb-1">
+          <div className="d-flex justify-space-between align-items-center gap-3">
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                className={styles.dropdown}
+                data-testid="searchByToggle"
+              >
+                <Sort className={'me-1'} />
+                {tCommon('searchBy', { item: '' })}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('title')}
+                  data-testid="title"
+                >
+                  {t('name')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={() => setSearchBy('location')}
+                  data-testid="location"
+                >
+                  {tCommon('location')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+      {events.length < 1 ? (
+        <Stack height="100%" alignItems="center" justifyContent="center">
+          {/* Displayed if no events are found */}
+          {t('noEvents')}
+        </Stack>
+      ) : (
+        events.map((event: InterfaceUserEvents, index: number) => {
+          const {
+            title,
+            description,
+            startDate,
+            endDate,
+            location,
+            volunteerGroups,
+            recurring,
+            _id,
+            volunteers,
+          } = event;
+          const isVolunteered = volunteers.some(
+            (volunteer) => volunteer.user._id === userId,
+          );
+          return (
+            <Accordion className="mt-3 rounded" key={_id}>
+              <AccordionSummary expandIcon={<GridExpandMoreIcon />}>
+                <div className={styles.accordionSummary}>
+                  <div
+                    className={styles.titleContainer}
+                    data-testid={`detailContainer${index + 1}`}
+                  >
+                    <div className="d-flex">
+                      <h3 data-testid="eventTitle">{title}</h3>
+                      {recurring && (
+                        <Chip
+                          icon={<Circle className={styles.chipIcon} />}
+                          label={t('recurring')}
+                          variant="outlined"
+                          color="primary"
+                          className={`${styles.chip} ${styles.active}`}
+                        />
+                      )}
+                    </div>
+
+                    <div className={`d-flex gap-4 ${styles.subContainer}`}>
+                      <span>
+                        {' '}
+                        <IoLocationOutline className="me-1 mb-1" />
+                        location: {location}
+                      </span>
+                      <span>Start Date: {startDate as unknown as string}</span>
+                      <span>End Date: {endDate as unknown as string}</span>
+                    </div>
+                  </div>
+                  <div className="d-flex gap-3">
+                    <Button
+                      variant={
+                        new Date(endDate) < new Date()
+                          ? 'outline-secondary'
+                          : 'outline-success'
+                      }
+                      data-testid="volunteerBtn"
+                      disabled={isVolunteered || new Date(endDate) < new Date()}
+                      onClick={() => handleVolunteer(_id, null, 'requested')}
+                    >
+                      {isVolunteered ? (
+                        <FaCheck className="me-1" />
+                      ) : (
+                        <IoIosHand className="me-1" size={21} />
+                      )}
+
+                      {t(isVolunteered ? 'volunteered' : 'volunteer')}
+                    </Button>
+                  </div>
+                </div>
+              </AccordionSummary>
+              <AccordionDetails className="d-flex gap-3 flex-column">
+                {
+                  /*istanbul ignore next*/
+                  description && (
+                    <div className="d-flex gap-3">
+                      <span>Description: </span>
+                      <span>{description}</span>
+                    </div>
+                  )
+                }
+                {volunteerGroups && volunteerGroups.length > 0 && (
+                  <Form.Group>
+                    <Form.Label
+                      className="fw-lighter ms-2 mb-2 "
+                      style={{
+                        fontSize: '1rem',
+                        color: 'grey',
+                      }}
+                    >
+                      Volunteer Groups:
+                    </Form.Label>
+
+                    <TableContainer
+                      component={Paper}
+                      variant="outlined"
+                      className={styles.modalTable}
+                    >
+                      <Table aria-label="group table">
+                        <TableHead>
+                          <TableRow>
+                            <TableCell className="fw-bold">Sr. No.</TableCell>
+                            <TableCell className="fw-bold">
+                              Group Name
+                            </TableCell>
+                            <TableCell className="fw-bold" align="center">
+                              No. of Members
+                            </TableCell>
+                            <TableCell className="fw-bold" align="center">
+                              Options
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {volunteerGroups.map((group, index) => {
+                            const { _id: gId, name, volunteers } = group;
+                            const hasJoined = volunteers.some(
+                              (volunteer) => volunteer._id === userId,
+                            );
+                            return (
+                              <TableRow
+                                key={gId}
+                                sx={{
+                                  '&:last-child td, &:last-child th': {
+                                    border: 0,
+                                  },
+                                }}
+                              >
+                                <TableCell component="th" scope="row">
+                                  {index + 1}
+                                </TableCell>
+                                <TableCell component="th" scope="row">
+                                  {name}
+                                </TableCell>
+                                <TableCell align="center">
+                                  {volunteers.length}
+                                </TableCell>
+                                <TableCell align="center">
+                                  <Button
+                                    variant={
+                                      new Date(endDate) < new Date()
+                                        ? 'outline-secondary'
+                                        : 'outline-success'
+                                    }
+                                    size="sm"
+                                    data-testid="joinBtn"
+                                    disabled={
+                                      hasJoined ||
+                                      new Date(endDate) < new Date()
+                                    }
+                                    onClick={() =>
+                                      handleVolunteer(_id, gId, 'requested')
+                                    }
+                                  >
+                                    {t(hasJoined ? 'joined' : 'join')}
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            );
+                          })}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  </Form.Group>
+                )}
+              </AccordionDetails>
+            </Accordion>
+          );
+        })
+      )}
+    </>
+  );
+};
+
+export default UpcomingEvents;
diff --git a/src/screens/UserPortal/Volunteer/VolunteerManagement.module.css b/src/screens/UserPortal/Volunteer/VolunteerManagement.module.css
new file mode 100644
index 0000000000..d3b2bbaa54
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/VolunteerManagement.module.css
@@ -0,0 +1,138 @@
+/* Upcoming Events Styles */
+.btnsContainer {
+  display: flex;
+  margin: 1.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+  background-color: white;
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.accordionSummary {
+  width: 100% !important;
+  padding-right: 0.75rem;
+  display: flex;
+  justify-content: space-between !important;
+  align-items: center;
+}
+
+.accordionSummary button {
+  height: 2.25rem;
+  padding-top: 0.35rem;
+}
+
+.accordionSummary button:hover {
+  background-color: #31bb6a50 !important;
+  color: #31bb6b !important;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.subContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.chipIcon {
+  height: 0.9rem !important;
+}
+
+.chip {
+  height: 1.5rem !important;
+  margin: 0.15rem 0 0 1.25rem;
+}
+
+.active {
+  background-color: #31bb6a50 !important;
+}
+
+.pending {
+  background-color: #ffd76950 !important;
+  color: #bb952bd0 !important;
+  border-color: #bb952bd0 !important;
+}
+
+.progress {
+  display: flex;
+  width: 45rem;
+}
+
+.progressBar {
+  margin: 0rem 0.75rem;
+  width: 100%;
+  font-size: 0.9rem;
+  height: 1.25rem;
+}
+
+/* Pledge Modal */
+
+.pledgeModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
diff --git a/src/screens/UserPortal/Volunteer/VolunteerManagement.test.tsx b/src/screens/UserPortal/Volunteer/VolunteerManagement.test.tsx
new file mode 100644
index 0000000000..65d2d082a7
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/VolunteerManagement.test.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import type { RenderResult } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'utils/i18nForTest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import VolunteerManagement from './VolunteerManagement';
+import userEvent from '@testing-library/user-event';
+import { MOCKS } from './UpcomingEvents/UpcomingEvents.mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import useLocalStorage from 'utils/useLocalstorage';
+const { setItem } = useLocalStorage();
+
+const link1 = new StaticMockLink(MOCKS);
+
+const renderVolunteerManagement = (): RenderResult => {
+  return render(
+    <MockedProvider addTypename={false} link={link1}>
+      <MemoryRouter initialEntries={['/user/volunteer/orgId']}>
+        <Provider store={store}>
+          <I18nextProvider i18n={i18n}>
+            <Routes>
+              <Route
+                path="/user/volunteer/:orgId"
+                element={<VolunteerManagement />}
+              />
+              <Route path="/" element={<div data-testid="paramsError" />} />
+              <Route
+                path="/user/organization/:orgId"
+                element={<div data-testid="orgHome" />}
+              />
+            </Routes>
+          </I18nextProvider>
+        </Provider>
+      </MemoryRouter>
+    </MockedProvider>,
+  );
+};
+
+describe('Volunteer Management', () => {
+  beforeAll(() => {
+    jest.mock('react-router-dom', () => ({
+      ...jest.requireActual('react-router-dom'),
+      useParams: () => ({ orgId: 'orgId' }),
+    }));
+  });
+
+  beforeEach(() => {
+    setItem('userId', 'userId');
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should redirect to fallback URL if URL params are undefined', async () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <MemoryRouter initialEntries={['/user/volunteer/']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18n}>
+              <Routes>
+                <Route
+                  path="/user/volunteer/"
+                  element={<VolunteerManagement />}
+                />
+                <Route
+                  path="/"
+                  element={<div data-testid="paramsError"></div>}
+                />
+              </Routes>
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('paramsError')).toBeInTheDocument();
+    });
+  });
+
+  test('Render Volunteer Management Screen', async () => {
+    renderVolunteerManagement();
+
+    const upcomingEventsTab = await screen.findByTestId('upcomingEventsTab');
+    expect(upcomingEventsTab).toBeInTheDocument();
+    expect(screen.getByTestId('invitationsBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('actionsBtn')).toBeInTheDocument();
+    expect(screen.getByTestId('groupsBtn')).toBeInTheDocument();
+  });
+
+  test('Testing back button navigation', async () => {
+    renderVolunteerManagement();
+
+    const backButton = await screen.findByTestId('backBtn');
+    userEvent.click(backButton);
+    await waitFor(() => {
+      const orgHome = screen.getByTestId('orgHome');
+      expect(orgHome).toBeInTheDocument();
+    });
+  });
+
+  test('Testing volunteer management tab switching', async () => {
+    renderVolunteerManagement();
+
+    const invitationsBtn = screen.getByTestId('invitationsBtn');
+    userEvent.click(invitationsBtn);
+
+    const invitationsTab = screen.getByTestId('invitationsTab');
+    expect(invitationsTab).toBeInTheDocument();
+
+    const actionsBtn = screen.getByTestId('actionsBtn');
+    userEvent.click(actionsBtn);
+
+    const actionsTab = screen.getByTestId('actionsTab');
+    expect(actionsTab).toBeInTheDocument();
+
+    const groupsBtn = screen.getByTestId('groupsBtn');
+    userEvent.click(groupsBtn);
+
+    const groupsTab = screen.getByTestId('groupsTab');
+    expect(groupsTab).toBeInTheDocument();
+  });
+});
diff --git a/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx b/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx
new file mode 100644
index 0000000000..87be9d7adc
--- /dev/null
+++ b/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx
@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { FaChevronLeft, FaTasks } from 'react-icons/fa';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown } from 'react-bootstrap';
+import { TbCalendarEvent } from 'react-icons/tb';
+import { FaRegEnvelopeOpen, FaUserGroup } from 'react-icons/fa6';
+import UpcomingEvents from './UpcomingEvents/UpcomingEvents';
+import Invitations from './Invitations/Invitations';
+import Actions from './Actions/Actions';
+import Groups from './Groups/Groups';
+
+/**
+ * List of tabs for the volunteer dashboard.
+ *
+ * Each tab is associated with an icon and value.
+ */
+const volunteerDashboardTabs: {
+  value: TabOptions;
+  icon: JSX.Element;
+}[] = [
+  {
+    value: 'upcomingEvents',
+    icon: <TbCalendarEvent size={21} className="me-1" />,
+  },
+  {
+    value: 'invitations',
+    icon: <FaRegEnvelopeOpen size={18} className="me-1" />,
+  },
+  {
+    value: 'actions',
+    icon: <FaTasks size={18} className="me-2" />,
+  },
+  {
+    value: 'groups',
+    icon: <FaUserGroup size={18} className="me-2" />,
+  },
+];
+
+/**
+ * Tab options for the volunteer management component.
+ */
+type TabOptions = 'upcomingEvents' | 'invitations' | 'actions' | 'groups';
+
+/**
+ * `VolunteerManagement` component handles the display and navigation of different event management sections.
+ *
+ * It provides a tabbed interface for:
+ * - Viewing upcoming events to volunteer
+ * - Managing volunteer requests
+ * - Managing volunteer invitations
+ * - Managing volunteer groups
+ *
+ * @returns JSX.Element - The `VolunteerManagement` component.
+ */
+const VolunteerManagement = (): JSX.Element => {
+  // Translation hook for internationalization
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'userVolunteer',
+  });
+
+  // Extract organization ID from URL parameters
+  const { orgId } = useParams();
+
+  if (!orgId) {
+    return <Navigate to={'/'} />;
+  }
+
+  // Hook for navigation
+  const navigate = useNavigate();
+
+  // State hook for managing the currently selected tab
+  const [tab, setTab] = useState<TabOptions>('upcomingEvents');
+
+  /**
+   * Renders a button for each tab with the appropriate icon and label.
+   *
+   * @param value - The tab value
+   * @param icon - The icon to display for the tab
+   * @returns JSX.Element - The rendered button component
+   */
+  const renderButton = ({
+    value,
+    icon,
+  }: {
+    value: TabOptions;
+    icon: React.ReactNode;
+  }): JSX.Element => {
+    const selected = tab === value;
+    const variant = selected ? 'success' : 'light';
+    const translatedText = t(value);
+
+    const className = selected
+      ? 'px-4 d-flex align-items-center rounded-3 shadow-sm'
+      : 'text-secondary bg-white px-4 d-flex align-items-center rounded-3 shadow-sm';
+    const props = {
+      variant,
+      className,
+      style: { height: '2.5rem' },
+      onClick: () => setTab(value),
+      'data-testid': `${value}Btn`,
+    };
+
+    return (
+      <Button key={value} {...props}>
+        {icon}
+        {translatedText}
+      </Button>
+    );
+  };
+
+  const handleBack = (): void => {
+    navigate(`/user/organization/${orgId}`);
+  };
+
+  return (
+    <div className="d-flex flex-column">
+      <Row className="mt-4">
+        <Col>
+          <div className="d-none d-md-flex gap-3">
+            <Button
+              size="sm"
+              variant="light"
+              className="d-flex text-secondary bg-white align-items-center px-3 shadow-sm rounded-3"
+            >
+              <FaChevronLeft
+                cursor={'pointer'}
+                data-testid="backBtn"
+                onClick={handleBack}
+              />
+            </Button>
+            {volunteerDashboardTabs.map(renderButton)}
+          </div>
+
+          <Dropdown
+            className="d-md-none"
+            data-testid="tabsDropdownContainer"
+            drop="down"
+          >
+            <Dropdown.Toggle
+              variant="success"
+              id="dropdown-basic"
+              data-testid="tabsDropdownToggle"
+            >
+              <span className="me-1">{t(tab)}</span>
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {/* Render dropdown items for each settings category */}
+              {volunteerDashboardTabs.map(({ value, icon }, index) => (
+                <Dropdown.Item
+                  key={index}
+                  onClick={
+                    /* istanbul ignore next */
+                    () => setTab(value)
+                  }
+                  className={`d-flex gap-2 ${tab === value && 'text-secondary'}`}
+                >
+                  {icon} {t(value)}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Col>
+
+        <Row className="mt-3">
+          <hr />
+        </Row>
+      </Row>
+
+      {/* Render content based on the selected settings category */}
+      {(() => {
+        switch (tab) {
+          case 'upcomingEvents':
+            return (
+              <div
+                data-testid="upcomingEventsTab"
+                // className="bg-white p-4 pt-2 rounded-4 shadow"
+              >
+                <UpcomingEvents />
+              </div>
+            );
+          case 'invitations':
+            return (
+              <div
+                data-testid="invitationsTab"
+                // className="bg-white p-4 pt-2 rounded-4 shadow"
+              >
+                <Invitations />
+              </div>
+            );
+          case 'actions':
+            return (
+              <div data-testid="actionsTab">
+                <Actions />
+              </div>
+            );
+          case 'groups':
+            return (
+              <div data-testid="groupsTab">
+                <Groups />
+              </div>
+            );
+        }
+      })()}
+    </div>
+  );
+};
+
+export default VolunteerManagement;
diff --git a/src/screens/Users/Users.module.css b/src/screens/Users/Users.module.css
new file mode 100644
index 0000000000..0750dba108
--- /dev/null
+++ b/src/screens/Users/Users.module.css
@@ -0,0 +1,95 @@
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .inputContainer {
+  flex: 1;
+  position: relative;
+}
+.btnsContainer .input {
+  width: 70%;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .inputContainer button {
+  width: 52px;
+}
+
+.listBox {
+  width: 100%;
+  flex: 1;
+}
+
+.notFound {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+  .btnsContainer .input {
+    width: 100%;
+  }
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
diff --git a/src/screens/Users/Users.test.tsx b/src/screens/Users/Users.test.tsx
new file mode 100644
index 0000000000..65558e6ea7
--- /dev/null
+++ b/src/screens/Users/Users.test.tsx
@@ -0,0 +1,778 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import 'jest-localstorage-mock';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import userEvent from '@testing-library/user-event';
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import Users from './Users';
+import { EMPTY_MOCKS, MOCKS, MOCKS2 } from './UsersMocks';
+import useLocalStorage from 'utils/useLocalstorage';
+
+import {
+  USER_LIST,
+  ORGANIZATION_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
+
+const { setItem, removeItem } = useLocalStorage();
+
+const MOCK_USERS = [
+  {
+    user: {
+      _id: 'user1',
+      firstName: 'John',
+      lastName: 'Doe',
+      image: null,
+      email: 'john@example.com',
+      createdAt: '20/06/2022',
+      registeredEvents: [],
+      membershipRequests: [],
+      organizationsBlockedBy: [
+        {
+          _id: 'xyz',
+          name: 'ABC',
+          image: null,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          createdAt: '20/06/2022',
+          creator: {
+            _id: '123',
+            firstName: 'John',
+            lastName: 'Doe',
+            image: null,
+            email: 'john@example.com',
+            createdAt: '20/06/2022',
+          },
+        },
+      ],
+      joinedOrganizations: [
+        {
+          _id: 'abc',
+          name: 'Joined Organization 1',
+          image: null,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          createdAt: '20/06/2022',
+          creator: {
+            _id: '123',
+            firstName: 'John',
+            lastName: 'Doe',
+            image: null,
+            email: 'john@example.com',
+            createdAt: '20/06/2022',
+          },
+        },
+      ],
+    },
+    appUserProfile: {
+      _id: 'user1',
+      adminFor: [
+        {
+          _id: '123',
+        },
+      ],
+      isSuperAdmin: true,
+      createdOrganizations: [],
+      createdEvents: [],
+      eventAdmin: [],
+    },
+  },
+  {
+    user: {
+      _id: 'user2',
+      firstName: 'Jane',
+      lastName: 'Doe',
+      image: null,
+      email: 'john@example.com',
+      createdAt: '21/06/2022',
+      registeredEvents: [],
+      membershipRequests: [],
+      organizationsBlockedBy: [
+        {
+          _id: '456',
+          name: 'ABC',
+          image: null,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          createdAt: '21/06/2022',
+          creator: {
+            _id: '123',
+            firstName: 'John',
+            lastName: 'Doe',
+            image: null,
+            email: 'john@example.com',
+            createdAt: '21/06/2022',
+          },
+        },
+      ],
+      joinedOrganizations: [
+        {
+          _id: '123',
+          name: 'Palisadoes',
+          image: null,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          createdAt: '21/06/2022',
+          creator: {
+            _id: '123',
+            firstName: 'John',
+            lastName: 'Doe',
+            image: null,
+            email: 'john@example.com',
+            createdAt: '21/06/2022',
+          },
+        },
+      ],
+    },
+    appUserProfile: {
+      _id: 'user2',
+      adminFor: [
+        {
+          _id: '123',
+        },
+      ],
+      isSuperAdmin: false,
+      createdOrganizations: [],
+      createdEvents: [],
+      eventAdmin: [],
+    },
+  },
+  {
+    user: {
+      _id: 'user3',
+      firstName: 'Jack',
+      lastName: 'Smith',
+      image: null,
+      email: 'jack@example.com',
+      createdAt: '19/06/2022',
+      registeredEvents: [],
+      membershipRequests: [],
+      organizationsBlockedBy: [
+        {
+          _id: 'xyz',
+          name: 'ABC',
+          image: null,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          createdAt: '19/06/2022',
+          creator: {
+            _id: '123',
+            firstName: 'Jack',
+            lastName: 'Smith',
+            image: null,
+            email: 'jack@example.com',
+            createdAt: '19/06/2022',
+          },
+        },
+      ],
+      joinedOrganizations: [
+        {
+          _id: 'abc',
+          name: 'Joined Organization 1',
+          image: null,
+          address: {
+            city: 'Kingston',
+            countryCode: 'JM',
+            dependentLocality: 'Sample Dependent Locality',
+            line1: '123 Jamaica Street',
+            line2: 'Apartment 456',
+            postalCode: 'JM12345',
+            sortingCode: 'ABC-123',
+            state: 'Kingston Parish',
+          },
+          createdAt: '19/06/2022',
+          creator: {
+            _id: '123',
+            firstName: 'Jack',
+            lastName: 'Smith',
+            image: null,
+            email: 'jack@example.com',
+            createdAt: '19/06/2022',
+          },
+        },
+      ],
+    },
+    appUserProfile: {
+      _id: 'user3',
+      adminFor: [],
+      isSuperAdmin: false,
+      createdOrganizations: [],
+      createdEvents: [],
+      eventAdmin: [],
+    },
+  },
+];
+
+const MOCKS_NEW = [
+  {
+    request: {
+      query: USER_LIST,
+      variables: {
+        first: 12,
+        skip: 0,
+        firstName_contains: '',
+        lastName_contains: '',
+        order: 'createdAt_DESC',
+      },
+    },
+    result: {
+      data: {
+        users: MOCK_USERS,
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [],
+      },
+    },
+  },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(EMPTY_MOCKS, true);
+const link3 = new StaticMockLink(MOCKS2, true);
+const link5 = new StaticMockLink(MOCKS_NEW, true);
+
+async function wait(ms = 1000): Promise<void> {
+  await act(() => {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  });
+}
+beforeEach(() => {
+  setItem('id', '123');
+  setItem('SuperAdmin', true);
+  setItem('FirstName', 'John');
+  setItem('AdminFor', [{ name: 'adi', _id: '1234', image: '' }]);
+  setItem('LastName', 'Doe');
+});
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('Testing Users screen', () => {
+  test('Component should be rendered properly', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByTestId('testcomp')).toBeInTheDocument();
+  });
+
+  test(`Component should be rendered properly when user is not superAdmin
+  and or userId does not exists in localstorage`, async () => {
+    setItem('AdminFor', ['123']);
+    removeItem('SuperAdmin');
+    await wait();
+    setItem('id', '');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test(`Component should be rendered properly when userId does not exists in localstorage`, async () => {
+    removeItem('AdminFor');
+    removeItem('SuperAdmin');
+    await wait();
+    removeItem('id');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('Component should be rendered properly when user is superAdmin', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+  });
+
+  test('Testing seach by name functionality', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    const searchBtn = screen.getByTestId('searchButton');
+    const search1 = 'John';
+    userEvent.type(screen.getByTestId(/searchByName/i), search1);
+    userEvent.click(searchBtn);
+    await wait();
+    expect(screen.queryByText(/not found/i)).not.toBeInTheDocument();
+
+    const search2 = 'Pete{backspace}{backspace}{backspace}{backspace}';
+    userEvent.type(screen.getByTestId(/searchByName/i), search2);
+
+    const search3 =
+      'John{backspace}{backspace}{backspace}{backspace}Sam{backspace}{backspace}{backspace}';
+    userEvent.type(screen.getByTestId(/searchByName/i), search3);
+
+    const search4 = 'Sam{backspace}{backspace}P{backspace}';
+    userEvent.type(screen.getByTestId(/searchByName/i), search4);
+
+    const search5 = 'Xe';
+    userEvent.type(screen.getByTestId(/searchByName/i), search5);
+    userEvent.clear(screen.getByTestId(/searchByName/i));
+    userEvent.type(screen.getByTestId(/searchByName/i), '');
+    userEvent.click(searchBtn);
+    await wait();
+  });
+
+  test('testing search not found', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link2}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <Users />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    const searchBtn = screen.getByTestId('searchButton');
+    const searchInput = screen.getByTestId(/searchByName/i);
+
+    await act(async () => {
+      // Clear the search input
+      userEvent.clear(searchInput);
+      // Search for a name that doesn't exist
+      userEvent.type(screen.getByTestId(/searchByName/i), 'NonexistentName');
+      userEvent.click(searchBtn);
+    });
+
+    expect(screen.queryByText(/No User Found/i)).toBeInTheDocument();
+  });
+
+  test('Testing User data is not present', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    expect(screen.getByText(/No User Found/i)).toBeTruthy();
+  });
+
+  test('Should render warning alert when there are no organizations', async () => {
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link2}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait(200);
+    expect(container.textContent).toMatch(
+      'Organizations not found, please create an organization through dashboard',
+    );
+  });
+
+  test('Should not render warning alert when there are organizations present', async () => {
+    const { container } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    expect(container.textContent).not.toMatch(
+      'Organizations not found, please create an organization through dashboard',
+    );
+  });
+
+  test('Testing filter functionality', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <Users />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    const searchInput = screen.getByTestId('filter');
+    expect(searchInput).toBeInTheDocument();
+
+    const inputText = screen.getByTestId('filterUsers');
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    const toggleText = screen.getByTestId('admin');
+
+    await act(async () => {
+      fireEvent.click(toggleText);
+    });
+
+    expect(searchInput).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    let toggleTite = screen.getByTestId('superAdmin');
+
+    await act(async () => {
+      fireEvent.click(toggleTite);
+    });
+
+    expect(searchInput).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    toggleTite = screen.getByTestId('user');
+
+    await act(async () => {
+      fireEvent.click(toggleTite);
+    });
+
+    expect(searchInput).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    toggleTite = screen.getByTestId('cancel');
+
+    await act(async () => {
+      fireEvent.click(toggleTite);
+    });
+
+    await wait();
+
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  test('check for rerendering', async () => {
+    const { rerender } = render(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait();
+    rerender(
+      <MockedProvider addTypename={false} link={link3}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+  });
+
+  test('should set hasMore to false if users length is less than perPageResult', async () => {
+    const link = new StaticMockLink(EMPTY_MOCKS, true);
+
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <ToastContainer />
+              <Users />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    await wait(200);
+
+    // Check if "No User Found" is displayed
+    expect(screen.getByText(/No User Found/i)).toBeInTheDocument();
+  });
+
+  test('should filter users correctly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider link={link5} addTypename={false}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <Users />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    const filterButton = screen.getByTestId('filterUsers');
+
+    await act(async () => {
+      fireEvent.click(filterButton);
+    });
+
+    const filterAdmin = screen.getByTestId('admin');
+
+    await act(async () => {
+      fireEvent.click(filterAdmin);
+    });
+
+    await wait();
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(filterButton);
+    });
+
+    const filterSuperAdmin = screen.getByTestId('superAdmin');
+
+    await act(async () => {
+      fireEvent.click(filterSuperAdmin);
+    });
+
+    await wait();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(filterButton);
+    });
+
+    const filterUser = screen.getByTestId('user');
+    await act(async () => {
+      fireEvent.click(filterUser);
+    });
+
+    await wait();
+    expect(screen.getByText('Jack Smith')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(filterButton);
+    });
+
+    const filterCancel = screen.getByTestId('cancel');
+
+    await act(async () => {
+      fireEvent.click(filterCancel);
+    });
+
+    await wait();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+    expect(screen.getByText('Jack Smith')).toBeInTheDocument();
+  });
+
+  test('Users should be sorted and filtered correctly', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider link={link5} addTypename={false}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <Users />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>,
+      );
+    });
+    await wait();
+
+    // Check if the sorting and filtering logic was applied correctly
+    const rows = screen.getAllByRole('row');
+
+    const firstRow = rows[1];
+    const secondRow = rows[2];
+
+    expect(firstRow).toHaveTextContent('John Doe');
+    expect(secondRow).toHaveTextContent('Jane Doe');
+
+    await wait();
+
+    const inputText = screen.getByTestId('sortUsers');
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    const toggleText = screen.getByTestId('oldest');
+
+    await act(async () => {
+      fireEvent.click(toggleText);
+      fireEvent.click(inputText);
+    });
+
+    const toggleTite = screen.getByTestId('newest');
+
+    await act(async () => {
+      fireEvent.click(toggleTite);
+    });
+
+    // Verify the users are sorted by oldest
+    await wait();
+
+    const displayedUsers = screen.getAllByRole('row');
+    expect(displayedUsers[1]).toHaveTextContent('John Doe'); // assuming User1 is the oldest
+    expect(displayedUsers[displayedUsers.length - 1]).toHaveTextContent(
+      'Jack Smith',
+    ); // assuming UserN is the newest
+
+    await wait();
+
+    await act(async () => {
+      fireEvent.click(inputText);
+    });
+
+    const toggleOld = screen.getByTestId('oldest');
+
+    await act(async () => {
+      fireEvent.click(toggleOld);
+      fireEvent.click(inputText);
+    });
+
+    const toggleNewest = screen.getByTestId('newest');
+    await act(async () => {
+      fireEvent.click(toggleNewest);
+    });
+  });
+});
diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx
new file mode 100644
index 0000000000..72acba5b5c
--- /dev/null
+++ b/src/screens/Users/Users.tsx
@@ -0,0 +1,480 @@
+import { useQuery } from '@apollo/client';
+import React, { useEffect, useState } from 'react';
+import { Dropdown, Form, Table } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+
+import { Search } from '@mui/icons-material';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SortIcon from '@mui/icons-material/Sort';
+import {
+  ORGANIZATION_CONNECTION_LIST,
+  USER_LIST,
+} from 'GraphQl/Queries/Queries';
+import TableLoader from 'components/TableLoader/TableLoader';
+import UsersTableItem from 'components/UsersTableItem/UsersTableItem';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import type { InterfaceQueryUserListItem } from 'utils/interfaces';
+import styles from './Users.module.css';
+import useLocalStorage from 'utils/useLocalstorage';
+import type { ApolloError } from '@apollo/client';
+/**
+ * The `Users` component is responsible for displaying a list of users in a paginated and sortable format.
+ * It supports search functionality, filtering, and sorting of users. The component integrates with GraphQL
+ * for fetching and managing user data and displays results with infinite scrolling.
+ *
+ * ## Features:
+ * - **Search:** Allows users to search for users by their first name.
+ * - **Sorting:** Provides options to sort users by creation date (newest or oldest).
+ * - **Filtering:** Enables filtering users based on their roles (admin, superadmin, user, etc.).
+ * - **Pagination:** Utilizes infinite scrolling to load more users as the user scrolls down.
+ *
+ * ## GraphQL Queries:
+ * - `USER_LIST`: Fetches a list of users with specified search, sorting, and pagination parameters.
+ * - `ORGANIZATION_CONNECTION_LIST`: Fetches a list of organizations to verify organization existence.
+ *
+ *
+ * ## Component State:
+ * - `isLoading`: Indicates whether the component is currently loading data.
+ * - `hasMore`: Indicates if there are more users to load.
+ * - `isLoadingMore`: Indicates if more users are currently being loaded.
+ * - `searchByName`: The current search query for user names.
+ * - `sortingOption`: The current sorting option (newest or oldest).
+ * - `filteringOption`: The current filtering option (admin, superadmin, user, cancel).
+ * - `displayedUsers`: The list of users currently displayed, filtered and sorted.
+ *
+ * ## Event Handlers:
+ * - `handleSearch`: Handles searching users by name and refetches the user list.
+ * - `handleSearchByEnter`: Handles search input when the Enter key is pressed.
+ * - `handleSearchByBtnClick`: Handles search input when the search button is clicked.
+ * - `resetAndRefetch`: Resets search and refetches the user list with default parameters.
+ * - `loadMoreUsers`: Loads more users when scrolling reaches the end of the list.
+ * - `handleSorting`: Updates sorting option and refetches the user list.
+ * - `handleFiltering`: Updates filtering option and refetches the user list.
+ *
+ * ## Rendering:
+ * - Displays a search input and button for searching users.
+ * - Provides dropdowns for sorting and filtering users.
+ * - Renders a table of users with infinite scrolling support.
+ * - Shows appropriate messages when no users are found or when search yields no results.
+ *
+ * @returns  The rendered `Users` component.
+ */
+const Users = (): JSX.Element => {
+  const { t } = useTranslation('translation', { keyPrefix: 'users' });
+  const { t: tCommon } = useTranslation('common');
+
+  document.title = t('title');
+
+  const { getItem } = useLocalStorage();
+
+  const perPageResult = 12;
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [searchByName, setSearchByName] = useState('');
+  const [sortingOption, setSortingOption] = useState('newest');
+  const [filteringOption, setFilteringOption] = useState('cancel');
+  const userType = getItem('SuperAdmin')
+    ? 'SUPERADMIN'
+    : getItem('AdminFor')
+      ? 'ADMIN'
+      : 'USER';
+  const loggedInUserId = getItem('id');
+
+  const {
+    data: usersData,
+    loading: loading,
+    fetchMore,
+    refetch: refetchUsers,
+  }: {
+    data?: { users: InterfaceQueryUserListItem[] };
+    loading: boolean;
+    fetchMore: any;
+    refetch: any;
+    error?: ApolloError;
+  } = useQuery(USER_LIST, {
+    variables: {
+      first: perPageResult,
+      skip: 0,
+      firstName_contains: '',
+      lastName_contains: '',
+      order: sortingOption === 'newest' ? 'createdAt_DESC' : 'createdAt_ASC',
+    },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  const { data: dataOrgs } = useQuery(ORGANIZATION_CONNECTION_LIST);
+  const [displayedUsers, setDisplayedUsers] = useState(usersData?.users || []);
+
+  // Manage loading more state
+  useEffect(() => {
+    if (!usersData) {
+      return;
+    }
+    if (usersData.users.length < perPageResult) {
+      setHasMore(false);
+    }
+    if (usersData && usersData.users) {
+      let newDisplayedUsers = sortUsers(usersData.users, sortingOption);
+      newDisplayedUsers = filterUsers(newDisplayedUsers, filteringOption);
+      setDisplayedUsers(newDisplayedUsers);
+    }
+  }, [usersData, sortingOption, filteringOption]);
+
+  // To clear the search when the component is unmounted
+  useEffect(() => {
+    return () => {
+      setSearchByName('');
+    };
+  }, []);
+
+  // Warn if there is no organization
+  useEffect(() => {
+    if (!dataOrgs) {
+      return;
+    }
+
+    if (dataOrgs.organizationsConnection.length === 0) {
+      toast.warning(t('noOrgError') as string);
+    }
+  }, [dataOrgs]);
+
+  // Send to orgList page if user is not superadmin
+  useEffect(() => {
+    if (userType != 'SUPERADMIN') {
+      window.location.assign('/orglist');
+    }
+  }, []);
+
+  // Manage the loading state
+  useEffect(() => {
+    if (loading && isLoadingMore == false) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [loading]);
+
+  const handleSearch = (value: string): void => {
+    setSearchByName(value);
+    if (value === '') {
+      resetAndRefetch();
+      return;
+    }
+    refetchUsers({
+      firstName_contains: value,
+      lastName_contains: '',
+      // Later on we can add several search and filter options
+    });
+    setHasMore(true);
+  };
+
+  const handleSearchByEnter = (e: any): void => {
+    if (e.key === 'Enter') {
+      const { value } = e.target;
+      handleSearch(value);
+    }
+  };
+
+  const handleSearchByBtnClick = (): void => {
+    const inputElement = document.getElementById(
+      'searchUsers',
+    ) as HTMLInputElement;
+    const inputValue = inputElement?.value || '';
+    handleSearch(inputValue);
+  };
+  /* istanbul ignore next */
+  const resetAndRefetch = (): void => {
+    refetchUsers({
+      first: perPageResult,
+      skip: 0,
+      firstName_contains: '',
+      lastName_contains: '',
+      order: sortingOption === 'newest' ? 'createdAt_DESC' : 'createdAt_ASC',
+    });
+    setHasMore(true);
+  };
+  /* istanbul ignore next */
+  const loadMoreUsers = (): void => {
+    setIsLoadingMore(true);
+    fetchMore({
+      variables: {
+        skip: usersData?.users.length || 0,
+        userType: 'ADMIN',
+        filter: searchByName,
+        order: sortingOption === 'newest' ? 'createdAt_DESC' : 'createdAt_ASC',
+      },
+      updateQuery: (
+        prev: { users: InterfaceQueryUserListItem[] } | undefined,
+        {
+          fetchMoreResult,
+        }: {
+          fetchMoreResult: { users: InterfaceQueryUserListItem[] } | undefined;
+        },
+      ): { users: InterfaceQueryUserListItem[] } | undefined => {
+        setIsLoadingMore(false);
+        if (!fetchMoreResult) return prev;
+        if (fetchMoreResult.users.length < perPageResult) {
+          setHasMore(false);
+        }
+        return {
+          users: [...(prev?.users || []), ...(fetchMoreResult.users || [])],
+        };
+      },
+    });
+  };
+
+  const handleSorting = (option: string): void => {
+    setDisplayedUsers([]);
+    setHasMore(true);
+    setSortingOption(option);
+  };
+
+  const sortUsers = (
+    allUsers: InterfaceQueryUserListItem[],
+    sortingOption: string,
+  ): InterfaceQueryUserListItem[] => {
+    const sortedUsers = [...allUsers];
+
+    if (sortingOption === 'newest') {
+      sortedUsers.sort(
+        (a, b) =>
+          new Date(b.user.createdAt).getTime() -
+          new Date(a.user.createdAt).getTime(),
+      );
+      return sortedUsers;
+    } else {
+      sortedUsers.sort(
+        (a, b) =>
+          new Date(a.user.createdAt).getTime() -
+          new Date(b.user.createdAt).getTime(),
+      );
+      return sortedUsers;
+    }
+  };
+
+  const handleFiltering = (option: string): void => {
+    setDisplayedUsers([]);
+    setFilteringOption(option);
+  };
+
+  const filterUsers = (
+    allUsers: InterfaceQueryUserListItem[],
+    filteringOption: string,
+  ): InterfaceQueryUserListItem[] => {
+    const filteredUsers = [...allUsers];
+
+    if (filteringOption === 'cancel') {
+      return filteredUsers;
+    } else if (filteringOption === 'user') {
+      const output = filteredUsers.filter((user) => {
+        return user.appUserProfile.adminFor.length === 0;
+      });
+      return output;
+    } else if (filteringOption === 'admin') {
+      const output = filteredUsers.filter((user) => {
+        return (
+          user.appUserProfile.isSuperAdmin === false &&
+          user.appUserProfile.adminFor.length !== 0
+        );
+      });
+      return output;
+    } else {
+      const output = filteredUsers.filter((user) => {
+        return user.appUserProfile.isSuperAdmin === true;
+      });
+      return output;
+    }
+  };
+
+  const headerTitles: string[] = [
+    '#',
+    tCommon('name'),
+    tCommon('email'),
+    t('joined_organizations'),
+    t('blocked_organizations'),
+  ];
+
+  return (
+    <>
+      {/* Buttons Container */}
+      <div className={styles.btnsContainer} data-testid="testcomp">
+        <div className={styles.inputContainer}>
+          <div
+            className={styles.input}
+            style={{
+              display: userType === 'SUPERADMIN' ? 'block' : 'none',
+            }}
+          >
+            <Form.Control
+              type="name"
+              id="searchUsers"
+              className="bg-white"
+              placeholder={t('enterName')}
+              data-testid="searchByName"
+              autoComplete="off"
+              required
+              onKeyUp={handleSearchByEnter}
+            />
+            <Button
+              tabIndex={-1}
+              className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+              data-testid="searchButton"
+              onClick={handleSearchByBtnClick}
+            >
+              <Search />
+            </Button>
+          </div>
+        </div>
+        <div className={styles.btnsBlock}>
+          <div className="d-flex">
+            <Dropdown
+              aria-expanded="false"
+              title="Sort Users"
+              data-testid="sort"
+            >
+              <Dropdown.Toggle variant="success" data-testid="sortUsers">
+                <SortIcon className={'me-1'} />
+                {sortingOption === 'newest' ? t('Newest') : t('Oldest')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  onClick={(): void => handleSorting('newest')}
+                  data-testid="newest"
+                >
+                  {t('Newest')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  onClick={(): void => handleSorting('oldest')}
+                  data-testid="oldest"
+                >
+                  {t('Oldest')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            <Dropdown
+              aria-expanded="false"
+              title="Filter organizations"
+              data-testid="filter"
+            >
+              <Dropdown.Toggle
+                variant="outline-success"
+                data-testid="filterUsers"
+              >
+                <FilterListIcon className={'me-1'} />
+                {tCommon('filter')}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  data-testid="admin"
+                  onClick={(): void => handleFiltering('admin')}
+                >
+                  {tCommon('admin')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  data-testid="superAdmin"
+                  onClick={(): void => handleFiltering('superAdmin')}
+                >
+                  {tCommon('superAdmin')}
+                </Dropdown.Item>
+
+                <Dropdown.Item
+                  data-testid="user"
+                  onClick={(): void => handleFiltering('user')}
+                >
+                  {tCommon('user')}
+                </Dropdown.Item>
+                <Dropdown.Item
+                  data-testid="cancel"
+                  onClick={(): void => handleFiltering('cancel')}
+                >
+                  {tCommon('cancel')}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+      {isLoading == false &&
+      usersData &&
+      displayedUsers.length === 0 &&
+      searchByName.length > 0 ? (
+        <div className={styles.notFound}>
+          <h4>
+            {tCommon('noResultsFoundFor')} &quot;{searchByName}&quot;
+          </h4>
+        </div>
+      ) : isLoading == false &&
+        usersData === undefined &&
+        displayedUsers.length === 0 ? (
+        <div className={styles.notFound}>
+          <h4>{t('noUserFound')}</h4>
+        </div>
+      ) : (
+        <div className={styles.listBox}>
+          {isLoading ? (
+            <TableLoader headerTitles={headerTitles} noOfRows={perPageResult} />
+          ) : (
+            <InfiniteScroll
+              dataLength={
+                /* istanbul ignore next */
+                displayedUsers.length ?? 0
+              }
+              next={loadMoreUsers}
+              loader={
+                <TableLoader
+                  noOfCols={headerTitles.length}
+                  noOfRows={perPageResult}
+                />
+              }
+              hasMore={hasMore}
+              className={styles.listBox}
+              data-testid="users-list"
+              endMessage={
+                <div className={'w-100 text-center my-4'}>
+                  <h5 className="m-0 ">{tCommon('endOfResults')}</h5>
+                </div>
+              }
+            >
+              <Table className="mb-0" responsive>
+                <thead>
+                  <tr>
+                    {headerTitles.map((title: string, index: number) => {
+                      return (
+                        <th key={index} scope="col">
+                          {title}
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+                <tbody>
+                  {usersData &&
+                    displayedUsers.map(
+                      (user: InterfaceQueryUserListItem, index: number) => {
+                        return (
+                          <UsersTableItem
+                            key={user.user._id}
+                            index={index}
+                            resetAndRefetch={resetAndRefetch}
+                            user={user}
+                            loggedInUserId={
+                              loggedInUserId ? loggedInUserId : ''
+                            }
+                          />
+                        );
+                      },
+                    )}
+                </tbody>
+              </Table>
+            </InfiniteScroll>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Users;
diff --git a/src/screens/Users/UsersMocks.ts b/src/screens/Users/UsersMocks.ts
new file mode 100644
index 0000000000..ff346a1c97
--- /dev/null
+++ b/src/screens/Users/UsersMocks.ts
@@ -0,0 +1,505 @@
+import {
+  ORGANIZATION_CONNECTION_LIST,
+  USER_LIST,
+  USER_ORGANIZATION_LIST,
+} from 'GraphQl/Queries/Queries';
+
+export const MOCKS = [
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { id: 'user1' },
+    },
+    result: {
+      data: {
+        user: {
+          firstName: 'John',
+          lastName: 'Doe',
+          image: '',
+          email: 'John_Does_Palasidoes@gmail.com',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_LIST,
+      variables: {
+        first: 12,
+        skip: 0,
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              _id: 'user1',
+              firstName: 'John',
+              lastName: 'Doe',
+              image: null,
+              email: 'john@example.com',
+              createdAt: '20/06/2022',
+              registeredEvents: [],
+              membershipRequests: [],
+              organizationsBlockedBy: [
+                {
+                  _id: 'xyz',
+                  name: 'ABC',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+              joinedOrganizations: [
+                {
+                  _id: 'abc',
+                  name: 'Joined Organization 1',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+            },
+            appUserProfile: {
+              _id: 'user1',
+              adminFor: [
+                {
+                  _id: '123',
+                },
+              ],
+              isSuperAdmin: true,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+            },
+          },
+          {
+            user: {
+              _id: 'user2',
+              firstName: 'Jane',
+              lastName: 'Doe',
+              image: null,
+              email: 'john@example.com',
+              createdAt: '20/06/2022',
+              registeredEvents: [],
+              membershipRequests: [],
+              organizationsBlockedBy: [
+                {
+                  _id: '456',
+                  name: 'ABC',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+              joinedOrganizations: [
+                {
+                  _id: '123',
+                  name: 'Palisadoes',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+            },
+            appUserProfile: {
+              _id: 'user2',
+              adminFor: [
+                {
+                  _id: '123',
+                },
+              ],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 123,
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+              {
+                _id: 'user2',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+              {
+                _id: 'user2',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const MOCKS2 = [
+  {
+    request: {
+      query: USER_ORGANIZATION_LIST,
+      variables: { id: 'user1' },
+    },
+    result: {
+      data: {
+        user: {
+          firstName: 'John',
+          lastName: 'Doe',
+          image: '',
+          email: 'John_Does_Palasidoes@gmail.com',
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: USER_LIST,
+      variables: {
+        first: 12,
+        skip: 0,
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [
+          {
+            user: {
+              _id: 'user1',
+              firstName: 'John',
+              lastName: 'Doe',
+              image: null,
+              email: 'john@example.com',
+              createdAt: '20/06/2022',
+              registeredEvents: [],
+              membershipRequests: [],
+              organizationsBlockedBy: [
+                {
+                  _id: 'xyz',
+                  name: 'ABC',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+              joinedOrganizations: [
+                {
+                  _id: 'abc',
+                  name: 'Joined Organization 1',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+            },
+            appUserProfile: {
+              _id: 'user1',
+              adminFor: [
+                {
+                  _id: '123',
+                },
+              ],
+              isSuperAdmin: true,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+            },
+          },
+          {
+            user: {
+              _id: 'user2',
+              firstName: 'Jane',
+              lastName: 'Doe',
+              image: null,
+              email: 'john@example.com',
+              createdAt: '20/06/2022',
+              registeredEvents: [],
+              membershipRequests: [],
+              organizationsBlockedBy: [
+                {
+                  _id: '456',
+                  name: 'ABC',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+              joinedOrganizations: [
+                {
+                  _id: '123',
+                  name: 'Palisadoes',
+                  image: null,
+                  address: {
+                    city: 'Kingston',
+                    countryCode: 'JM',
+                    dependentLocality: 'Sample Dependent Locality',
+                    line1: '123 Jamaica Street',
+                    line2: 'Apartment 456',
+                    postalCode: 'JM12345',
+                    sortingCode: 'ABC-123',
+                    state: 'Kingston Parish',
+                  },
+                  createdAt: '20/06/2022',
+                  creator: {
+                    _id: '123',
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    image: null,
+                    email: 'john@example.com',
+                    createdAt: '20/06/2022',
+                  },
+                },
+              ],
+            },
+            appUserProfile: {
+              _id: 'user2',
+              adminFor: [
+                {
+                  _id: '123',
+                },
+              ],
+              isSuperAdmin: false,
+              createdOrganizations: [],
+              createdEvents: [],
+              eventAdmin: [],
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [
+          {
+            _id: 123,
+            image: null,
+            creator: {
+              firstName: 'John',
+              lastName: 'Doe',
+            },
+            name: 'Palisadoes',
+            members: [
+              {
+                _id: 'user1',
+              },
+              {
+                _id: 'user2',
+              },
+            ],
+            admins: [
+              {
+                _id: 'user1',
+              },
+              {
+                _id: 'user2',
+              },
+            ],
+            createdAt: '09/11/2001',
+            address: {
+              city: 'Kingston',
+              countryCode: 'JM',
+              dependentLocality: 'Sample Dependent Locality',
+              line1: '123 Jamaica Street',
+              line2: 'Apartment 456',
+              postalCode: 'JM12345',
+              sortingCode: 'ABC-123',
+              state: 'Kingston Parish',
+            },
+          },
+        ],
+      },
+    },
+  },
+];
+
+export const EMPTY_MOCKS = [
+  {
+    request: {
+      query: USER_LIST,
+
+      variables: {
+        first: 12,
+        skip: 0,
+        firstName_contains: '',
+        lastName_contains: '',
+      },
+    },
+    result: {
+      data: {
+        users: [],
+      },
+    },
+  },
+  {
+    request: {
+      query: ORGANIZATION_CONNECTION_LIST,
+    },
+    result: {
+      data: {
+        organizationsConnection: [],
+      },
+    },
+  },
+];
diff --git a/src/setup/askForCustomPort/askForCustomPort.test.ts b/src/setup/askForCustomPort/askForCustomPort.test.ts
new file mode 100644
index 0000000000..0df6259ba1
--- /dev/null
+++ b/src/setup/askForCustomPort/askForCustomPort.test.ts
@@ -0,0 +1,24 @@
+import inquirer from 'inquirer';
+import { askForCustomPort } from './askForCustomPort';
+
+jest.mock('inquirer');
+
+describe('askForCustomPort', () => {
+  test('should return default port if user provides no input', async () => {
+    jest
+      .spyOn(inquirer, 'prompt')
+      .mockResolvedValueOnce({ customPort: '4321' });
+
+    const result = await askForCustomPort();
+    expect(result).toBe('4321');
+  });
+
+  test('should return user-provided port', async () => {
+    jest
+      .spyOn(inquirer, 'prompt')
+      .mockResolvedValueOnce({ customPort: '8080' });
+
+    const result = await askForCustomPort();
+    expect(result).toBe('8080');
+  });
+});
diff --git a/src/setup/askForCustomPort/askForCustomPort.ts b/src/setup/askForCustomPort/askForCustomPort.ts
new file mode 100644
index 0000000000..8a923f678f
--- /dev/null
+++ b/src/setup/askForCustomPort/askForCustomPort.ts
@@ -0,0 +1,14 @@
+import inquirer from 'inquirer';
+
+export async function askForCustomPort(): Promise<number> {
+  const { customPort } = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'customPort',
+      message:
+        'Enter custom port for development server (leave blank for default 4321):',
+      default: 4321,
+    },
+  ]);
+  return customPort;
+}
diff --git a/src/setup/askForTalawaApiUrl/askForTalawaApiUrl.test.ts b/src/setup/askForTalawaApiUrl/askForTalawaApiUrl.test.ts
new file mode 100644
index 0000000000..b1490222b4
--- /dev/null
+++ b/src/setup/askForTalawaApiUrl/askForTalawaApiUrl.test.ts
@@ -0,0 +1,58 @@
+import inquirer from 'inquirer';
+import { askForTalawaApiUrl } from './askForTalawaApiUrl';
+
+jest.mock('inquirer', () => ({
+  prompt: jest.fn(),
+}));
+
+describe('askForTalawaApiUrl', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should return the provided endpoint when user enters it', async () => {
+    const mockPrompt = jest.spyOn(inquirer, 'prompt').mockResolvedValueOnce({
+      endpoint: 'http://example.com/graphql/',
+    });
+
+    const result = await askForTalawaApiUrl();
+
+    expect(mockPrompt).toHaveBeenCalledWith([
+      {
+        type: 'input',
+        name: 'endpoint',
+        message: 'Enter your talawa-api endpoint:',
+        default: 'http://localhost:4000/graphql/',
+      },
+    ]);
+
+    expect(result).toBe('http://example.com/graphql/');
+  });
+
+  test('should return the default endpoint when the user does not enter anything', async () => {
+    const mockPrompt = jest
+      .spyOn(inquirer, 'prompt')
+      .mockImplementation(async (questions: any) => {
+        const answers: Record<string, string | undefined> = {};
+        questions.forEach(
+          (question: { name: string | number; default: any }) => {
+            answers[question.name] = question.default;
+          },
+        );
+        return answers;
+      });
+
+    const result = await askForTalawaApiUrl();
+
+    expect(mockPrompt).toHaveBeenCalledWith([
+      {
+        type: 'input',
+        name: 'endpoint',
+        message: 'Enter your talawa-api endpoint:',
+        default: 'http://localhost:4000/graphql/',
+      },
+    ]);
+
+    expect(result).toBe('http://localhost:4000/graphql/');
+  });
+});
diff --git a/src/setup/askForTalawaApiUrl/askForTalawaApiUrl.ts b/src/setup/askForTalawaApiUrl/askForTalawaApiUrl.ts
new file mode 100644
index 0000000000..97daa1ac89
--- /dev/null
+++ b/src/setup/askForTalawaApiUrl/askForTalawaApiUrl.ts
@@ -0,0 +1,13 @@
+import inquirer from 'inquirer';
+
+export async function askForTalawaApiUrl(): Promise<string> {
+  const { endpoint } = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'endpoint',
+      message: 'Enter your talawa-api endpoint:',
+      default: 'http://localhost:4000/graphql/',
+    },
+  ]);
+  return endpoint;
+}
diff --git a/src/setup/askForTalawaApiUrl/setupTalawaWebSocketUrl.test.ts b/src/setup/askForTalawaApiUrl/setupTalawaWebSocketUrl.test.ts
new file mode 100644
index 0000000000..3fa612bd25
--- /dev/null
+++ b/src/setup/askForTalawaApiUrl/setupTalawaWebSocketUrl.test.ts
@@ -0,0 +1,38 @@
+import fs from 'fs';
+import inquirer from 'inquirer';
+import { askForTalawaApiUrl } from './askForTalawaApiUrl';
+
+jest.mock('fs');
+jest.mock('inquirer', () => ({
+  prompt: jest.fn(),
+}));
+
+describe('WebSocket URL Configuration', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should convert http URL to ws WebSocket URL', async () => {
+    const endpoint = 'http://example.com/graphql';
+    const websocketUrl = endpoint.replace(/^http(s)?:\/\//, 'ws$1://');
+
+    expect(websocketUrl).toBe('ws://example.com/graphql');
+  });
+
+  test('should convert https URL to wss WebSocket URL', async () => {
+    const endpoint = 'https://example.com/graphql';
+    const websocketUrl = endpoint.replace(/^http(s)?:\/\//, 'ws$1://');
+
+    expect(websocketUrl).toBe('wss://example.com/graphql');
+  });
+
+  test('should retain default WebSocket URL if no new endpoint is provided', async () => {
+    jest
+      .spyOn(inquirer, 'prompt')
+      .mockResolvedValueOnce({ endpoint: 'http://localhost:4000/graphql/' });
+    await askForTalawaApiUrl();
+
+    const writeFileSyncSpy = jest.spyOn(fs, 'writeFileSync');
+    expect(writeFileSyncSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/setup/checkConnection/checkConnection.test.ts b/src/setup/checkConnection/checkConnection.test.ts
new file mode 100644
index 0000000000..c6f5251bdf
--- /dev/null
+++ b/src/setup/checkConnection/checkConnection.test.ts
@@ -0,0 +1,55 @@
+import { checkConnection } from './checkConnection';
+
+jest.mock('node-fetch');
+
+global.fetch = jest.fn((url) => {
+  if (url === 'http://example.com/graphql/') {
+    const responseInit: ResponseInit = {
+      status: 200,
+      statusText: 'OK',
+      headers: new Headers({ 'Content-Type': 'application/json' }),
+    };
+    return Promise.resolve(new Response(JSON.stringify({}), responseInit));
+  } else {
+    const errorResponseInit: ResponseInit = {
+      status: 500,
+      statusText: 'Internal Server Error',
+      headers: new Headers({ 'Content-Type': 'text/plain' }),
+    };
+    return Promise.reject(new Response('Error', errorResponseInit));
+  }
+});
+
+describe('checkConnection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should return true and log success message if the connection is successful', async () => {
+    jest.spyOn(console, 'log').mockImplementation((string) => string);
+    const result = await checkConnection('http://example.com/graphql/');
+
+    expect(result).toBe(true);
+    expect(console.log).toHaveBeenCalledWith(
+      '\nChecking Talawa-API connection....',
+    );
+    expect(console.log).toHaveBeenCalledWith(
+      '\nConnection to Talawa-API successful! 🎉',
+    );
+  });
+
+  it('should return false and log error message if the connection fails', async () => {
+    jest.spyOn(console, 'log').mockImplementation((string) => string);
+    const result = await checkConnection(
+      'http://example_not_working.com/graphql/',
+    );
+
+    expect(result).toBe(false);
+    expect(console.log).toHaveBeenCalledWith(
+      '\nChecking Talawa-API connection....',
+    );
+    expect(console.log).toHaveBeenCalledWith(
+      '\nTalawa-API service is unavailable. Is it running? Check your network connectivity too.',
+    );
+  });
+});
diff --git a/src/setup/checkConnection/checkConnection.ts b/src/setup/checkConnection/checkConnection.ts
new file mode 100644
index 0000000000..601bea98ca
--- /dev/null
+++ b/src/setup/checkConnection/checkConnection.ts
@@ -0,0 +1,15 @@
+export async function checkConnection(url: string): Promise<any> {
+  console.log('\nChecking Talawa-API connection....');
+  let isConnected = false;
+  await fetch(url)
+    .then(() => {
+      isConnected = true;
+      console.log('\nConnection to Talawa-API successful! 🎉');
+    })
+    .catch(() => {
+      console.log(
+        '\nTalawa-API service is unavailable. Is it running? Check your network connectivity too.',
+      );
+    });
+  return isConnected;
+}
diff --git a/src/setup/checkEnvFile/checkEnvFile.test.ts b/src/setup/checkEnvFile/checkEnvFile.test.ts
new file mode 100644
index 0000000000..a23976db4a
--- /dev/null
+++ b/src/setup/checkEnvFile/checkEnvFile.test.ts
@@ -0,0 +1,47 @@
+import fs from 'fs';
+import { checkEnvFile } from './checkEnvFile';
+
+jest.mock('fs');
+
+describe('checkEnvFile', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should append missing keys to the .env file', () => {
+    const envContent = 'EXISTING_KEY=existing_value\n';
+    const envExampleContent =
+      'EXISTING_KEY=existing_value\nNEW_KEY=default_value\n';
+
+    jest
+      .spyOn(fs, 'readFileSync')
+      .mockReturnValueOnce(envContent)
+      .mockReturnValueOnce(envExampleContent)
+      .mockReturnValueOnce(envExampleContent);
+
+    jest.spyOn(fs, 'appendFileSync');
+
+    checkEnvFile();
+
+    expect(fs.appendFileSync).toHaveBeenCalledWith(
+      '.env',
+      'NEW_KEY=default_value\n',
+    );
+  });
+
+  it('should not append anything if all keys are present', () => {
+    const envContent = 'EXISTING_KEY=existing_value\n';
+    const envExampleContent = 'EXISTING_KEY=existing_value\n';
+
+    jest
+      .spyOn(fs, 'readFileSync')
+      .mockReturnValueOnce(envContent)
+      .mockReturnValueOnce(envExampleContent);
+
+    jest.spyOn(fs, 'appendFileSync');
+
+    checkEnvFile();
+
+    expect(fs.appendFileSync).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/setup/checkEnvFile/checkEnvFile.ts b/src/setup/checkEnvFile/checkEnvFile.ts
new file mode 100644
index 0000000000..420a7c1321
--- /dev/null
+++ b/src/setup/checkEnvFile/checkEnvFile.ts
@@ -0,0 +1,16 @@
+import dotenv from 'dotenv';
+import fs from 'fs';
+
+dotenv.config();
+
+export function checkEnvFile(): void {
+  const env = dotenv.parse(fs.readFileSync('.env'));
+  const envSample = dotenv.parse(fs.readFileSync('.env.example'));
+  const misplaced = Object.keys(envSample).filter((key) => !(key in env));
+  if (misplaced.length > 0) {
+    const config = dotenv.parse(fs.readFileSync('.env.example'));
+    misplaced.map((key) =>
+      fs.appendFileSync('.env', `${key}=${config[key]}\n`),
+    );
+  }
+}
diff --git a/src/setup/validateRecaptcha/validateRecaptcha.test.ts b/src/setup/validateRecaptcha/validateRecaptcha.test.ts
new file mode 100644
index 0000000000..c77c9ed62b
--- /dev/null
+++ b/src/setup/validateRecaptcha/validateRecaptcha.test.ts
@@ -0,0 +1,23 @@
+import { validateRecaptcha } from './validateRecaptcha';
+
+describe('validateRecaptcha', () => {
+  it('should return true for a valid Recaptcha string', () => {
+    const validRecaptcha = 'ss7BEe32HPoDKTPXQevFkVvpvPzGebE2kIRv1ok4';
+    expect(validateRecaptcha(validRecaptcha)).toBe(true);
+  });
+
+  it('should return false for an invalid Recaptcha string with special characters', () => {
+    const invalidRecaptcha = 'invalid@recaptcha!';
+    expect(validateRecaptcha(invalidRecaptcha)).toBe(false);
+  });
+
+  it('should return false for an invalid Recaptcha string with incorrect length', () => {
+    const invalidRecaptcha = 'shortstring';
+    expect(validateRecaptcha(invalidRecaptcha)).toBe(false);
+  });
+
+  it('should return false for an invalid Recaptcha string with spaces', () => {
+    const invalidRecaptcha = 'invalid recaptcha string';
+    expect(validateRecaptcha(invalidRecaptcha)).toBe(false);
+  });
+});
diff --git a/src/setup/validateRecaptcha/validateRecaptcha.ts b/src/setup/validateRecaptcha/validateRecaptcha.ts
new file mode 100644
index 0000000000..dcefb860fe
--- /dev/null
+++ b/src/setup/validateRecaptcha/validateRecaptcha.ts
@@ -0,0 +1,4 @@
+export function validateRecaptcha(string: string): boolean {
+  const pattern = /^[a-zA-Z0-9_-]{40}$/;
+  return pattern.test(string);
+}
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 8f2609b7b3..eac7093309 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -3,3 +3,33 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+global.fetch = jest.fn();
+
+import { format } from 'util';
+
+global.console.error = function (...args): void {
+  throw new Error(format(...args));
+};
+
+global.console.warn = function (...args): void {
+  throw new Error(format(...args));
+};
+Object.defineProperty(HTMLMediaElement.prototype, 'muted', {
+  set: () => ({}),
+});
+
+import { jestPreviewConfigure } from 'jest-preview';
+
+// Global CSS here
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.min.js';
+import 'react-datepicker/dist/react-datepicker.css';
+import 'flag-icons/css/flag-icons.min.css';
+
+jestPreviewConfigure({
+  // Opt-in to automatic mode to preview failed test case automatically.
+  autoPreview: true,
+});
+
+jest.setTimeout(15000);
diff --git a/src/state/action-creators/index.test.ts b/src/state/action-creators/index.test.ts
new file mode 100644
index 0000000000..33aa642b8a
--- /dev/null
+++ b/src/state/action-creators/index.test.ts
@@ -0,0 +1,47 @@
+import {
+  updateInstalled,
+  installPlugin,
+  removePlugin,
+  updatePluginLinks,
+} from './index';
+describe('Testing rc/state/action-creators/index.ts', () => {
+  test('updateInstalled Should call the dispatch function provided', () => {
+    //checking if the updateInstalled returns a valid function or not
+    const temp = updateInstalled('testPlug');
+    expect(typeof temp).toBe('function');
+    //stubbing the childfunction to check execution
+    const childFunction = jest.fn();
+    temp(childFunction);
+    expect(childFunction).toHaveBeenCalled();
+  });
+
+  test('installPlugin Should call the dispatch function provided', () => {
+    //checking if the installPlugin returns a valid function or not
+    const temp = installPlugin('testPlug');
+    expect(typeof temp).toBe('function');
+    //stubbing the childfunction to check execution
+    const childFunction = jest.fn();
+    temp(childFunction);
+    expect(childFunction).toHaveBeenCalled();
+  });
+
+  test('removePlugin Should call the dispatch function provided', () => {
+    //checking if the removePlugin returns a valid function or not
+    const temp = removePlugin('testPlug');
+    expect(typeof temp).toBe('function');
+    //stubbing the childfunction to check execution
+    const childFunction = jest.fn();
+    temp(childFunction);
+    expect(childFunction).toHaveBeenCalled();
+  });
+
+  test('updatePluginLinks Should call the dispatch function provided', () => {
+    //checking if the updatePluginLinks returns a valid function or not
+    const temp = updatePluginLinks('testPlug');
+    expect(typeof temp).toBe('function');
+    //stubbing the childfunction to check execution
+    const childFunction = jest.fn();
+    temp(childFunction);
+    expect(childFunction).toHaveBeenCalled();
+  });
+});
diff --git a/src/state/action-creators/index.ts b/src/state/action-creators/index.ts
new file mode 100644
index 0000000000..7fb06971c5
--- /dev/null
+++ b/src/state/action-creators/index.ts
@@ -0,0 +1,44 @@
+export const updateInstalled = (plugin: any) => {
+  return (dispatch: any): void => {
+    dispatch({
+      type: 'UPDATE_INSTALLED',
+      payload: plugin,
+    });
+  };
+};
+
+export const installPlugin = (plugin: any) => {
+  return (dispatch: any): void => {
+    dispatch({
+      type: 'INSTALL_PLUGIN',
+      payload: plugin,
+    });
+  };
+};
+
+export const removePlugin = (plugin: any) => {
+  return (dispatch: any): void => {
+    dispatch({
+      type: 'REMOVE_PLUGIN',
+      payload: plugin,
+    });
+  };
+};
+
+export const updatePluginLinks = (plugins: any) => {
+  return (dispatch: any): void => {
+    dispatch({
+      type: 'UPDATE_P_TARGETS',
+      payload: plugins,
+    });
+  };
+};
+
+export const updateTargets = (orgId: string | undefined) => {
+  return (dispatch: any): void => {
+    dispatch({
+      type: 'UPDATE_TARGETS',
+      payload: orgId,
+    });
+  };
+};
diff --git a/src/state/helpers/Action.test.ts b/src/state/helpers/Action.test.ts
new file mode 100644
index 0000000000..a971c6c160
--- /dev/null
+++ b/src/state/helpers/Action.test.ts
@@ -0,0 +1,8 @@
+import type { InterfaceAction } from './Action';
+
+test('Testing Reducer Action Interface', () => {
+  ({
+    type: 'STRING_ACTION_TYPE',
+    payload: 'ANY_PAYLOAD',
+  }) as InterfaceAction;
+});
diff --git a/src/state/helpers/Action.ts b/src/state/helpers/Action.ts
new file mode 100644
index 0000000000..469612441f
--- /dev/null
+++ b/src/state/helpers/Action.ts
@@ -0,0 +1,4 @@
+export interface InterfaceAction {
+  type: string;
+  payload: any;
+}
diff --git a/src/state/hooks.ts b/src/state/hooks.ts
new file mode 100644
index 0000000000..161703cc49
--- /dev/null
+++ b/src/state/hooks.ts
@@ -0,0 +1,5 @@
+import { useDispatch } from 'react-redux';
+import type { AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
diff --git a/src/state/index.ts b/src/state/index.ts
new file mode 100644
index 0000000000..f35a3d6d46
--- /dev/null
+++ b/src/state/index.ts
@@ -0,0 +1 @@
+export * as actionCreators from './action-creators/index';
diff --git a/src/state/reducers/index.ts b/src/state/reducers/index.ts
new file mode 100644
index 0000000000..ca2b2b28ee
--- /dev/null
+++ b/src/state/reducers/index.ts
@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux';
+import routesReducer from './routesReducer';
+import pluginReducer from './pluginReducer';
+import userRoutesReducer from './userRoutesReducer';
+
+export const reducers = combineReducers({
+  appRoutes: routesReducer,
+  plugins: pluginReducer,
+  userRoutes: userRoutesReducer,
+});
+
+export type RootState = ReturnType<typeof reducers>;
diff --git a/src/state/reducers/pluginReducer.test.ts b/src/state/reducers/pluginReducer.test.ts
new file mode 100644
index 0000000000..571345ce2f
--- /dev/null
+++ b/src/state/reducers/pluginReducer.test.ts
@@ -0,0 +1,102 @@
+import reducer from './pluginReducer';
+import expect from 'expect';
+
+describe('Testing Plugin Reducer', () => {
+  it('should return the initial state', () => {
+    expect(
+      reducer(undefined, {
+        type: '',
+        payload: undefined,
+      }),
+    ).toEqual({
+      installed: [],
+      addonStore: [],
+      extras: [],
+    });
+  });
+  it('should handle INSTALL_PLUGIN', () => {
+    expect(
+      reducer(
+        { installed: [], addonStore: [], extras: [] },
+        {
+          type: 'INSTALL_PLUGIN',
+          payload: { name: 'testplug' },
+        },
+      ),
+    ).toEqual({
+      installed: [{ name: 'testplug' }],
+      addonStore: [],
+      extras: [],
+    });
+  });
+  it('should handle REMOVE_PLUGIN', () => {
+    expect(
+      reducer(
+        {
+          installed: [
+            { name: 'testplug2', id: 3 },
+            { name: 'testplug3', id: 5 },
+          ],
+          addonStore: [],
+          extras: [],
+        },
+        {
+          type: 'REMOVE_PLUGIN',
+          payload: { id: 3 },
+        },
+      ),
+    ).toEqual({
+      installed: [{ name: 'testplug3', id: 5 }],
+      addonStore: [],
+      extras: [],
+    });
+  });
+  it('should handle UPDATE_INSTALLED', () => {
+    expect(
+      reducer(
+        { installed: [], addonStore: [], extras: [] },
+        {
+          type: 'UPDATE_INSTALLED',
+          //Here payload is expected to be as array
+          payload: [{ name: 'testplug-updated' }],
+        },
+      ),
+    ).toEqual({
+      installed: [{ name: 'testplug-updated' }],
+      addonStore: [],
+      extras: [],
+    });
+  });
+  it('should handle UPDATE_STORE', () => {
+    expect(
+      reducer(
+        { installed: [], addonStore: [], extras: [] },
+        {
+          type: 'UPDATE_STORE',
+          //Here payload is expected to be as array
+          payload: [{ name: 'sample-addon' }],
+        },
+      ),
+    ).toEqual({
+      installed: [],
+      addonStore: [{ name: 'sample-addon' }],
+      extras: [],
+    });
+  });
+  it('should handle UPDATE_EXTRAS', () => {
+    expect(
+      reducer(
+        { installed: [], addonStore: [], extras: [] },
+        {
+          type: 'UPDATE_EXTRAS',
+          //Here payload is expected to be as array
+          payload: [{ name: 'sample-addon-extra' }],
+        },
+      ),
+    ).toEqual({
+      installed: [],
+      addonStore: [{ name: 'sample-addon-extra' }],
+      extras: [],
+    });
+  });
+});
diff --git a/src/state/reducers/pluginReducer.ts b/src/state/reducers/pluginReducer.ts
new file mode 100644
index 0000000000..192c995182
--- /dev/null
+++ b/src/state/reducers/pluginReducer.ts
@@ -0,0 +1,43 @@
+import type { InterfaceAction } from 'state/helpers/Action';
+
+const reducer = (
+  state = INITIAL_STATE,
+  action: InterfaceAction,
+): typeof INITIAL_STATE => {
+  switch (action.type) {
+    case 'UPDATE_INSTALLED':
+      return Object.assign({}, state, {
+        installed: [...action.payload],
+      });
+    case 'INSTALL_PLUGIN':
+      return Object.assign({}, state, {
+        installed: [...state.installed, action.payload],
+      });
+    case 'REMOVE_PLUGIN':
+      return Object.assign({}, state, {
+        installed: [
+          ...state.installed.filter(
+            (plugin: any) => plugin.id !== action.payload.id,
+          ),
+        ],
+      });
+    case 'UPDATE_STORE':
+      return Object.assign({}, state, {
+        addonStore: [...action.payload],
+      });
+    case 'UPDATE_EXTRAS':
+      return Object.assign({}, state, {
+        addonStore: [...action.payload],
+      });
+    default:
+      return state;
+  }
+};
+
+const INITIAL_STATE: any = {
+  installed: [],
+  addonStore: [],
+  extras: [],
+};
+
+export default reducer;
diff --git a/src/state/reducers/routesReducer.test.ts b/src/state/reducers/routesReducer.test.ts
new file mode 100644
index 0000000000..8bdc1c069b
--- /dev/null
+++ b/src/state/reducers/routesReducer.test.ts
@@ -0,0 +1,333 @@
+import expect from 'expect';
+import reducer from './routesReducer';
+
+describe('Testing Routes reducer', () => {
+  it('should return the initial state', () => {
+    expect(
+      reducer(undefined, {
+        type: '',
+        payload: undefined,
+      }),
+    ).toEqual({
+      targets: [
+        { name: 'My Organizations', url: '/orglist' },
+        { name: 'Dashboard', url: '/orgdash/undefined' },
+        { name: 'People', url: '/orgpeople/undefined' },
+        { name: 'Tags', url: '/orgtags/undefined' },
+        { name: 'Events', url: '/orgevents/undefined' },
+        { name: 'Venues', url: '/orgvenues/undefined' },
+        { name: 'Action Items', url: '/orgactionitems/undefined' },
+        { name: 'Posts', url: '/orgpost/undefined' },
+        {
+          name: 'Block/Unblock',
+          url: '/blockuser/undefined',
+        },
+        { name: 'Advertisement', url: '/orgads/undefined' },
+        { name: 'Funds', url: '/orgfunds/undefined' },
+        { name: 'Membership Requests', url: '/requests/undefined' },
+        {
+          name: 'Plugins',
+          subTargets: [
+            {
+              icon: 'fa-store',
+              name: 'Plugin Store',
+              url: '/orgstore/undefined',
+            },
+          ],
+        },
+        { name: 'Settings', url: '/orgsetting/undefined' },
+      ],
+      components: [
+        { name: 'My Organizations', comp_id: 'orglist', component: 'OrgList' },
+        {
+          name: 'Dashboard',
+          comp_id: 'orgdash',
+          component: 'OrganizationDashboard',
+        },
+        {
+          name: 'People',
+          comp_id: 'orgpeople',
+          component: 'OrganizationPeople',
+        },
+        {
+          name: 'Tags',
+          comp_id: 'orgtags',
+          component: 'OrganizationTags',
+        },
+        {
+          name: 'Events',
+          comp_id: 'orgevents',
+          component: 'OrganizationEvents',
+        },
+        {
+          name: 'Venues',
+          comp_id: 'orgvenues',
+          component: 'OrganizationVenues',
+        },
+        {
+          name: 'Action Items',
+          comp_id: 'orgactionitems',
+          component: 'OrganizationActionItems',
+        },
+        { name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
+        { name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
+        {
+          name: 'Advertisement',
+          comp_id: 'orgads',
+          component: 'Advertisements',
+        },
+        {
+          name: 'Funds',
+          comp_id: 'orgfunds',
+          component: 'OrganizationFunds',
+        },
+        {
+          name: 'Membership Requests',
+          comp_id: 'requests',
+          component: 'Requests',
+        },
+        {
+          name: 'Plugins',
+          comp_id: null,
+          component: 'AddOnStore',
+          subTargets: [
+            {
+              comp_id: 'orgstore',
+              component: 'AddOnStore',
+              icon: 'fa-store',
+              name: 'Plugin Store',
+            },
+          ],
+        },
+        { name: 'Settings', comp_id: 'orgsetting', component: 'OrgSettings' },
+        { name: '', comp_id: 'member', component: 'MemberDetail' },
+      ],
+    });
+  });
+
+  it('should handle UPDATE_TARGETS', () => {
+    expect(
+      reducer(undefined, {
+        type: 'UPDATE_TARGETS',
+        payload: 'orgId',
+      }),
+    ).toEqual({
+      targets: [
+        { name: 'My Organizations', url: '/orglist' },
+        { name: 'Dashboard', url: '/orgdash/orgId' },
+        { name: 'People', url: '/orgpeople/orgId' },
+        { name: 'Tags', url: '/orgtags/orgId' },
+        { name: 'Events', url: '/orgevents/orgId' },
+        { name: 'Venues', url: '/orgvenues/orgId' },
+        { name: 'Action Items', url: '/orgactionitems/orgId' },
+        { name: 'Posts', url: '/orgpost/orgId' },
+        { name: 'Block/Unblock', url: '/blockuser/orgId' },
+        { name: 'Advertisement', url: '/orgads/orgId' },
+        { name: 'Funds', url: '/orgfunds/orgId' },
+        { name: 'Membership Requests', url: '/requests/orgId' },
+        {
+          name: 'Plugins',
+          subTargets: [
+            {
+              icon: 'fa-store',
+              name: 'Plugin Store',
+              url: '/orgstore/orgId',
+            },
+          ],
+        },
+        { name: 'Settings', url: '/orgsetting/orgId' },
+      ],
+      components: [
+        { name: 'My Organizations', comp_id: 'orglist', component: 'OrgList' },
+        {
+          name: 'Dashboard',
+          comp_id: 'orgdash',
+          component: 'OrganizationDashboard',
+        },
+        {
+          name: 'People',
+          comp_id: 'orgpeople',
+          component: 'OrganizationPeople',
+        },
+        {
+          name: 'Tags',
+          comp_id: 'orgtags',
+          component: 'OrganizationTags',
+        },
+        {
+          name: 'Events',
+          comp_id: 'orgevents',
+          component: 'OrganizationEvents',
+        },
+        {
+          name: 'Venues',
+          comp_id: 'orgvenues',
+          component: 'OrganizationVenues',
+        },
+        {
+          name: 'Action Items',
+          comp_id: 'orgactionitems',
+          component: 'OrganizationActionItems',
+        },
+        { name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
+        { name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
+        {
+          name: 'Advertisement',
+          comp_id: 'orgads',
+          component: 'Advertisements',
+        },
+        { name: 'Funds', comp_id: 'orgfunds', component: 'OrganizationFunds' },
+        {
+          name: 'Membership Requests',
+          comp_id: 'requests',
+          component: 'Requests',
+        },
+        {
+          name: 'Plugins',
+          comp_id: null,
+          component: 'AddOnStore',
+          subTargets: [
+            {
+              comp_id: 'orgstore',
+              component: 'AddOnStore',
+              icon: 'fa-store',
+              name: 'Plugin Store',
+            },
+          ],
+        },
+        { name: 'Settings', comp_id: 'orgsetting', component: 'OrgSettings' },
+        { name: '', comp_id: 'member', component: 'MemberDetail' },
+      ],
+    });
+  });
+
+  it('should handle UPDATE_P_TARGETS', () => {
+    expect(
+      reducer(undefined, {
+        type: 'UPDATE_P_TARGETS',
+        payload: [{ name: 'test-target-plugin', content: 'plugin-new' }],
+      }),
+    ).toEqual({
+      targets: [
+        { name: 'My Organizations', url: '/orglist' },
+        { name: 'Dashboard', url: '/orgdash/undefined' },
+        { name: 'People', url: '/orgpeople/undefined' },
+        { name: 'Tags', url: '/orgtags/undefined' },
+        { name: 'Events', url: '/orgevents/undefined' },
+        { name: 'Venues', url: '/orgvenues/undefined' },
+        { name: 'Action Items', url: '/orgactionitems/undefined' },
+        { name: 'Posts', url: '/orgpost/undefined' },
+        {
+          name: 'Block/Unblock',
+          url: '/blockuser/undefined',
+        },
+        { name: 'Advertisement', url: '/orgads/undefined' },
+        { name: 'Funds', url: '/orgfunds/undefined' },
+        { name: 'Membership Requests', url: '/requests/undefined' },
+        { name: 'Settings', url: '/orgsetting/undefined' },
+        {
+          comp_id: null,
+          component: null,
+          name: 'Plugins',
+          subTargets: [
+            { name: 'test-target-plugin', content: 'plugin-new' },
+            {
+              icon: 'fa-store',
+              name: 'Plugin Store',
+              url: '/orgstore/undefined',
+            },
+          ],
+        },
+      ],
+      components: [
+        { name: 'My Organizations', comp_id: 'orglist', component: 'OrgList' },
+        {
+          name: 'Dashboard',
+          comp_id: 'orgdash',
+          component: 'OrganizationDashboard',
+        },
+        {
+          name: 'People',
+          comp_id: 'orgpeople',
+          component: 'OrganizationPeople',
+        },
+        {
+          name: 'Tags',
+          comp_id: 'orgtags',
+          component: 'OrganizationTags',
+        },
+        {
+          name: 'Events',
+          comp_id: 'orgevents',
+          component: 'OrganizationEvents',
+        },
+        {
+          name: 'Venues',
+          comp_id: 'orgvenues',
+          component: 'OrganizationVenues',
+        },
+        {
+          name: 'Action Items',
+          comp_id: 'orgactionitems',
+          component: 'OrganizationActionItems',
+        },
+        { name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
+        { name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
+        {
+          name: 'Advertisement',
+          comp_id: 'orgads',
+          component: 'Advertisements',
+        },
+        {
+          name: 'Funds',
+          comp_id: 'orgfunds',
+          component: 'OrganizationFunds',
+        },
+        {
+          name: 'Membership Requests',
+          comp_id: 'requests',
+          component: 'Requests',
+        },
+        {
+          name: 'Plugins',
+          comp_id: null,
+          component: 'AddOnStore',
+          subTargets: [
+            {
+              comp_id: 'orgstore',
+              component: 'AddOnStore',
+              icon: 'fa-store',
+              name: 'Plugin Store',
+            },
+          ],
+        },
+        { name: 'Settings', comp_id: 'orgsetting', component: 'OrgSettings' },
+        { name: '', comp_id: 'member', component: 'MemberDetail' },
+      ],
+    });
+  });
+});
+
+describe('routesReducer', () => {
+  it('returns state with updated subTargets when UPDATE_P_TARGETS action is dispatched', () => {
+    const action = {
+      type: 'UPDATE_P_TARGETS',
+      payload: [{ name: 'New Plugin', url: '/newplugin' }],
+    };
+    const initialState = {
+      targets: [{ name: 'Plugins' }],
+      components: [],
+    };
+    const state = reducer(initialState, action);
+    const pluginsTarget = state.targets.find(
+      (target) => target.name === 'Plugins',
+    );
+    // Check if pluginsTarget is defined
+    if (!pluginsTarget) {
+      throw new Error('Plugins target not found in state');
+    }
+    expect(pluginsTarget.subTargets).toEqual([
+      { name: 'New Plugin', url: '/newplugin' },
+    ]);
+  });
+});
diff --git a/src/state/reducers/routesReducer.ts b/src/state/reducers/routesReducer.ts
new file mode 100644
index 0000000000..5d50f5402d
--- /dev/null
+++ b/src/state/reducers/routesReducer.ts
@@ -0,0 +1,139 @@
+import type { InterfaceAction } from 'state/helpers/Action';
+
+export type TargetsType = {
+  name: string;
+  url?: string;
+  subTargets?: SubTargetType[];
+};
+
+export type SubTargetType = {
+  name?: string;
+  url: string;
+  icon?: string;
+  comp_id?: string;
+};
+
+const reducer = (
+  state = INITIAL_STATE,
+  action: InterfaceAction,
+): typeof INITIAL_STATE => {
+  switch (action.type) {
+    case 'UPDATE_TARGETS': {
+      return Object.assign({}, state, {
+        targets: [...generateRoutes(components, action.payload)],
+      });
+    }
+    case 'UPDATE_P_TARGETS': {
+      const filteredTargets = state.targets.filter(
+        (target: TargetsType) => target.name === 'Plugins',
+      );
+
+      const oldTargets: SubTargetType[] = filteredTargets[0]?.subTargets || [];
+      return Object.assign({}, state, {
+        targets: [
+          ...state.targets.filter(
+            (target: TargetsType) => target.name !== 'Plugins',
+          ),
+          Object.assign(
+            {},
+            {
+              name: 'Plugins',
+              comp_id: null,
+              component: null,
+              subTargets: [...action.payload, ...oldTargets],
+            },
+          ),
+        ],
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export type ComponentType = {
+  name: string;
+  comp_id: string | null;
+  component: string | null;
+  subTargets?: {
+    name: string;
+    comp_id: string;
+    component: string;
+    icon?: string;
+  }[];
+};
+
+// Note: Routes with names appear on NavBar
+const components: ComponentType[] = [
+  { name: 'My Organizations', comp_id: 'orglist', component: 'OrgList' },
+  { name: 'Dashboard', comp_id: 'orgdash', component: 'OrganizationDashboard' },
+  { name: 'People', comp_id: 'orgpeople', component: 'OrganizationPeople' },
+  { name: 'Tags', comp_id: 'orgtags', component: 'OrganizationTags' },
+  { name: 'Events', comp_id: 'orgevents', component: 'OrganizationEvents' },
+  { name: 'Venues', comp_id: 'orgvenues', component: 'OrganizationVenues' },
+  {
+    name: 'Action Items',
+    comp_id: 'orgactionitems',
+    component: 'OrganizationActionItems',
+  },
+  { name: 'Posts', comp_id: 'orgpost', component: 'OrgPost' },
+  { name: 'Block/Unblock', comp_id: 'blockuser', component: 'BlockUser' },
+  { name: 'Advertisement', comp_id: 'orgads', component: 'Advertisements' },
+  { name: 'Funds', comp_id: 'orgfunds', component: 'OrganizationFunds' },
+  { name: 'Membership Requests', comp_id: 'requests', component: 'Requests' },
+  {
+    name: 'Plugins',
+    comp_id: null,
+    component: 'AddOnStore', // Default
+    subTargets: [
+      {
+        name: 'Plugin Store',
+        comp_id: 'orgstore',
+        component: 'AddOnStore',
+        icon: 'fa-store',
+      },
+    ],
+  },
+  { name: 'Settings', comp_id: 'orgsetting', component: 'OrgSettings' },
+  { name: '', comp_id: 'member', component: 'MemberDetail' },
+];
+
+const generateRoutes = (
+  comps: ComponentType[],
+  currentOrg = undefined,
+): TargetsType[] => {
+  return comps
+    .filter((comp) => comp.name && comp.name !== '')
+    .map((comp) => {
+      const entry: TargetsType = comp.comp_id
+        ? comp.comp_id === 'orglist'
+          ? { name: comp.name, url: `/${comp.comp_id}` }
+          : { name: comp.name, url: `/${comp.comp_id}/${currentOrg}` }
+        : {
+            name: comp.name,
+            subTargets: comp.subTargets?.map(
+              (subTarget: {
+                name: string;
+                comp_id: string;
+                component: string;
+                icon?: string;
+              }) => {
+                return {
+                  name: subTarget.name,
+                  url: `/${subTarget.comp_id}/${currentOrg}`,
+                  icon: subTarget.icon,
+                };
+              },
+            ),
+          };
+      return entry;
+    });
+};
+
+const INITIAL_STATE = {
+  targets: generateRoutes(components),
+  components,
+};
+
+export default reducer;
diff --git a/src/state/reducers/userRoutersReducer.test.ts b/src/state/reducers/userRoutersReducer.test.ts
new file mode 100644
index 0000000000..e2987dcd38
--- /dev/null
+++ b/src/state/reducers/userRoutersReducer.test.ts
@@ -0,0 +1,96 @@
+import expect from 'expect';
+import reducer from './userRoutesReducer';
+
+describe('Testing Routes reducer', () => {
+  it('should return the initial state', () => {
+    expect(
+      reducer(undefined, {
+        type: '',
+        payload: undefined,
+      }),
+    ).toEqual({
+      targets: [
+        { name: 'My Organizations', url: 'user/organizations' },
+        { name: 'Posts', url: 'user/organization/undefined' },
+        { name: 'People', url: 'user/people/undefined' },
+        { name: 'Events', url: 'user/events/undefined' },
+        { name: 'Volunteer', url: 'user/volunteer/undefined' },
+        { name: 'Donate', url: 'user/donate/undefined' },
+        { name: 'Campaigns', url: 'user/campaigns/undefined' },
+        { name: 'My Pledges', url: 'user/pledges/undefined' },
+      ],
+      components: [
+        {
+          name: 'My Organizations',
+          comp_id: 'organizations',
+          component: 'Organizations',
+        },
+        {
+          name: 'Posts',
+          comp_id: 'organization',
+          component: 'Posts',
+        },
+        { name: 'People', comp_id: 'people', component: 'People' },
+        { name: 'Events', comp_id: 'events', component: 'Events' },
+        {
+          name: 'Volunteer',
+          comp_id: 'volunteer',
+          component: 'VolunteerManagement',
+        },
+        { name: 'Donate', comp_id: 'donate', component: 'Donate' },
+        {
+          name: 'Campaigns',
+          comp_id: 'campaigns',
+          component: 'Campaigns',
+        },
+        { name: 'My Pledges', comp_id: 'pledges', component: 'Pledges' },
+      ],
+    });
+  });
+
+  it('should handle UPDATE_TARGETS', () => {
+    expect(
+      reducer(undefined, {
+        type: 'UPDATE_TARGETS',
+        payload: 'orgId',
+      }),
+    ).toEqual({
+      targets: [
+        { name: 'My Organizations', url: 'user/organizations' },
+        { name: 'Posts', url: 'user/organization/orgId' },
+        { name: 'People', url: 'user/people/orgId' },
+        { name: 'Events', url: 'user/events/orgId' },
+        { name: 'Volunteer', url: 'user/volunteer/orgId' },
+        { name: 'Donate', url: 'user/donate/orgId' },
+        { name: 'Campaigns', url: 'user/campaigns/orgId' },
+        { name: 'My Pledges', url: 'user/pledges/orgId' },
+      ],
+      components: [
+        {
+          name: 'My Organizations',
+          comp_id: 'organizations',
+          component: 'Organizations',
+        },
+        {
+          name: 'Posts',
+          comp_id: 'organization',
+          component: 'Posts',
+        },
+        { name: 'People', comp_id: 'people', component: 'People' },
+        { name: 'Events', comp_id: 'events', component: 'Events' },
+        {
+          name: 'Volunteer',
+          comp_id: 'volunteer',
+          component: 'VolunteerManagement',
+        },
+        { name: 'Donate', comp_id: 'donate', component: 'Donate' },
+        {
+          name: 'Campaigns',
+          comp_id: 'campaigns',
+          component: 'Campaigns',
+        },
+        { name: 'My Pledges', comp_id: 'pledges', component: 'Pledges' },
+      ],
+    });
+  });
+});
diff --git a/src/state/reducers/userRoutesReducer.ts b/src/state/reducers/userRoutesReducer.ts
new file mode 100644
index 0000000000..e1bf5de0dc
--- /dev/null
+++ b/src/state/reducers/userRoutesReducer.ts
@@ -0,0 +1,88 @@
+import type { InterfaceAction } from 'state/helpers/Action';
+
+export type TargetsType = {
+  name: string;
+  url?: string;
+  subTargets?: SubTargetType[];
+};
+
+export type SubTargetType = {
+  name?: string;
+  url: string;
+  icon?: string;
+  comp_id?: string;
+};
+
+const reducer = (
+  state = INITIAL_USER_STATE,
+  action: InterfaceAction,
+): typeof INITIAL_USER_STATE => {
+  switch (action.type) {
+    case 'UPDATE_TARGETS': {
+      return Object.assign({}, state, {
+        targets: [...generateRoutes(components, action.payload)],
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export type ComponentType = {
+  name: string;
+  comp_id: string | null;
+  component: string | null;
+  subTargets?: {
+    name: string;
+    comp_id: string;
+    component: string;
+    icon?: string;
+  }[];
+};
+
+// Note: Routes with names appear on NavBar
+const components: ComponentType[] = [
+  {
+    name: 'My Organizations',
+    comp_id: 'organizations',
+    component: 'Organizations',
+  },
+  {
+    name: 'Posts',
+    comp_id: 'organization',
+    component: 'Posts',
+  },
+  { name: 'People', comp_id: 'people', component: 'People' },
+  { name: 'Events', comp_id: 'events', component: 'Events' },
+  { name: 'Volunteer', comp_id: 'volunteer', component: 'VolunteerManagement' },
+  { name: 'Donate', comp_id: 'donate', component: 'Donate' },
+  {
+    name: 'Campaigns',
+    comp_id: 'campaigns',
+    component: 'Campaigns',
+  },
+  { name: 'My Pledges', comp_id: 'pledges', component: 'Pledges' },
+];
+
+const generateRoutes = (
+  comps: ComponentType[],
+  currentOrg = undefined,
+): TargetsType[] => {
+  return comps
+    .filter((comp) => comp.name && comp.name !== '')
+    .map((comp) => {
+      const entry: TargetsType =
+        comp.comp_id === 'organizations'
+          ? { name: comp.name, url: `user/${comp.comp_id}` }
+          : { name: comp.name, url: `user/${comp.comp_id}/${currentOrg}` };
+      return entry;
+    });
+};
+
+const INITIAL_USER_STATE = {
+  targets: generateRoutes(components),
+  components,
+};
+
+export default reducer;
diff --git a/src/state/store.test.tsx b/src/state/store.test.tsx
new file mode 100644
index 0000000000..eedbbc84f0
--- /dev/null
+++ b/src/state/store.test.tsx
@@ -0,0 +1,27 @@
+import { store } from './store';
+describe('Testing src/state/store.ts', () => {
+  const state = store.getState();
+  test('State should contain the properties appRoutes and plugins', () => {
+    expect(state).toHaveProperty('appRoutes');
+    expect(state).toHaveProperty('plugins');
+  });
+  test('State schema should contain appRoutes and plugins', () => {
+    expect(state).toMatchObject({
+      appRoutes: expect.any(Object),
+      plugins: expect.any(Object),
+    });
+  });
+  test('appRoutes schema should contain targets, configUrl and components', () => {
+    expect(state.appRoutes).toMatchObject({
+      targets: expect.any(Array),
+      components: expect.any(Array),
+    });
+  });
+  test('plugins schema should contain installed, addOnStore and extras', () => {
+    expect(state.plugins).toMatchObject({
+      installed: expect.any(Array),
+      addonStore: expect.any(Array),
+      extras: expect.any(Array),
+    });
+  });
+});
diff --git a/src/state/store.ts b/src/state/store.ts
new file mode 100644
index 0000000000..fa4329c693
--- /dev/null
+++ b/src/state/store.ts
@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { reducers } from './reducers/index';
+
+export const store = configureStore({
+  reducer: reducers,
+});
+
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/style/app.module.css b/src/style/app.module.css
new file mode 100644
index 0000000000..a5dbd28903
--- /dev/null
+++ b/src/style/app.module.css
@@ -0,0 +1,787 @@
+:root {
+  --high-contrast-text: #494949;
+  --high-contrast-border: #2c2c2c;
+}
+
+.noOutline input {
+  outline: none;
+}
+
+.noOutline:is(:hover, :focus, :active, :focus-visible, .show) {
+  outline: none !important;
+}
+
+.closeButton {
+  color: var(--delete-button-color);
+  margin-right: 5px;
+  background-color: var(--delete-button-bg);
+  border: white;
+}
+
+.closeButton:hover {
+  color: var(--delete-button-bg) !important;
+  background-color: var(--delete-button-color) !important;
+  border: white;
+}
+
+.modalContent {
+  width: var(--modal-width);
+  max-width: var(--modal-max-width);
+}
+
+.subtleBlueGrey {
+  color: var(--subtle-blue-grey);
+  text-decoration: none;
+}
+
+.subtleBlueGrey:hover {
+  color: var(--subtle-blue-grey-hover);
+  text-decoration: underline;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid var(--dropdown-border-color);
+  color: var(--dropdown-text-color);
+  position: relative;
+  display: inline-block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.dropdown:is(:hover, :focus, :active, :focus-visible, .show) {
+  background-color: transparent !important;
+  border: 1px solid var(--dropdown-border-color);
+  color: var(--dropdown-text-color) !important;
+}
+
+.dropdownItem {
+  background-color: white !important;
+  color: var(--dropdown-text-color) !important;
+  border: none !important;
+}
+
+.dropdownItem:hover,
+.dropdownItem:focus,
+.dropdownItem:active {
+  background-color: var(--dropdown-hover-color) !important;
+  color: var(--dropdown-text-color) !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.input {
+  flex: 3;
+  position: relative;
+}
+
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0;
+  align-items: center;
+  gap: 10px;
+  /* Adjust spacing between items */
+  margin: 2.5rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.inputField {
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  background-color: white;
+  box-shadow: 0 1px 1px var(--input-shadow-color);
+}
+
+.btnsContainerBlockAndUnblock {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainerBlockAndUnblock .btnsBlockBlockAndUnblock {
+  display: flex;
+}
+
+.btnsContainerBlockAndUnblock .btnsBlockBlockAndUnblock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainerBlockAndUnblock .inputContainerBlockAndUnblock {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainerBlockAndUnblock .inputBlockAndUnblock {
+  width: 70%;
+  position: relative;
+}
+
+.btnsContainerBlockAndUnblock input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainerBlockAndUnblock .inputContainerBlockAndUnblock button {
+  width: 52px;
+}
+
+.largeBtnsWrapper {
+  display: flex;
+}
+
+.deleteButton {
+  background-color: var(--delete-button-bg);
+  color: var(--delete-button-color);
+  border: none;
+  padding: 5px 20px;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  margin-right: auto;
+  margin-left: auto;
+  gap: 8px;
+}
+
+.actionItemDeleteButton {
+  background-color: var(--delete-button-bg);
+  color: var(--delete-button-color);
+  border: none;
+}
+
+.createButton {
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+  margin-top: 10px;
+  margin-left: 5px;
+  border: 1px solid var(--dropdown-border-color);
+}
+
+.createButton:hover {
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+  border: 1px solid var(--dropdown-border-color) !important;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.inputFieldModal {
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px var(--input-shadow-color);
+}
+
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.searchButton {
+  margin-bottom: 10px;
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchButton:hover {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+}
+
+.search {
+  position: absolute;
+  z-index: 10;
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.editButton {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  color: var(--high-contrast-text);
+  margin-left: 2;
+}
+
+.addButton {
+  margin-bottom: 10px;
+  background-color: var(--search-button-bg);
+  border-color: var(--grey-bg-color);
+  color: var(--high-contrast-text);
+}
+
+.addButton:hover {
+  background-color: #286fe0;
+  border-color: var(--search-button-border);
+  /* color: #555555; */
+}
+
+.modalbtn {
+  margin-top: 1rem;
+  display: flex !important;
+  margin-left: auto;
+  align-items: center;
+  background-color: var(--grey-bg-color) !important;
+  color: black !important;
+  border: 1px solid var(--dropdown-border-color) !important;
+}
+
+.yesButton {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+}
+
+.mainpageright {
+  color: var(--dropdown-text-color);
+}
+
+.infoButton {
+  background-color: var(--search-button-bg);
+  border-color: var(--search-button-border);
+  color: var(--dropdown-text-color);
+  margin-right: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.infoButton:hover {
+  background-color: #286fe0;
+  border-color: var(--search-button-border);
+}
+
+.TableImage {
+  object-fit: cover;
+  /* margin-top: px !important; */
+  margin-right: 5px;
+  width: var(--table-image-size) !important;
+  height: var(--table-image-size) !important;
+  border-radius: 100% !important;
+}
+
+.tableHead {
+  color: var(--table-head-color);
+  border-radius: var(--table-head-radius) !important;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.mainpageright > hr {
+  margin-top: 10px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+.rowBackground {
+  background-color: var(--row-background);
+}
+
+.tableHeader {
+  background-color: var(--table-head-bg);
+  color: var(--table-header-color);
+  font-size: var(--font-size-header);
+}
+
+.orgUserTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+  position: sticky;
+}
+
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.subTagsLink {
+  color: var(--subtle-blue-grey);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.subTagsLink i {
+  visibility: hidden;
+}
+
+.subTagsLink:hover {
+  color: var(--subtle-blue-grey-hover);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsLink:hover i {
+  visibility: visible;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
+
+.orgUserTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+  position: sticky;
+}
+
+input[type='checkbox']:checked + label {
+  background-color: var(--subtle-blue-grey) !important;
+}
+
+input[type='radio']:checked + label:hover {
+  color: black !important;
+}
+
+.actionItemsContainer {
+  height: 90vh;
+}
+
+.actionItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.datediv {
+  display: flex;
+  flex-direction: row;
+}
+
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  outline: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--bs-gray-500);
+  margin: 1rem;
+}
+
+.iconContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon {
+  margin: 1px;
+}
+
+.message {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: var(--high-contrast-text);
+}
+
+.rankings {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  width: 50px;
+}
+
+.toggleGroup {
+  width: 50%;
+  min-width: 20rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtn {
+  padding: 0rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtn:hover {
+  color: var(--bs-primary) !important;
+}
+
+.custom_table {
+  border-radius: 20px;
+  background-color: var(--grey-bg-color);
+}
+
+.custom_table tbody tr {
+  background-color: var(--dropdown-hover-color);
+}
+
+.custom_table tbody tr:hover {
+  background-color: var(--grey-bg-color);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.custom_table tbody tr:focus-within {
+  outline: 2px solid #000;
+  outline-offset: -2px;
+}
+
+.custom_table tbody td:focus {
+  outline: 2px solid #000;
+  outline-offset: -2px;
+}
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+.listBox {
+  width: 100%;
+  flex: 1;
+}
+
+.listTable {
+  width: 100%;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #0000001f;
+  border-radius: 24px;
+}
+
+.listBox .customTable {
+  margin-bottom: 0%;
+}
+
+.requestsTable thead th {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #000000;
+  border-bottom: 1px solid #dddddd;
+  padding: 1.5rem;
+}
+
+.notFound {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.headerBtn {
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
+}
+
+.settingsContainer {
+  min-height: 100vh;
+}
+
+.settingsBody {
+  min-height: 100vh;
+  margin: 2.5rem 1rem;
+}
+
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 180px;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--high-contrast-text);
+}
+
+.settingsTabs {
+  display: none;
+}
+
+.pageNotFound {
+  position: relative;
+  bottom: 20px;
+}
+
+.pageNotFound h3 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  letter-spacing: 1px;
+}
+
+.pageNotFound .brand span {
+  margin-top: 50px;
+  font-size: 40px;
+}
+
+.pageNotFound .brand h3 {
+  font-weight: 300;
+  margin: 10px 0 0 0;
+}
+
+.pageNotFound h1.head {
+  font-size: 250px;
+  font-weight: 900;
+  color: #31bb6b;
+  letter-spacing: 25px;
+  margin: 10px 0 0 0;
+}
+
+.pageNotFound h1.head span {
+  position: relative;
+  display: inline-block;
+}
+
+.pageNotFound h1.head span:before,
+.pageNotFound h1.head span:after {
+  position: absolute;
+  top: 50%;
+  width: 50%;
+  height: 1px;
+  background: #fff;
+  content: '';
+}
+
+.pageNotFound h1.head span:before {
+  left: -55%;
+}
+
+.pageNotFound h1.head span:after {
+  right: -55%;
+}
+
+@media (max-width: 1024px) {
+  .pageNotFound h1.head {
+    font-size: 200px;
+    letter-spacing: 25px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pageNotFound h1.head {
+    font-size: 150px;
+    letter-spacing: 25px;
+  }
+}
+
+@media (max-width: 640px) {
+  .pageNotFound h1.head {
+    font-size: 150px;
+    letter-spacing: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .pageNotFound .brand h3 {
+    font-size: 20px;
+  }
+  .pageNotFound h1.head {
+    font-size: 130px;
+    letter-spacing: 0;
+  }
+  .pageNotFound h1.head span:before,
+  .pageNotFound h1.head span:after {
+    width: 40%;
+  }
+  .pageNotFound h1.head span:before {
+    left: -45%;
+  }
+  .pageNotFound h1.head span:after {
+    right: -45%;
+  }
+  .pageNotFound p {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 320px) {
+  .pageNotFound .brand h3 {
+    font-size: 16px;
+  }
+  .pageNotFound h1.head {
+    font-size: 100px;
+    letter-spacing: 0;
+  }
+  .pageNotFound h1.head span:before,
+  .pageNotFound h1.head span:after {
+    width: 25%;
+  }
+  .pageNotFound h1.head span:before {
+    left: -30%;
+  }
+  .pageNotFound h1.head span:after {
+    right: -30%;
+  }
+}
+
+@media (min-width: 576px) {
+  .settingsDropdown {
+    display: none;
+  }
+}
+
+@media (min-width: 576px) {
+  .settingsTabs {
+    display: block;
+  }
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .input {
+    width: 100%;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+@media (max-width: 1120px) {
+  .contract {
+    padding-left: calc(250px + 2rem + 1.5rem);
+  }
+
+  .listBox .itemCard {
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/utils/StaticMockLink.ts b/src/utils/StaticMockLink.ts
new file mode 100644
index 0000000000..457da3dfd4
--- /dev/null
+++ b/src/utils/StaticMockLink.ts
@@ -0,0 +1,178 @@
+import { print } from 'graphql';
+import { equal } from '@wry/equality';
+import { invariant } from 'ts-invariant';
+
+import type { Operation, FetchResult } from '@apollo/client/link/core';
+import { ApolloLink } from '@apollo/client/link/core';
+
+import {
+  Observable,
+  addTypenameToDocument,
+  removeClientSetsFromDocument,
+  removeConnectionDirectiveFromDocument,
+  cloneDeep,
+} from '@apollo/client/utilities';
+
+import type { MockedResponse, ResultFunction } from '@apollo/react-testing';
+
+function requestToKey(request: any, addTypename: boolean): string {
+  const queryString =
+    request.query &&
+    print(addTypename ? addTypenameToDocument(request.query) : request.query);
+  const requestKey = { query: queryString };
+  return JSON.stringify(requestKey);
+}
+
+/**
+ * Similar to the standard Apollo MockLink, but doesn't consume a mock
+ * when it is used allowing it to be used in places like Storybook.
+ */
+export class StaticMockLink extends ApolloLink {
+  public operation?: Operation;
+  public addTypename = true;
+  private _mockedResponsesByKey: { [key: string]: MockedResponse[] } = {};
+
+  constructor(mockedResponses: readonly MockedResponse[], addTypename = true) {
+    super();
+    this.addTypename = addTypename;
+    if (mockedResponses) {
+      mockedResponses.forEach((mockedResponse) => {
+        this.addMockedResponse(mockedResponse);
+      });
+    }
+  }
+
+  public addMockedResponse(mockedResponse: MockedResponse): void {
+    const normalizedMockedResponse =
+      this._normalizeMockedResponse(mockedResponse);
+    const key = requestToKey(
+      normalizedMockedResponse.request,
+      this.addTypename,
+    );
+    let mockedResponses = this._mockedResponsesByKey[key];
+    if (!mockedResponses) {
+      mockedResponses = [];
+      this._mockedResponsesByKey[key] = mockedResponses;
+    }
+    mockedResponses.push(normalizedMockedResponse);
+  }
+
+  public request(operation: any): Observable<FetchResult> | null {
+    this.operation = operation;
+    const key = requestToKey(operation, this.addTypename);
+    let responseIndex = 0;
+    const response = (this._mockedResponsesByKey[key] || []).find(
+      (res, index) => {
+        const requestVariables = operation.variables || {};
+        const mockedResponseVariables = res.request.variables || {};
+        if (equal(requestVariables, mockedResponseVariables)) {
+          responseIndex = index;
+          return true;
+        }
+        return false;
+      },
+    );
+
+    let configError: Error;
+
+    if (!response || typeof responseIndex === 'undefined') {
+      configError = new Error(
+        `No more mocked responses for the query: ${print(
+          operation.query,
+        )}, variables: ${JSON.stringify(operation.variables)}`,
+      );
+    } else {
+      const { newData } = response;
+      if (newData) {
+        response.result = newData(operation.variables);
+        this._mockedResponsesByKey[key].push(response);
+      }
+
+      if (!response.result && !response.error) {
+        configError = new Error(
+          `Mocked response should contain either result or error: ${key}`,
+        );
+      }
+    }
+
+    return new Observable((observer) => {
+      const timer = setTimeout(
+        () => {
+          if (configError) {
+            try {
+              // The onError function can return false to indicate that
+              // configError need not be passed to observer.error. For
+              // example, the default implementation of onError calls
+              // observer.error(configError) and then returns false to
+              // prevent this extra (harmless) observer.error call.
+              if (this.onError(configError, observer) !== false) {
+                throw configError;
+              }
+            } catch (error) {
+              observer.error(error);
+            }
+          } else if (response) {
+            if (response.error) {
+              observer.error(response.error);
+            } else {
+              if (response.result) {
+                observer.next(
+                  typeof response.result === 'function'
+                    ? (response.result as ResultFunction<FetchResult>)(
+                        operation.variables,
+                      )
+                    : response.result,
+                );
+              }
+              observer.complete();
+            }
+          }
+        },
+        (response && response.delay) || 0,
+      );
+
+      return () => {
+        clearTimeout(timer);
+      };
+    });
+  }
+
+  private _normalizeMockedResponse(
+    mockedResponse: MockedResponse,
+  ): MockedResponse {
+    const newMockedResponse = cloneDeep(mockedResponse);
+    const queryWithoutConnection = removeConnectionDirectiveFromDocument(
+      newMockedResponse.request.query,
+    );
+    invariant(queryWithoutConnection, 'query is required');
+    newMockedResponse.request.query = queryWithoutConnection;
+    const query = removeClientSetsFromDocument(newMockedResponse.request.query);
+    if (query) {
+      newMockedResponse.request.query = query;
+    }
+    return newMockedResponse;
+  }
+}
+
+export interface InterfaceMockApolloLink extends ApolloLink {
+  operation?: Operation;
+}
+
+// Pass in multiple mocked responses, so that you can test flows that end up
+// making multiple queries to the server.
+// NOTE: The last arg can optionally be an `addTypename` arg.
+export function mockSingleLink(
+  ...mockedResponses: any[]
+): InterfaceMockApolloLink {
+  // To pull off the potential typename. If this isn't a boolean, we'll just
+  // set it true later.
+  let maybeTypename = mockedResponses[mockedResponses.length - 1];
+  let mocks = mockedResponses.slice(0, mockedResponses.length - 1);
+
+  if (typeof maybeTypename !== 'boolean') {
+    mocks = mockedResponses;
+    maybeTypename = true;
+  }
+
+  return new StaticMockLink(mocks, maybeTypename);
+}
diff --git a/src/utils/chartToPdf.test.ts b/src/utils/chartToPdf.test.ts
new file mode 100644
index 0000000000..b3094fff02
--- /dev/null
+++ b/src/utils/chartToPdf.test.ts
@@ -0,0 +1,168 @@
+import {
+  exportToCSV,
+  exportTrendsToCSV,
+  exportDemographicsToCSV,
+} from './chartToPdf';
+
+describe('CSV Export Functions', () => {
+  let mockCreateElement: jest.SpyInstance;
+  let mockClick: jest.SpyInstance;
+  let mockSetAttribute: jest.SpyInstance;
+
+  beforeEach(() => {
+    // Mock URL methods
+    global.URL.createObjectURL = jest.fn(() => 'mock-url');
+    global.URL.revokeObjectURL = jest.fn();
+
+    // Mock DOM methods
+    mockSetAttribute = jest.fn();
+    mockClick = jest.fn();
+    const mockLink = {
+      setAttribute: mockSetAttribute,
+      click: mockClick,
+    } as unknown as HTMLAnchorElement;
+
+    mockCreateElement = jest
+      .spyOn(document, 'createElement')
+      .mockReturnValue(mockLink as HTMLAnchorElement);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('CSV Export Functions', () => {
+    let mockCreateElement: jest.SpyInstance;
+    let mockAppendChild: jest.SpyInstance;
+    let mockRemoveChild: jest.SpyInstance;
+    let mockClick: jest.SpyInstance;
+    let mockSetAttribute: jest.SpyInstance;
+
+    beforeEach(() => {
+      // Mock URL methods
+      global.URL.createObjectURL = jest.fn(() => 'mock-url');
+      global.URL.revokeObjectURL = jest.fn();
+
+      // Mock DOM methods
+      mockSetAttribute = jest.fn();
+      mockClick = jest.fn();
+      const mockLink = {
+        setAttribute: mockSetAttribute,
+        click: mockClick,
+        parentNode: document.body, // Add this to trigger removeChild
+      } as unknown as HTMLAnchorElement;
+
+      mockCreateElement = jest
+        .spyOn(document, 'createElement')
+        .mockReturnValue(mockLink as HTMLAnchorElement);
+      mockAppendChild = jest
+        .spyOn(document.body, 'appendChild')
+        .mockImplementation(() => mockLink as HTMLAnchorElement);
+      mockRemoveChild = jest
+        .spyOn(document.body, 'removeChild')
+        .mockImplementation(() => mockLink as HTMLAnchorElement);
+    });
+
+    test('exports data to CSV with proper formatting', () => {
+      const data = [
+        ['Header1', 'Header2'],
+        ['Value1', 'Value2'],
+        ['Value with, comma', 'Value with "quotes"'],
+      ];
+
+      exportToCSV(data, 'test.csv');
+
+      expect(mockCreateElement).toHaveBeenCalledWith('a');
+      expect(mockSetAttribute).toHaveBeenCalledWith('href', 'mock-url');
+      expect(mockSetAttribute).toHaveBeenCalledWith('download', 'test.csv');
+      expect(mockAppendChild).toHaveBeenCalled();
+      expect(mockClick).toHaveBeenCalled();
+      expect(mockRemoveChild).toHaveBeenCalled();
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith('mock-url');
+    });
+    test('throws error if data is empty', () => {
+      expect(() => exportToCSV([], 'test.csv')).toThrow('Data cannot be empty');
+    });
+
+    test('throws error if filename is empty', () => {
+      expect(() => exportToCSV([['data']], '')).toThrow('Filename is required');
+    });
+
+    test('adds .csv extension if missing', () => {
+      const data = [['test']];
+      exportToCSV(data, 'filename');
+      expect(mockSetAttribute).toHaveBeenCalledWith('download', 'filename.csv');
+    });
+  });
+
+  describe('exportTrendsToCSV', () => {
+    test('exports attendance trends data correctly', () => {
+      const eventLabels = ['Event1', 'Event2'];
+      const attendeeCounts = [10, 20];
+      const maleCounts = [5, 10];
+      const femaleCounts = [4, 8];
+      const otherCounts = [1, 2];
+
+      exportTrendsToCSV(
+        eventLabels,
+        attendeeCounts,
+        maleCounts,
+        femaleCounts,
+        otherCounts,
+      );
+
+      expect(mockCreateElement).toHaveBeenCalledWith('a');
+      expect(mockSetAttribute).toHaveBeenCalledWith(
+        'download',
+        'attendance_trends.csv',
+      );
+      expect(mockClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('exportDemographicsToCSV', () => {
+    test('exports demographics data correctly', () => {
+      const selectedCategory = 'Age Groups';
+      const categoryLabels = ['0-18', '19-30', '31+'];
+      const categoryData = [10, 20, 15];
+
+      exportDemographicsToCSV(selectedCategory, categoryLabels, categoryData);
+
+      expect(mockCreateElement).toHaveBeenCalledWith('a');
+      expect(mockClick).toHaveBeenCalled();
+      expect(mockSetAttribute).toHaveBeenCalledWith('href', 'mock-url');
+    });
+
+    test('throws error if selected category is empty', () => {
+      expect(() => exportDemographicsToCSV('', ['label'], [1])).toThrow(
+        'Selected category is required',
+      );
+    });
+
+    test('throws error if labels and data arrays have different lengths', () => {
+      expect(() =>
+        exportDemographicsToCSV('Category', ['label1', 'label2'], [1]),
+      ).toThrow('Labels and data arrays must have the same length');
+    });
+
+    test('creates safe filename with timestamp', () => {
+      jest.useFakeTimers();
+      const mockDate = new Date('2023-01-01T00:00:00.000Z');
+      jest.setSystemTime(mockDate);
+
+      const selectedCategory = 'Age & Demographics!';
+      const categoryLabels = ['Group1'];
+      const categoryData = [10];
+
+      exportDemographicsToCSV(selectedCategory, categoryLabels, categoryData);
+
+      const expectedFilename =
+        'age___demographics__demographics_2023-01-01T00-00-00.000Z.csv';
+      const downloadCalls = mockSetAttribute.mock.calls.filter(
+        (call) => call[0] === 'download',
+      );
+      expect(downloadCalls[0][1]).toBe(expectedFilename);
+      jest.useRealTimers();
+    });
+  });
+});
diff --git a/src/utils/chartToPdf.ts b/src/utils/chartToPdf.ts
new file mode 100644
index 0000000000..d724f077cc
--- /dev/null
+++ b/src/utils/chartToPdf.ts
@@ -0,0 +1,106 @@
+type CSVData = (string | number)[][];
+
+export const exportToCSV = (data: CSVData, filename: string): void => {
+  if (!data?.length) {
+    throw new Error('Data cannot be empty');
+  }
+
+  if (!filename) {
+    throw new Error('Filename is required');
+  }
+
+  // Ensure .csv extension
+  const finalFilename = filename.endsWith('.csv')
+    ? filename
+    : `${filename}.csv`;
+  const csvContent =
+    // Properly escape and quote CSV content
+    'data:text/csv;charset=utf-8,' +
+    data
+      .map((row) =>
+        row
+          .map((cell) => {
+            const cellStr = String(cell);
+            // Escape double quotes by doubling them
+            const escapedCell = cellStr.replace(/"/g, '""');
+            // Enclose cell in double quotes if it contains commas, newlines, or double quotes
+            return /[",\n]/.test(escapedCell)
+              ? `"${escapedCell}"`
+              : escapedCell;
+          })
+          .join(','),
+      )
+      .join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  try {
+    link.setAttribute('href', url);
+    link.setAttribute('download', finalFilename);
+    document.body.appendChild(link);
+    link.click();
+  } finally {
+    if (link.parentNode === document.body) {
+      document.body.removeChild(link);
+    }
+    URL.revokeObjectURL(url); // Clean up the URL object
+  }
+};
+
+export const exportTrendsToCSV = (
+  eventLabels: string[],
+  attendeeCounts: number[],
+  maleCounts: number[],
+  femaleCounts: number[],
+  otherCounts: number[],
+): void => {
+  const heading = 'Attendance Trends';
+  const headers = [
+    'Date',
+    'Attendee Count',
+    'Male Attendees',
+    'Female Attendees',
+    'Other Attendees',
+  ];
+  const data: CSVData = [
+    [heading],
+    [],
+    headers,
+    ...eventLabels.map((label, index) => [
+      label,
+      attendeeCounts[index],
+      maleCounts[index],
+      femaleCounts[index],
+      otherCounts[index],
+    ]),
+  ];
+  exportToCSV(data, 'attendance_trends.csv');
+};
+
+export const exportDemographicsToCSV = (
+  selectedCategory: string,
+  categoryLabels: string[],
+  categoryData: number[],
+): void => {
+  if (!selectedCategory?.trim()) {
+    throw new Error('Selected category is required');
+  }
+
+  if (categoryLabels.length !== categoryData.length) {
+    throw new Error('Labels and data arrays must have the same length');
+  }
+
+  const heading = `${selectedCategory} Demographics`;
+  const headers = [selectedCategory, 'Count'];
+  const data: CSVData = [
+    [heading],
+    [],
+    headers,
+    ...categoryLabels.map((label, index) => [label, categoryData[index]]),
+  ];
+  const safeCategory = selectedCategory
+    .replace(/[^a-z0-9]/gi, '_')
+    .toLowerCase();
+  const timestamp = new Date().toISOString().replace(/[:]/g, '-');
+  exportToCSV(data, `${safeCategory}_demographics_${timestamp}.csv`);
+};
diff --git a/src/utils/convertToBase64.test.ts b/src/utils/convertToBase64.test.ts
new file mode 100644
index 0000000000..51198ccc29
--- /dev/null
+++ b/src/utils/convertToBase64.test.ts
@@ -0,0 +1,33 @@
+import convertToBase64 from './convertToBase64';
+
+describe('convertToBase64', () => {
+  it('should return a base64-encoded string when given a file', async () => {
+    const file = new File(['hello'], 'hello.txt', { type: 'text/plain' });
+    const result = await convertToBase64(file);
+    expect(result).toMatch(/^data:text\/plain;base64,[a-zA-Z0-9+/]+={0,2}$/);
+  });
+
+  it('should return an empty string when given an invalid file', async () => {
+    const file = {} as File;
+    const result = await convertToBase64(file);
+    expect(result).toBe('');
+  });
+
+  it('should handle errors thrown by FileReader', async () => {
+    // Arrange
+    const file = new File(['hello'], 'hello.txt', { type: 'text/plain' });
+    const mockFileReader = jest
+      .spyOn(global, 'FileReader')
+      .mockImplementationOnce(() => {
+        throw new Error('Test error');
+      });
+
+    // Act
+    const result = await convertToBase64(file);
+
+    // Assert
+    expect(mockFileReader).toHaveBeenCalledTimes(1);
+    expect(mockFileReader).toHaveBeenCalledWith();
+    expect(result).toBe('');
+  });
+});
diff --git a/src/utils/convertToBase64.ts b/src/utils/convertToBase64.ts
new file mode 100644
index 0000000000..2264d04d58
--- /dev/null
+++ b/src/utils/convertToBase64.ts
@@ -0,0 +1,15 @@
+const convertToBase64 = async (file: File): Promise<string> => {
+  try {
+    const res = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (): void => resolve(reader.result);
+      reader.onerror = (error): void => reject(error);
+    });
+    return `${res}`;
+  } catch (error) {
+    return '';
+  }
+};
+
+export default convertToBase64;
diff --git a/src/utils/currency.ts b/src/utils/currency.ts
new file mode 100644
index 0000000000..c7db3002f2
--- /dev/null
+++ b/src/utils/currency.ts
@@ -0,0 +1,330 @@
+export const currencyOptions = [
+  { value: 'AED', label: 'AED' }, // United Arab Emirates Dirham
+  { value: 'AFN', label: 'AFN' }, // Afghan Afghani
+  { value: 'ALL', label: 'ALL' }, // Albanian Lek
+  { value: 'AMD', label: 'AMD' }, // Armenian Dram
+  { value: 'ANG', label: 'ANG' }, // Netherlands Antillean Guilder
+  { value: 'AOA', label: 'AOA' }, // Angolan Kwanza
+  { value: 'ARS', label: 'ARS' }, // Argentine Peso
+  { value: 'AUD', label: 'AUD' }, // Australian Dollar
+  { value: 'AWG', label: 'AWG' }, // Aruban Florin
+  { value: 'AZN', label: 'AZN' }, // Azerbaijani Manat
+  { value: 'BAM', label: 'BAM' }, // Bosnia-Herzegovina Convertible Mark
+  { value: 'BBD', label: 'BBD' }, // Barbadian Dollar
+  { value: 'BDT', label: 'BDT' }, // Bangladeshi Taka
+  { value: 'BGN', label: 'BGN' }, // Bulgarian Lev
+  { value: 'BHD', label: 'BHD' }, // Bahraini Dinar
+  { value: 'BIF', label: 'BIF' }, // Burundian Franc
+  { value: 'BMD', label: 'BMD' }, // Bermudian Dollar
+  { value: 'BND', label: 'BND' }, // Brunei Dollar
+  { value: 'BOB', label: 'BOB' }, // Bolivian Boliviano
+  { value: 'BRL', label: 'BRL' }, // Brazilian Real
+  { value: 'BSD', label: 'BSD' }, // Bahamian Dollar
+  { value: 'BTN', label: 'BTN' }, // Bhutanese Ngultrum
+  { value: 'BWP', label: 'BWP' }, // Botswanan Pula
+  { value: 'BYN', label: 'BYN' }, // Belarusian Ruble
+  { value: 'BZD', label: 'BZD' }, // Belize Dollar
+  { value: 'CAD', label: 'CAD' }, // Canadian Dollar
+  { value: 'CDF', label: 'CDF' }, // Congolese Franc
+  { value: 'CHF', label: 'CHF' }, // Swiss Franc
+  { value: 'CLP', label: 'CLP' }, // Chilean Peso
+  { value: 'CNY', label: 'CNY' }, // Chinese Yuan
+  { value: 'COP', label: 'COP' }, // Colombian Peso
+  { value: 'CRC', label: 'CRC' }, // Costa Rican Colón
+  { value: 'CUP', label: 'CUP' }, // Cuban Peso
+  { value: 'CVE', label: 'CVE' }, // Cape Verdean Escudo
+  { value: 'CZK', label: 'CZK' }, // Czech Koruna
+  { value: 'DJF', label: 'DJF' }, // Djiboutian Franc
+  { value: 'DKK', label: 'DKK' }, // Danish Krone
+  { value: 'DOP', label: 'DOP' }, // Dominican Peso
+  { value: 'DZD', label: 'DZD' }, // Algerian Dinar
+  { value: 'EGP', label: 'EGP' }, // Egyptian Pound
+  { value: 'ERN', label: 'ERN' }, // Eritrean Nakfa
+  { value: 'ETB', label: 'ETB' }, // Ethiopian Birr
+  { value: 'EUR', label: 'EUR' }, // Euro
+  { value: 'FJD', label: 'FJD' }, // Fijian Dollar
+  { value: 'FKP', label: 'FKP' }, // Falkland Islands Pound
+  { value: 'FOK', label: 'FOK' }, // Faroese Krona
+  { value: 'FRO', label: 'FRO' }, // Fijian Dollar
+  { value: 'GBP', label: 'GBP' }, // British Pound Sterling
+  { value: 'GEL', label: 'GEL' }, // Georgian Lari
+  { value: 'GGP', label: 'GGP' }, // Guernsey Pound
+  { value: 'GHS', label: 'GHS' }, // Ghanaian Cedi
+  { value: 'GIP', label: 'GIP' }, // Gibraltar Pound
+  { value: 'GMD', label: 'GMD' }, // Gambian Dalasi
+  { value: 'GNF', label: 'GNF' }, // Guinean Franc
+  { value: 'GTQ', label: 'GTQ' }, // Guatemalan Quetzal
+  { value: 'GYD', label: 'GYD' }, // Guyanaese Dollar
+  { value: 'HKD', label: 'HKD' }, // Hong Kong Dollar
+  { value: 'HNL', label: 'HNL' }, // Honduran Lempira
+  { value: 'HRK', label: 'HRK' }, // Croatian Kuna
+  { value: 'HTG', label: 'HTG' }, // Haitian Gourde
+  { value: 'HUF', label: 'HUF' }, // Hungarian Forint
+  { value: 'IDR', label: 'IDR' }, // Indonesian Rupiah
+  { value: 'ILS', label: 'ILS' }, // Israeli New Shekel
+  { value: 'IMP', label: 'IMP' }, // Manx pound
+  { value: 'INR', label: 'INR' }, // Indian Rupee
+  { value: 'IQD', label: 'IQD' }, // Iraqi Dinar
+  { value: 'IRR', label: 'IRR' }, // Iranian Rial
+  { value: 'ISK', label: 'ISK' }, // Icelandic Króna
+  { value: 'JEP', label: 'JEP' }, // Jersey Pound
+  { value: 'JMD', label: 'JMD' }, // Jamaican Dollar
+  { value: 'JOD', label: 'JOD' }, // Jordanian Dinar
+  { value: 'JPY', label: 'JPY' }, // Japanese Yen
+  { value: 'KES', label: 'KES' }, // Kenyan Shilling
+  { value: 'KGS', label: 'KGS' }, // Kyrgystani Som
+  { value: 'KHR', label: 'KHR' }, // Cambodian Riel
+  { value: 'KID', label: 'KID' }, // Kiribati dollar
+  { value: 'KMF', label: 'KMF' }, // Comorian Franc
+  { value: 'KRW', label: 'KRW' }, // South Korean Won
+  { value: 'KWD', label: 'KWD' }, // Kuwaiti Dinar
+  { value: 'KYD', label: 'KYD' }, // Cayman Islands Dollar
+  { value: 'KZT', label: 'KZT' }, // Kazakhstani Tenge
+  { value: 'LAK', label: 'LAK' }, // Laotian Kip
+  { value: 'LBP', label: 'LBP' }, // Lebanese Pound
+  { value: 'LKR', label: 'LKR' }, // Sri Lankan Rupee
+  { value: 'LRD', label: 'LRD' }, // Liberian Dollar
+  { value: 'LSL', label: 'LSL' }, // Lesotho Loti
+  { value: 'LYD', label: 'LYD' }, // Libyan Dinar
+  { value: 'MAD', label: 'MAD' }, // Moroccan Dirham
+  { value: 'MDL', label: 'MDL' }, // Moldovan Leu
+  { value: 'MGA', label: 'MGA' }, // Malagasy Ariary
+  { value: 'MKD', label: 'MKD' }, // Macedonian Denar
+  { value: 'MMK', label: 'MMK' }, // Myanma Kyat
+  { value: 'MNT', label: 'MNT' }, // Mongolian Tugrik
+  { value: 'MOP', label: 'MOP' }, // Macanese Pataca
+  { value: 'MRU', label: 'MRU' }, // Mauritanian Ouguiya
+  { value: 'MUR', label: 'MUR' }, // Mauritian Rupee
+  { value: 'MVR', label: 'MVR' }, // Maldivian Rufiyaa
+  { value: 'MWK', label: 'MWK' }, // Malawian Kwacha
+  { value: 'MXN', label: 'MXN' }, // Mexican Peso
+  { value: 'MYR', label: 'MYR' }, // Malaysian Ringgit
+  { value: 'MZN', label: 'MZN' }, // Mozambican Metical
+  { value: 'NAD', label: 'NAD' }, // Namibian Dollar
+  { value: 'NGN', label: 'NGN' }, // Nigerian Naira
+  { value: 'NIO', label: 'NIO' }, // Nicaraguan Córdoba
+  { value: 'NOK', label: 'NOK' }, // Norwegian Krone
+  { value: 'NPR', label: 'NPR' }, // Nepalese Rupee
+  { value: 'NZD', label: 'NZD' }, // New Zealand Dollar
+  { value: 'OMR', label: 'OMR' }, // Omani Rial
+  { value: 'PAB', label: 'PAB' }, // Panamanian Balboa
+  { value: 'PEN', label: 'PEN' }, // Peruvian Nuevo Sol
+  { value: 'PGK', label: 'PGK' }, // Papua New Guinean Kina
+  { value: 'PHP', label: 'PHP' }, // Philippine Peso
+  { value: 'PKR', label: 'PKR' }, // Pakistani Rupee
+  { value: 'PLN', label: 'PLN' }, // Polish Zloty
+  { value: 'PYG', label: 'PYG' }, // Paraguayan Guarani
+  { value: 'QAR', label: 'QAR' }, // Qatari Rial
+  { value: 'RON', label: 'RON' }, // Romanian Leu
+  { value: 'RSD', label: 'RSD' }, // Serbian Dinar
+  { value: 'RUB', label: 'RUB' }, // Russian Ruble
+  { value: 'RWF', label: 'RWF' }, // Rwandan Franc
+  { value: 'SAR', label: 'SAR' }, // Saudi Riyal
+  { value: 'SBD', label: 'SBD' }, // Solomon Islands Dollar
+  { value: 'SCR', label: 'SCR' }, // Seychellois Rupee
+  { value: 'SDG', label: 'SDG' }, // Sudanese Pound
+  { value: 'SEK', label: 'SEK' }, // Swedish Krona
+  { value: 'SGD', label: 'SGD' }, // Singapore Dollar
+  { value: 'SHP', label: 'SHP' }, // Saint Helena Pound
+  { value: 'SLL', label: 'SLL' }, // Sierra Leonean Leone
+  { value: 'SOS', label: 'SOS' }, // Somali Shilling
+  { value: 'SPL', label: 'SPL' }, // Seborgan Luigino
+  { value: 'SRD', label: 'SRD' }, // Surinamese Dollar
+  { value: 'STN', label: 'STN' }, // São Tomé and Príncipe Dobra
+  { value: 'SVC', label: 'SVC' }, // Salvadoran Colón
+  { value: 'SYP', label: 'SYP' }, // Syrian Pound
+  { value: 'SZL', label: 'SZL' }, // Swazi Lilangeni
+  { value: 'THB', label: 'THB' }, // Thai Baht
+  { value: 'TJS', label: 'TJS' }, // Tajikistani Somoni
+  { value: 'TMT', label: 'TMT' }, // Turkmenistani Manat
+  { value: 'TND', label: 'TND' }, // Tunisian Dinar
+  { value: 'TOP', label: 'TOP' }, // Tongan Pa'anga
+  { value: 'TRY', label: 'TRY' }, // Turkish Lira
+  { value: 'TTD', label: 'TTD' }, // Trinidad and Tobago Dollar
+  { value: 'TVD', label: 'TVD' }, // Tuvaluan Dollar
+  { value: 'TWD', label: 'TWD' }, // New Taiwan Dollar
+  { value: 'TZS', label: 'TZS' }, // Tanzanian Shilling
+  { value: 'UAH', label: 'UAH' }, // Ukrainian Hryvnia
+  { value: 'UGX', label: 'UGX' }, // Ugandan Shilling
+  { value: 'USD', label: 'USD' }, // United States Dollar
+  { value: 'UYU', label: 'UYU' }, // Uruguayan Peso
+  { value: 'UZS', label: 'UZS' }, // Uzbekistan Som
+  { value: 'VEF', label: 'VEF' }, // Venezuelan Bolívar
+  { value: 'VND', label: 'VND' }, // Vietnamese Dong
+  { value: 'VUV', label: 'VUV' }, // Vanuatu Vatu
+  { value: 'WST', label: 'WST' }, // Samoan Tala
+  { value: 'XAF', label: 'XAF' }, // CFA Franc BEAC
+  { value: 'XCD', label: 'XCD' }, // East Caribbean Dollar
+  { value: 'XDR', label: 'XDR' }, // Special Drawing Rights
+  { value: 'XOF', label: 'XOF' }, // CFA Franc BCEAO
+  { value: 'XPF', label: 'XPF' }, // CFP Franc
+  { value: 'YER', label: 'YER' }, // Yemeni Rial
+  { value: 'ZAR', label: 'ZAR' }, // South African Rand
+  { value: 'ZMW', label: 'ZMW' }, // Zambian Kwacha
+  { value: 'ZWD', label: 'ZWD' }, // Zimbabwean Dollar
+];
+export const currencySymbols: { [key: string]: string } = {
+  AED: 'د.إ', // United Arab Emirates Dirham
+  AFN: '؋', // Afghan Afghani
+  ALL: 'L', // Albanian Lek
+  AMD: '֏', // Armenian Dram
+  ANG: 'ƒ', // Netherlands Antillean Guilder
+  AOA: 'Kz', // Angolan Kwanza
+  ARS: '$', // Argentine Peso
+  AUD: '$', // Australian Dollar
+  AWG: 'ƒ', // Aruban Florin
+  AZN: '₼', // Azerbaijani Manat
+  BAM: 'КМ', // Bosnia-Herzegovina Convertible Mark
+  BBD: '$', // Barbadian Dollar
+  BDT: '৳', // Bangladeshi Taka
+  BGN: 'лв', // Bulgarian Lev
+  BHD: '.د.ب', // Bahraini Dinar
+  BIF: 'FBu', // Burundian Franc
+  BMD: '$', // Bermudian Dollar
+  BND: '$', // Brunei Dollar
+  BOB: 'Bs.', // Bolivian Boliviano
+  BRL: 'R$', // Brazilian Real
+  BSD: '$', // Bahamian Dollar
+  BTN: 'Nu.', // Bhutanese Ngultrum
+  BWP: 'P', // Botswanan Pula
+  BYN: 'Br', // Belarusian Ruble
+  BZD: 'BZ$', // Belize Dollar
+  CAD: '$', // Canadian Dollar
+  CDF: 'FC', // Congolese Franc
+  CHF: 'CHF', // Swiss Franc
+  CLP: '$', // Chilean Peso
+  CNY: '¥', // Chinese Yuan
+  COP: '$', // Colombian Peso
+  CRC: '₡', // Costa Rican Colón
+  CUP: '₱', // Cuban Peso
+  CVE: '$', // Cape Verdean Escudo
+  CZK: 'Kč', // Czech Koruna
+  DJF: 'Fdj', // Djiboutian Franc
+  DKK: 'kr', // Danish Krone
+  DOP: 'RD$', // Dominican Peso
+  DZD: 'د.ج', // Algerian Dinar
+  EGP: 'ج.م', // Egyptian Pound
+  ERN: 'Nfk', // Eritrean Nakfa
+  ETB: 'ብር', // Ethiopian Birr
+  EUR: '€', // Euro
+  FJD: 'FJ$', // Fijian Dollar
+  FKP: '£', // Falkland Islands Pound
+  FOK: 'kr', // Faroese Krona
+  FRO: 'kr', // Fijian Dollar
+  GBP: '£', // British Pound Sterling
+  GEL: '₾', // Georgian Lari
+  GGP: '£', // Guernsey Pound
+  GHS: '₵', // Ghanaian Cedi
+  GIP: '£', // Gibraltar Pound
+  GMD: 'D', // Gambian Dalasi
+  GNF: 'FG', // Guinean Franc
+  GTQ: 'Q', // Guatemalan Quetzal
+  GYD: '$', // Guyanaese Dollar
+  HKD: '$', // Hong Kong Dollar
+  HNL: 'L', // Honduran Lempira
+  HRK: 'kn', // Croatian Kuna
+  HTG: 'G', // Haitian Gourde
+  HUF: 'Ft', // Hungarian Forint
+  IDR: 'Rp', // Indonesian Rupiah
+  ILS: '₪', // Israeli New Shekel
+  IMP: '£', // Manx pound
+  INR: '₹', // Indian Rupee
+  IQD: 'د.ع', // Iraqi Dinar
+  IRR: '﷼', // Iranian Rial
+  ISK: 'kr', // Icelandic Króna
+  JEP: '£', // Jersey Pound
+  JMD: 'J$', // Jamaican Dollar
+  JOD: 'د.ا', // Jordanian Dinar
+  JPY: '¥', // Japanese Yen
+  KES: 'KSh', // Kenyan Shilling
+  KGS: 'с', // Kyrgystani Som
+  KHR: '៛', // Cambodian Riel
+  KID: '$', // Kiribati dollar
+  KMF: 'CF', // Comorian Franc
+  KRW: '₩', // South Korean Won
+  KWD: 'د.ك', // Kuwaiti Dinar
+  KYD: '$', // Cayman Islands Dollar
+  KZT: '₸', // Kazakhstani Tenge
+  LAK: '₭', // Laotian Kip
+  LBP: 'ل.ل', // Lebanese Pound
+  LKR: 'රු', // Sri Lankan Rupee
+  LRD: '$', // Liberian Dollar
+  LSL: 'L', // Lesotho Loti
+  LYD: 'ل.د', // Libyan Dinar
+  MAD: 'د.م.', // Moroccan Dirham
+  MDL: 'L', // Moldovan Leu
+  MGA: 'Ar', // Malagasy Ariary
+  MKD: 'ден', // Macedonian Denar
+  MMK: 'K', // Myanma Kyat
+  MNT: '₮', // Mongolian Tugrik
+  MOP: 'MOP$', // Macanese Pataca
+  MRU: 'UM', // Mauritanian Ouguiya
+  MUR: '₨', // Mauritian Rupee
+  MVR: 'ރ.', // Maldivian Rufiyaa
+  MWK: 'MK', // Malawian Kwacha
+  MXN: '$', // Mexican Peso
+  MYR: 'RM', // Malaysian Ringgit
+  MZN: 'MT', // Mozambican Metical
+  NAD: '$', // Namibian Dollar
+  NGN: '₦', // Nigerian Naira
+  NIO: 'C$', // Nicaraguan Córdoba
+  NOK: 'kr', // Norwegian Krone
+  NPR: '₨', // Nepalese Rupee
+  NZD: '$', // New Zealand Dollar
+  OMR: 'ر.ع.', // Omani Rial
+  PAB: 'B/.', // Panamanian Balboa
+  PEN: 'S/', // Peruvian Nuevo Sol
+  PGK: 'K', // Papua New Guinean Kina
+  PHP: '₱', // Philippine Peso
+  PKR: '₨', // Pakistani Rupee
+  PLN: 'zł', // Polish Zloty
+  PYG: '₲', // Paraguayan Guarani
+  QAR: 'ر.ق', // Qatari Rial
+  RON: 'lei', // Romanian Leu
+  RSD: 'дин', // Serbian Dinar
+  RUB: '₽', // Russian Ruble
+  RWF: 'RF', // Rwandan Franc
+  SAR: 'ر.س', // Saudi Riyal
+  SBD: '$', // Solomon Islands Dollar
+  SCR: 'SR', // Seychellois Rupee
+  SDG: 'ج.س.', // Sudanese Pound
+  SEK: 'kr', // Swedish Krona
+  SGD: '$', // Singapore Dollar
+  SHP: '£', // Saint Helena Pound
+  SLL: 'Le', // Sierra Leonean Leone
+  SOS: 'Sh', // Somali Shilling
+  SPL: 'L', // Seborgan Luigino
+  SRD: '$', // Surinamese Dollar
+  STN: 'Db', // São Tomé and Príncipe Dobra
+  SVC: '₡', // Salvadoran Colón
+  SYP: '£S', // Syrian Pound
+  SZL: 'E', // Swazi Lilangeni
+  THB: '฿', // Thai Baht
+  TJS: 'ЅМ', // Tajikistani Somoni
+  TMT: 'T', // Turkmenistani Manat
+  TND: 'د.ت', // Tunisian Dinar
+  TOP: 'T$', // Tongan Pa'anga
+  TRY: '₺', // Turkish Lira
+  TTD: 'TT$', // Trinidad and Tobago Dollar
+  TVD: '$', // Tuvaluan Dollar
+  TWD: 'NT$', // New Taiwan Dollar
+  TZS: 'TSh', // Tanzanian Shilling
+  UAH: '₴', // Ukrainian Hryvnia
+  UGX: 'USh', // Ugandan Shilling
+  USD: '$', // United States Dollar
+  UYU: '$U', // Uruguayan Peso
+  UZS: 'UZS', // Uzbekistan Som
+  VEF: 'Bs.', // Venezuelan Bolívar
+  VND: '₫', // Vietnamese Dong
+  VUV: 'VT', // Vanuatu Vatu
+  WST: 'WS$', // Samoan Tala
+  XAF: 'FCFA', // CFA Franc BEAC
+  XCD: 'EC$', // East Caribbean Dollar
+  XDR: 'SDR', // Special Drawing Rights
+  XOF: 'CFA', // CFA Franc BCEAO
+  XPF: 'CFP', // CFP Franc
+  YER: '﷼', // Yemeni Rial
+  ZAR: 'R', // South African Rand
+  ZMW: 'ZK', // Zambian Kwacha
+  ZWD: 'Z$', // Zimbabwean Dollar
+};
diff --git a/src/utils/dateFormatter.test.ts b/src/utils/dateFormatter.test.ts
new file mode 100644
index 0000000000..a8e2b4b096
--- /dev/null
+++ b/src/utils/dateFormatter.test.ts
@@ -0,0 +1,37 @@
+import { formatDate } from './dateFormatter';
+
+describe('formatDate', () => {
+  test('formats date with st suffix', () => {
+    expect(formatDate('2023-01-01')).toBe('1st Jan 2023');
+    expect(formatDate('2023-05-21')).toBe('21st May 2023');
+    expect(formatDate('2023-10-31')).toBe('31st Oct 2023');
+  });
+
+  test('formats date with nd suffix', () => {
+    expect(formatDate('2023-06-02')).toBe('2nd Jun 2023');
+    expect(formatDate('2023-09-22')).toBe('22nd Sep 2023');
+  });
+
+  test('formats date with rd suffix', () => {
+    expect(formatDate('2023-07-03')).toBe('3rd Jul 2023');
+    expect(formatDate('2023-08-23')).toBe('23rd Aug 2023');
+  });
+
+  test('formats date with th suffix', () => {
+    expect(formatDate('2023-02-04')).toBe('4th Feb 2023');
+    expect(formatDate('2023-03-11')).toBe('11th Mar 2023');
+    expect(formatDate('2023-04-12')).toBe('12th Apr 2023');
+    expect(formatDate('2023-05-13')).toBe('13th May 2023');
+    expect(formatDate('2023-06-24')).toBe('24th Jun 2023');
+  });
+
+  test('throws error for empty date string', () => {
+    expect(() => formatDate('')).toThrow('Date string is required');
+  });
+
+  test('throws error for invalid date string', () => {
+    expect(() => formatDate('invalid-date')).toThrow(
+      'Invalid date string provided',
+    );
+  });
+});
diff --git a/src/utils/dateFormatter.ts b/src/utils/dateFormatter.ts
new file mode 100644
index 0000000000..92f4abc051
--- /dev/null
+++ b/src/utils/dateFormatter.ts
@@ -0,0 +1,33 @@
+export function formatDate(dateString: string): string {
+  if (!dateString) {
+    throw new Error('Date string is required');
+  }
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) {
+    throw new Error('Invalid date string provided');
+  }
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  const getSuffix = (day: number): string => {
+    if (day >= 11 && day <= 13) return 'th';
+    const lastDigit = day % 10;
+    switch (lastDigit) {
+      case 1:
+        return 'st';
+      case 2:
+        return 'nd';
+      case 3:
+        return 'rd';
+      default:
+        return 'th';
+    }
+  };
+  const suffix = getSuffix(day);
+
+  const monthName = new Intl.DateTimeFormat('en', { month: 'short' }).format(
+    date,
+  );
+
+  return `${day}${suffix} ${monthName} ${year}`;
+}
diff --git a/src/utils/errorHandler.test.tsx b/src/utils/errorHandler.test.tsx
new file mode 100644
index 0000000000..45f46e6389
--- /dev/null
+++ b/src/utils/errorHandler.test.tsx
@@ -0,0 +1,39 @@
+type TFunction = (key: string, options?: Record<string, unknown>) => string;
+
+import { errorHandler } from './errorHandler';
+import { toast } from 'react-toastify';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    error: jest.fn(),
+  },
+}));
+
+describe('Test if errorHandler is working properly', () => {
+  const t: TFunction = (key: string) => key;
+  const tErrors: TFunction = (key: string, options?: Record<string, unknown>) =>
+    key;
+
+  it('should call toast.error with the correct message if error message is "Failed to fetch"', () => {
+    const error = new Error('Failed to fetch');
+    errorHandler(t, error);
+
+    expect(toast.error).toHaveBeenCalledWith(tErrors('talawaApiUnavailable'));
+  });
+
+  it('should call toast.error with the error message if it is not "Failed to fetch"', () => {
+    const error = new Error('Some other error message');
+    errorHandler(t, error);
+
+    expect(toast.error).toHaveBeenCalledWith(error.message);
+  });
+
+  it('should call toast.error with the error message if error object is falsy', () => {
+    const error = null;
+    errorHandler(t, error);
+
+    expect(toast.error).toHaveBeenCalledWith(
+      tErrors('unknownError', { msg: error }),
+    );
+  });
+});
diff --git a/src/utils/errorHandler.tsx b/src/utils/errorHandler.tsx
new file mode 100644
index 0000000000..b7a22210a8
--- /dev/null
+++ b/src/utils/errorHandler.tsx
@@ -0,0 +1,24 @@
+type TFunction = (key: string, options?: Record<string, unknown>) => string;
+
+import { toast } from 'react-toastify';
+import i18n from './i18n';
+/** 
+  This function is used to handle api errors in the application.
+  It takes in the error object and displays the error message to the user.
+  If the error is due to the Talawa API being unavailable, it displays a custom message.
+*/
+export const errorHandler = (a: unknown, error: unknown): void => {
+  const tErrors: TFunction = i18n.getFixedT(null, 'errors');
+  if (error instanceof Error) {
+    switch (error.message) {
+      case 'Failed to fetch':
+        toast.error(tErrors('talawaApiUnavailable') as string);
+        break;
+      // Add more cases as needed
+      default:
+        toast.error(error.message);
+    }
+  } else {
+    toast.error(tErrors('unknownError', { msg: error }) as string);
+  }
+};
diff --git a/src/utils/fieldTypes.ts b/src/utils/fieldTypes.ts
new file mode 100644
index 0000000000..b17fb9833a
--- /dev/null
+++ b/src/utils/fieldTypes.ts
@@ -0,0 +1,3 @@
+const availableFieldTypes = ['String', 'Boolean', 'Date', 'Number'];
+
+export default availableFieldTypes;
diff --git a/src/utils/formEnumFields.ts b/src/utils/formEnumFields.ts
new file mode 100644
index 0000000000..03b033f185
--- /dev/null
+++ b/src/utils/formEnumFields.ts
@@ -0,0 +1,352 @@
+const countryOptions = [
+  { value: 'af', label: 'Afghanistan' },
+  { value: 'al', label: 'Albania' },
+  { value: 'dz', label: 'Algeria' },
+  { value: 'ad', label: 'Andorra' },
+  { value: 'ao', label: 'Angola' },
+  { value: 'ai', label: 'Anguilla' },
+  { value: 'ag', label: 'Antigua and Barbuda' },
+  { value: 'ar', label: 'Argentina' },
+  { value: 'am', label: 'Armenia' },
+  { value: 'aw', label: 'Aruba' },
+  { value: 'au', label: 'Australia' },
+  { value: 'at', label: 'Austria' },
+  { value: 'az', label: 'Azerbaijan' },
+  { value: 'bs', label: 'Bahamas' },
+  { value: 'bh', label: 'Bahrain' },
+  { value: 'bd', label: 'Bangladesh' },
+  { value: 'bb', label: 'Barbados' },
+  { value: 'by', label: 'Belarus' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'bz', label: 'Belize' },
+  { value: 'bj', label: 'Benin' },
+  { value: 'bm', label: 'Bermuda' },
+  { value: 'bt', label: 'Bhutan' },
+  { value: 'bo', label: 'Bolivia' },
+  { value: 'ba', label: 'Bosnia and Herzegovina' },
+  { value: 'bw', label: 'Botswana' },
+  { value: 'br', label: 'Brazil' },
+  { value: 'bn', label: 'Brunei' },
+  { value: 'bg', label: 'Bulgaria' },
+  { value: 'bf', label: 'Burkina Faso' },
+  { value: 'bi', label: 'Burundi' },
+  { value: 'cv', label: 'Cabo Verde' },
+  { value: 'kh', label: 'Cambodia' },
+  { value: 'cm', label: 'Cameroon' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'ky', label: 'Cayman Islands' },
+  { value: 'cf', label: 'Central African Republic' },
+  { value: 'td', label: 'Chad' },
+  { value: 'cl', label: 'Chile' },
+  { value: 'cn', label: 'China' },
+  { value: 'co', label: 'Colombia' },
+  { value: 'km', label: 'Comoros' },
+  { value: 'cg', label: 'Congo' },
+  { value: 'cr', label: 'Costa Rica' },
+  { value: 'hr', label: 'Croatia' },
+  { value: 'cu', label: 'Cuba' },
+  { value: 'cy', label: 'Cyprus' },
+  { value: 'cz', label: 'Czechia' },
+  { value: 'dk', label: 'Denmark' },
+  { value: 'dj', label: 'Djibouti' },
+  { value: 'dm', label: 'Dominica' },
+  { value: 'do', label: 'Dominican Republic' },
+  { value: 'ec', label: 'Ecuador' },
+  { value: 'eg', label: 'Egypt' },
+  { value: 'sv', label: 'El Salvador' },
+  { value: 'gq', label: 'Equatorial Guinea' },
+  { value: 'er', label: 'Eritrea' },
+  { value: 'ee', label: 'Estonia' },
+  { value: 'et', label: 'Ethiopia' },
+  { value: 'fj', label: 'Fiji' },
+  { value: 'fi', label: 'Finland' },
+  { value: 'fr', label: 'France' },
+  { value: 'ga', label: 'Gabon' },
+  { value: 'gm', label: 'Gambia' },
+  { value: 'ge', label: 'Georgia' },
+  { value: 'de', label: 'Germany' },
+  { value: 'gh', label: 'Ghana' },
+  { value: 'gi', label: 'Gibraltar' },
+  { value: 'gr', label: 'Greece' },
+  { value: 'gl', label: 'Greenland' },
+  { value: 'gd', label: 'Grenada' },
+  { value: 'gt', label: 'Guatemala' },
+  { value: 'gn', label: 'Guinea' },
+  { value: 'gw', label: 'Guinea-Bissau' },
+  { value: 'gy', label: 'Guyana' },
+  { value: 'ht', label: 'Haiti' },
+  { value: 'hn', label: 'Honduras' },
+  { value: 'hu', label: 'Hungary' },
+  { value: 'is', label: 'Iceland' },
+  { value: 'in', label: 'India' },
+  { value: 'id', label: 'Indonesia' },
+  { value: 'ir', label: 'Iran' },
+  { value: 'iq', label: 'Iraq' },
+  { value: 'ie', label: 'Ireland' },
+  { value: 'il', label: 'Israel' },
+  { value: 'it', label: 'Italy' },
+  { value: 'jm', label: 'Jamaica' },
+  { value: 'jp', label: 'Japan' },
+  { value: 'jo', label: 'Jordan' },
+  { value: 'kz', label: 'Kazakhstan' },
+  { value: 'ke', label: 'Kenya' },
+  { value: 'ki', label: 'Kiribati' },
+  { value: 'kw', label: 'Kuwait' },
+  { value: 'kg', label: 'Kyrgyzstan' },
+  { value: 'la', label: 'Laos' },
+  { value: 'lv', label: 'Latvia' },
+  { value: 'lb', label: 'Lebanon' },
+  { value: 'ls', label: 'Lesotho' },
+  { value: 'lr', label: 'Liberia' },
+  { value: 'ly', label: 'Libya' },
+  { value: 'li', label: 'Liechtenstein' },
+  { value: 'lt', label: 'Lithuania' },
+  { value: 'lu', label: 'Luxembourg' },
+  { value: 'mk', label: 'North Macedonia' },
+  { value: 'mg', label: 'Madagascar' },
+  { value: 'mw', label: 'Malawi' },
+  { value: 'my', label: 'Malaysia' },
+  { value: 'mv', label: 'Maldives' },
+  { value: 'ml', label: 'Mali' },
+  { value: 'mt', label: 'Malta' },
+  { value: 'mh', label: 'Marshall Islands' },
+  { value: 'mr', label: 'Mauritania' },
+  { value: 'mu', label: 'Mauritius' },
+  { value: 'mx', label: 'Mexico' },
+  { value: 'fm', label: 'Micronesia' },
+  { value: 'md', label: 'Moldova' },
+  { value: 'mc', label: 'Monaco' },
+  { value: 'mn', label: 'Mongolia' },
+  { value: 'me', label: 'Montenegro' },
+  { value: 'ma', label: 'Morocco' },
+  { value: 'mz', label: 'Mozambique' },
+  { value: 'mm', label: 'Myanmar' },
+  { value: 'na', label: 'Namibia' },
+  { value: 'nr', label: 'Nauru' },
+  { value: 'np', label: 'Nepal' },
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'nz', label: 'New Zealand' },
+  { value: 'ni', label: 'Nicaragua' },
+  { value: 'ne', label: 'Niger' },
+  { value: 'ng', label: 'Nigeria' },
+  { value: 'kp', label: 'North Korea' },
+  { value: 'no', label: 'Norway' },
+  { value: 'om', label: 'Oman' },
+  { value: 'pk', label: 'Pakistan' },
+  { value: 'pw', label: 'Palau' },
+  { value: 'pa', label: 'Panama' },
+  { value: 'pg', label: 'Papua New Guinea' },
+  { value: 'py', label: 'Paraguay' },
+  { value: 'pe', label: 'Peru' },
+  { value: 'ph', label: 'Philippines' },
+  { value: 'pl', label: 'Poland' },
+  { value: 'pt', label: 'Portugal' },
+  { value: 'qa', label: 'Qatar' },
+  { value: 'ro', label: 'Romania' },
+  { value: 'ru', label: 'Russia' },
+  { value: 'rw', label: 'Rwanda' },
+  { value: 'lc', label: 'Saint Lucia' },
+  { value: 'vc', label: 'Saint Vincent and the Grenadines' },
+  { value: 'ws', label: 'Samoa' },
+  { value: 'sm', label: 'San Marino' },
+  { value: 'st', label: 'Sao Tome and Principe' },
+  { value: 'sa', label: 'Saudi Arabia' },
+  { value: 'sn', label: 'Senegal' },
+  { value: 'rs', label: 'Serbia' },
+  { value: 'sc', label: 'Seychelles' },
+  { value: 'sl', label: 'Sierra Leone' },
+  { value: 'sg', label: 'Singapore' },
+  { value: 'sk', label: 'Slovakia' },
+  { value: 'si', label: 'Slovenia' },
+  { value: 'sb', label: 'Solomon Islands' },
+  { value: 'so', label: 'Somalia' },
+  { value: 'za', label: 'South Africa' },
+  { value: 'kr', label: 'South Korea' },
+  { value: 'ss', label: 'South Sudan' },
+  { value: 'es', label: 'Spain' },
+  { value: 'lk', label: 'Sri Lanka' },
+  { value: 'sd', label: 'Sudan' },
+  { value: 'sr', label: 'Suriname' },
+  { value: 'sz', label: 'Eswatini' },
+  { value: 'se', label: 'Sweden' },
+  { value: 'ch', label: 'Switzerland' },
+  { value: 'sy', label: 'Syria' },
+  { value: 'tw', label: 'Taiwan' },
+  { value: 'tj', label: 'Tajikistan' },
+  { value: 'tz', label: 'Tanzania' },
+  { value: 'th', label: 'Thailand' },
+  { value: 'tl', label: 'Timor-Leste' },
+  { value: 'tg', label: 'Togo' },
+  { value: 'to', label: 'Tonga' },
+  { value: 'tt', label: 'Trinidad and Tobago' },
+  { value: 'tn', label: 'Tunisia' },
+  { value: 'tr', label: 'Turkey' },
+  { value: 'tm', label: 'Turkmenistan' },
+  { value: 'tv', label: 'Tuvalu' },
+  { value: 'ug', label: 'Uganda' },
+  { value: 'ua', label: 'Ukraine' },
+  { value: 'ae', label: 'United Arab Emirates' },
+  { value: 'gb', label: 'United Kingdom' },
+  { value: 'us', label: 'United States' },
+  { value: 'uy', label: 'Uruguay' },
+  { value: 'uz', label: 'Uzbekistan' },
+  { value: 'vu', label: 'Vanuatu' },
+  { value: 'va', label: 'Vatican City' },
+  { value: 've', label: 'Venezuela' },
+  { value: 'vn', label: 'Vietnam' },
+  { value: 'ye', label: 'Yemen' },
+  { value: 'zm', label: 'Zambia' },
+  { value: 'zw', label: 'Zimbabwe' },
+];
+
+const educationGradeEnum = [
+  {
+    value: 'NO_GRADE',
+    label: 'No-Grade',
+  },
+  {
+    value: 'PRE_KG',
+    label: 'Pre-Kg',
+  },
+  {
+    value: 'KG',
+    label: 'Kg',
+  },
+  {
+    value: 'GRADE_1',
+    label: 'Grade-1',
+  },
+  {
+    value: 'GRADE_2',
+    label: 'Grade-2',
+  },
+  {
+    value: 'GRADE_3',
+    label: 'Grade-3',
+  },
+  {
+    value: 'GRADE_4',
+    label: 'Grade-4',
+  },
+  {
+    value: 'GRADE_5',
+    label: 'Grade-5',
+  },
+  {
+    value: 'GRADE_6',
+    label: 'Grade-6',
+  },
+  {
+    value: 'GRADE_7',
+    label: 'Grade-7',
+  },
+  {
+    value: 'GRADE_8',
+    label: 'Grade-8',
+  },
+  {
+    value: 'GRADE_9',
+    label: 'Grade-9',
+  },
+  {
+    value: 'GRADE_10',
+    label: 'Grade-10',
+  },
+  {
+    value: 'GRADE_11',
+    label: 'Grade-11',
+  },
+  {
+    value: 'GRADE_12',
+    label: 'Grade-12',
+  },
+  {
+    value: 'GRADUATE',
+    label: 'Graduate',
+  },
+];
+
+const maritalStatusEnum = [
+  {
+    value: 'SINGLE',
+    label: 'Single',
+  },
+  {
+    value: 'ENGAGED',
+    label: 'Engaged',
+  },
+  {
+    value: 'MARRIED',
+    label: 'Married',
+  },
+  {
+    value: 'DIVORCED',
+    label: 'Divorced',
+  },
+  {
+    value: 'WIDOWED',
+    label: 'Widowed',
+  },
+  {
+    value: 'SEPARATED',
+    label: 'Separated',
+  },
+];
+
+const genderEnum = [
+  {
+    value: 'MALE',
+    label: 'Male',
+  },
+  {
+    value: 'FEMALE',
+    label: 'Female',
+  },
+  {
+    value: 'OTHER',
+    label: 'Other',
+  },
+];
+
+const employmentStatusEnum = [
+  {
+    value: 'FULL_TIME',
+    label: 'Full-Time',
+  },
+  {
+    value: 'PART_TIME',
+    label: 'Part-Time',
+  },
+  {
+    value: 'UNEMPLOYED',
+    label: 'Unemployed',
+  },
+];
+
+const userRoleEnum = [
+  {
+    value: 'USER',
+    label: 'User',
+  },
+  {
+    value: 'ADMIN',
+    label: 'Admin',
+  },
+  {
+    value: 'SUPERADMIN',
+    label: 'Super Admin',
+  },
+  {
+    value: 'NON_USER',
+    label: 'Non-User',
+  },
+];
+
+export {
+  countryOptions,
+  educationGradeEnum,
+  maritalStatusEnum,
+  genderEnum,
+  employmentStatusEnum,
+  userRoleEnum,
+};
diff --git a/src/utils/getOrganizationId.ts b/src/utils/getOrganizationId.ts
new file mode 100644
index 0000000000..0a7c283e39
--- /dev/null
+++ b/src/utils/getOrganizationId.ts
@@ -0,0 +1,8 @@
+/* istanbul ignore next */
+const getOrganizationId = (url: string): string => {
+  const id = url?.split('=')[1];
+
+  return id?.split('#')[0];
+};
+
+export default getOrganizationId;
diff --git a/src/utils/getRefreshToken.test.ts b/src/utils/getRefreshToken.test.ts
new file mode 100644
index 0000000000..58de898a66
--- /dev/null
+++ b/src/utils/getRefreshToken.test.ts
@@ -0,0 +1,54 @@
+// SKIP_LOCALSTORAGE_CHECK
+import { refreshToken } from './getRefreshToken';
+
+jest.mock('@apollo/client', () => {
+  const originalModule = jest.requireActual('@apollo/client');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    ApolloClient: jest.fn(() => ({
+      mutate: jest.fn(() =>
+        Promise.resolve({
+          data: {
+            refreshToken: {
+              accessToken: 'newAccessToken',
+              refreshToken: 'newRefreshToken',
+            },
+          },
+        }),
+      ),
+    })),
+  };
+});
+
+describe('refreshToken', () => {
+  // Mock window.location.reload()
+  const { location } = window;
+  delete (global.window as any).location;
+  global.window.location = { ...location, reload: jest.fn() };
+
+  // Mock localStorage.setItem() and localStorage.clear()
+
+  Storage.prototype.setItem = jest.fn();
+  Storage.prototype.clear = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns true when the token is refreshed successfully', async () => {
+    const result = await refreshToken();
+
+    expect(localStorage.setItem).toHaveBeenCalledWith(
+      'Talawa-admin_token',
+      JSON.stringify('newAccessToken'),
+    );
+    expect(localStorage.setItem).toHaveBeenCalledWith(
+      'Talawa-admin_refreshToken',
+      JSON.stringify('newRefreshToken'),
+    );
+    expect(result).toBe(true);
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+});
diff --git a/src/utils/getRefreshToken.ts b/src/utils/getRefreshToken.ts
new file mode 100644
index 0000000000..5d6f8aa2ce
--- /dev/null
+++ b/src/utils/getRefreshToken.ts
@@ -0,0 +1,35 @@
+import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
+import { BACKEND_URL } from 'Constant/constant';
+import { REFRESH_TOKEN_MUTATION } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from './useLocalstorage';
+
+export async function refreshToken(): Promise<boolean> {
+  const client = new ApolloClient({
+    link: new HttpLink({
+      uri: BACKEND_URL,
+    }),
+    cache: new InMemoryCache(),
+  });
+
+  const { getItem, setItem } = useLocalStorage();
+
+  const refreshToken = getItem('refreshToken');
+  /* istanbul ignore next */
+  try {
+    const { data } = await client.mutate({
+      mutation: REFRESH_TOKEN_MUTATION,
+      variables: {
+        refreshToken: refreshToken,
+      },
+    });
+
+    setItem('token', data.refreshToken.accessToken);
+    setItem('refreshToken', data.refreshToken.refreshToken);
+
+    window.location.reload();
+    return true;
+  } catch (error) {
+    console.error('Failed to refresh token', error);
+    return false;
+  }
+}
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
new file mode 100644
index 0000000000..3aafbd843d
--- /dev/null
+++ b/src/utils/i18n.ts
@@ -0,0 +1,27 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpApi from 'i18next-http-backend';
+
+import { languageArray } from './languages';
+
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .use(HttpApi)
+  .init({
+    ns: ['translation', 'errors', 'common'],
+    defaultNS: 'translation',
+    fallbackLng: 'en',
+    supportedLngs: languageArray,
+    detection: {
+      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
+      caches: ['cookie'],
+    },
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+    // debug: true,
+  });
+
+export default i18n;
diff --git a/src/utils/i18nForTest.ts b/src/utils/i18nForTest.ts
new file mode 100644
index 0000000000..673b4b0750
--- /dev/null
+++ b/src/utils/i18nForTest.ts
@@ -0,0 +1,34 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpApi from 'i18next-http-backend';
+
+import { languageArray } from './languages';
+import translationEnglish from '../../public/locales/en/translation.json';
+import translationCommonEnglish from '../../public/locales/en/common.json';
+import translationErrorEnglish from '../../public/locales/en/errors.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(HttpApi)
+  .use(initReactI18next)
+  .init({
+    ns: ['translation', 'errors', 'common'],
+    defaultNS: 'translation',
+    fallbackLng: 'en',
+    supportedLngs: languageArray,
+    detection: {
+      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
+      caches: ['cookie'],
+    },
+    resources: {
+      en: {
+        translation: translationEnglish,
+        common: translationCommonEnglish,
+        errors: translationErrorEnglish,
+      },
+    },
+    react: { useSuspense: false },
+  });
+
+export default i18n;
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
new file mode 100644
index 0000000000..7ab84a61c1
--- /dev/null
+++ b/src/utils/interfaces.ts
@@ -0,0 +1,701 @@
+export interface InterfaceUserType {
+  user: {
+    firstName: string;
+    lastName: string;
+    image: string | null;
+    email: string;
+  };
+}
+
+export interface InterfaceUserInfo {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  image?: string | null;
+}
+
+// Base interface for common event properties
+export interface InterfaceBaseEvent {
+  _id: string;
+  title: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  location: string;
+  startTime: string;
+  endTime: string;
+  allDay: boolean;
+  recurring: boolean;
+}
+
+export interface InterfaceActionItemCategoryInfo {
+  _id: string;
+  name: string;
+  isDisabled: boolean;
+  createdAt: string;
+  creator: { _id: string; firstName: string; lastName: string };
+}
+
+export interface InterfaceActionItemCategoryList {
+  actionItemCategoriesByOrganization: InterfaceActionItemCategoryInfo[];
+}
+
+export interface InterfaceActionItemInfo {
+  _id: string;
+  assigneeType: 'EventVolunteer' | 'EventVolunteerGroup' | 'User';
+  assignee: InterfaceEventVolunteerInfo | null;
+  assigneeGroup: InterfaceVolunteerGroupInfo | null;
+  assigneeUser: InterfaceUserInfo | null;
+  assigner: InterfaceUserInfo;
+  actionItemCategory: {
+    _id: string;
+    name: string;
+  };
+  preCompletionNotes: string;
+  postCompletionNotes: string | null;
+  assignmentDate: Date;
+  dueDate: Date;
+  completionDate: Date | null;
+  isCompleted: boolean;
+  event: {
+    _id: string;
+    title: string;
+  } | null;
+  creator: InterfaceUserInfo;
+  allottedHours: number | null;
+}
+
+export interface InterfaceActionItemList {
+  actionItemsByOrganization: InterfaceActionItemInfo[];
+}
+
+export interface InterfaceMembersList {
+  organizations: {
+    _id: string;
+    members: InterfaceMemberInfo[];
+  }[];
+}
+
+export interface InterfaceMemberInfo {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  image: string;
+  createdAt: string;
+  organizationsBlockedBy: {
+    _id: string;
+  }[];
+}
+
+export interface InterfaceOrgConnectionInfoType {
+  _id: string;
+  image: string | null;
+  creator: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+  };
+  name: string;
+  members: {
+    _id: string;
+  }[];
+  admins: {
+    _id: string;
+  }[];
+  createdAt: string;
+  address: InterfaceAddress;
+}
+export interface InterfaceOrgConnectionType {
+  organizationsConnection: InterfaceOrgConnectionInfoType[];
+}
+
+export interface InterfaceQueryOrganizationsListObject {
+  _id: string;
+  image: string | null;
+  creator: {
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
+  name: string;
+  description: string;
+  address: InterfaceAddress;
+  userRegistrationRequired: boolean;
+  visibleInSearch: boolean;
+  members: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }[];
+  admins: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    createdAt: string;
+  }[];
+  membershipRequests: {
+    _id: string;
+    user: {
+      firstName: string;
+      lastName: string;
+      email: string;
+    };
+  }[];
+  blockedUsers: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  }[];
+}
+
+export interface InterfaceQueryOrganizationListObject {
+  _id: string;
+  image: string | null;
+  creator: {
+    firstName: string;
+    lastName: string;
+  };
+  name: string;
+  members: {
+    _id: string;
+  }[];
+  admins: {
+    _id: string;
+  }[];
+  createdAt: string;
+  address: InterfaceAddress;
+}
+
+export interface InterfacePostForm {
+  posttitle: string;
+  postinfo: string;
+  postphoto: string | null;
+  postvideo: string | null;
+  pinned: boolean;
+}
+export interface InterfaceQueryOrganizationPostListItem {
+  posts: {
+    edges: {
+      node: {
+        _id: string;
+        title: string;
+        text: string;
+        imageUrl: string | null;
+        videoUrl: string | null;
+        creator: {
+          _id: string;
+          firstName: string;
+          lastName: string;
+          email: string;
+        };
+        createdAt: string;
+        likeCount: number;
+        commentCount: number;
+        pinned: boolean;
+
+        likedBy: { _id: string }[];
+        comments: {
+          _id: string;
+          text: string;
+          creator: { _id: string };
+          createdAt: string;
+          likeCount: number;
+          likedBy: { _id: string }[];
+        }[];
+      };
+      cursor: string;
+    }[];
+    pageInfo: {
+      startCursor: string;
+      endCursor: string;
+      hasNextPage: boolean;
+      hasPreviousPage: boolean;
+    };
+    totalCount: number;
+  };
+}
+
+export interface InterfaceTagData {
+  _id: string;
+  name: string;
+  parentTag: { _id: string };
+  usersAssignedTo: {
+    totalCount: number;
+  };
+  childTags: {
+    totalCount: number;
+  };
+  ancestorTags: {
+    _id: string;
+    name: string;
+  }[];
+}
+
+interface InterfaceTagNodeData {
+  edges: {
+    node: InterfaceTagData;
+    cursor: string;
+  }[];
+  pageInfo: {
+    startCursor: string;
+    endCursor: string;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  };
+  totalCount: number;
+}
+
+interface InterfaceTagMembersData {
+  edges: {
+    node: {
+      _id: string;
+      firstName: string;
+      lastName: string;
+    };
+  }[];
+  pageInfo: {
+    startCursor: string;
+    endCursor: string;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  };
+  totalCount: number;
+}
+
+export interface InterfaceQueryOrganizationUserTags {
+  userTags: InterfaceTagNodeData;
+}
+
+export interface InterfaceQueryUserTagChildTags {
+  name: string;
+  childTags: InterfaceTagNodeData;
+  ancestorTags: {
+    _id: string;
+    name: string;
+  }[];
+}
+
+export interface InterfaceQueryUserTagsAssignedMembers {
+  name: string;
+  usersAssignedTo: InterfaceTagMembersData;
+  ancestorTags: {
+    _id: string;
+    name: string;
+  }[];
+}
+
+export interface InterfaceQueryUserTagsMembersToAssignTo {
+  name: string;
+  usersToAssignTo: InterfaceTagMembersData;
+}
+
+export interface InterfaceQueryOrganizationAdvertisementListItem {
+  advertisements: {
+    edges: {
+      node: {
+        _id: string;
+        name: string;
+        mediaUrl: string;
+        endDate: string;
+        startDate: string;
+        type: 'BANNER' | 'MENU' | 'POPUP';
+      };
+      cursor: string;
+    }[];
+    pageInfo: {
+      startCursor: string;
+      endCursor: string;
+      hasNextPage: boolean;
+      hasPreviousPage: boolean;
+    };
+    totalCount: number;
+  };
+}
+
+export interface InterfaceQueryOrganizationFundCampaigns {
+  name: string;
+  isArchived: boolean;
+  campaigns: {
+    _id: string;
+    name: string;
+    fundingGoal: number;
+    startDate: Date;
+    endDate: Date;
+    createdAt: string;
+    currency: string;
+  }[];
+}
+export interface InterfaceUserCampaign {
+  _id: string;
+  name: string;
+  fundingGoal: number;
+  startDate: Date;
+  endDate: Date;
+  currency: string;
+}
+export interface InterfaceQueryFundCampaignsPledges {
+  fundId: {
+    name: string;
+  };
+  name: string;
+  fundingGoal: number;
+  currency: string;
+  startDate: Date;
+  endDate: Date;
+  pledges: InterfacePledgeInfo[];
+}
+export interface InterfaceFundInfo {
+  _id: string;
+  name: string;
+  refrenceNumber: string;
+  taxDeductible: boolean;
+  isArchived: boolean;
+  isDefault: boolean;
+  createdAt: string;
+  organizationId: string;
+  creator: { _id: string; firstName: string; lastName: string };
+}
+export interface InterfaceCampaignInfo {
+  _id: string;
+  name: string;
+  fundingGoal: number;
+  startDate: Date;
+  endDate: Date;
+  createdAt: string;
+  currency: string;
+}
+export interface InterfacePledgeInfo {
+  _id: string;
+  campaign?: { _id: string; name: string; endDate: Date };
+  amount: number;
+  currency: string;
+  endDate: string;
+  startDate: string;
+  users: InterfaceUserInfo[];
+}
+export interface InterfaceQueryOrganizationEventListItem
+  extends InterfaceBaseEvent {
+  isPublic: boolean;
+  isRegisterable: boolean;
+}
+
+export interface InterfaceQueryBlockPageMemberListItem {
+  _id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  organizationsBlockedBy: {
+    _id: string;
+  }[];
+}
+
+export interface InterfaceQueryUserListItem {
+  user: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    image: string | null;
+    email: string;
+    organizationsBlockedBy: {
+      _id: string;
+      name: string;
+      image: string | null;
+      address: InterfaceAddress;
+      creator: {
+        _id: string;
+        firstName: string;
+        lastName: string;
+        email: string;
+        image: string | null;
+      };
+      createdAt: string;
+    }[];
+    joinedOrganizations: {
+      _id: string;
+      name: string;
+      address: InterfaceAddress;
+      image: string | null;
+      createdAt: string;
+      creator: {
+        _id: string;
+        firstName: string;
+        lastName: string;
+        email: string;
+        image: string | null;
+      };
+    }[];
+    createdAt: string;
+    registeredEvents: { _id: string }[];
+    membershipRequests: { _id: string }[];
+  };
+  appUserProfile: {
+    _id: string;
+    adminFor: { _id: string }[];
+    isSuperAdmin: boolean;
+    createdOrganizations: { _id: string }[];
+    createdEvents: { _id: string }[];
+    eventAdmin: { _id: string }[];
+  };
+}
+
+export interface InterfaceQueryVenueListItem {
+  _id: string;
+  name: string;
+  description: string | null;
+  image: string | null;
+  capacity: string;
+}
+
+export interface InterfaceAddress {
+  city: string;
+  countryCode: string;
+  dependentLocality: string;
+  line1: string;
+  line2: string;
+  postalCode: string;
+  sortingCode: string;
+  state: string;
+}
+export interface InterfaceCreateFund {
+  fundName: string;
+  fundRef: string;
+  isDefault: boolean;
+  isArchived: boolean;
+  taxDeductible: boolean;
+}
+
+export interface InterfacePostCard {
+  id: string;
+  creator: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    id: string;
+  };
+  postedAt: string;
+  image: string | null;
+  video: string | null;
+  text: string;
+  title: string;
+  likeCount: number;
+  commentCount: number;
+  comments: {
+    id: string;
+    creator: {
+      id: string;
+      firstName: string;
+      lastName: string;
+      email: string;
+    };
+    likeCount: number;
+    likedBy: {
+      id: string;
+    }[];
+    text: string;
+  }[];
+  likedBy: {
+    firstName: string;
+    lastName: string;
+    id: string;
+  }[];
+  fetchPosts: () => void;
+}
+
+export interface InterfaceCreatePledge {
+  pledgeUsers: InterfaceUserInfo[];
+  pledgeAmount: number;
+  pledgeCurrency: string;
+  pledgeStartDate: Date;
+  pledgeEndDate: Date;
+}
+
+export interface InterfaceQueryMembershipRequestsListItem {
+  organizations: {
+    _id: string;
+    membershipRequests: {
+      _id: string;
+      user: {
+        _id: string;
+        firstName: string;
+        lastName: string;
+        email: string;
+      };
+    }[];
+  }[];
+}
+
+export interface InterfaceAgendaItemCategoryInfo {
+  _id: string;
+  name: string;
+  description: string;
+  createdBy: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+  };
+}
+
+export interface InterfaceAgendaItemCategoryList {
+  agendaItemCategoriesByOrganization: InterfaceAgendaItemCategoryInfo[];
+}
+
+export interface InterfaceAddOnSpotAttendeeProps {
+  show: boolean;
+  handleClose: () => void;
+  reloadMembers: () => void;
+}
+
+export interface InterfaceFormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNo: string;
+  gender: string;
+}
+
+export interface InterfaceAgendaItemInfo {
+  _id: string;
+  title: string;
+  description: string;
+  duration: string;
+  attachments: string[];
+  createdBy: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+  };
+  urls: string[];
+  users: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+  }[];
+  sequence: number;
+  categories: {
+    _id: string;
+    name: string;
+  }[];
+  organization: {
+    _id: string;
+    name: string;
+  };
+  relatedEvent: {
+    _id: string;
+    title: string;
+  };
+}
+
+export interface InterfaceAgendaItemList {
+  agendaItemByEvent: InterfaceAgendaItemInfo[];
+}
+
+export interface InterfaceMapType {
+  [key: string]: string;
+}
+
+export interface InterfaceCustomFieldData {
+  type: string;
+  name: string;
+}
+
+export interface InterfaceEventVolunteerInfo {
+  _id: string;
+  hasAccepted: boolean;
+  hoursVolunteered: number | null;
+  user: InterfaceUserInfo;
+  assignments: {
+    _id: string;
+  }[];
+  groups: {
+    _id: string;
+    name: string;
+    volunteers: {
+      _id: string;
+    }[];
+  }[];
+}
+
+export interface InterfaceVolunteerGroupInfo {
+  _id: string;
+  name: string;
+  description: string | null;
+  event: {
+    _id: string;
+  };
+  volunteersRequired: number | null;
+  createdAt: string;
+  creator: InterfaceUserInfo;
+  leader: InterfaceUserInfo;
+  volunteers: {
+    _id: string;
+    user: InterfaceUserInfo;
+  }[];
+  assignments: {
+    _id: string;
+    actionItemCategory: {
+      _id: string;
+      name: string;
+    };
+    allottedHours: number;
+    isCompleted: boolean;
+  }[];
+}
+
+export interface InterfaceCreateVolunteerGroup {
+  name: string;
+  description: string | null;
+  leader: InterfaceUserInfo | null;
+  volunteersRequired: number | null;
+  volunteerUsers: InterfaceUserInfo[];
+}
+
+export interface InterfaceUserEvents extends InterfaceBaseEvent {
+  volunteerGroups: {
+    _id: string;
+    name: string;
+    volunteersRequired: number;
+    description: string;
+    volunteers: { _id: string }[];
+  }[];
+  volunteers: {
+    _id: string;
+    user: {
+      _id: string;
+    };
+  }[];
+}
+
+export interface InterfaceVolunteerMembership {
+  _id: string;
+  status: string;
+  createdAt: string;
+  event: {
+    _id: string;
+    title: string;
+    startDate: string;
+  };
+  volunteer: {
+    _id: string;
+    user: InterfaceUserInfo;
+  };
+  group: {
+    _id: string;
+    name: string;
+  };
+}
+
+export interface InterfaceVolunteerRank {
+  rank: number;
+  hoursVolunteered: number;
+  user: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    image: string | null;
+  };
+}
diff --git a/src/utils/languages.ts b/src/utils/languages.ts
new file mode 100644
index 0000000000..9e8e019784
--- /dev/null
+++ b/src/utils/languages.ts
@@ -0,0 +1,31 @@
+const languageArray = ['en', 'fr', 'hi', 'sp', 'zh'];
+
+const languages = [
+  {
+    code: 'en',
+    name: 'English', // english
+    country_code: 'gb',
+  },
+  {
+    code: 'fr',
+    name: 'Français', // french
+    country_code: 'fr',
+  },
+  {
+    code: 'hi',
+    name: 'हिन्दी', // hindi
+    country_code: 'in',
+  },
+  {
+    code: 'sp',
+    name: 'Español', // spanish
+    country_code: 'ar',
+  },
+  {
+    code: 'zh',
+    name: '中國人', // chinese (traditional)
+    country_code: 'cn',
+  },
+];
+
+export { languageArray, languages };
diff --git a/src/utils/linkValid.test.tsx b/src/utils/linkValid.test.tsx
new file mode 100644
index 0000000000..0cf8a9785b
--- /dev/null
+++ b/src/utils/linkValid.test.tsx
@@ -0,0 +1,15 @@
+import { isValidLink } from './linkValidator';
+
+describe('Testing link validator', () => {
+  it('returns true for a valid link', () => {
+    const validLink = 'https://www.example.com';
+    const result = isValidLink(validLink);
+    expect(result).toBe(true);
+  });
+
+  it('returns false for an invalid link', () => {
+    const invalidLink = 'not a valid link';
+    const result = isValidLink(invalidLink);
+    expect(result).toBe(false);
+  });
+});
diff --git a/src/utils/linkValidator.ts b/src/utils/linkValidator.ts
new file mode 100644
index 0000000000..fac4766a3b
--- /dev/null
+++ b/src/utils/linkValidator.ts
@@ -0,0 +1,8 @@
+export const isValidLink = (link: string): boolean => {
+  try {
+    new URL(link);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
diff --git a/src/utils/organizationTagsUtils.ts b/src/utils/organizationTagsUtils.ts
new file mode 100644
index 0000000000..56654a3abb
--- /dev/null
+++ b/src/utils/organizationTagsUtils.ts
@@ -0,0 +1,117 @@
+// This file will contain the utililities for organization tags
+
+import type { ApolloError } from '@apollo/client';
+import type {
+  InterfaceQueryOrganizationUserTags,
+  InterfaceQueryUserTagChildTags,
+  InterfaceQueryUserTagsAssignedMembers,
+  InterfaceQueryUserTagsMembersToAssignTo,
+} from './interfaces';
+
+// This is the style object for mui's data grid used to list the data (tags and member data)
+export const dataGridStyle = {
+  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
+    outline: 'none !important',
+  },
+  '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within': {
+    outline: 'none',
+  },
+  '& .MuiDataGrid-row:hover': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-row.Mui-hovered': {
+    backgroundColor: 'transparent',
+  },
+  '& .MuiDataGrid-root': {
+    borderRadius: '0.1rem',
+  },
+  '& .MuiDataGrid-main': {
+    borderRadius: '0.1rem',
+  },
+  '& .MuiDataGrid-topContainer': {
+    position: 'fixed',
+    top: 290,
+    zIndex: 1,
+  },
+  '& .MuiDataGrid-virtualScrollerContent': {
+    marginTop: 6.5,
+  },
+};
+
+// the data chunk size for tag related queries
+export const TAGS_QUERY_DATA_CHUNK_SIZE = 10;
+
+// the tag action type
+export type TagActionType = 'assignToTags' | 'removeFromTags';
+
+// the sortedByType
+export type SortedByType = 'ASCENDING' | 'DESCENDING';
+
+// Interfaces for tag queries:
+// 1. Base interface for Apollo query results
+interface InterfaceBaseQueryResult {
+  loading: boolean;
+  error?: ApolloError;
+  refetch?: () => void;
+}
+
+// 2. Generic pagination options
+interface InterfacePaginationVariables {
+  after?: string | null;
+  first?: number | null;
+}
+
+// 3. Generic fetch more options
+interface InterfaceBaseFetchMoreOptions<T> {
+  variables: InterfacePaginationVariables;
+  updateQuery?: (prev: T, options: { fetchMoreResult: T }) => T;
+}
+
+// 4. Query interfaces
+export interface InterfaceOrganizationTagsQuery
+  extends InterfaceBaseQueryResult {
+  data?: {
+    organizations: InterfaceQueryOrganizationUserTags[];
+  };
+  fetchMore: (
+    options: InterfaceBaseFetchMoreOptions<{
+      organizations: InterfaceQueryOrganizationUserTags[];
+    }>,
+  ) => void;
+}
+
+export interface InterfaceOrganizationSubTagsQuery
+  extends InterfaceBaseQueryResult {
+  data?: {
+    getChildTags: InterfaceQueryUserTagChildTags;
+  };
+  fetchMore: (
+    options: InterfaceBaseFetchMoreOptions<{
+      getChildTags: InterfaceQueryUserTagChildTags;
+    }>,
+  ) => void;
+}
+
+export interface InterfaceTagAssignedMembersQuery
+  extends InterfaceBaseQueryResult {
+  data?: {
+    getAssignedUsers: InterfaceQueryUserTagsAssignedMembers;
+  };
+  fetchMore: (
+    options: InterfaceBaseFetchMoreOptions<{
+      getAssignedUsers: InterfaceQueryUserTagsAssignedMembers;
+    }>,
+  ) => void;
+}
+
+export interface InterfaceTagUsersToAssignToQuery
+  extends InterfaceBaseQueryResult {
+  data?: {
+    getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
+  };
+  fetchMore: (
+    options: InterfaceBaseFetchMoreOptions<{
+      getUsersToAssignTo: InterfaceQueryUserTagsMembersToAssignTo;
+    }>,
+  ) => void;
+}
diff --git a/src/utils/recurrenceUtils/index.ts b/src/utils/recurrenceUtils/index.ts
new file mode 100644
index 0000000000..9b376fc83d
--- /dev/null
+++ b/src/utils/recurrenceUtils/index.ts
@@ -0,0 +1,3 @@
+export * from './recurrenceTypes';
+export * from './recurrenceConstants';
+export * from './recurrenceUtilityFunctions';
diff --git a/src/utils/recurrenceUtils/recurrenceConstants.ts b/src/utils/recurrenceUtils/recurrenceConstants.ts
new file mode 100644
index 0000000000..0b2dd68b4f
--- /dev/null
+++ b/src/utils/recurrenceUtils/recurrenceConstants.ts
@@ -0,0 +1,87 @@
+/*
+  Recurrence constants
+*/
+
+import {
+  Frequency,
+  RecurrenceEndOption,
+  RecurringEventMutationType,
+  WeekDays,
+} from './recurrenceTypes';
+
+// recurrence frequency mapping
+export const frequencies = {
+  [Frequency.DAILY]: 'Day',
+  [Frequency.WEEKLY]: 'Week',
+  [Frequency.MONTHLY]: 'Month',
+  [Frequency.YEARLY]: 'Year',
+};
+
+// recurrence days options to select from in the UI
+export const daysOptions = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+// recurrence days array
+export const Days = [
+  WeekDays.SUNDAY,
+  WeekDays.MONDAY,
+  WeekDays.TUESDAY,
+  WeekDays.WEDNESDAY,
+  WeekDays.THURSDAY,
+  WeekDays.FRIDAY,
+  WeekDays.SATURDAY,
+];
+
+// constants for recurrence end options
+export const endsNever = RecurrenceEndOption.never;
+export const endsOn = RecurrenceEndOption.on;
+export const endsAfter = RecurrenceEndOption.after;
+
+// recurrence end options array
+export const recurrenceEndOptions = [endsNever, endsOn, endsAfter];
+
+// different types of updations / deletions on recurring events
+export const thisInstance = RecurringEventMutationType.thisInstance;
+export const thisAndFollowingInstances =
+  RecurringEventMutationType.thisAndFollowingInstances;
+export const allInstances = RecurringEventMutationType.allInstances;
+
+export const recurringEventMutationOptions = [
+  thisInstance,
+  thisAndFollowingInstances,
+  allInstances,
+];
+
+// array of week days containing 'MO' to 'FR
+export const mondayToFriday = Days.filter(
+  (day) => day !== WeekDays.SATURDAY && day !== WeekDays.SUNDAY,
+);
+
+// names of week days
+export const dayNames = {
+  [WeekDays.SUNDAY]: 'Sunday',
+  [WeekDays.MONDAY]: 'Monday',
+  [WeekDays.TUESDAY]: 'Tuesday',
+  [WeekDays.WEDNESDAY]: 'Wednesday',
+  [WeekDays.THURSDAY]: 'Thursday',
+  [WeekDays.FRIDAY]: 'Friday',
+  [WeekDays.SATURDAY]: 'Saturday',
+};
+
+// names of months
+export const monthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+// week day's occurences in month
+export const weekDayOccurences = ['First', 'Second', 'Third', 'Fourth', 'Last'];
diff --git a/src/utils/recurrenceUtils/recurrenceTypes.ts b/src/utils/recurrenceUtils/recurrenceTypes.ts
new file mode 100644
index 0000000000..684c98ad87
--- /dev/null
+++ b/src/utils/recurrenceUtils/recurrenceTypes.ts
@@ -0,0 +1,59 @@
+/*
+  Recurrence types
+*/
+
+// interface for the recurrenceRuleStateData that would be sent to the backend
+export interface InterfaceRecurrenceRuleState {
+  recurrenceStartDate: Date;
+  recurrenceEndDate: Date | null;
+  frequency: Frequency;
+  weekDays: WeekDays[];
+  interval: number;
+  count: number | undefined;
+  weekDayOccurenceInMonth: number | undefined;
+}
+
+// interface for the RecurrenceRule document that would be fetched from the backend
+export interface InterfaceRecurrenceRule {
+  recurrenceStartDate: string;
+  recurrenceEndDate: string | null;
+  frequency: Frequency;
+  weekDays: WeekDays[];
+  interval: number;
+  count: number | null;
+  weekDayOccurenceInMonth: number | null;
+}
+
+// recurrence frequency
+export enum Frequency {
+  DAILY = 'DAILY',
+  WEEKLY = 'WEEKLY',
+  MONTHLY = 'MONTHLY',
+  YEARLY = 'YEARLY',
+}
+
+// recurrence week days
+export enum WeekDays {
+  SUNDAY = 'SUNDAY',
+  MONDAY = 'MONDAY',
+  TUESDAY = 'TUESDAY',
+  WEDNESDAY = 'WEDNESDAY',
+  THURSDAY = 'THURSDAY',
+  FRIDAY = 'FRIDAY',
+  SATURDAY = 'SATURDAY',
+}
+
+// recurrence end options
+// i.e. whether it 'never' ends, ends 'on' a certain date, or 'after' a certain number of occurences
+export enum RecurrenceEndOption {
+  never = 'never',
+  on = 'on',
+  after = 'after',
+}
+
+// update / delete options of recurring events
+export enum RecurringEventMutationType {
+  thisInstance = 'thisInstance',
+  thisAndFollowingInstances = 'thisAndFollowingInstances',
+  allInstances = 'allInstances',
+}
diff --git a/src/utils/recurrenceUtils/recurrenceUtilityFunctions.ts b/src/utils/recurrenceUtils/recurrenceUtilityFunctions.ts
new file mode 100644
index 0000000000..d316174042
--- /dev/null
+++ b/src/utils/recurrenceUtils/recurrenceUtilityFunctions.ts
@@ -0,0 +1,252 @@
+/*
+   Recurrence utility functions
+*/
+
+import dayjs from 'dayjs';
+import {
+  Days,
+  dayNames,
+  mondayToFriday,
+  monthNames,
+  weekDayOccurences,
+} from './recurrenceConstants';
+import { Frequency } from './recurrenceTypes';
+import type {
+  WeekDays,
+  InterfaceRecurrenceRuleState,
+  InterfaceRecurrenceRule,
+} from './recurrenceTypes';
+
+// function that generates the recurrence rule text to display
+// e.g. - 'Weekly on Sunday, until Feburary 23, 2029'
+export const getRecurrenceRuleText = (
+  recurrenceRuleState: InterfaceRecurrenceRuleState,
+): string => {
+  let recurrenceRuleText = '';
+  const {
+    recurrenceStartDate,
+    recurrenceEndDate,
+    frequency,
+    weekDays,
+    interval,
+    count,
+    weekDayOccurenceInMonth,
+  } = recurrenceRuleState;
+
+  switch (frequency) {
+    case Frequency.DAILY:
+      if (interval && interval > 1) {
+        recurrenceRuleText = `Every ${interval} days`;
+      } else {
+        recurrenceRuleText = 'Daily';
+      }
+      break;
+
+    case Frequency.WEEKLY:
+      if (isMondayToFriday(weekDays)) {
+        if (interval && interval > 1) {
+          recurrenceRuleText = `Every ${interval} weeks, `;
+        }
+        recurrenceRuleText += 'Monday to Friday';
+        break;
+      }
+      if (interval && interval > 1) {
+        recurrenceRuleText = `Every ${interval} weeks on `;
+      } else {
+        recurrenceRuleText = 'Weekly on ';
+      }
+      recurrenceRuleText += getWeekDaysString(weekDays);
+      break;
+
+    case Frequency.MONTHLY:
+      if (interval && interval > 1) {
+        recurrenceRuleText = `Every ${interval} months on `;
+      } else {
+        recurrenceRuleText = 'Monthly on ';
+      }
+
+      if (weekDayOccurenceInMonth) {
+        const getOccurence =
+          weekDayOccurenceInMonth !== -1 ? weekDayOccurenceInMonth - 1 : 4;
+        recurrenceRuleText += `${weekDayOccurences[getOccurence]} ${dayNames[Days[recurrenceStartDate.getDay()]]}`;
+      } else {
+        recurrenceRuleText += `Day ${recurrenceStartDate.getDate()}`;
+      }
+      break;
+
+    case Frequency.YEARLY:
+      if (interval && interval > 1) {
+        recurrenceRuleText = `Every ${interval} years on `;
+      } else {
+        recurrenceRuleText = 'Annually on ';
+      }
+      recurrenceRuleText += `${monthNames[recurrenceStartDate.getMonth()]} ${recurrenceStartDate.getDate()}`;
+      break;
+  }
+
+  if (recurrenceEndDate) {
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    recurrenceRuleText += `, until  ${recurrenceEndDate.toLocaleDateString('en-US', options)}`;
+  }
+
+  if (count) {
+    recurrenceRuleText += `, ${count} ${count > 1 ? 'times' : 'time'}`;
+  }
+
+  return recurrenceRuleText;
+};
+
+// function that generates a string of selected week days for the recurrence rule text
+// e.g. - for an array ['MONDAY', 'TUESDAY', 'FRIDAY'], it would output: 'Monday, Tuesday & Friday'
+const getWeekDaysString = (weekDays: WeekDays[]): string => {
+  const fullDayNames = weekDays.map((day) => dayNames[day]);
+
+  let weekDaysString = fullDayNames.join(', ');
+
+  const lastCommaIndex = weekDaysString.lastIndexOf(',');
+  if (lastCommaIndex !== -1) {
+    weekDaysString =
+      weekDaysString.substring(0, lastCommaIndex) +
+      ' &' +
+      weekDaysString.substring(lastCommaIndex + 1);
+  }
+
+  return weekDaysString;
+};
+
+// function that checks if the array contains all days from Monday to Friday
+const isMondayToFriday = (weekDays: WeekDays[]): boolean => {
+  return mondayToFriday.every((day) => weekDays.includes(day));
+};
+
+// function that returns the occurence of the weekday in a month,
+// i.e. First Monday, Second Monday, Last Monday, etc.
+export const getWeekDayOccurenceInMonth = (date: Date): number => {
+  const dayOfMonth = date.getDate();
+
+  // Calculate the current occurrence
+  const occurrence = Math.ceil(dayOfMonth / 7);
+
+  return occurrence;
+};
+
+// function that checks whether it's the last occurence of the weekday in that month
+export const isLastOccurenceOfWeekDay = (date: Date): boolean => {
+  const currentDay = date.getDay();
+
+  const lastOccurenceInMonth = new Date(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    0,
+  );
+
+  // set the lastOccurenceInMonth to that day's last occurence
+  while (lastOccurenceInMonth.getDay() !== currentDay) {
+    lastOccurenceInMonth.setDate(lastOccurenceInMonth.getDate() - 1);
+  }
+
+  return date.getDate() === lastOccurenceInMonth.getDate();
+};
+
+// function that evaluates whether the startDate or endDate of a recurring event instance have changed
+export const haveInstanceDatesChanged = (
+  instanceOriginalStartDate: string,
+  instanceOriginalEndDate: string,
+  instanceNewStartDate: string,
+  instanceNewEndDate: string,
+): boolean => {
+  return (
+    instanceOriginalStartDate !== instanceNewStartDate ||
+    instanceOriginalEndDate !== instanceNewEndDate
+  );
+};
+
+// function that checks whether the recurrence rule has changed
+export const hasRecurrenceRuleChanged = (
+  originalRecurrencerule: InterfaceRecurrenceRule | null,
+  recurrenceRuleState: InterfaceRecurrenceRuleState,
+): boolean => {
+  if (!originalRecurrencerule) {
+    return false;
+  }
+
+  const newRecurrenceRule = getRecurrenceRule(recurrenceRuleState);
+
+  const recurrenceProperties = Object.keys(
+    newRecurrenceRule,
+  ) as (keyof InterfaceRecurrenceRule)[];
+
+  for (const recurrenceProperty of recurrenceProperties) {
+    if (recurrenceProperty === 'weekDays') {
+      if (
+        weekDaysHaveChanged(
+          originalRecurrencerule.weekDays,
+          newRecurrenceRule.weekDays,
+        )
+      ) {
+        return true;
+      }
+    } else if (
+      originalRecurrencerule[recurrenceProperty] !==
+      newRecurrenceRule[recurrenceProperty]
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+// function that returns the recurrence rule object based on the current recurrence rule state
+const getRecurrenceRule = (
+  recurrenceRuleState: InterfaceRecurrenceRuleState,
+): InterfaceRecurrenceRule => {
+  const {
+    recurrenceStartDate,
+    recurrenceEndDate,
+    frequency,
+    weekDays,
+    interval,
+    count,
+    weekDayOccurenceInMonth,
+  } = recurrenceRuleState;
+
+  const originalRecurrencerule = {
+    recurrenceStartDate: dayjs(recurrenceStartDate).format('YYYY-MM-DD'),
+    recurrenceEndDate: recurrenceEndDate
+      ? dayjs(recurrenceEndDate).format('YYYY-MM-DD')
+      : null,
+    frequency,
+    weekDays: weekDays?.length ? weekDays : [],
+    interval,
+    count: count ?? null,
+    weekDayOccurenceInMonth: weekDayOccurenceInMonth ?? null,
+  };
+
+  return originalRecurrencerule;
+};
+
+// function to check whether recurrence weekDays have been changed
+const weekDaysHaveChanged = (
+  originalWeekDays: WeekDays[],
+  currentWeekDays: WeekDays[],
+): boolean => {
+  if (originalWeekDays.length !== currentWeekDays.length) {
+    return true;
+  }
+
+  // Sort both arrays
+  const sortedOriginalWeekDays = [...originalWeekDays].sort();
+  const sortedCurrentWeekDays = [...currentWeekDays].sort();
+
+  // Compare arrays
+  for (let i = 0; i < sortedOriginalWeekDays.length; i++) {
+    if (sortedOriginalWeekDays[i] !== sortedCurrentWeekDays[i]) {
+      return true;
+    }
+  }
+
+  return false;
+};
diff --git a/src/utils/timezoneUtils/dateTimeConfig.ts b/src/utils/timezoneUtils/dateTimeConfig.ts
new file mode 100644
index 0000000000..8d352bcde6
--- /dev/null
+++ b/src/utils/timezoneUtils/dateTimeConfig.ts
@@ -0,0 +1,28 @@
+// dateTimeConfig.ts
+
+export const dateTimeFields = {
+  directFields: [
+    'createdAt',
+    'birthDate',
+    'updatedAt',
+    'recurrenceStartDate',
+    'recurrenceEndDate',
+    'pluginCreatedBy',
+    'dueDate',
+    'completionDate',
+    'startCursor',
+    'endCursor',
+  ],
+  pairedFields: [
+    {
+      dateField: 'startDate',
+      timeField: 'startTime',
+      combinedField: 'startDateTime',
+    },
+    {
+      dateField: 'endDate',
+      timeField: 'endTime',
+      combinedField: 'endDateTime',
+    },
+  ],
+};
diff --git a/src/utils/timezoneUtils/dateTimeMiddleware.test.ts b/src/utils/timezoneUtils/dateTimeMiddleware.test.ts
new file mode 100644
index 0000000000..b14702b546
--- /dev/null
+++ b/src/utils/timezoneUtils/dateTimeMiddleware.test.ts
@@ -0,0 +1,226 @@
+import { requestMiddleware, responseMiddleware } from './dateTimeMiddleware';
+import type { Operation, FetchResult } from '@apollo/client/core';
+import { Observable } from '@apollo/client/core';
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+const DUMMY_QUERY: DocumentNode = gql`
+  query GetDummyData {
+    dummyData {
+      id
+    }
+  }
+`;
+
+describe('Date Time Middleware Tests', () => {
+  describe('Request Middleware', () => {
+    it('should convert local date and time to UTC format in request variables', () => {
+      const operation: Operation = {
+        query: DUMMY_QUERY,
+        operationName: 'GetDummyData',
+        variables: { startDate: '2023-09-01', startTime: '12:00:00' },
+        getContext: jest.fn(() => ({})),
+        setContext: jest.fn(),
+        extensions: {},
+      };
+
+      const forward = jest.fn(
+        (op) =>
+          new Observable<FetchResult>((observer) => {
+            expect(op.variables['startDate']).toBe('2023-09-01');
+            expect(op.variables['startTime']).toMatch(
+              /\d{2}:\d{2}:\d{2}.\d{3}Z/,
+            );
+            observer.complete();
+          }),
+      );
+
+      const observable = requestMiddleware.request(operation, forward);
+      expect(observable).not.toBeNull();
+      observable?.subscribe(() => {
+        expect(forward).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Response Middleware', () => {
+    it('should convert UTC date and time to local format in response data', () => {
+      const testResponse: FetchResult = {
+        data: { createdAt: '2023-09-01T12:00:00.000Z' },
+        extensions: {},
+        context: {},
+      };
+
+      const operation: Operation = {
+        query: DUMMY_QUERY,
+        operationName: 'GetDummyData',
+        variables: {},
+        getContext: jest.fn(() => ({})),
+        setContext: jest.fn(),
+        extensions: {},
+      };
+
+      const forward = jest.fn(
+        () =>
+          new Observable<FetchResult>((observer) => {
+            observer.next(testResponse);
+            observer.complete();
+          }),
+      );
+
+      const observable = responseMiddleware.request(operation, forward);
+      expect(observable).not.toBeNull();
+      return new Promise<void>((resolve, reject) => {
+        observable?.subscribe({
+          next: (response: FetchResult) => {
+            if (!response.data) {
+              reject(new Error('Expected response.data to be defined'));
+              return;
+            }
+
+            // Now it's safe to assume response.data exists for the following expectations
+            expect(response.data['createdAt']).not.toBe(
+              '2023-09-01T12:00:00.000Z',
+            );
+            resolve();
+          },
+          error: reject,
+        });
+      }).then(() => {
+        expect(forward).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Date Time Middleware Edge Cases', () => {
+    it('should handle invalid date formats gracefully in request middleware', () => {
+      const operation: Operation = {
+        query: DUMMY_QUERY,
+        operationName: 'GetDummyData',
+        variables: { startDate: 'not-a-date', startTime: '25:99:99' },
+        getContext: jest.fn(() => ({})),
+        setContext: jest.fn(),
+        extensions: {},
+      };
+
+      const forward = jest.fn(
+        (op) =>
+          new Observable<FetchResult>((observer) => {
+            expect(op.variables['startDate']).toBe('not-a-date');
+            expect(op.variables['startTime']).toBe('25:99:99');
+            observer.complete();
+          }),
+      );
+
+      const observable = requestMiddleware.request(operation, forward);
+      expect(observable).not.toBeNull();
+      observable?.subscribe(() => {
+        expect(forward).toHaveBeenCalled();
+      });
+    });
+
+    it('should not break when encountering invalid dates in response middleware', () => {
+      const testResponse: FetchResult = {
+        data: { createdAt: 'invalid-date-time' },
+        extensions: {},
+        context: {},
+      };
+
+      const operation: Operation = {
+        query: DUMMY_QUERY,
+        operationName: 'GetDummyData',
+        variables: {},
+        getContext: jest.fn(() => ({})),
+        setContext: jest.fn(),
+        extensions: {},
+      };
+
+      const forward = jest.fn(
+        () =>
+          new Observable<FetchResult>((observer) => {
+            observer.next(testResponse);
+            observer.complete();
+          }),
+      );
+
+      const observable = responseMiddleware.request(operation, forward);
+
+      expect(observable).not.toBeNull();
+      return new Promise<void>((resolve, reject) => {
+        observable?.subscribe({
+          next: (response: FetchResult) => {
+            // Ensure there's always an assertion
+            expect(response.data).toBeTruthy(); // This ensures `response.data` is defined and truthy
+
+            if (!response.data) {
+              // Explicitly throw an error if response.data is null or undefined
+              reject(new Error('Expected response.data to be defined'));
+              return;
+            }
+
+            // Now it's safe to assume response.data exists for the following expectations
+            expect(response.data['createdAt']).toBe('invalid-date-time');
+            resolve();
+          },
+          error: reject,
+        });
+      }).then(() => {
+        expect(forward).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Recursive Date Conversion in Nested Objects', () => {
+    it('should recursively convert date and time in deeply nested objects in request middleware', () => {
+      const operation: Operation = {
+        query: DUMMY_QUERY,
+        operationName: 'GetDummyData',
+        variables: {
+          event: {
+            startDate: '2023-10-01',
+            startTime: '08:00:00',
+            details: {
+              endDate: '2023-10-01',
+              endTime: '18:00:00',
+              additionalInfo: {
+                createdAt: '2023-10-01T08:00:00.000Z',
+              },
+            },
+          },
+        },
+        getContext: jest.fn(() => ({})),
+        setContext: jest.fn(),
+        extensions: {},
+      };
+
+      const forward = jest.fn(
+        (op) =>
+          new Observable<FetchResult>((observer) => {
+            expect(op.variables.event.startDate).toBe('2023-10-01');
+            expect(op.variables.event.startTime).toMatch(
+              /\d{2}:\d{2}:\d{2}.\d{3}Z/,
+            );
+            expect(op.variables.event.details.endDate).toBe('2023-10-01');
+            expect(op.variables.event.details.endTime).toMatch(
+              /\d{2}:\d{2}:\d{2}.\d{3}Z/,
+            );
+            expect(op.variables.event.details.additionalInfo.createdAt).toMatch(
+              /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/,
+            );
+            observer.complete();
+          }),
+      );
+
+      const observable = requestMiddleware.request(operation, forward);
+      expect(observable).not.toBeNull();
+      return new Promise<void>((resolve, reject) => {
+        observable?.subscribe({
+          complete: resolve,
+          error: reject,
+        });
+      }).then(() => {
+        expect(forward).toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/src/utils/timezoneUtils/dateTimeMiddleware.ts b/src/utils/timezoneUtils/dateTimeMiddleware.ts
new file mode 100644
index 0000000000..70fc20a026
--- /dev/null
+++ b/src/utils/timezoneUtils/dateTimeMiddleware.ts
@@ -0,0 +1,99 @@
+import { ApolloLink } from '@apollo/client/core';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { dateTimeFields } from './dateTimeConfig';
+
+// Extend dayjs with the necessary plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const combineDateTime = (date: string, time: string): string => {
+  return `${date}T${time}`;
+};
+
+const splitDateTime = (dateTimeStr: string): { date: string; time: string } => {
+  const dateTime = dayjs.utc(dateTimeStr);
+  return {
+    date: dateTime.format('YYYY-MM-DD'),
+    time: dateTime.format('HH:mm:ss.SSS[Z]'),
+  };
+};
+
+const convertUTCToLocal = (dateStr: string): string => {
+  if (dayjs(dateStr).isValid()) {
+    return dayjs.utc(dateStr).local().format('YYYY-MM-DDTHH:mm:ss.SSS');
+  }
+  return dateStr;
+};
+
+const convertLocalToUTC = (dateStr: string): string => {
+  if (dayjs(dateStr).isValid()) {
+    const result = dayjs(dateStr).utc().format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
+    return result;
+  }
+  return dateStr;
+};
+
+const traverseAndConvertDates = (
+  obj: Record<string, unknown>,
+  convertFn: (dateStr: string) => string,
+  splitFn: (dateTimeStr: string) => { date: string; time: string },
+): void => {
+  if (typeof obj !== 'object' || obj === null) return;
+
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+
+    // Handle paired date and time fields
+    dateTimeFields.pairedFields.forEach(({ dateField, timeField }) => {
+      if (key === dateField && obj[timeField]) {
+        const combinedDateTime = combineDateTime(
+          obj[dateField] as string,
+          obj[timeField] as string,
+        );
+        const convertedDateTime = convertFn(combinedDateTime);
+        const { date, time } = splitFn(convertedDateTime);
+        obj[dateField] = date; // Restore the original date field
+        obj[timeField] = time; // Restore the original time field
+      }
+    });
+
+    // Convert simple date/time fields
+    if (dateTimeFields.directFields.includes(key)) {
+      obj[key] = convertFn(value as string);
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      traverseAndConvertDates(
+        value as Record<string, unknown>,
+        convertFn,
+        splitFn,
+      ); // Recursive call for nested objects/arrays
+    }
+  });
+};
+
+// Request middleware to convert local time to UTC time
+export const requestMiddleware = new ApolloLink((operation, forward) => {
+  traverseAndConvertDates(
+    operation.variables,
+    convertLocalToUTC,
+    splitDateTime,
+  );
+  return forward(operation);
+});
+
+// Response middleware to convert UTC time to local time
+export const responseMiddleware = new ApolloLink((operation, forward) => {
+  return forward(operation).map((response) => {
+    if (response.data) {
+      traverseAndConvertDates(
+        response.data as Record<string, unknown>,
+        convertUTCToLocal,
+        splitDateTime,
+      );
+    }
+    return response;
+  });
+});
diff --git a/src/utils/timezoneUtils/index.ts b/src/utils/timezoneUtils/index.ts
new file mode 100644
index 0000000000..887072b20c
--- /dev/null
+++ b/src/utils/timezoneUtils/index.ts
@@ -0,0 +1,2 @@
+export * from './dateTimeConfig';
+export * from './dateTimeMiddleware';
diff --git a/src/utils/useLocalstorage.test.ts b/src/utils/useLocalstorage.test.ts
new file mode 100644
index 0000000000..7483da4da2
--- /dev/null
+++ b/src/utils/useLocalstorage.test.ts
@@ -0,0 +1,137 @@
+import {
+  getStorageKey,
+  getItem,
+  setItem,
+  removeItem,
+  useLocalStorage,
+} from './useLocalstorage';
+
+describe('Storage Helper Functions', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('generates correct storage key', () => {
+    const key = 'testKey';
+    const prefix = 'TestPrefix';
+    const storageKey = getStorageKey(prefix, key);
+    expect(storageKey).toBe('TestPrefix_testKey');
+  });
+
+  it('gets item from local storage', () => {
+    const key = 'testKey';
+    const prefix = 'TestPrefix';
+    const value = 'data';
+    localStorage.setItem('TestPrefix_testKey', JSON.stringify(value));
+
+    const retrievedValue = getItem(prefix, key);
+
+    expect(retrievedValue).toEqual(value);
+  });
+
+  it('returns null when getting a non-existent item', () => {
+    const key = 'nonExistentKey';
+    const prefix = 'TestPrefix';
+
+    const retrievedValue = getItem(prefix, key);
+
+    expect(retrievedValue).toBeNull();
+  });
+
+  it('sets item in local storage', () => {
+    const key = 'testKey';
+    const prefix = 'TestPrefix';
+    const value = { some: 'data' };
+
+    setItem(prefix, key, value);
+
+    const storedData = localStorage.getItem('TestPrefix_testKey');
+    const parsedData = storedData ? JSON.parse(storedData) : null;
+
+    expect(parsedData).toEqual(value);
+  });
+
+  it('removes item from local storage', () => {
+    const key = 'testKey';
+    const prefix = 'TestPrefix';
+    const value = 'data';
+    localStorage.setItem('TestPrefix_testKey', value);
+
+    removeItem(prefix, key);
+
+    const retrievedValue = localStorage.getItem('TestPrefix_testKey');
+    expect(retrievedValue).toBeNull();
+  });
+
+  it('uses default prefix for useLocalStorage', () => {
+    const storageHelper = useLocalStorage();
+    const key = 'testKey';
+    const value = { some: 'data' };
+
+    storageHelper.setItem(key, value);
+
+    const storedData = localStorage.getItem('Talawa-admin_testKey');
+    const parsedData = storedData ? JSON.parse(storedData) : null;
+
+    expect(parsedData).toEqual(value);
+  });
+
+  it('uses provided prefix for useLocalStorage', () => {
+    const customPrefix = 'CustomPrefix';
+    const storageHelper = useLocalStorage(customPrefix);
+    const key = 'testKey';
+    const value = { some: 'data' };
+
+    storageHelper.setItem(key, value);
+
+    const storedData = localStorage.getItem('CustomPrefix_testKey');
+    const parsedData = storedData ? JSON.parse(storedData) : null;
+
+    expect(parsedData).toEqual(value);
+  });
+
+  it('calls getStorageKey with the correct parameters', () => {
+    const customPrefix = 'CustomPrefix';
+    const storageHelper = useLocalStorage(customPrefix);
+    const key = 'testKey';
+
+    const spyGetStorageKey = jest.spyOn(storageHelper, 'getStorageKey');
+    storageHelper.getStorageKey(key);
+
+    expect(spyGetStorageKey).toHaveBeenCalledWith(key);
+  });
+
+  it('calls getItem with the correct parameters', () => {
+    const customPrefix = 'CustomPrefix';
+    const storageHelper = useLocalStorage(customPrefix);
+    const key = 'testKey';
+
+    const spyGetItem = jest.spyOn(storageHelper, 'getItem');
+    storageHelper.getItem(key);
+
+    expect(spyGetItem).toHaveBeenCalledWith(key);
+  });
+
+  it('calls setItem with the correct parameters', () => {
+    const customPrefix = 'CustomPrefix';
+    const storageHelper = useLocalStorage(customPrefix);
+    const key = 'testKey';
+    const value = 'data';
+
+    const spySetItem = jest.spyOn(storageHelper, 'setItem');
+    storageHelper.setItem(key, value);
+
+    expect(spySetItem).toHaveBeenCalledWith(key, value);
+  });
+
+  it('calls removeItem with the correct parameters', () => {
+    const customPrefix = 'CustomPrefix';
+    const storageHelper = useLocalStorage(customPrefix);
+    const key = 'testKey';
+
+    const spyRemoveItem = jest.spyOn(storageHelper, 'removeItem');
+    storageHelper.removeItem(key);
+
+    expect(spyRemoveItem).toHaveBeenCalledWith(key);
+  });
+});
diff --git a/src/utils/useLocalstorage.ts b/src/utils/useLocalstorage.ts
new file mode 100644
index 0000000000..9650381085
--- /dev/null
+++ b/src/utils/useLocalstorage.ts
@@ -0,0 +1,72 @@
+/**
+ * Helper interface for managing localStorage operations.
+ */
+interface InterfaceStorageHelper {
+  getItem: (key: string) => any;
+  setItem: (key: string, value: any) => void;
+  removeItem: (key: string) => void;
+  getStorageKey: (key: string) => string;
+}
+
+const PREFIX = 'Talawa-admin';
+
+/**
+ * Generates the prefixed key for storage.
+ * @param prefix - Prefix to be added to the key, common for all keys.
+ * @param key - The unique name identifying the value.
+ * @returns - Prefixed key.
+ */
+export const getStorageKey = (prefix: string, key: string): string => {
+  return `${prefix}_${key}`;
+};
+
+/**
+ * Retrieves the stored value for the given key from local storage.
+ * @param prefix - Prefix to be added to the key, common for all keys.
+ * @param key - The unique name identifying the value.
+ * @returns - The stored value for the given key from local storage.
+ */
+export const getItem = (prefix: string, key: string): any => {
+  const prefixedKey = getStorageKey(prefix, key);
+  const storedData = localStorage.getItem(prefixedKey);
+  return storedData ? JSON.parse(storedData) : null;
+};
+
+/**
+ * Sets the value for the given key in local storage.
+ * @param prefix - Prefix to be added to the key, common for all keys.
+ * @param key - The unique name identifying the value.
+ * @param value - The value for the key.
+ */
+export const setItem = (prefix: string, key: string, value: any): void => {
+  const prefixedKey = getStorageKey(prefix, key);
+  localStorage.setItem(prefixedKey, JSON.stringify(value));
+};
+
+/**
+ * Removes the value associated with the given key from local storage.
+ * @param prefix - Prefix to be added to the key, common for all keys.
+ * @param key - The unique name identifying the value.
+ */
+export const removeItem = (prefix: string, key: string): void => {
+  const prefixedKey = getStorageKey(prefix, key);
+  localStorage.removeItem(prefixedKey);
+};
+
+/**
+ * Custom hook for simplified localStorage operations.
+ * @param prefix - Prefix to be added to the key, common for all keys. Default is 'Talawa-admin'.
+ * @returns - Functions to getItem, setItem, removeItem, and getStorageKey.
+ */
+export const useLocalStorage = (
+  prefix: string = PREFIX,
+): InterfaceStorageHelper => {
+  return {
+    getItem: (key: string) => getItem(prefix, key),
+    setItem: (key: string, value: any) => setItem(prefix, key, value),
+    removeItem: (key: string) => removeItem(prefix, key),
+    getStorageKey: (key: string) => getStorageKey(prefix, key),
+  };
+};
+
+export default useLocalStorage;
diff --git a/src/utils/useSession.test.tsx b/src/utils/useSession.test.tsx
new file mode 100644
index 0000000000..32287ccbb0
--- /dev/null
+++ b/src/utils/useSession.test.tsx
@@ -0,0 +1,544 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { toast } from 'react-toastify';
+import useSession from './useSession';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { errorHandler } from 'utils/errorHandler';
+import { BrowserRouter } from 'react-router-dom';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    info: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('utils/errorHandler', () => ({
+  errorHandler: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+const MOCKS = [
+  {
+    request: {
+      query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          timeout: 30,
+        },
+      },
+    },
+    delay: 100,
+  },
+  {
+    request: {
+      query: REVOKE_REFRESH_TOKEN,
+    },
+    result: {
+      data: {
+        revokeRefreshTokenForUser: true,
+      },
+    },
+  },
+];
+
+const wait = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+describe('useSession Hook', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.spyOn(window, 'addEventListener').mockImplementation(jest.fn());
+    jest.spyOn(window, 'removeEventListener').mockImplementation(jest.fn());
+    Object.defineProperty(global, 'localStorage', {
+      value: {
+        clear: jest.fn(),
+      },
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  test('should handle visibility change to visible', async () => {
+    jest.useFakeTimers();
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'visible',
+      writable: true,
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    // Simulate visibility change
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(15 * 60 * 1000);
+    });
+
+    await waitFor(() => {
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        'mousemove',
+        expect.any(Function),
+      );
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        'keydown',
+        expect.any(Function),
+      );
+      expect(toast.warning).toHaveBeenCalledWith('sessionWarning');
+    });
+
+    jest.useRealTimers();
+  });
+
+  test('should handle visibility change to hidden and ensure no warning appears in 15 minutes', async () => {
+    jest.useFakeTimers();
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'hidden',
+      writable: true,
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(15 * 60 * 1000);
+    });
+
+    await waitFor(() => {
+      expect(window.removeEventListener).toHaveBeenCalledWith(
+        'mousemove',
+        expect.any(Function),
+      );
+      expect(window.removeEventListener).toHaveBeenCalledWith(
+        'keydown',
+        expect.any(Function),
+      );
+      expect(toast.warning).not.toHaveBeenCalled();
+    });
+
+    jest.useRealTimers();
+  });
+
+  test('should register event listeners on startSession', async () => {
+    const addEventListenerMock = jest.fn();
+    const originalWindowAddEventListener = window.addEventListener;
+    const originalDocumentAddEventListener = document.addEventListener;
+
+    window.addEventListener = addEventListenerMock;
+    document.addEventListener = addEventListenerMock;
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    expect(addEventListenerMock).toHaveBeenCalledWith(
+      'mousemove',
+      expect.any(Function),
+    );
+    expect(addEventListenerMock).toHaveBeenCalledWith(
+      'keydown',
+      expect.any(Function),
+    );
+    expect(addEventListenerMock).toHaveBeenCalledWith(
+      'visibilitychange',
+      expect.any(Function),
+    );
+
+    window.addEventListener = originalWindowAddEventListener;
+    document.addEventListener = originalDocumentAddEventListener;
+  });
+
+  test('should call handleLogout after session timeout', async () => {
+    jest.useFakeTimers();
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(31 * 60 * 1000);
+    });
+
+    await waitFor(() => {
+      expect(global.localStorage.clear).toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledTimes(2);
+      expect(toast.warning).toHaveBeenNthCalledWith(1, 'sessionWarning');
+      expect(toast.warning).toHaveBeenNthCalledWith(2, 'sessionLogout', {
+        autoClose: false,
+      });
+    });
+  });
+
+  test('should show a warning toast before session expiration', async () => {
+    jest.useFakeTimers();
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(15 * 60 * 1000);
+    });
+
+    await waitFor(() =>
+      expect(toast.warning).toHaveBeenCalledWith('sessionWarning'),
+    );
+
+    jest.useRealTimers();
+  });
+
+  test('should handle error when revoking token fails', async () => {
+    const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+
+    const errorMocks = [
+      {
+        request: {
+          query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+        },
+        result: {
+          data: {
+            getCommunityData: {
+              timeout: 30,
+            },
+          },
+        },
+        delay: 1000,
+      },
+      {
+        request: {
+          query: REVOKE_REFRESH_TOKEN,
+        },
+        error: new Error('Failed to revoke refresh token'),
+      },
+    ];
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={errorMocks} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+      result.current.handleLogout();
+    });
+
+    await waitFor(() =>
+      expect(consoleErrorMock).toHaveBeenCalledWith(
+        'Error revoking refresh token:',
+        expect.any(Error),
+      ),
+    );
+
+    consoleErrorMock.mockRestore();
+  });
+
+  test('should set session timeout based on fetched data', async () => {
+    jest.spyOn(global, 'setTimeout');
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    expect(global.setTimeout).toHaveBeenCalled();
+  });
+
+  test('should call errorHandler on query error', async () => {
+    const errorMocks = [
+      {
+        request: {
+          query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+        },
+        error: new Error('An error occurred'),
+      },
+    ];
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={errorMocks} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    await waitFor(() => expect(errorHandler).toHaveBeenCalled());
+  });
+  //dfghjkjhgfds
+
+  test('should remove event listeners on endSession', async () => {
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    // Mock the removeEventListener functions for both window and document
+    const removeEventListenerMock = jest.fn();
+
+    // Temporarily replace the real methods with the mock
+    const originalWindowRemoveEventListener = window.removeEventListener;
+    const originalDocumentRemoveEventListener = document.removeEventListener;
+
+    window.removeEventListener = removeEventListenerMock;
+    document.removeEventListener = removeEventListenerMock;
+
+    // await waitForNextUpdate();
+
+    act(() => {
+      result.current.startSession();
+    });
+
+    act(() => {
+      result.current.endSession();
+    });
+
+    // Test that event listeners were removed
+    expect(removeEventListenerMock).toHaveBeenCalledWith(
+      'mousemove',
+      expect.any(Function),
+    );
+    expect(removeEventListenerMock).toHaveBeenCalledWith(
+      'keydown',
+      expect.any(Function),
+    );
+    expect(removeEventListenerMock).toHaveBeenCalledWith(
+      'visibilitychange',
+      expect.any(Function),
+    );
+
+    // Restore the original removeEventListener functions
+    window.removeEventListener = originalWindowRemoveEventListener;
+    document.removeEventListener = originalDocumentRemoveEventListener;
+  });
+
+  test('should call initialize timers when session is still active when the user returns to the tab', async () => {
+    jest.useFakeTimers();
+    jest.spyOn(global, 'setTimeout').mockImplementation(jest.fn());
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    jest.advanceTimersByTime(1000);
+
+    // Set initial visibility state to visible
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'visible',
+      writable: true,
+    });
+
+    // Start the session
+    act(() => {
+      result.current.startSession();
+      jest.advanceTimersByTime(10 * 60 * 1000); // Fast-forward
+    });
+
+    // Simulate the user leaving the tab (set visibility to hidden)
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'hidden',
+      writable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    // Fast-forward time by more than the session timeout
+    act(() => {
+      jest.advanceTimersByTime(5 * 60 * 1000); // Fast-forward
+    });
+
+    // Simulate the user returning to the tab
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'visible',
+      writable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    jest.advanceTimersByTime(1000);
+
+    expect(global.setTimeout).toHaveBeenCalled();
+
+    // Restore real timers
+    jest.useRealTimers();
+  });
+
+  test('should call handleLogout when session expires due to inactivity away from tab', async () => {
+    jest.useFakeTimers(); // Use fake timers to control time
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    jest.advanceTimersByTime(1000);
+
+    // Set initial visibility state to visible
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'visible',
+      writable: true,
+    });
+
+    // Start the session
+    act(() => {
+      result.current.startSession();
+      jest.advanceTimersByTime(10 * 60 * 1000); // Fast-forward
+    });
+
+    // Simulate the user leaving the tab (set visibility to hidden)
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'hidden',
+      writable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    // Fast-forward time by more than the session timeout
+    act(() => {
+      jest.advanceTimersByTime(32 * 60 * 1000); // Fast-forward by 32 minutes
+    });
+
+    // Simulate the user returning to the tab
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'visible',
+      writable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    jest.advanceTimersByTime(250);
+
+    await waitFor(() => {
+      expect(global.localStorage.clear).toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('sessionLogout', {
+        autoClose: false,
+      });
+    });
+
+    // Restore real timers
+    jest.useRealTimers();
+  });
+
+  test('should handle logout and revoke token', async () => {
+    jest.useFakeTimers();
+
+    const { result } = renderHook(() => useSession(), {
+      wrapper: ({ children }: { children?: ReactNode }) => (
+        <MockedProvider mocks={MOCKS} addTypename={false}>
+          <BrowserRouter>{children}</BrowserRouter>
+        </MockedProvider>
+      ),
+    });
+
+    act(() => {
+      result.current.startSession();
+      result.current.handleLogout();
+    });
+
+    await waitFor(() => {
+      expect(global.localStorage.clear).toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('sessionLogout', {
+        autoClose: false,
+      });
+    });
+
+    jest.useRealTimers();
+  });
+});
diff --git a/src/utils/useSession.tsx b/src/utils/useSession.tsx
new file mode 100644
index 0000000000..4279e7c850
--- /dev/null
+++ b/src/utils/useSession.tsx
@@ -0,0 +1,164 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
+import { t } from 'i18next';
+import { useEffect, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { errorHandler } from 'utils/errorHandler';
+
+type UseSessionReturnType = {
+  startSession: () => void;
+  endSession: () => void;
+  handleLogout: () => void;
+  extendSession: () => void; //for when logged in already, simply extend session
+};
+
+/**
+ * Custom hook for managing user session timeouts in a React application.
+ *
+ * This hook handles:
+ * - Starting and ending the user session.
+ * - Displaying a warning toast at half of the session timeout duration.
+ * - Logging the user out and displaying a session expiration toast when the session times out.
+ * - Automatically resetting the timers when user activity is detected.
+ * - Pausing session timers when the tab is inactive and resuming them when it becomes active again.
+ *
+ * @returns UseSessionReturnType - An object with methods to start and end the session, and to handle logout.
+ */
+const useSession = (): UseSessionReturnType => {
+  const { t: tCommon } = useTranslation('common');
+
+  let startTime: number;
+  let timeoutDuration: number;
+  const [sessionTimeout, setSessionTimeout] = useState<number>(30);
+  // const sessionTimeout = 30;
+  const sessionTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const warningTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const navigate = useNavigate();
+
+  const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
+  const { data, error: queryError } = useQuery(
+    GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+  );
+
+  useEffect(() => {
+    if (queryError) {
+      errorHandler(t, queryError as Error);
+    } else {
+      const sessionTimeoutData = data?.getCommunityData;
+      if (sessionTimeoutData) {
+        setSessionTimeout(sessionTimeoutData.timeout);
+      }
+    }
+  }, [data, queryError]);
+
+  const resetTimers = (): void => {
+    if (sessionTimerRef.current) clearTimeout(sessionTimerRef.current);
+    if (warningTimerRef.current) clearTimeout(warningTimerRef.current);
+  };
+
+  const endSession = (): void => {
+    resetTimers();
+    window.removeEventListener('mousemove', extendSession);
+    window.removeEventListener('keydown', extendSession);
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
+  };
+
+  const handleLogout = async (): Promise<void> => {
+    try {
+      await revokeRefreshToken();
+    } catch (error) {
+      console.error('Error revoking refresh token:', error);
+      // toast.error('Failed to revoke session. Please try again.');
+    }
+    localStorage.clear();
+    endSession();
+    navigate('/');
+    toast.warning(tCommon('sessionLogout'), { autoClose: false });
+  };
+
+  const initializeTimers = (
+    timeLeft?: number,
+    warningTimeLeft?: number,
+  ): void => {
+    const warningTime = warningTimeLeft ?? sessionTimeout / 2;
+    const sessionTimeoutInMilliseconds =
+      (timeLeft || sessionTimeout) * 60 * 1000;
+    const warningTimeInMilliseconds = warningTime * 60 * 1000;
+
+    timeoutDuration = sessionTimeoutInMilliseconds;
+    startTime = Date.now();
+
+    warningTimerRef.current = setTimeout(() => {
+      toast.warning(tCommon('sessionWarning'));
+    }, warningTimeInMilliseconds);
+
+    sessionTimerRef.current = setTimeout(async () => {
+      await handleLogout();
+    }, sessionTimeoutInMilliseconds);
+  };
+
+  const extendSession = (): void => {
+    resetTimers();
+    initializeTimers();
+  };
+
+  const startSession = (): void => {
+    resetTimers();
+    initializeTimers();
+    window.removeEventListener('mousemove', extendSession);
+    window.removeEventListener('keydown', extendSession);
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('mousemove', extendSession);
+    window.addEventListener('keydown', extendSession);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+  };
+
+  const handleVisibilityChange = async (): Promise<void> => {
+    if (document.visibilityState === 'hidden') {
+      window.removeEventListener('mousemove', extendSession);
+      window.removeEventListener('keydown', extendSession);
+      resetTimers(); // Optionally reset timers to prevent them from running in the background
+    } else if (document.visibilityState === 'visible') {
+      window.removeEventListener('mousemove', extendSession);
+      window.removeEventListener('keydown', extendSession); // Ensure no duplicates
+      window.addEventListener('mousemove', extendSession);
+      window.addEventListener('keydown', extendSession);
+
+      // Calculate remaining time now that the tab is active again
+      const elapsedTime = Date.now() - startTime;
+      const remainingTime = timeoutDuration - elapsedTime;
+
+      const remainingSessionTime = Math.max(remainingTime, 0); // Ensures the remaining time is non-negative and measured in ms;
+
+      if (remainingSessionTime > 0) {
+        // Calculate remaining warning time only if session time is positive
+        const remainingWarningTime = Math.max(remainingSessionTime / 2, 0);
+        initializeTimers(
+          remainingSessionTime / 60 / 1000,
+          remainingWarningTime / 60 / 1000,
+        );
+      } else {
+        // Handle session expiration immediately if time has run out
+        await handleLogout();
+      }
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      endSession();
+    };
+  }, []);
+
+  return {
+    startSession,
+    endSession,
+    handleLogout,
+    extendSession,
+  };
+};
+
+export default useSession;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/talawa-admin-docs/.nojekyll b/talawa-admin-docs/.nojekyll
new file mode 100644
index 0000000000..e2ac6616ad
--- /dev/null
+++ b/talawa-admin-docs/.nojekyll
@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
\ No newline at end of file
diff --git a/talawa-admin-docs/Dockerfile b/talawa-admin-docs/Dockerfile
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/talawa-admin-docs/README.md b/talawa-admin-docs/README.md
new file mode 100644
index 0000000000..82dc89754c
--- /dev/null
+++ b/talawa-admin-docs/README.md
@@ -0,0 +1,52 @@
+talawa-admin / [Modules](modules.md)
+
+# Talawa Admin
+💬 Join the community on Slack. The link can be found in the `Talawa` [README.md](https://github.com/PalisadoesFoundation/talawa) file.
+
+![talawa-logo-lite-200x200](https://github.com/PalisadoesFoundation/talawa-admin/assets/16875803/26291ec5-d3c1-4135-8bc7-80885dff613d)
+
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
+[![GitHub stars](https://img.shields.io/github/stars/PalisadoesFoundation/talawa-admin.svg?style=social&label=Star&maxAge=2592000)](https://github.com/PalisadoesFoundation/talawa-admin)
+[![GitHub forks](https://img.shields.io/github/forks/PalisadoesFoundation/talawa-admin.svg?style=social&label=Fork&maxAge=2592000)](https://github.com/PalisadoesFoundation/talawa-admin)
+[![codecov](https://codecov.io/gh/PalisadoesFoundation/talawa-admin/branch/develop/graph/badge.svg?token=II0R0RREES)](https://codecov.io/gh/PalisadoesFoundation/talawa-admin)
+
+Talawa is a modular open source project to manage group activities of both non-profit organizations and businesses.
+
+Core features include:
+
+1.  Membership management
+2.  Groups management
+3.  Event registrations
+4.  Recurring meetings
+5.  Facilities registrations
+
+`talawa` is based on the original `quito` code created by the [Palisadoes Foundation][pfd] as part of its annual Calico Challenge program. Calico provides paid summer internships for Jamaican university students to work on selected open source projects. They are mentored by software professionals and receive stipends based on the completion of predefined milestones. Calico was started in 2015. Visit [The Palisadoes Foundation's website](http://www.palisadoes.org/) for more details on its origin and activities.
+
+# Table of Contents
+
+\<!-- toc --\>
+
+- [Talawa Components](#talawa-components)
+- [Documentation](#documentation)
+- [Installation](#installation)
+
+\<!-- tocstop --\>
+
+# Talawa Components
+
+`talawa` has these major software components:
+
+1. **talawa**: [A mobile application with social media features](https://github.com/PalisadoesFoundation/talawa)
+1. **talawa-api**: [An API providing access to user data and features](https://github.com/PalisadoesFoundation/talawa-api)
+1. **talawa-admin**: [A web based administrative portal](https://github.com/PalisadoesFoundation/talawa-admin)
+1. **talawa-docs**: [The online documentation website](https://github.com/PalisadoesFoundation/talawa-docs)
+
+# Documentation
+
+- The `talawa` documentation can be found [here](https://docs.talawa.io).
+- Want to contribute? Look at [CONTRIBUTING.md](https://github.com/PalisadoesFoundation/talawa-admin/blob/develop/CONTRIBUTING.md) to get started.
+- Visit the [Talawa-Docs GitHub](https://github.com/PalisadoesFoundation/talawa-docs) to see the code.
+
+# Installation
+
+[Follow this guide](https://github.com/PalisadoesFoundation/talawa-admin/blob/develop/INSTALLATION.md)
diff --git a/talawa-admin-docs/classes/components_AddOn_support_services_Plugin_helper.default.md b/talawa-admin-docs/classes/components_AddOn_support_services_Plugin_helper.default.md
new file mode 100644
index 0000000000..31189c706c
--- /dev/null
+++ b/talawa-admin-docs/classes/components_AddOn_support_services_Plugin_helper.default.md
@@ -0,0 +1,75 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/AddOn/support/services/Plugin.helper](../modules/components_AddOn_support_services_Plugin_helper.md) / default
+
+# Class: default
+
+[components/AddOn/support/services/Plugin.helper](../modules/components_AddOn_support_services_Plugin_helper.md).default
+
+## Table of contents
+
+### Constructors
+
+- [constructor](components_AddOn_support_services_Plugin_helper.default.md#constructor)
+
+### Methods
+
+- [fetchInstalled](components_AddOn_support_services_Plugin_helper.default.md#fetchinstalled)
+- [fetchStore](components_AddOn_support_services_Plugin_helper.default.md#fetchstore)
+- [generateLinks](components_AddOn_support_services_Plugin_helper.default.md#generatelinks)
+
+## Constructors
+
+### constructor
+
+• **new default**(): [`default`](components_AddOn_support_services_Plugin_helper.default.md)
+
+#### Returns
+
+[`default`](components_AddOn_support_services_Plugin_helper.default.md)
+
+## Methods
+
+### fetchInstalled
+
+▸ **fetchInstalled**(): `Promise`\<`any`\>
+
+#### Returns
+
+`Promise`\<`any`\>
+
+#### Defined in
+
+[src/components/AddOn/support/services/Plugin.helper.ts:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/support/services/Plugin.helper.ts#L7)
+
+___
+
+### fetchStore
+
+▸ **fetchStore**(): `Promise`\<`any`\>
+
+#### Returns
+
+`Promise`\<`any`\>
+
+#### Defined in
+
+[src/components/AddOn/support/services/Plugin.helper.ts:2](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/support/services/Plugin.helper.ts#L2)
+
+___
+
+### generateLinks
+
+▸ **generateLinks**(`plugins`): \{ `name`: `string` ; `url`: `string`  \}[]
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `plugins` | `any`[] |
+
+#### Returns
+
+\{ `name`: `string` ; `url`: `string`  \}[]
+
+#### Defined in
+
+[src/components/AddOn/support/services/Plugin.helper.ts:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/support/services/Plugin.helper.ts#L12)
diff --git a/talawa-admin-docs/classes/components_AddOn_support_services_Render_helper.default.md b/talawa-admin-docs/classes/components_AddOn_support_services_Render_helper.default.md
new file mode 100644
index 0000000000..28293ca4dc
--- /dev/null
+++ b/talawa-admin-docs/classes/components_AddOn_support_services_Render_helper.default.md
@@ -0,0 +1,21 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/AddOn/support/services/Render.helper](../modules/components_AddOn_support_services_Render_helper.md) / default
+
+# Class: default
+
+[components/AddOn/support/services/Render.helper](../modules/components_AddOn_support_services_Render_helper.md).default
+
+## Table of contents
+
+### Constructors
+
+- [constructor](components_AddOn_support_services_Render_helper.default.md#constructor)
+
+## Constructors
+
+### constructor
+
+• **new default**(): [`default`](components_AddOn_support_services_Render_helper.default.md)
+
+#### Returns
+
+[`default`](components_AddOn_support_services_Render_helper.default.md)
diff --git a/talawa-admin-docs/enums/components_EventCalendar_EventCalendar.ViewType.md b/talawa-admin-docs/enums/components_EventCalendar_EventCalendar.ViewType.md
new file mode 100644
index 0000000000..29922c23d5
--- /dev/null
+++ b/talawa-admin-docs/enums/components_EventCalendar_EventCalendar.ViewType.md
@@ -0,0 +1,32 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/EventCalendar/EventCalendar](../modules/components_EventCalendar_EventCalendar.md) / ViewType
+
+# Enumeration: ViewType
+
+[components/EventCalendar/EventCalendar](../modules/components_EventCalendar_EventCalendar.md).ViewType
+
+## Table of contents
+
+### Enumeration Members
+
+- [DAY](components_EventCalendar_EventCalendar.ViewType.md#day)
+- [MONTH](components_EventCalendar_EventCalendar.ViewType.md#month)
+
+## Enumeration Members
+
+### DAY
+
+• **DAY** = ``"Day"``
+
+#### Defined in
+
+[src/components/EventCalendar/EventCalendar.tsx:46](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventCalendar/EventCalendar.tsx#L46)
+
+___
+
+### MONTH
+
+• **MONTH** = ``"Month"``
+
+#### Defined in
+
+[src/components/EventCalendar/EventCalendar.tsx:47](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventCalendar/EventCalendar.tsx#L47)
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md
new file mode 100644
index 0000000000..eb47c5bd4e
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CheckIn/types](../modules/components_CheckIn_types.md) / InterfaceAttendeeCheckIn
+
+# Interface: InterfaceAttendeeCheckIn
+
+[components/CheckIn/types](../modules/components_CheckIn_types.md).InterfaceAttendeeCheckIn
+
+## Table of contents
+
+### Properties
+
+- [\_id](components_CheckIn_types.InterfaceAttendeeCheckIn.md#_id)
+- [checkIn](components_CheckIn_types.InterfaceAttendeeCheckIn.md#checkin)
+- [user](components_CheckIn_types.InterfaceAttendeeCheckIn.md#user)
+
+## Properties
+
+### \_id
+
+• **\_id**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:8](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L8)
+
+___
+
+### checkIn
+
+• **checkIn**: ``null`` \| \{ `_id`: `string` ; `allotedRoom`: `string` ; `allotedSeat`: `string` ; `time`: `string`  \}
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L10)
+
+___
+
+### user
+
+• **user**: [`InterfaceUser`](components_CheckIn_types.InterfaceUser.md)
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:9](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L9)
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md
new file mode 100644
index 0000000000..9ecfe473e1
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md
@@ -0,0 +1,28 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CheckIn/types](../modules/components_CheckIn_types.md) / InterfaceAttendeeQueryResponse
+
+# Interface: InterfaceAttendeeQueryResponse
+
+[components/CheckIn/types](../modules/components_CheckIn_types.md).InterfaceAttendeeQueryResponse
+
+## Table of contents
+
+### Properties
+
+- [event](components_CheckIn_types.InterfaceAttendeeQueryResponse.md#event)
+
+## Properties
+
+### event
+
+• **event**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `_id` | `string` |
+| `attendeesCheckInStatus` | [`InterfaceAttendeeCheckIn`](components_CheckIn_types.InterfaceAttendeeCheckIn.md)[] |
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L19)
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md
new file mode 100644
index 0000000000..2fa711670a
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceModalProp.md
@@ -0,0 +1,51 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CheckIn/types](../modules/components_CheckIn_types.md) / InterfaceModalProp
+
+# Interface: InterfaceModalProp
+
+[components/CheckIn/types](../modules/components_CheckIn_types.md).InterfaceModalProp
+
+## Table of contents
+
+### Properties
+
+- [eventId](components_CheckIn_types.InterfaceModalProp.md#eventid)
+- [handleClose](components_CheckIn_types.InterfaceModalProp.md#handleclose)
+- [show](components_CheckIn_types.InterfaceModalProp.md#show)
+
+## Properties
+
+### eventId
+
+• **eventId**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:27](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L27)
+
+___
+
+### handleClose
+
+• **handleClose**: () =\> `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:28](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L28)
+
+___
+
+### show
+
+• **show**: `boolean`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:26](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L26)
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md
new file mode 100644
index 0000000000..e87af3ecc3
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableCheckIn.md
@@ -0,0 +1,65 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CheckIn/types](../modules/components_CheckIn_types.md) / InterfaceTableCheckIn
+
+# Interface: InterfaceTableCheckIn
+
+[components/CheckIn/types](../modules/components_CheckIn_types.md).InterfaceTableCheckIn
+
+## Table of contents
+
+### Properties
+
+- [checkIn](components_CheckIn_types.InterfaceTableCheckIn.md#checkin)
+- [eventId](components_CheckIn_types.InterfaceTableCheckIn.md#eventid)
+- [id](components_CheckIn_types.InterfaceTableCheckIn.md#id)
+- [name](components_CheckIn_types.InterfaceTableCheckIn.md#name)
+- [userId](components_CheckIn_types.InterfaceTableCheckIn.md#userid)
+
+## Properties
+
+### checkIn
+
+• **checkIn**: ``null`` \| \{ `_id`: `string` ; `allotedRoom`: `string` ; `allotedSeat`: `string` ; `time`: `string`  \}
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:35](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L35)
+
+___
+
+### eventId
+
+• **eventId**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:41](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L41)
+
+___
+
+### id
+
+• **id**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:32](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L32)
+
+___
+
+### name
+
+• **name**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:33](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L33)
+
+___
+
+### userId
+
+• **userId**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:34](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L34)
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableData.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableData.md
new file mode 100644
index 0000000000..390a79948f
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceTableData.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CheckIn/types](../modules/components_CheckIn_types.md) / InterfaceTableData
+
+# Interface: InterfaceTableData
+
+[components/CheckIn/types](../modules/components_CheckIn_types.md).InterfaceTableData
+
+## Table of contents
+
+### Properties
+
+- [checkInData](components_CheckIn_types.InterfaceTableData.md#checkindata)
+- [id](components_CheckIn_types.InterfaceTableData.md#id)
+- [userName](components_CheckIn_types.InterfaceTableData.md#username)
+
+## Properties
+
+### checkInData
+
+• **checkInData**: [`InterfaceTableCheckIn`](components_CheckIn_types.InterfaceTableCheckIn.md)
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:47](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L47)
+
+___
+
+### id
+
+• **id**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:46](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L46)
+
+___
+
+### userName
+
+• **userName**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:45](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L45)
diff --git a/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceUser.md b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceUser.md
new file mode 100644
index 0000000000..877cb3ff5a
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CheckIn_types.InterfaceUser.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CheckIn/types](../modules/components_CheckIn_types.md) / InterfaceUser
+
+# Interface: InterfaceUser
+
+[components/CheckIn/types](../modules/components_CheckIn_types.md).InterfaceUser
+
+## Table of contents
+
+### Properties
+
+- [\_id](components_CheckIn_types.InterfaceUser.md#_id)
+- [firstName](components_CheckIn_types.InterfaceUser.md#firstname)
+- [lastName](components_CheckIn_types.InterfaceUser.md#lastname)
+
+## Properties
+
+### \_id
+
+• **\_id**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:2](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L2)
+
+___
+
+### firstName
+
+• **firstName**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:3](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L3)
+
+___
+
+### lastName
+
+• **lastName**: `string`
+
+#### Defined in
+
+[src/components/CheckIn/types.ts:4](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/types.ts#L4)
diff --git a/talawa-admin-docs/interfaces/components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md b/talawa-admin-docs/interfaces/components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md
new file mode 100644
index 0000000000..a94bf4c9bf
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md
@@ -0,0 +1,32 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/CollapsibleDropdown/CollapsibleDropdown](../modules/components_CollapsibleDropdown_CollapsibleDropdown.md) / InterfaceCollapsibleDropdown
+
+# Interface: InterfaceCollapsibleDropdown
+
+[components/CollapsibleDropdown/CollapsibleDropdown](../modules/components_CollapsibleDropdown_CollapsibleDropdown.md).InterfaceCollapsibleDropdown
+
+## Table of contents
+
+### Properties
+
+- [screenName](components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md#screenname)
+- [target](components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md#target)
+
+## Properties
+
+### screenName
+
+• **screenName**: `string`
+
+#### Defined in
+
+[src/components/CollapsibleDropdown/CollapsibleDropdown.tsx:9](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx#L9)
+
+___
+
+### target
+
+• **target**: `TargetsType`
+
+#### Defined in
+
+[src/components/CollapsibleDropdown/CollapsibleDropdown.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx#L10)
diff --git a/talawa-admin-docs/interfaces/components_IconComponent_IconComponent.InterfaceIconComponent.md b/talawa-admin-docs/interfaces/components_IconComponent_IconComponent.InterfaceIconComponent.md
new file mode 100644
index 0000000000..a8669a5913
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_IconComponent_IconComponent.InterfaceIconComponent.md
@@ -0,0 +1,54 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/IconComponent/IconComponent](../modules/components_IconComponent_IconComponent.md) / InterfaceIconComponent
+
+# Interface: InterfaceIconComponent
+
+[components/IconComponent/IconComponent](../modules/components_IconComponent_IconComponent.md).InterfaceIconComponent
+
+## Table of contents
+
+### Properties
+
+- [fill](components_IconComponent_IconComponent.InterfaceIconComponent.md#fill)
+- [height](components_IconComponent_IconComponent.InterfaceIconComponent.md#height)
+- [name](components_IconComponent_IconComponent.InterfaceIconComponent.md#name)
+- [width](components_IconComponent_IconComponent.InterfaceIconComponent.md#width)
+
+## Properties
+
+### fill
+
+• `Optional` **fill**: `string`
+
+#### Defined in
+
+[src/components/IconComponent/IconComponent.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/IconComponent/IconComponent.tsx#L17)
+
+___
+
+### height
+
+• `Optional` **height**: `string`
+
+#### Defined in
+
+[src/components/IconComponent/IconComponent.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/IconComponent/IconComponent.tsx#L18)
+
+___
+
+### name
+
+• **name**: `string`
+
+#### Defined in
+
+[src/components/IconComponent/IconComponent.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/IconComponent/IconComponent.tsx#L16)
+
+___
+
+### width
+
+• `Optional` **width**: `string`
+
+#### Defined in
+
+[src/components/IconComponent/IconComponent.tsx:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/IconComponent/IconComponent.tsx#L19)
diff --git a/talawa-admin-docs/interfaces/components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md b/talawa-admin-docs/interfaces/components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md
new file mode 100644
index 0000000000..2323d9e1b9
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md
@@ -0,0 +1,53 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/LeftDrawerEvent/LeftDrawerEvent](../modules/components_LeftDrawerEvent_LeftDrawerEvent.md) / InterfaceLeftDrawerProps
+
+# Interface: InterfaceLeftDrawerProps
+
+[components/LeftDrawerEvent/LeftDrawerEvent](../modules/components_LeftDrawerEvent_LeftDrawerEvent.md).InterfaceLeftDrawerProps
+
+## Table of contents
+
+### Properties
+
+- [event](components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md#event)
+- [hideDrawer](components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md#hidedrawer)
+- [setHideDrawer](components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md#sethidedrawer)
+
+## Properties
+
+### event
+
+• **event**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `_id` | `string` |
+| `description` | `string` |
+| `organization` | \{ `_id`: `string`  \} |
+| `organization._id` | `string` |
+| `title` | `string` |
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEvent.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx#L17)
+
+___
+
+### hideDrawer
+
+• **hideDrawer**: ``null`` \| `boolean`
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEvent.tsx:25](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx#L25)
+
+___
+
+### setHideDrawer
+
+• **setHideDrawer**: `Dispatch`\<`SetStateAction`\<``null`` \| `boolean`\>\>
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEvent.tsx:26](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx#L26)
diff --git a/talawa-admin-docs/interfaces/components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md b/talawa-admin-docs/interfaces/components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md
new file mode 100644
index 0000000000..231bd29f60
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md
@@ -0,0 +1,42 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/LeftDrawerEvent/LeftDrawerEventWrapper](../modules/components_LeftDrawerEvent_LeftDrawerEventWrapper.md) / InterfacePropType
+
+# Interface: InterfacePropType
+
+[components/LeftDrawerEvent/LeftDrawerEventWrapper](../modules/components_LeftDrawerEvent_LeftDrawerEventWrapper.md).InterfacePropType
+
+## Table of contents
+
+### Properties
+
+- [children](components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md#children)
+- [event](components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md#event)
+
+## Properties
+
+### children
+
+• **children**: `ReactNode`
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx#L15)
+
+___
+
+### event
+
+• **event**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `_id` | `string` |
+| `description` | `string` |
+| `organization` | \{ `_id`: `string`  \} |
+| `organization._id` | `string` |
+| `title` | `string` |
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx#L7)
diff --git a/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md b/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md
new file mode 100644
index 0000000000..4ba897ae0f
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md
@@ -0,0 +1,65 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/LeftDrawerOrg/LeftDrawerOrg](../modules/components_LeftDrawerOrg_LeftDrawerOrg.md) / InterfaceLeftDrawerProps
+
+# Interface: InterfaceLeftDrawerProps
+
+[components/LeftDrawerOrg/LeftDrawerOrg](../modules/components_LeftDrawerOrg_LeftDrawerOrg.md).InterfaceLeftDrawerProps
+
+## Table of contents
+
+### Properties
+
+- [hideDrawer](components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md#hidedrawer)
+- [orgId](components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md#orgid)
+- [screenName](components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md#screenname)
+- [setHideDrawer](components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md#sethidedrawer)
+- [targets](components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md#targets)
+
+## Properties
+
+### hideDrawer
+
+• **hideDrawer**: ``null`` \| `boolean`
+
+#### Defined in
+
+[src/components/LeftDrawerOrg/LeftDrawerOrg.tsx:23](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx#L23)
+
+___
+
+### orgId
+
+• **orgId**: `string`
+
+#### Defined in
+
+[src/components/LeftDrawerOrg/LeftDrawerOrg.tsx:20](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx#L20)
+
+___
+
+### screenName
+
+• **screenName**: `string`
+
+#### Defined in
+
+[src/components/LeftDrawerOrg/LeftDrawerOrg.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx#L21)
+
+___
+
+### setHideDrawer
+
+• **setHideDrawer**: `Dispatch`\<`SetStateAction`\<``null`` \| `boolean`\>\>
+
+#### Defined in
+
+[src/components/LeftDrawerOrg/LeftDrawerOrg.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx#L24)
+
+___
+
+### targets
+
+• **targets**: `TargetsType`[]
+
+#### Defined in
+
+[src/components/LeftDrawerOrg/LeftDrawerOrg.tsx:22](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx#L22)
diff --git a/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md b/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md
new file mode 100644
index 0000000000..d1fc895d2d
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/LeftDrawer/LeftDrawer](../modules/components_LeftDrawer_LeftDrawer.md) / InterfaceLeftDrawerProps
+
+# Interface: InterfaceLeftDrawerProps
+
+[components/LeftDrawer/LeftDrawer](../modules/components_LeftDrawer_LeftDrawer.md).InterfaceLeftDrawerProps
+
+## Table of contents
+
+### Properties
+
+- [hideDrawer](components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md#hidedrawer)
+- [screenName](components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md#screenname)
+- [setHideDrawer](components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md#sethidedrawer)
+
+## Properties
+
+### hideDrawer
+
+• **hideDrawer**: ``null`` \| `boolean`
+
+#### Defined in
+
+[src/components/LeftDrawer/LeftDrawer.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawer/LeftDrawer.tsx#L16)
+
+___
+
+### screenName
+
+• **screenName**: `string`
+
+#### Defined in
+
+[src/components/LeftDrawer/LeftDrawer.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawer/LeftDrawer.tsx#L18)
+
+___
+
+### setHideDrawer
+
+• **setHideDrawer**: `Dispatch`\<`SetStateAction`\<``null`` \| `boolean`\>\>
+
+#### Defined in
+
+[src/components/LeftDrawer/LeftDrawer.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawer/LeftDrawer.tsx#L17)
diff --git a/talawa-admin-docs/interfaces/components_OrgListCard_OrgListCard.InterfaceOrgListCardProps.md b/talawa-admin-docs/interfaces/components_OrgListCard_OrgListCard.InterfaceOrgListCardProps.md
new file mode 100644
index 0000000000..9d46c92019
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_OrgListCard_OrgListCard.InterfaceOrgListCardProps.md
@@ -0,0 +1,21 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/OrgListCard/OrgListCard](../modules/components_OrgListCard_OrgListCard.md) / InterfaceOrgListCardProps
+
+# Interface: InterfaceOrgListCardProps
+
+[components/OrgListCard/OrgListCard](../modules/components_OrgListCard_OrgListCard.md).InterfaceOrgListCardProps
+
+## Table of contents
+
+### Properties
+
+- [data](components_OrgListCard_OrgListCard.InterfaceOrgListCardProps.md#data)
+
+## Properties
+
+### data
+
+• **data**: `InterfaceOrgConnectionInfoType`
+
+#### Defined in
+
+[src/components/OrgListCard/OrgListCard.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgListCard/OrgListCard.tsx#L14)
diff --git a/talawa-admin-docs/interfaces/components_OrgProfileFieldSettings_OrgProfileFieldSettings.InterfaceCustomFieldData.md b/talawa-admin-docs/interfaces/components_OrgProfileFieldSettings_OrgProfileFieldSettings.InterfaceCustomFieldData.md
new file mode 100644
index 0000000000..7ccadce5c2
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_OrgProfileFieldSettings_OrgProfileFieldSettings.InterfaceCustomFieldData.md
@@ -0,0 +1,32 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/OrgProfileFieldSettings/OrgProfileFieldSettings](../modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings.md) / InterfaceCustomFieldData
+
+# Interface: InterfaceCustomFieldData
+
+[components/OrgProfileFieldSettings/OrgProfileFieldSettings](../modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings.md).InterfaceCustomFieldData
+
+## Table of contents
+
+### Properties
+
+- [name](components_OrgProfileFieldSettings_OrgProfileFieldSettings.InterfaceCustomFieldData.md#name)
+- [type](components_OrgProfileFieldSettings_OrgProfileFieldSettings.InterfaceCustomFieldData.md#type)
+
+## Properties
+
+### name
+
+• **name**: `string`
+
+#### Defined in
+
+[src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx#L18)
+
+___
+
+### type
+
+• **type**: `string`
+
+#### Defined in
+
+[src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx#L17)
diff --git a/talawa-admin-docs/interfaces/components_OrganizationDashCards_CardItem.InterfaceCardItem.md b/talawa-admin-docs/interfaces/components_OrganizationDashCards_CardItem.InterfaceCardItem.md
new file mode 100644
index 0000000000..5efc787028
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_OrganizationDashCards_CardItem.InterfaceCardItem.md
@@ -0,0 +1,87 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/OrganizationDashCards/CardItem](../modules/components_OrganizationDashCards_CardItem.md) / InterfaceCardItem
+
+# Interface: InterfaceCardItem
+
+[components/OrganizationDashCards/CardItem](../modules/components_OrganizationDashCards_CardItem.md).InterfaceCardItem
+
+## Table of contents
+
+### Properties
+
+- [creator](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#creator)
+- [enddate](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#enddate)
+- [location](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#location)
+- [startdate](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#startdate)
+- [time](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#time)
+- [title](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#title)
+- [type](components_OrganizationDashCards_CardItem.InterfaceCardItem.md#type)
+
+## Properties
+
+### creator
+
+• `Optional` **creator**: `any`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L17)
+
+___
+
+### enddate
+
+• `Optional` **enddate**: `string`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L16)
+
+___
+
+### location
+
+• `Optional` **location**: `string`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L18)
+
+___
+
+### startdate
+
+• `Optional` **startdate**: `string`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L15)
+
+___
+
+### time
+
+• `Optional` **time**: `string`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L14)
+
+___
+
+### title
+
+• **title**: `string`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L13)
+
+___
+
+### type
+
+• **type**: ``"Event"`` \| ``"Post"`` \| ``"MembershipRequest"``
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L12)
diff --git a/talawa-admin-docs/interfaces/components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md b/talawa-admin-docs/interfaces/components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md
new file mode 100644
index 0000000000..1b6a706c65
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/OrganizationScreen/OrganizationScreen](../modules/components_OrganizationScreen_OrganizationScreen.md) / InterfaceOrganizationScreenProps
+
+# Interface: InterfaceOrganizationScreenProps
+
+[components/OrganizationScreen/OrganizationScreen](../modules/components_OrganizationScreen_OrganizationScreen.md).InterfaceOrganizationScreenProps
+
+## Table of contents
+
+### Properties
+
+- [children](components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md#children)
+- [screenName](components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md#screenname)
+- [title](components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md#title)
+
+## Properties
+
+### children
+
+• **children**: `ReactNode`
+
+#### Defined in
+
+[src/components/OrganizationScreen/OrganizationScreen.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationScreen/OrganizationScreen.tsx#L12)
+
+___
+
+### screenName
+
+• **screenName**: `string`
+
+#### Defined in
+
+[src/components/OrganizationScreen/OrganizationScreen.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationScreen/OrganizationScreen.tsx#L11)
+
+___
+
+### title
+
+• **title**: `string`
+
+#### Defined in
+
+[src/components/OrganizationScreen/OrganizationScreen.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationScreen/OrganizationScreen.tsx#L10)
diff --git a/talawa-admin-docs/interfaces/components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md b/talawa-admin-docs/interfaces/components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md
new file mode 100644
index 0000000000..f6f3b33975
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/SuperAdminScreen/SuperAdminScreen](../modules/components_SuperAdminScreen_SuperAdminScreen.md) / InterfaceSuperAdminScreenProps
+
+# Interface: InterfaceSuperAdminScreenProps
+
+[components/SuperAdminScreen/SuperAdminScreen](../modules/components_SuperAdminScreen_SuperAdminScreen.md).InterfaceSuperAdminScreenProps
+
+## Table of contents
+
+### Properties
+
+- [children](components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md#children)
+- [screenName](components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md#screenname)
+- [title](components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md#title)
+
+## Properties
+
+### children
+
+• **children**: `ReactNode`
+
+#### Defined in
+
+[src/components/SuperAdminScreen/SuperAdminScreen.tsx:9](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/SuperAdminScreen/SuperAdminScreen.tsx#L9)
+
+___
+
+### screenName
+
+• **screenName**: `string`
+
+#### Defined in
+
+[src/components/SuperAdminScreen/SuperAdminScreen.tsx:8](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/SuperAdminScreen/SuperAdminScreen.tsx#L8)
+
+___
+
+### title
+
+• **title**: `string`
+
+#### Defined in
+
+[src/components/SuperAdminScreen/SuperAdminScreen.tsx:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/SuperAdminScreen/SuperAdminScreen.tsx#L7)
diff --git a/talawa-admin-docs/interfaces/components_TableLoader_TableLoader.InterfaceTableLoader.md b/talawa-admin-docs/interfaces/components_TableLoader_TableLoader.InterfaceTableLoader.md
new file mode 100644
index 0000000000..e545773409
--- /dev/null
+++ b/talawa-admin-docs/interfaces/components_TableLoader_TableLoader.InterfaceTableLoader.md
@@ -0,0 +1,43 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / [components/TableLoader/TableLoader](../modules/components_TableLoader_TableLoader.md) / InterfaceTableLoader
+
+# Interface: InterfaceTableLoader
+
+[components/TableLoader/TableLoader](../modules/components_TableLoader_TableLoader.md).InterfaceTableLoader
+
+## Table of contents
+
+### Properties
+
+- [headerTitles](components_TableLoader_TableLoader.InterfaceTableLoader.md#headertitles)
+- [noOfCols](components_TableLoader_TableLoader.InterfaceTableLoader.md#noofcols)
+- [noOfRows](components_TableLoader_TableLoader.InterfaceTableLoader.md#noofrows)
+
+## Properties
+
+### headerTitles
+
+• `Optional` **headerTitles**: `string`[]
+
+#### Defined in
+
+[src/components/TableLoader/TableLoader.tsx:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/TableLoader/TableLoader.tsx#L7)
+
+___
+
+### noOfCols
+
+• `Optional` **noOfCols**: `number`
+
+#### Defined in
+
+[src/components/TableLoader/TableLoader.tsx:8](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/TableLoader/TableLoader.tsx#L8)
+
+___
+
+### noOfRows
+
+• **noOfRows**: `number`
+
+#### Defined in
+
+[src/components/TableLoader/TableLoader.tsx:6](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/TableLoader/TableLoader.tsx#L6)
diff --git a/talawa-admin-docs/modules.md b/talawa-admin-docs/modules.md
new file mode 100644
index 0000000000..8abc529b22
--- /dev/null
+++ b/talawa-admin-docs/modules.md
@@ -0,0 +1,219 @@
+[talawa-admin](README.md) / Modules
+
+# talawa-admin
+
+## Table of contents
+
+### Modules
+
+- [components/AddOn/AddOn](modules/components_AddOn_AddOn.md)
+- [components/AddOn/AddOn.test](modules/components_AddOn_AddOn_test.md)
+- [components/AddOn/core/AddOnEntry/AddOnEntry](modules/components_AddOn_core_AddOnEntry_AddOnEntry.md)
+- [components/AddOn/core/AddOnEntry/AddOnEntry.test](modules/components_AddOn_core_AddOnEntry_AddOnEntry_test.md)
+- [components/AddOn/core/AddOnEntry/AddOnEntryMocks](modules/components_AddOn_core_AddOnEntry_AddOnEntryMocks.md)
+- [components/AddOn/core/AddOnRegister/AddOnRegister](modules/components_AddOn_core_AddOnRegister_AddOnRegister.md)
+- [components/AddOn/core/AddOnRegister/AddOnRegister.test](modules/components_AddOn_core_AddOnRegister_AddOnRegister_test.md)
+- [components/AddOn/core/AddOnStore/AddOnStore](modules/components_AddOn_core_AddOnStore_AddOnStore.md)
+- [components/AddOn/core/AddOnStore/AddOnStore.test](modules/components_AddOn_core_AddOnStore_AddOnStore_test.md)
+- [components/AddOn/support/components/Action/Action](modules/components_AddOn_support_components_Action_Action.md)
+- [components/AddOn/support/components/Action/Action.test](modules/components_AddOn_support_components_Action_Action_test.md)
+- [components/AddOn/support/components/MainContent/MainContent](modules/components_AddOn_support_components_MainContent_MainContent.md)
+- [components/AddOn/support/components/MainContent/MainContent.test](modules/components_AddOn_support_components_MainContent_MainContent_test.md)
+- [components/AddOn/support/components/SidePanel/SidePanel](modules/components_AddOn_support_components_SidePanel_SidePanel.md)
+- [components/AddOn/support/components/SidePanel/SidePanel.test](modules/components_AddOn_support_components_SidePanel_SidePanel_test.md)
+- [components/AddOn/support/services/Plugin.helper](modules/components_AddOn_support_services_Plugin_helper.md)
+- [components/AddOn/support/services/Render.helper](modules/components_AddOn_support_services_Render_helper.md)
+- [components/Advertisements/Advertisements](modules/components_Advertisements_Advertisements.md)
+- [components/Advertisements/Advertisements.test](modules/components_Advertisements_Advertisements_test.md)
+- [components/Advertisements/core/AdvertisementEntry/AdvertisementEntry](modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry.md)
+- [components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test](modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry_test.md)
+- [components/Advertisements/core/AdvertisementRegister/AdvertisementRegister](modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister.md)
+- [components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test](modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister_test.md)
+- [components/ChangeLanguageDropdown/ChangeLanguageDropDown](modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md)
+- [components/ChangeLanguageDropdown/ChangeLanguageDropdown.test](modules/components_ChangeLanguageDropdown_ChangeLanguageDropdown_test.md)
+- [components/CheckIn/CheckInModal](modules/components_CheckIn_CheckInModal.md)
+- [components/CheckIn/CheckInModal.test](modules/components_CheckIn_CheckInModal_test.md)
+- [components/CheckIn/CheckInWrapper](modules/components_CheckIn_CheckInWrapper.md)
+- [components/CheckIn/CheckInWrapper.test](modules/components_CheckIn_CheckInWrapper_test.md)
+- [components/CheckIn/TableRow](modules/components_CheckIn_TableRow.md)
+- [components/CheckIn/TableRow.test](modules/components_CheckIn_TableRow_test.md)
+- [components/CheckIn/mocks](modules/components_CheckIn_mocks.md)
+- [components/CheckIn/tagTemplate](modules/components_CheckIn_tagTemplate.md)
+- [components/CheckIn/types](modules/components_CheckIn_types.md)
+- [components/CollapsibleDropdown/CollapsibleDropdown](modules/components_CollapsibleDropdown_CollapsibleDropdown.md)
+- [components/CollapsibleDropdown/CollapsibleDropdown.test](modules/components_CollapsibleDropdown_CollapsibleDropdown_test.md)
+- [components/ContriStats/ContriStats](modules/components_ContriStats_ContriStats.md)
+- [components/ContriStats/ContriStats.test](modules/components_ContriStats_ContriStats_test.md)
+- [components/CurrentHourIndicator/CurrentHourIndicator](modules/components_CurrentHourIndicator_CurrentHourIndicator.md)
+- [components/CurrentHourIndicator/CurrentHourIndicator.test](modules/components_CurrentHourIndicator_CurrentHourIndicator_test.md)
+- [components/DeleteOrg/DeleteOrg](modules/components_DeleteOrg_DeleteOrg.md)
+- [components/DeleteOrg/DeleteOrg.test](modules/components_DeleteOrg_DeleteOrg_test.md)
+- [components/EditCustomFieldDropDown/EditCustomFieldDropDown](modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown.md)
+- [components/EditCustomFieldDropDown/EditCustomFieldDropDown.test](modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown_test.md)
+- [components/EventCalendar/EventCalendar](modules/components_EventCalendar_EventCalendar.md)
+- [components/EventCalendar/EventCalendar.test](modules/components_EventCalendar_EventCalendar_test.md)
+- [components/EventListCard/EventListCard](modules/components_EventListCard_EventListCard.md)
+- [components/EventListCard/EventListCard.test](modules/components_EventListCard_EventListCard_test.md)
+- [components/EventRegistrantsModal/EventRegistrantsModal](modules/components_EventRegistrantsModal_EventRegistrantsModal.md)
+- [components/EventRegistrantsModal/EventRegistrantsModal.test](modules/components_EventRegistrantsModal_EventRegistrantsModal_test.md)
+- [components/EventRegistrantsModal/EventRegistrantsWrapper](modules/components_EventRegistrantsModal_EventRegistrantsWrapper.md)
+- [components/EventRegistrantsModal/EventRegistrantsWrapper.test](modules/components_EventRegistrantsModal_EventRegistrantsWrapper_test.md)
+- [components/EventStats/EventStats](modules/components_EventStats_EventStats.md)
+- [components/EventStats/EventStats.test](modules/components_EventStats_EventStats_test.md)
+- [components/EventStats/EventStatsWrapper](modules/components_EventStats_EventStatsWrapper.md)
+- [components/EventStats/EventStatsWrapper.test](modules/components_EventStats_EventStatsWrapper_test.md)
+- [components/EventStats/Statistics/AverageRating](modules/components_EventStats_Statistics_AverageRating.md)
+- [components/EventStats/Statistics/AverageRating.test](modules/components_EventStats_Statistics_AverageRating_test.md)
+- [components/EventStats/Statistics/Feedback](modules/components_EventStats_Statistics_Feedback.md)
+- [components/EventStats/Statistics/Feedback.test](modules/components_EventStats_Statistics_Feedback_test.md)
+- [components/EventStats/Statistics/Review](modules/components_EventStats_Statistics_Review.md)
+- [components/EventStats/Statistics/Review.test](modules/components_EventStats_Statistics_Review_test.md)
+- [components/IconComponent/IconComponent](modules/components_IconComponent_IconComponent.md)
+- [components/IconComponent/IconComponent.test](modules/components_IconComponent_IconComponent_test.md)
+- [components/LeftDrawer/LeftDrawer](modules/components_LeftDrawer_LeftDrawer.md)
+- [components/LeftDrawer/LeftDrawer.test](modules/components_LeftDrawer_LeftDrawer_test.md)
+- [components/LeftDrawerEvent/LeftDrawerEvent](modules/components_LeftDrawerEvent_LeftDrawerEvent.md)
+- [components/LeftDrawerEvent/LeftDrawerEvent.test](modules/components_LeftDrawerEvent_LeftDrawerEvent_test.md)
+- [components/LeftDrawerEvent/LeftDrawerEventWrapper](modules/components_LeftDrawerEvent_LeftDrawerEventWrapper.md)
+- [components/LeftDrawerEvent/LeftDrawerEventWrapper.test](modules/components_LeftDrawerEvent_LeftDrawerEventWrapper_test.md)
+- [components/LeftDrawerOrg/LeftDrawerOrg](modules/components_LeftDrawerOrg_LeftDrawerOrg.md)
+- [components/LeftDrawerOrg/LeftDrawerOrg.test](modules/components_LeftDrawerOrg_LeftDrawerOrg_test.md)
+- [components/Loader/Loader](modules/components_Loader_Loader.md)
+- [components/Loader/Loader.test](modules/components_Loader_Loader_test.md)
+- [components/LoginPortalToggle/LoginPortalToggle](modules/components_LoginPortalToggle_LoginPortalToggle.md)
+- [components/LoginPortalToggle/LoginPortalToggle.test](modules/components_LoginPortalToggle_LoginPortalToggle_test.md)
+- [components/MemberRequestCard/MemberRequestCard](modules/components_MemberRequestCard_MemberRequestCard.md)
+- [components/MemberRequestCard/MemberRequestCard.test](modules/components_MemberRequestCard_MemberRequestCard_test.md)
+- [components/NotFound/NotFound](modules/components_NotFound_NotFound.md)
+- [components/NotFound/NotFound.test](modules/components_NotFound_NotFound_test.md)
+- [components/OrgAdminListCard/OrgAdminListCard](modules/components_OrgAdminListCard_OrgAdminListCard.md)
+- [components/OrgAdminListCard/OrgAdminListCard.test](modules/components_OrgAdminListCard_OrgAdminListCard_test.md)
+- [components/OrgContriCards/OrgContriCards](modules/components_OrgContriCards_OrgContriCards.md)
+- [components/OrgContriCards/OrgContriCards.test](modules/components_OrgContriCards_OrgContriCards_test.md)
+- [components/OrgDelete/OrgDelete](modules/components_OrgDelete_OrgDelete.md)
+- [components/OrgDelete/OrgDelete.test](modules/components_OrgDelete_OrgDelete_test.md)
+- [components/OrgListCard/OrgListCard](modules/components_OrgListCard_OrgListCard.md)
+- [components/OrgListCard/OrgListCard.test](modules/components_OrgListCard_OrgListCard_test.md)
+- [components/OrgPeopleListCard/OrgPeopleListCard](modules/components_OrgPeopleListCard_OrgPeopleListCard.md)
+- [components/OrgPeopleListCard/OrgPeopleListCard.test](modules/components_OrgPeopleListCard_OrgPeopleListCard_test.md)
+- [components/OrgPostCard/OrgPostCard](modules/components_OrgPostCard_OrgPostCard.md)
+- [components/OrgPostCard/OrgPostCard.test](modules/components_OrgPostCard_OrgPostCard_test.md)
+- [components/OrgProfileFieldSettings/OrgProfileFieldSettings](modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings.md)
+- [components/OrgProfileFieldSettings/OrgProfileFieldSettings.test](modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings_test.md)
+- [components/OrgUpdate/OrgUpdate](modules/components_OrgUpdate_OrgUpdate.md)
+- [components/OrgUpdate/OrgUpdate.test](modules/components_OrgUpdate_OrgUpdate_test.md)
+- [components/OrgUpdate/OrgUpdateMocks](modules/components_OrgUpdate_OrgUpdateMocks.md)
+- [components/OrganizationCard/OrganizationCard](modules/components_OrganizationCard_OrganizationCard.md)
+- [components/OrganizationCard/OrganizationCard.test](modules/components_OrganizationCard_OrganizationCard_test.md)
+- [components/OrganizationCardStart/OrganizationCardStart](modules/components_OrganizationCardStart_OrganizationCardStart.md)
+- [components/OrganizationCardStart/OrganizationCardStart.test](modules/components_OrganizationCardStart_OrganizationCardStart_test.md)
+- [components/OrganizationDashCards/CardItem](modules/components_OrganizationDashCards_CardItem.md)
+- [components/OrganizationDashCards/CardItem.test](modules/components_OrganizationDashCards_CardItem_test.md)
+- [components/OrganizationDashCards/CardItemLoading](modules/components_OrganizationDashCards_CardItemLoading.md)
+- [components/OrganizationDashCards/DashboardCard](modules/components_OrganizationDashCards_DashboardCard.md)
+- [components/OrganizationDashCards/DashboardCard.test](modules/components_OrganizationDashCards_DashboardCard_test.md)
+- [components/OrganizationDashCards/DashboardCardLoading](modules/components_OrganizationDashCards_DashboardCardLoading.md)
+- [components/OrganizationScreen/OrganizationScreen](modules/components_OrganizationScreen_OrganizationScreen.md)
+- [components/OrganizationScreen/OrganizationScreen.test](modules/components_OrganizationScreen_OrganizationScreen_test.md)
+- [components/Pagination/Pagination](modules/components_Pagination_Pagination.md)
+- [components/Pagination/Pagination.test](modules/components_Pagination_Pagination_test.md)
+- [components/PaginationList/PaginationList](modules/components_PaginationList_PaginationList.md)
+- [components/SecuredRoute/SecuredRoute](modules/components_SecuredRoute_SecuredRoute.md)
+- [components/SuperAdminScreen/SuperAdminScreen](modules/components_SuperAdminScreen_SuperAdminScreen.md)
+- [components/SuperAdminScreen/SuperAdminScreen.test](modules/components_SuperAdminScreen_SuperAdminScreen_test.md)
+- [components/TableLoader/TableLoader](modules/components_TableLoader_TableLoader.md)
+- [components/TableLoader/TableLoader.test](modules/components_TableLoader_TableLoader_test.md)
+- [components/UserListCard/UserListCard](modules/components_UserListCard_UserListCard.md)
+- [components/UserListCard/UserListCard.test](modules/components_UserListCard_UserListCard_test.md)
+- [components/UserPasswordUpdate/UserPasswordUpdate](modules/components_UserPasswordUpdate_UserPasswordUpdate.md)
+- [components/UserPasswordUpdate/UserPasswordUpdate.test](modules/components_UserPasswordUpdate_UserPasswordUpdate_test.md)
+- [components/UserPortal/ChatRoom/ChatRoom](modules/components_UserPortal_ChatRoom_ChatRoom.md)
+- [components/UserPortal/ChatRoom/ChatRoom.test](modules/components_UserPortal_ChatRoom_ChatRoom_test.md)
+- [components/UserPortal/CommentCard/CommentCard](modules/components_UserPortal_CommentCard_CommentCard.md)
+- [components/UserPortal/CommentCard/CommentCard.test](modules/components_UserPortal_CommentCard_CommentCard_test.md)
+- [components/UserPortal/ContactCard/ContactCard](modules/components_UserPortal_ContactCard_ContactCard.md)
+- [components/UserPortal/ContactCard/ContactCard.test](modules/components_UserPortal_ContactCard_ContactCard_test.md)
+- [components/UserPortal/DonationCard/DonationCard](modules/components_UserPortal_DonationCard_DonationCard.md)
+- [components/UserPortal/EventCard/EventCard](modules/components_UserPortal_EventCard_EventCard.md)
+- [components/UserPortal/EventCard/EventCard.test](modules/components_UserPortal_EventCard_EventCard_test.md)
+- [components/UserPortal/Login/Login](modules/components_UserPortal_Login_Login.md)
+- [components/UserPortal/Login/Login.test](modules/components_UserPortal_Login_Login_test.md)
+- [components/UserPortal/OrganizationCard/OrganizationCard](modules/components_UserPortal_OrganizationCard_OrganizationCard.md)
+- [components/UserPortal/OrganizationCard/OrganizationCard.test](modules/components_UserPortal_OrganizationCard_OrganizationCard_test.md)
+- [components/UserPortal/OrganizationNavbar/OrganizationNavbar](modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar.md)
+- [components/UserPortal/OrganizationNavbar/OrganizationNavbar.test](modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar_test.md)
+- [components/UserPortal/OrganizationSidebar/OrganizationSidebar](modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar.md)
+- [components/UserPortal/OrganizationSidebar/OrganizationSidebar.test](modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar_test.md)
+- [components/UserPortal/PeopleCard/PeopleCard](modules/components_UserPortal_PeopleCard_PeopleCard.md)
+- [components/UserPortal/PeopleCard/PeopleCard.test](modules/components_UserPortal_PeopleCard_PeopleCard_test.md)
+- [components/UserPortal/PostCard/PostCard](modules/components_UserPortal_PostCard_PostCard.md)
+- [components/UserPortal/PostCard/PostCard.test](modules/components_UserPortal_PostCard_PostCard_test.md)
+- [components/UserPortal/PromotedPost/PromotedPost](modules/components_UserPortal_PromotedPost_PromotedPost.md)
+- [components/UserPortal/PromotedPost/PromotedPost.test](modules/components_UserPortal_PromotedPost_PromotedPost_test.md)
+- [components/UserPortal/Register/Register](modules/components_UserPortal_Register_Register.md)
+- [components/UserPortal/Register/Register.test](modules/components_UserPortal_Register_Register_test.md)
+- [components/UserPortal/SecuredRouteForUser/SecuredRouteForUser](modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser.md)
+- [components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test](modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser_test.md)
+- [components/UserPortal/UserNavbar/UserNavbar](modules/components_UserPortal_UserNavbar_UserNavbar.md)
+- [components/UserPortal/UserNavbar/UserNavbar.test](modules/components_UserPortal_UserNavbar_UserNavbar_test.md)
+- [components/UserPortal/UserSidebar/UserSidebar](modules/components_UserPortal_UserSidebar_UserSidebar.md)
+- [components/UserPortal/UserSidebar/UserSidebar.test](modules/components_UserPortal_UserSidebar_UserSidebar_test.md)
+- [components/UserUpdate/UserUpdate](modules/components_UserUpdate_UserUpdate.md)
+- [components/UserUpdate/UserUpdate.test](modules/components_UserUpdate_UserUpdate_test.md)
+- [components/UsersTableItem/UserTableItem.test](modules/components_UsersTableItem_UserTableItem_test.md)
+- [components/UsersTableItem/UserTableItemMocks](modules/components_UsersTableItem_UserTableItemMocks.md)
+- [components/UsersTableItem/UsersTableItem](modules/components_UsersTableItem_UsersTableItem.md)
+- [components/plugins](modules/components_plugins.md)
+- [components/plugins/DummyPlugin/DummyPlugin](modules/components_plugins_DummyPlugin_DummyPlugin.md)
+- [components/plugins/DummyPlugin/DummyPlugin.test](modules/components_plugins_DummyPlugin_DummyPlugin_test.md)
+- [components/plugins/DummyPlugin2/DummyPlugin2](modules/components_plugins_DummyPlugin2_DummyPlugin2.md)
+- [components/plugins/DummyPlugin2/DummyPlugin2.test](modules/components_plugins_DummyPlugin2_DummyPlugin2_test.md)
+- [screens/BlockUser/BlockUser](modules/screens_BlockUser_BlockUser.md)
+- [screens/BlockUser/BlockUser.test](modules/screens_BlockUser_BlockUser_test.md)
+- [screens/EventDashboard/EventDashboard](modules/screens_EventDashboard_EventDashboard.md)
+- [screens/EventDashboard/EventDashboard.mocks](modules/screens_EventDashboard_EventDashboard_mocks.md)
+- [screens/EventDashboard/EventDashboard.test](modules/screens_EventDashboard_EventDashboard_test.md)
+- [screens/ForgotPassword/ForgotPassword](modules/screens_ForgotPassword_ForgotPassword.md)
+- [screens/ForgotPassword/ForgotPassword.test](modules/screens_ForgotPassword_ForgotPassword_test.md)
+- [screens/LoginPage/LoginPage](modules/screens_LoginPage_LoginPage.md)
+- [screens/LoginPage/LoginPage.test](modules/screens_LoginPage_LoginPage_test.md)
+- [screens/MemberDetail/MemberDetail](modules/screens_MemberDetail_MemberDetail.md)
+- [screens/MemberDetail/MemberDetail.test](modules/screens_MemberDetail_MemberDetail_test.md)
+- [screens/OrgContribution/OrgContribution](modules/screens_OrgContribution_OrgContribution.md)
+- [screens/OrgContribution/OrgContribution.test](modules/screens_OrgContribution_OrgContribution_test.md)
+- [screens/OrgList/OrgList](modules/screens_OrgList_OrgList.md)
+- [screens/OrgList/OrgList.test](modules/screens_OrgList_OrgList_test.md)
+- [screens/OrgList/OrgListMocks](modules/screens_OrgList_OrgListMocks.md)
+- [screens/OrgList/OrganizationModal](modules/screens_OrgList_OrganizationModal.md)
+- [screens/OrgPost/OrgPost](modules/screens_OrgPost_OrgPost.md)
+- [screens/OrgPost/OrgPost.test](modules/screens_OrgPost_OrgPost_test.md)
+- [screens/OrgSettings/OrgSettings](modules/screens_OrgSettings_OrgSettings.md)
+- [screens/OrgSettings/OrgSettings.test](modules/screens_OrgSettings_OrgSettings_test.md)
+- [screens/OrganizationDashboard/OrganizationDashboard](modules/screens_OrganizationDashboard_OrganizationDashboard.md)
+- [screens/OrganizationDashboard/OrganizationDashboard.test](modules/screens_OrganizationDashboard_OrganizationDashboard_test.md)
+- [screens/OrganizationDashboard/OrganizationDashboardMocks](modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md)
+- [screens/OrganizationEvents/OrganizationEvents](modules/screens_OrganizationEvents_OrganizationEvents.md)
+- [screens/OrganizationEvents/OrganizationEvents.test](modules/screens_OrganizationEvents_OrganizationEvents_test.md)
+- [screens/OrganizationPeople/OrganizationPeople](modules/screens_OrganizationPeople_OrganizationPeople.md)
+- [screens/OrganizationPeople/OrganizationPeople.test](modules/screens_OrganizationPeople_OrganizationPeople_test.md)
+- [screens/PageNotFound/PageNotFound](modules/screens_PageNotFound_PageNotFound.md)
+- [screens/PageNotFound/PageNotFound.test](modules/screens_PageNotFound_PageNotFound_test.md)
+- [screens/UserPortal/Chat/Chat](modules/screens_UserPortal_Chat_Chat.md)
+- [screens/UserPortal/Chat/Chat.test](modules/screens_UserPortal_Chat_Chat_test.md)
+- [screens/UserPortal/Donate/Donate](modules/screens_UserPortal_Donate_Donate.md)
+- [screens/UserPortal/Donate/Donate.test](modules/screens_UserPortal_Donate_Donate_test.md)
+- [screens/UserPortal/Events/Events](modules/screens_UserPortal_Events_Events.md)
+- [screens/UserPortal/Events/Events.test](modules/screens_UserPortal_Events_Events_test.md)
+- [screens/UserPortal/Home/Home](modules/screens_UserPortal_Home_Home.md)
+- [screens/UserPortal/Home/Home.test](modules/screens_UserPortal_Home_Home_test.md)
+- [screens/UserPortal/Organizations/Organizations](modules/screens_UserPortal_Organizations_Organizations.md)
+- [screens/UserPortal/Organizations/Organizations.test](modules/screens_UserPortal_Organizations_Organizations_test.md)
+- [screens/UserPortal/People/People](modules/screens_UserPortal_People_People.md)
+- [screens/UserPortal/People/People.test](modules/screens_UserPortal_People_People_test.md)
+- [screens/UserPortal/Settings/Settings](modules/screens_UserPortal_Settings_Settings.md)
+- [screens/UserPortal/Settings/Settings.test](modules/screens_UserPortal_Settings_Settings_test.md)
+- [screens/UserPortal/UserLoginPage/UserLoginPage](modules/screens_UserPortal_UserLoginPage_UserLoginPage.md)
+- [screens/UserPortal/UserLoginPage/UserLoginPage.test](modules/screens_UserPortal_UserLoginPage_UserLoginPage_test.md)
+- [screens/Users/Users](modules/screens_Users_Users.md)
+- [screens/Users/Users.test](modules/screens_Users_Users_test.md)
+- [screens/Users/UsersMocks](modules/screens_Users_UsersMocks.md)
diff --git a/talawa-admin-docs/modules/components_AddOn_AddOn.md b/talawa-admin-docs/modules/components_AddOn_AddOn.md
new file mode 100644
index 0000000000..7708f3efc0
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_AddOn.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/AddOn
+
+# Module: components/AddOn/AddOn
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_AddOn.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceAddOnProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/AddOn.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/AddOn.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_AddOn_AddOn_test.md b/talawa-admin-docs/modules/components_AddOn_AddOn_test.md
new file mode 100644
index 0000000000..fc00b6659e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_AddOn_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/AddOn.test
+
+# Module: components/AddOn/AddOn.test
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.md
new file mode 100644
index 0000000000..d5d4096e0d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnEntry/AddOnEntry
+
+# Module: components/AddOn/core/AddOnEntry/AddOnEntry
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_core_AddOnEntry_AddOnEntry.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceAddOnEntryProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx:22](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx#L22)
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntryMocks.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntryMocks.md
new file mode 100644
index 0000000000..2a0b34d8cf
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntryMocks.md
@@ -0,0 +1,19 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnEntry/AddOnEntryMocks
+
+# Module: components/AddOn/core/AddOnEntry/AddOnEntryMocks
+
+## Table of contents
+
+### Variables
+
+- [ADD\_ON\_ENTRY\_MOCK](components_AddOn_core_AddOnEntry_AddOnEntryMocks.md#add_on_entry_mock)
+
+## Variables
+
+### ADD\_ON\_ENTRY\_MOCK
+
+• `Const` **ADD\_ON\_ENTRY\_MOCK**: \{ `request`: \{ `query`: `DocumentNode` = UPDATE\_INSTALL\_STATUS\_PLUGIN\_MUTATION; `variables`: \{ `id`: `string` = '1'; `orgId`: `string` = 'undefined' \}  \} ; `result`: \{ `data`: \{ `updatePluginStatus`: \{ `_id`: `string` = '123'; `pluginCreatedBy`: `string` = 'John Doe'; `pluginDesc`: `string` = 'This is a sample plugin description.'; `pluginName`: `string` = 'Sample Plugin'; `uninstalledOrgs`: `never`[] = [] \} = updatePluginStatus \}  \}  \}[]
+
+#### Defined in
+
+[src/components/AddOn/core/AddOnEntry/AddOnEntryMocks.ts:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/core/AddOnEntry/AddOnEntryMocks.ts#L13)
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry_test.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry_test.md
new file mode 100644
index 0000000000..6190c7df8d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnEntry_AddOnEntry_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnEntry/AddOnEntry.test
+
+# Module: components/AddOn/core/AddOnEntry/AddOnEntry.test
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.md
new file mode 100644
index 0000000000..d6f1d0ac38
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnRegister/AddOnRegister
+
+# Module: components/AddOn/core/AddOnRegister/AddOnRegister
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_core_AddOnRegister_AddOnRegister.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceAddOnRegisterProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx#L24)
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister_test.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister_test.md
new file mode 100644
index 0000000000..2a3008d564
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnRegister_AddOnRegister_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnRegister/AddOnRegister.test
+
+# Module: components/AddOn/core/AddOnRegister/AddOnRegister.test
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnStore_AddOnStore.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnStore_AddOnStore.md
new file mode 100644
index 0000000000..09c5ab3380
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnStore_AddOnStore.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnStore/AddOnStore
+
+# Module: components/AddOn/core/AddOnStore/AddOnStore
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_core_AddOnStore_AddOnStore.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/core/AddOnStore/AddOnStore.tsx:26](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/core/AddOnStore/AddOnStore.tsx#L26)
diff --git a/talawa-admin-docs/modules/components_AddOn_core_AddOnStore_AddOnStore_test.md b/talawa-admin-docs/modules/components_AddOn_core_AddOnStore_AddOnStore_test.md
new file mode 100644
index 0000000000..81c941f51d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_core_AddOnStore_AddOnStore_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/core/AddOnStore/AddOnStore.test
+
+# Module: components/AddOn/core/AddOnStore/AddOnStore.test
diff --git a/talawa-admin-docs/modules/components_AddOn_support_components_Action_Action.md b/talawa-admin-docs/modules/components_AddOn_support_components_Action_Action.md
new file mode 100644
index 0000000000..f93d3d6b94
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_components_Action_Action.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/components/Action/Action
+
+# Module: components/AddOn/support/components/Action/Action
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_support_components_Action_Action.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceActionProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/support/components/Action/Action.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/support/components/Action/Action.tsx#L10)
diff --git a/talawa-admin-docs/modules/components_AddOn_support_components_Action_Action_test.md b/talawa-admin-docs/modules/components_AddOn_support_components_Action_Action_test.md
new file mode 100644
index 0000000000..411e01b71c
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_components_Action_Action_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/components/Action/Action.test
+
+# Module: components/AddOn/support/components/Action/Action.test
diff --git a/talawa-admin-docs/modules/components_AddOn_support_components_MainContent_MainContent.md b/talawa-admin-docs/modules/components_AddOn_support_components_MainContent_MainContent.md
new file mode 100644
index 0000000000..af9faef144
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_components_MainContent_MainContent.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/components/MainContent/MainContent
+
+# Module: components/AddOn/support/components/MainContent/MainContent
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_support_components_MainContent_MainContent.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceMainContentProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/support/components/MainContent/MainContent.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/support/components/MainContent/MainContent.tsx#L10)
diff --git a/talawa-admin-docs/modules/components_AddOn_support_components_MainContent_MainContent_test.md b/talawa-admin-docs/modules/components_AddOn_support_components_MainContent_MainContent_test.md
new file mode 100644
index 0000000000..9374ee4ed1
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_components_MainContent_MainContent_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/components/MainContent/MainContent.test
+
+# Module: components/AddOn/support/components/MainContent/MainContent.test
diff --git a/talawa-admin-docs/modules/components_AddOn_support_components_SidePanel_SidePanel.md b/talawa-admin-docs/modules/components_AddOn_support_components_SidePanel_SidePanel.md
new file mode 100644
index 0000000000..c9411bcff6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_components_SidePanel_SidePanel.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/components/SidePanel/SidePanel
+
+# Module: components/AddOn/support/components/SidePanel/SidePanel
+
+## Table of contents
+
+### Functions
+
+- [default](components_AddOn_support_components_SidePanel_SidePanel.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceSidePanelProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/AddOn/support/components/SidePanel/SidePanel.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/AddOn/support/components/SidePanel/SidePanel.tsx#L10)
diff --git a/talawa-admin-docs/modules/components_AddOn_support_components_SidePanel_SidePanel_test.md b/talawa-admin-docs/modules/components_AddOn_support_components_SidePanel_SidePanel_test.md
new file mode 100644
index 0000000000..7f2017c98d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_components_SidePanel_SidePanel_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/components/SidePanel/SidePanel.test
+
+# Module: components/AddOn/support/components/SidePanel/SidePanel.test
diff --git a/talawa-admin-docs/modules/components_AddOn_support_services_Plugin_helper.md b/talawa-admin-docs/modules/components_AddOn_support_services_Plugin_helper.md
new file mode 100644
index 0000000000..07b4879af6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_services_Plugin_helper.md
@@ -0,0 +1,9 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/services/Plugin.helper
+
+# Module: components/AddOn/support/services/Plugin.helper
+
+## Table of contents
+
+### Classes
+
+- [default](../classes/components_AddOn_support_services_Plugin_helper.default.md)
diff --git a/talawa-admin-docs/modules/components_AddOn_support_services_Render_helper.md b/talawa-admin-docs/modules/components_AddOn_support_services_Render_helper.md
new file mode 100644
index 0000000000..845a9a0e7d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_AddOn_support_services_Render_helper.md
@@ -0,0 +1,9 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/AddOn/support/services/Render.helper
+
+# Module: components/AddOn/support/services/Render.helper
+
+## Table of contents
+
+### Classes
+
+- [default](../classes/components_AddOn_support_services_Render_helper.default.md)
diff --git a/talawa-admin-docs/modules/components_Advertisements_Advertisements.md b/talawa-admin-docs/modules/components_Advertisements_Advertisements.md
new file mode 100644
index 0000000000..17e75d0708
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Advertisements_Advertisements.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Advertisements/Advertisements
+
+# Module: components/Advertisements/Advertisements
+
+## Table of contents
+
+### Functions
+
+- [default](components_Advertisements_Advertisements.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/Advertisements/Advertisements.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/Advertisements/Advertisements.tsx#L18)
diff --git a/talawa-admin-docs/modules/components_Advertisements_Advertisements_test.md b/talawa-admin-docs/modules/components_Advertisements_Advertisements_test.md
new file mode 100644
index 0000000000..2804911d84
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Advertisements_Advertisements_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Advertisements/Advertisements.test
+
+# Module: components/Advertisements/Advertisements.test
diff --git a/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry.md b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry.md
new file mode 100644
index 0000000000..22f50c02b7
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Advertisements/core/AdvertisementEntry/AdvertisementEntry
+
+# Module: components/Advertisements/core/AdvertisementEntry/AdvertisementEntry
+
+## Table of contents
+
+### Functions
+
+- [default](components_Advertisements_core_AdvertisementEntry_AdvertisementEntry.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceAddOnEntryProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx#L21)
diff --git a/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry_test.md b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry_test.md
new file mode 100644
index 0000000000..6e397162a8
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementEntry_AdvertisementEntry_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test
+
+# Module: components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test
diff --git a/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister.md b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister.md
new file mode 100644
index 0000000000..5a91b6e729
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Advertisements/core/AdvertisementRegister/AdvertisementRegister
+
+# Module: components/Advertisements/core/AdvertisementRegister/AdvertisementRegister
+
+## Table of contents
+
+### Functions
+
+- [default](components_Advertisements_core_AdvertisementRegister_AdvertisementRegister.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `InterfaceAddOnRegisterProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx:36](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx#L36)
diff --git a/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister_test.md b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister_test.md
new file mode 100644
index 0000000000..a8d566e6c7
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Advertisements_core_AdvertisementRegister_AdvertisementRegister_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test
+
+# Module: components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test
diff --git a/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md b/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md
new file mode 100644
index 0000000000..44f300753c
--- /dev/null
+++ b/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropDown.md
@@ -0,0 +1,50 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/ChangeLanguageDropdown/ChangeLanguageDropDown
+
+# Module: components/ChangeLanguageDropdown/ChangeLanguageDropDown
+
+## Table of contents
+
+### Functions
+
+- [changeLanguage](components_ChangeLanguageDropdown_ChangeLanguageDropDown.md#changelanguage)
+- [default](components_ChangeLanguageDropdown_ChangeLanguageDropDown.md#default)
+
+## Functions
+
+### changeLanguage
+
+▸ **changeLanguage**(`languageCode`): `Promise`\<`void`\>
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `languageCode` | `string` |
+
+#### Returns
+
+`Promise`\<`void`\>
+
+#### Defined in
+
+[src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx#L13)
+
+___
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceChangeLanguageDropDownProps` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/ChangeLanguageDropdown/ChangeLanguageDropDown.tsx#L17)
diff --git a/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropdown_test.md b/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropdown_test.md
new file mode 100644
index 0000000000..205cda0fc2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_ChangeLanguageDropdown_ChangeLanguageDropdown_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/ChangeLanguageDropdown/ChangeLanguageDropdown.test
+
+# Module: components/ChangeLanguageDropdown/ChangeLanguageDropdown.test
diff --git a/talawa-admin-docs/modules/components_CheckIn_CheckInModal.md b/talawa-admin-docs/modules/components_CheckIn_CheckInModal.md
new file mode 100644
index 0000000000..ccee8edbae
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_CheckInModal.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/CheckInModal
+
+# Module: components/CheckIn/CheckInModal
+
+## Table of contents
+
+### Functions
+
+- [CheckInModal](components_CheckIn_CheckInModal.md#checkinmodal)
+
+## Functions
+
+### CheckInModal
+
+▸ **CheckInModal**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`InterfaceModalProp`](../interfaces/components_CheckIn_types.InterfaceModalProp.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/CheckIn/CheckInModal.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/CheckInModal.tsx#L16)
diff --git a/talawa-admin-docs/modules/components_CheckIn_CheckInModal_test.md b/talawa-admin-docs/modules/components_CheckIn_CheckInModal_test.md
new file mode 100644
index 0000000000..b1e389bc6f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_CheckInModal_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/CheckInModal.test
+
+# Module: components/CheckIn/CheckInModal.test
diff --git a/talawa-admin-docs/modules/components_CheckIn_CheckInWrapper.md b/talawa-admin-docs/modules/components_CheckIn_CheckInWrapper.md
new file mode 100644
index 0000000000..9bee87f600
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_CheckInWrapper.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/CheckInWrapper
+
+# Module: components/CheckIn/CheckInWrapper
+
+## Table of contents
+
+### Functions
+
+- [CheckInWrapper](components_CheckIn_CheckInWrapper.md#checkinwrapper)
+
+## Functions
+
+### CheckInWrapper
+
+▸ **CheckInWrapper**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/CheckIn/CheckInWrapper.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/CheckInWrapper.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_CheckIn_CheckInWrapper_test.md b/talawa-admin-docs/modules/components_CheckIn_CheckInWrapper_test.md
new file mode 100644
index 0000000000..ba4052472f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_CheckInWrapper_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/CheckInWrapper.test
+
+# Module: components/CheckIn/CheckInWrapper.test
diff --git a/talawa-admin-docs/modules/components_CheckIn_TableRow.md b/talawa-admin-docs/modules/components_CheckIn_TableRow.md
new file mode 100644
index 0000000000..aceaaf32f1
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_TableRow.md
@@ -0,0 +1,31 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/TableRow
+
+# Module: components/CheckIn/TableRow
+
+## Table of contents
+
+### Functions
+
+- [TableRow](components_CheckIn_TableRow.md#tablerow)
+
+## Functions
+
+### TableRow
+
+▸ **TableRow**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `Object` |
+| › `data` | [`InterfaceTableCheckIn`](../interfaces/components_CheckIn_types.InterfaceTableCheckIn.md) |
+| › `refetch` | () =\> `void` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/CheckIn/TableRow.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/TableRow.tsx#L10)
diff --git a/talawa-admin-docs/modules/components_CheckIn_TableRow_test.md b/talawa-admin-docs/modules/components_CheckIn_TableRow_test.md
new file mode 100644
index 0000000000..2d26732b41
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_TableRow_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/TableRow.test
+
+# Module: components/CheckIn/TableRow.test
diff --git a/talawa-admin-docs/modules/components_CheckIn_mocks.md b/talawa-admin-docs/modules/components_CheckIn_mocks.md
new file mode 100644
index 0000000000..209120d33e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_mocks.md
@@ -0,0 +1,41 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/mocks
+
+# Module: components/CheckIn/mocks
+
+## Table of contents
+
+### Variables
+
+- [checkInMutationSuccess](components_CheckIn_mocks.md#checkinmutationsuccess)
+- [checkInMutationUnsuccess](components_CheckIn_mocks.md#checkinmutationunsuccess)
+- [checkInQueryMock](components_CheckIn_mocks.md#checkinquerymock)
+
+## Variables
+
+### checkInMutationSuccess
+
+• `Const` **checkInMutationSuccess**: \{ `request`: \{ `query`: `DocumentNode` = MARK\_CHECKIN; `variables`: \{ `allotedRoom`: `string` = ''; `allotedSeat`: `string` = ''; `eventId`: `string` = 'event123'; `userId`: `string` = 'user123' \}  \} ; `result`: \{ `data`: \{ `checkIn`: \{ `_id`: `string` = '123' \}  \}  \}  \}[]
+
+#### Defined in
+
+[src/components/CheckIn/mocks.ts:48](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/mocks.ts#L48)
+
+___
+
+### checkInMutationUnsuccess
+
+• `Const` **checkInMutationUnsuccess**: \{ `error`: `Error` ; `request`: \{ `query`: `DocumentNode` = MARK\_CHECKIN; `variables`: \{ `allotedRoom`: `string` = ''; `allotedSeat`: `string` = ''; `eventId`: `string` = 'event123'; `userId`: `string` = 'user123' \}  \}  \}[]
+
+#### Defined in
+
+[src/components/CheckIn/mocks.ts:69](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/mocks.ts#L69)
+
+___
+
+### checkInQueryMock
+
+• `Const` **checkInQueryMock**: \{ `request`: \{ `query`: `DocumentNode` = EVENT\_CHECKINS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: [`InterfaceAttendeeQueryResponse`](../interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md) = checkInQueryData \}  \}[]
+
+#### Defined in
+
+[src/components/CheckIn/mocks.ts:36](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/mocks.ts#L36)
diff --git a/talawa-admin-docs/modules/components_CheckIn_tagTemplate.md b/talawa-admin-docs/modules/components_CheckIn_tagTemplate.md
new file mode 100644
index 0000000000..97a50ec9f6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_tagTemplate.md
@@ -0,0 +1,19 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/tagTemplate
+
+# Module: components/CheckIn/tagTemplate
+
+## Table of contents
+
+### Variables
+
+- [tagTemplate](components_CheckIn_tagTemplate.md#tagtemplate)
+
+## Variables
+
+### tagTemplate
+
+• `Const` **tagTemplate**: `Template`
+
+#### Defined in
+
+[src/components/CheckIn/tagTemplate.ts:3](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CheckIn/tagTemplate.ts#L3)
diff --git a/talawa-admin-docs/modules/components_CheckIn_types.md b/talawa-admin-docs/modules/components_CheckIn_types.md
new file mode 100644
index 0000000000..5b47904381
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CheckIn_types.md
@@ -0,0 +1,14 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CheckIn/types
+
+# Module: components/CheckIn/types
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceAttendeeCheckIn](../interfaces/components_CheckIn_types.InterfaceAttendeeCheckIn.md)
+- [InterfaceAttendeeQueryResponse](../interfaces/components_CheckIn_types.InterfaceAttendeeQueryResponse.md)
+- [InterfaceModalProp](../interfaces/components_CheckIn_types.InterfaceModalProp.md)
+- [InterfaceTableCheckIn](../interfaces/components_CheckIn_types.InterfaceTableCheckIn.md)
+- [InterfaceTableData](../interfaces/components_CheckIn_types.InterfaceTableData.md)
+- [InterfaceUser](../interfaces/components_CheckIn_types.InterfaceUser.md)
diff --git a/talawa-admin-docs/modules/components_CollapsibleDropdown_CollapsibleDropdown.md b/talawa-admin-docs/modules/components_CollapsibleDropdown_CollapsibleDropdown.md
new file mode 100644
index 0000000000..0811628058
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CollapsibleDropdown_CollapsibleDropdown.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CollapsibleDropdown/CollapsibleDropdown
+
+# Module: components/CollapsibleDropdown/CollapsibleDropdown
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceCollapsibleDropdown](../interfaces/components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md)
+
+### Functions
+
+- [default](components_CollapsibleDropdown_CollapsibleDropdown.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | [`InterfaceCollapsibleDropdown`](../interfaces/components_CollapsibleDropdown_CollapsibleDropdown.InterfaceCollapsibleDropdown.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/CollapsibleDropdown/CollapsibleDropdown.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx#L13)
diff --git a/talawa-admin-docs/modules/components_CollapsibleDropdown_CollapsibleDropdown_test.md b/talawa-admin-docs/modules/components_CollapsibleDropdown_CollapsibleDropdown_test.md
new file mode 100644
index 0000000000..e5eb033261
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CollapsibleDropdown_CollapsibleDropdown_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CollapsibleDropdown/CollapsibleDropdown.test
+
+# Module: components/CollapsibleDropdown/CollapsibleDropdown.test
diff --git a/talawa-admin-docs/modules/components_ContriStats_ContriStats.md b/talawa-admin-docs/modules/components_ContriStats_ContriStats.md
new file mode 100644
index 0000000000..07484f6961
--- /dev/null
+++ b/talawa-admin-docs/modules/components_ContriStats_ContriStats.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/ContriStats/ContriStats
+
+# Module: components/ContriStats/ContriStats
+
+## Table of contents
+
+### Functions
+
+- [default](components_ContriStats_ContriStats.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceContriStatsProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/ContriStats/ContriStats.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/ContriStats/ContriStats.tsx#L14)
diff --git a/talawa-admin-docs/modules/components_ContriStats_ContriStats_test.md b/talawa-admin-docs/modules/components_ContriStats_ContriStats_test.md
new file mode 100644
index 0000000000..b1faeb7015
--- /dev/null
+++ b/talawa-admin-docs/modules/components_ContriStats_ContriStats_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/ContriStats/ContriStats.test
+
+# Module: components/ContriStats/ContriStats.test
diff --git a/talawa-admin-docs/modules/components_CurrentHourIndicator_CurrentHourIndicator.md b/talawa-admin-docs/modules/components_CurrentHourIndicator_CurrentHourIndicator.md
new file mode 100644
index 0000000000..6996074140
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CurrentHourIndicator_CurrentHourIndicator.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CurrentHourIndicator/CurrentHourIndicator
+
+# Module: components/CurrentHourIndicator/CurrentHourIndicator
+
+## Table of contents
+
+### Functions
+
+- [default](components_CurrentHourIndicator_CurrentHourIndicator.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/CurrentHourIndicator/CurrentHourIndicator.tsx:4](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx#L4)
diff --git a/talawa-admin-docs/modules/components_CurrentHourIndicator_CurrentHourIndicator_test.md b/talawa-admin-docs/modules/components_CurrentHourIndicator_CurrentHourIndicator_test.md
new file mode 100644
index 0000000000..2000336f19
--- /dev/null
+++ b/talawa-admin-docs/modules/components_CurrentHourIndicator_CurrentHourIndicator_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/CurrentHourIndicator/CurrentHourIndicator.test
+
+# Module: components/CurrentHourIndicator/CurrentHourIndicator.test
diff --git a/talawa-admin-docs/modules/components_DeleteOrg_DeleteOrg.md b/talawa-admin-docs/modules/components_DeleteOrg_DeleteOrg.md
new file mode 100644
index 0000000000..2b688e769e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_DeleteOrg_DeleteOrg.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/DeleteOrg/DeleteOrg
+
+# Module: components/DeleteOrg/DeleteOrg
+
+## Table of contents
+
+### Functions
+
+- [default](components_DeleteOrg_DeleteOrg.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/DeleteOrg/DeleteOrg.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/DeleteOrg/DeleteOrg.tsx#L15)
diff --git a/talawa-admin-docs/modules/components_DeleteOrg_DeleteOrg_test.md b/talawa-admin-docs/modules/components_DeleteOrg_DeleteOrg_test.md
new file mode 100644
index 0000000000..d8536b7182
--- /dev/null
+++ b/talawa-admin-docs/modules/components_DeleteOrg_DeleteOrg_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/DeleteOrg/DeleteOrg.test
+
+# Module: components/DeleteOrg/DeleteOrg.test
diff --git a/talawa-admin-docs/modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown.md b/talawa-admin-docs/modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown.md
new file mode 100644
index 0000000000..740b3130a9
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EditCustomFieldDropDown/EditCustomFieldDropDown
+
+# Module: components/EditCustomFieldDropDown/EditCustomFieldDropDown
+
+## Table of contents
+
+### Functions
+
+- [default](components_EditCustomFieldDropDown_EditCustomFieldDropDown.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceEditCustomFieldDropDownProps` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EditCustomFieldDropDown/EditCustomFieldDropDown.tsx#L16)
diff --git a/talawa-admin-docs/modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown_test.md b/talawa-admin-docs/modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown_test.md
new file mode 100644
index 0000000000..9c51f9bd85
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EditCustomFieldDropDown_EditCustomFieldDropDown_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EditCustomFieldDropDown/EditCustomFieldDropDown.test
+
+# Module: components/EditCustomFieldDropDown/EditCustomFieldDropDown.test
diff --git a/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md b/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md
new file mode 100644
index 0000000000..be0467b5cb
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventCalendar_EventCalendar.md
@@ -0,0 +1,34 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventCalendar/EventCalendar
+
+# Module: components/EventCalendar/EventCalendar
+
+## Table of contents
+
+### Enumerations
+
+- [ViewType](../enums/components_EventCalendar_EventCalendar.ViewType.md)
+
+### Functions
+
+- [default](components_EventCalendar_EventCalendar.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropsWithChildren`\<`InterfaceCalendarProps`\> |
+| `context?` | `any` |
+
+#### Returns
+
+``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Defined in
+
+[src/components/EventCalendar/EventCalendar.tsx:59](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventCalendar/EventCalendar.tsx#L59)
diff --git a/talawa-admin-docs/modules/components_EventCalendar_EventCalendar_test.md b/talawa-admin-docs/modules/components_EventCalendar_EventCalendar_test.md
new file mode 100644
index 0000000000..4a30c73ee9
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventCalendar_EventCalendar_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventCalendar/EventCalendar.test
+
+# Module: components/EventCalendar/EventCalendar.test
diff --git a/talawa-admin-docs/modules/components_EventListCard_EventListCard.md b/talawa-admin-docs/modules/components_EventListCard_EventListCard.md
new file mode 100644
index 0000000000..d2df808a4e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventListCard_EventListCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventListCard/EventListCard
+
+# Module: components/EventListCard/EventListCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_EventListCard_EventListCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceEventListCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/EventListCard/EventListCard.tsx:32](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventListCard/EventListCard.tsx#L32)
diff --git a/talawa-admin-docs/modules/components_EventListCard_EventListCard_test.md b/talawa-admin-docs/modules/components_EventListCard_EventListCard_test.md
new file mode 100644
index 0000000000..768a6041a2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventListCard_EventListCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventListCard/EventListCard.test
+
+# Module: components/EventListCard/EventListCard.test
diff --git a/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsModal.md b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsModal.md
new file mode 100644
index 0000000000..a8458ded95
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsModal.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventRegistrantsModal/EventRegistrantsModal
+
+# Module: components/EventRegistrantsModal/EventRegistrantsModal
+
+## Table of contents
+
+### Functions
+
+- [EventRegistrantsModal](components_EventRegistrantsModal_EventRegistrantsModal.md#eventregistrantsmodal)
+
+## Functions
+
+### EventRegistrantsModal
+
+▸ **EventRegistrantsModal**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `ModalPropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventRegistrantsModal/EventRegistrantsModal.tsx:30](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventRegistrantsModal/EventRegistrantsModal.tsx#L30)
diff --git a/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsModal_test.md b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsModal_test.md
new file mode 100644
index 0000000000..f755a4e6d5
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsModal_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventRegistrantsModal/EventRegistrantsModal.test
+
+# Module: components/EventRegistrantsModal/EventRegistrantsModal.test
diff --git a/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsWrapper.md b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsWrapper.md
new file mode 100644
index 0000000000..32d3c032d5
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsWrapper.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventRegistrantsModal/EventRegistrantsWrapper
+
+# Module: components/EventRegistrantsModal/EventRegistrantsWrapper
+
+## Table of contents
+
+### Functions
+
+- [EventRegistrantsWrapper](components_EventRegistrantsModal_EventRegistrantsWrapper.md#eventregistrantswrapper)
+
+## Functions
+
+### EventRegistrantsWrapper
+
+▸ **EventRegistrantsWrapper**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx#L12)
diff --git a/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsWrapper_test.md b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsWrapper_test.md
new file mode 100644
index 0000000000..e952929703
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventRegistrantsModal_EventRegistrantsWrapper_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventRegistrantsModal/EventRegistrantsWrapper.test
+
+# Module: components/EventRegistrantsModal/EventRegistrantsWrapper.test
diff --git a/talawa-admin-docs/modules/components_EventStats_EventStats.md b/talawa-admin-docs/modules/components_EventStats_EventStats.md
new file mode 100644
index 0000000000..2278652afb
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_EventStats.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/EventStats
+
+# Module: components/EventStats/EventStats
+
+## Table of contents
+
+### Functions
+
+- [EventStats](components_EventStats_EventStats.md#eventstats)
+
+## Functions
+
+### EventStats
+
+▸ **EventStats**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `ModalPropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventStats/EventStats.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventStats/EventStats.tsx#L17)
diff --git a/talawa-admin-docs/modules/components_EventStats_EventStatsWrapper.md b/talawa-admin-docs/modules/components_EventStats_EventStatsWrapper.md
new file mode 100644
index 0000000000..d8f65115de
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_EventStatsWrapper.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/EventStatsWrapper
+
+# Module: components/EventStats/EventStatsWrapper
+
+## Table of contents
+
+### Functions
+
+- [EventStatsWrapper](components_EventStats_EventStatsWrapper.md#eventstatswrapper)
+
+## Functions
+
+### EventStatsWrapper
+
+▸ **EventStatsWrapper**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventStats/EventStatsWrapper.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventStats/EventStatsWrapper.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_EventStats_EventStatsWrapper_test.md b/talawa-admin-docs/modules/components_EventStats_EventStatsWrapper_test.md
new file mode 100644
index 0000000000..580e5d893e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_EventStatsWrapper_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/EventStatsWrapper.test
+
+# Module: components/EventStats/EventStatsWrapper.test
diff --git a/talawa-admin-docs/modules/components_EventStats_EventStats_test.md b/talawa-admin-docs/modules/components_EventStats_EventStats_test.md
new file mode 100644
index 0000000000..87f0212aee
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_EventStats_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/EventStats.test
+
+# Module: components/EventStats/EventStats.test
diff --git a/talawa-admin-docs/modules/components_EventStats_Statistics_AverageRating.md b/talawa-admin-docs/modules/components_EventStats_Statistics_AverageRating.md
new file mode 100644
index 0000000000..2970784a82
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_Statistics_AverageRating.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/Statistics/AverageRating
+
+# Module: components/EventStats/Statistics/AverageRating
+
+## Table of contents
+
+### Functions
+
+- [AverageRating](components_EventStats_Statistics_AverageRating.md#averagerating)
+
+## Functions
+
+### AverageRating
+
+▸ **AverageRating**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `ModalPropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventStats/Statistics/AverageRating.tsx:35](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventStats/Statistics/AverageRating.tsx#L35)
diff --git a/talawa-admin-docs/modules/components_EventStats_Statistics_AverageRating_test.md b/talawa-admin-docs/modules/components_EventStats_Statistics_AverageRating_test.md
new file mode 100644
index 0000000000..0a219e5a0d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_Statistics_AverageRating_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/Statistics/AverageRating.test
+
+# Module: components/EventStats/Statistics/AverageRating.test
diff --git a/talawa-admin-docs/modules/components_EventStats_Statistics_Feedback.md b/talawa-admin-docs/modules/components_EventStats_Statistics_Feedback.md
new file mode 100644
index 0000000000..d6c62473e2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_Statistics_Feedback.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/Statistics/Feedback
+
+# Module: components/EventStats/Statistics/Feedback
+
+## Table of contents
+
+### Functions
+
+- [FeedbackStats](components_EventStats_Statistics_Feedback.md#feedbackstats)
+
+## Functions
+
+### FeedbackStats
+
+▸ **FeedbackStats**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `ModalPropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventStats/Statistics/Feedback.tsx:25](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventStats/Statistics/Feedback.tsx#L25)
diff --git a/talawa-admin-docs/modules/components_EventStats_Statistics_Feedback_test.md b/talawa-admin-docs/modules/components_EventStats_Statistics_Feedback_test.md
new file mode 100644
index 0000000000..da0695b906
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_Statistics_Feedback_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/Statistics/Feedback.test
+
+# Module: components/EventStats/Statistics/Feedback.test
diff --git a/talawa-admin-docs/modules/components_EventStats_Statistics_Review.md b/talawa-admin-docs/modules/components_EventStats_Statistics_Review.md
new file mode 100644
index 0000000000..2260ddfa76
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_Statistics_Review.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/Statistics/Review
+
+# Module: components/EventStats/Statistics/Review
+
+## Table of contents
+
+### Functions
+
+- [ReviewStats](components_EventStats_Statistics_Review.md#reviewstats)
+
+## Functions
+
+### ReviewStats
+
+▸ **ReviewStats**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | `ModalPropType` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/EventStats/Statistics/Review.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/EventStats/Statistics/Review.tsx#L21)
diff --git a/talawa-admin-docs/modules/components_EventStats_Statistics_Review_test.md b/talawa-admin-docs/modules/components_EventStats_Statistics_Review_test.md
new file mode 100644
index 0000000000..79cdb8aaf1
--- /dev/null
+++ b/talawa-admin-docs/modules/components_EventStats_Statistics_Review_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/EventStats/Statistics/Review.test
+
+# Module: components/EventStats/Statistics/Review.test
diff --git a/talawa-admin-docs/modules/components_IconComponent_IconComponent.md b/talawa-admin-docs/modules/components_IconComponent_IconComponent.md
new file mode 100644
index 0000000000..bc862524a0
--- /dev/null
+++ b/talawa-admin-docs/modules/components_IconComponent_IconComponent.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/IconComponent/IconComponent
+
+# Module: components/IconComponent/IconComponent
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceIconComponent](../interfaces/components_IconComponent_IconComponent.InterfaceIconComponent.md)
+
+### Functions
+
+- [default](components_IconComponent_IconComponent.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`InterfaceIconComponent`](../interfaces/components_IconComponent_IconComponent.InterfaceIconComponent.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/IconComponent/IconComponent.tsx:22](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/IconComponent/IconComponent.tsx#L22)
diff --git a/talawa-admin-docs/modules/components_IconComponent_IconComponent_test.md b/talawa-admin-docs/modules/components_IconComponent_IconComponent_test.md
new file mode 100644
index 0000000000..4753149ae6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_IconComponent_IconComponent_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/IconComponent/IconComponent.test
+
+# Module: components/IconComponent/IconComponent.test
diff --git a/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEvent.md b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEvent.md
new file mode 100644
index 0000000000..2305d3dbad
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEvent.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawerEvent/LeftDrawerEvent
+
+# Module: components/LeftDrawerEvent/LeftDrawerEvent
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceLeftDrawerProps](../interfaces/components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md)
+
+### Functions
+
+- [default](components_LeftDrawerEvent_LeftDrawerEvent.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | [`InterfaceLeftDrawerProps`](../interfaces/components_LeftDrawerEvent_LeftDrawerEvent.InterfaceLeftDrawerProps.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEvent.tsx:29](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx#L29)
diff --git a/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEventWrapper.md b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEventWrapper.md
new file mode 100644
index 0000000000..e2b5d4d9a6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEventWrapper.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawerEvent/LeftDrawerEventWrapper
+
+# Module: components/LeftDrawerEvent/LeftDrawerEventWrapper
+
+## Table of contents
+
+### Interfaces
+
+- [InterfacePropType](../interfaces/components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md)
+
+### Functions
+
+- [LeftDrawerEventWrapper](components_LeftDrawerEvent_LeftDrawerEventWrapper.md#leftdrawereventwrapper)
+
+## Functions
+
+### LeftDrawerEventWrapper
+
+▸ **LeftDrawerEventWrapper**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`InterfacePropType`](../interfaces/components_LeftDrawerEvent_LeftDrawerEventWrapper.InterfacePropType.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx#L18)
diff --git a/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEventWrapper_test.md b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEventWrapper_test.md
new file mode 100644
index 0000000000..e5580968c8
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEventWrapper_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawerEvent/LeftDrawerEventWrapper.test
+
+# Module: components/LeftDrawerEvent/LeftDrawerEventWrapper.test
diff --git a/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEvent_test.md b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEvent_test.md
new file mode 100644
index 0000000000..a044e3e30c
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawerEvent_LeftDrawerEvent_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawerEvent/LeftDrawerEvent.test
+
+# Module: components/LeftDrawerEvent/LeftDrawerEvent.test
diff --git a/talawa-admin-docs/modules/components_LeftDrawerOrg_LeftDrawerOrg.md b/talawa-admin-docs/modules/components_LeftDrawerOrg_LeftDrawerOrg.md
new file mode 100644
index 0000000000..6d0b7b40de
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawerOrg_LeftDrawerOrg.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawerOrg/LeftDrawerOrg
+
+# Module: components/LeftDrawerOrg/LeftDrawerOrg
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceLeftDrawerProps](../interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md)
+
+### Functions
+
+- [default](components_LeftDrawerOrg_LeftDrawerOrg.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | [`InterfaceLeftDrawerProps`](../interfaces/components_LeftDrawerOrg_LeftDrawerOrg.InterfaceLeftDrawerProps.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/LeftDrawerOrg/LeftDrawerOrg.tsx:27](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx#L27)
diff --git a/talawa-admin-docs/modules/components_LeftDrawerOrg_LeftDrawerOrg_test.md b/talawa-admin-docs/modules/components_LeftDrawerOrg_LeftDrawerOrg_test.md
new file mode 100644
index 0000000000..8923adc0c2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawerOrg_LeftDrawerOrg_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawerOrg/LeftDrawerOrg.test
+
+# Module: components/LeftDrawerOrg/LeftDrawerOrg.test
diff --git a/talawa-admin-docs/modules/components_LeftDrawer_LeftDrawer.md b/talawa-admin-docs/modules/components_LeftDrawer_LeftDrawer.md
new file mode 100644
index 0000000000..ae7da72814
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawer_LeftDrawer.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawer/LeftDrawer
+
+# Module: components/LeftDrawer/LeftDrawer
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceLeftDrawerProps](../interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md)
+
+### Functions
+
+- [default](components_LeftDrawer_LeftDrawer.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | [`InterfaceLeftDrawerProps`](../interfaces/components_LeftDrawer_LeftDrawer.InterfaceLeftDrawerProps.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/LeftDrawer/LeftDrawer.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LeftDrawer/LeftDrawer.tsx#L21)
diff --git a/talawa-admin-docs/modules/components_LeftDrawer_LeftDrawer_test.md b/talawa-admin-docs/modules/components_LeftDrawer_LeftDrawer_test.md
new file mode 100644
index 0000000000..91d8b23c78
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LeftDrawer_LeftDrawer_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LeftDrawer/LeftDrawer.test
+
+# Module: components/LeftDrawer/LeftDrawer.test
diff --git a/talawa-admin-docs/modules/components_Loader_Loader.md b/talawa-admin-docs/modules/components_Loader_Loader.md
new file mode 100644
index 0000000000..dd36c8b540
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Loader_Loader.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Loader/Loader
+
+# Module: components/Loader/Loader
+
+## Table of contents
+
+### Functions
+
+- [default](components_Loader_Loader.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceLoaderProps` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/Loader/Loader.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/Loader/Loader.tsx#L10)
diff --git a/talawa-admin-docs/modules/components_Loader_Loader_test.md b/talawa-admin-docs/modules/components_Loader_Loader_test.md
new file mode 100644
index 0000000000..97f48de7d6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Loader_Loader_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Loader/Loader.test
+
+# Module: components/Loader/Loader.test
diff --git a/talawa-admin-docs/modules/components_LoginPortalToggle_LoginPortalToggle.md b/talawa-admin-docs/modules/components_LoginPortalToggle_LoginPortalToggle.md
new file mode 100644
index 0000000000..e7d0d13510
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LoginPortalToggle_LoginPortalToggle.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LoginPortalToggle/LoginPortalToggle
+
+# Module: components/LoginPortalToggle/LoginPortalToggle
+
+## Table of contents
+
+### Functions
+
+- [default](components_LoginPortalToggle_LoginPortalToggle.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/LoginPortalToggle/LoginPortalToggle.tsx:8](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/LoginPortalToggle/LoginPortalToggle.tsx#L8)
diff --git a/talawa-admin-docs/modules/components_LoginPortalToggle_LoginPortalToggle_test.md b/talawa-admin-docs/modules/components_LoginPortalToggle_LoginPortalToggle_test.md
new file mode 100644
index 0000000000..6bfcea9a56
--- /dev/null
+++ b/talawa-admin-docs/modules/components_LoginPortalToggle_LoginPortalToggle_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/LoginPortalToggle/LoginPortalToggle.test
+
+# Module: components/LoginPortalToggle/LoginPortalToggle.test
diff --git a/talawa-admin-docs/modules/components_MemberRequestCard_MemberRequestCard.md b/talawa-admin-docs/modules/components_MemberRequestCard_MemberRequestCard.md
new file mode 100644
index 0000000000..62629fd66c
--- /dev/null
+++ b/talawa-admin-docs/modules/components_MemberRequestCard_MemberRequestCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/MemberRequestCard/MemberRequestCard
+
+# Module: components/MemberRequestCard/MemberRequestCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_MemberRequestCard_MemberRequestCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceMemberRequestCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/MemberRequestCard/MemberRequestCard.tsx:26](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/MemberRequestCard/MemberRequestCard.tsx#L26)
diff --git a/talawa-admin-docs/modules/components_MemberRequestCard_MemberRequestCard_test.md b/talawa-admin-docs/modules/components_MemberRequestCard_MemberRequestCard_test.md
new file mode 100644
index 0000000000..467f66899c
--- /dev/null
+++ b/talawa-admin-docs/modules/components_MemberRequestCard_MemberRequestCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/MemberRequestCard/MemberRequestCard.test
+
+# Module: components/MemberRequestCard/MemberRequestCard.test
diff --git a/talawa-admin-docs/modules/components_NotFound_NotFound.md b/talawa-admin-docs/modules/components_NotFound_NotFound.md
new file mode 100644
index 0000000000..3c27d00110
--- /dev/null
+++ b/talawa-admin-docs/modules/components_NotFound_NotFound.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/NotFound/NotFound
+
+# Module: components/NotFound/NotFound
+
+## Table of contents
+
+### Functions
+
+- [default](components_NotFound_NotFound.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceNotFoundProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/NotFound/NotFound.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/NotFound/NotFound.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_NotFound_NotFound_test.md b/talawa-admin-docs/modules/components_NotFound_NotFound_test.md
new file mode 100644
index 0000000000..27f07457d2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_NotFound_NotFound_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/NotFound/NotFound.test
+
+# Module: components/NotFound/NotFound.test
diff --git a/talawa-admin-docs/modules/components_OrgAdminListCard_OrgAdminListCard.md b/talawa-admin-docs/modules/components_OrgAdminListCard_OrgAdminListCard.md
new file mode 100644
index 0000000000..a502f77abd
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgAdminListCard_OrgAdminListCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgAdminListCard/OrgAdminListCard
+
+# Module: components/OrgAdminListCard/OrgAdminListCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrgAdminListCard_OrgAdminListCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrgPeopleListCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgAdminListCard/OrgAdminListCard.tsx:29](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgAdminListCard/OrgAdminListCard.tsx#L29)
diff --git a/talawa-admin-docs/modules/components_OrgAdminListCard_OrgAdminListCard_test.md b/talawa-admin-docs/modules/components_OrgAdminListCard_OrgAdminListCard_test.md
new file mode 100644
index 0000000000..4c74c02867
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgAdminListCard_OrgAdminListCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgAdminListCard/OrgAdminListCard.test
+
+# Module: components/OrgAdminListCard/OrgAdminListCard.test
diff --git a/talawa-admin-docs/modules/components_OrgContriCards_OrgContriCards.md b/talawa-admin-docs/modules/components_OrgContriCards_OrgContriCards.md
new file mode 100644
index 0000000000..7793777b0d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgContriCards_OrgContriCards.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgContriCards/OrgContriCards
+
+# Module: components/OrgContriCards/OrgContriCards
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrgContriCards_OrgContriCards.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrgContriCardsProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgContriCards/OrgContriCards.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgContriCards/OrgContriCards.tsx#L17)
diff --git a/talawa-admin-docs/modules/components_OrgContriCards_OrgContriCards_test.md b/talawa-admin-docs/modules/components_OrgContriCards_OrgContriCards_test.md
new file mode 100644
index 0000000000..32030428bb
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgContriCards_OrgContriCards_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgContriCards/OrgContriCards.test
+
+# Module: components/OrgContriCards/OrgContriCards.test
diff --git a/talawa-admin-docs/modules/components_OrgDelete_OrgDelete.md b/talawa-admin-docs/modules/components_OrgDelete_OrgDelete.md
new file mode 100644
index 0000000000..128d528006
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgDelete_OrgDelete.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgDelete/OrgDelete
+
+# Module: components/OrgDelete/OrgDelete
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrgDelete_OrgDelete.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgDelete/OrgDelete.tsx:4](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgDelete/OrgDelete.tsx#L4)
diff --git a/talawa-admin-docs/modules/components_OrgDelete_OrgDelete_test.md b/talawa-admin-docs/modules/components_OrgDelete_OrgDelete_test.md
new file mode 100644
index 0000000000..574934084f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgDelete_OrgDelete_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgDelete/OrgDelete.test
+
+# Module: components/OrgDelete/OrgDelete.test
diff --git a/talawa-admin-docs/modules/components_OrgListCard_OrgListCard.md b/talawa-admin-docs/modules/components_OrgListCard_OrgListCard.md
new file mode 100644
index 0000000000..18bfd4460b
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgListCard_OrgListCard.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgListCard/OrgListCard
+
+# Module: components/OrgListCard/OrgListCard
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceOrgListCardProps](../interfaces/components_OrgListCard_OrgListCard.InterfaceOrgListCardProps.md)
+
+### Functions
+
+- [default](components_OrgListCard_OrgListCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`InterfaceOrgListCardProps`](../interfaces/components_OrgListCard_OrgListCard.InterfaceOrgListCardProps.md) |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgListCard/OrgListCard.tsx:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgListCard/OrgListCard.tsx#L17)
diff --git a/talawa-admin-docs/modules/components_OrgListCard_OrgListCard_test.md b/talawa-admin-docs/modules/components_OrgListCard_OrgListCard_test.md
new file mode 100644
index 0000000000..07415ddf2d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgListCard_OrgListCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgListCard/OrgListCard.test
+
+# Module: components/OrgListCard/OrgListCard.test
diff --git a/talawa-admin-docs/modules/components_OrgPeopleListCard_OrgPeopleListCard.md b/talawa-admin-docs/modules/components_OrgPeopleListCard_OrgPeopleListCard.md
new file mode 100644
index 0000000000..3bfe921cb6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgPeopleListCard_OrgPeopleListCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgPeopleListCard/OrgPeopleListCard
+
+# Module: components/OrgPeopleListCard/OrgPeopleListCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrgPeopleListCard_OrgPeopleListCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrgPeopleListCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgPeopleListCard/OrgPeopleListCard.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx#L24)
diff --git a/talawa-admin-docs/modules/components_OrgPeopleListCard_OrgPeopleListCard_test.md b/talawa-admin-docs/modules/components_OrgPeopleListCard_OrgPeopleListCard_test.md
new file mode 100644
index 0000000000..0195d958b6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgPeopleListCard_OrgPeopleListCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgPeopleListCard/OrgPeopleListCard.test
+
+# Module: components/OrgPeopleListCard/OrgPeopleListCard.test
diff --git a/talawa-admin-docs/modules/components_OrgPostCard_OrgPostCard.md b/talawa-admin-docs/modules/components_OrgPostCard_OrgPostCard.md
new file mode 100644
index 0000000000..abd4ea5663
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgPostCard_OrgPostCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgPostCard/OrgPostCard
+
+# Module: components/OrgPostCard/OrgPostCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrgPostCard_OrgPostCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrgPostCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgPostCard/OrgPostCard.tsx:35](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgPostCard/OrgPostCard.tsx#L35)
diff --git a/talawa-admin-docs/modules/components_OrgPostCard_OrgPostCard_test.md b/talawa-admin-docs/modules/components_OrgPostCard_OrgPostCard_test.md
new file mode 100644
index 0000000000..77ac86c214
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgPostCard_OrgPostCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgPostCard/OrgPostCard.test
+
+# Module: components/OrgPostCard/OrgPostCard.test
diff --git a/talawa-admin-docs/modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings.md b/talawa-admin-docs/modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings.md
new file mode 100644
index 0000000000..24633b513a
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings.md
@@ -0,0 +1,27 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgProfileFieldSettings/OrgProfileFieldSettings
+
+# Module: components/OrgProfileFieldSettings/OrgProfileFieldSettings
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceCustomFieldData](../interfaces/components_OrgProfileFieldSettings_OrgProfileFieldSettings.InterfaceCustomFieldData.md)
+
+### Functions
+
+- [default](components_OrgProfileFieldSettings_OrgProfileFieldSettings.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `any`
+
+#### Returns
+
+`any`
+
+#### Defined in
+
+[src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgProfileFieldSettings/OrgProfileFieldSettings.tsx#L21)
diff --git a/talawa-admin-docs/modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings_test.md b/talawa-admin-docs/modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings_test.md
new file mode 100644
index 0000000000..dee65e8e1f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgProfileFieldSettings_OrgProfileFieldSettings_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgProfileFieldSettings/OrgProfileFieldSettings.test
+
+# Module: components/OrgProfileFieldSettings/OrgProfileFieldSettings.test
diff --git a/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdate.md b/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdate.md
new file mode 100644
index 0000000000..f3671db7f1
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdate.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgUpdate/OrgUpdate
+
+# Module: components/OrgUpdate/OrgUpdate
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrgUpdate_OrgUpdate.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrgUpdateProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrgUpdate/OrgUpdate.tsx:26](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgUpdate/OrgUpdate.tsx#L26)
diff --git a/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdateMocks.md b/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdateMocks.md
new file mode 100644
index 0000000000..356df928c1
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdateMocks.md
@@ -0,0 +1,41 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgUpdate/OrgUpdateMocks
+
+# Module: components/OrgUpdate/OrgUpdateMocks
+
+## Table of contents
+
+### Variables
+
+- [MOCKS](components_OrgUpdate_OrgUpdateMocks.md#mocks)
+- [MOCKS\_ERROR\_ORGLIST](components_OrgUpdate_OrgUpdateMocks.md#mocks_error_orglist)
+- [MOCKS\_ERROR\_UPDATE\_ORGLIST](components_OrgUpdate_OrgUpdateMocks.md#mocks_error_update_orglist)
+
+## Variables
+
+### MOCKS
+
+• `Const` **MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST; `variables`: \{ `address?`: `undefined` ; `description?`: `undefined` = 'This is a new update'; `id`: `string` = '123'; `image?`: `undefined` ; `name?`: `undefined` = ''; `userRegistrationRequired?`: `undefined` = true; `visibleInSearch?`: `undefined` = false \}  \} ; `result`: \{ `data`: \{ `organizations`: \{ `_id`: `string` = '123'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `admins`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[] ; `blockedUsers`: `never`[] = []; `creator`: \{ `email`: `string` = 'johndoe@example.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `description`: `string` = 'Equitable Access to STEM Education Jobs'; `image`: ``null`` = null; `members`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `membershipRequests`: \{ `_id`: `string` = '456'; `user`: \{ `email`: `string` = 'samsmith@gmail.com'; `firstName`: `string` = 'Sam'; `lastName`: `string` = 'Smith' \}  \} ; `name`: `string` = 'Palisadoes'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}[] ; `updateOrganization?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = UPDATE\_ORGANIZATION\_MUTATION; `variables`: \{ `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `description`: `string` = 'This is an updated test organization'; `id`: `string` = '123'; `image`: `File` ; `name`: `string` = 'Updated Organization'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}  \} ; `result`: \{ `data`: \{ `organizations?`: `undefined` ; `updateOrganization`: \{ `_id`: `string` = '123'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `description`: `string` = 'This is an updated test organization'; `name`: `string` = 'Updated Organization'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}  \}  \}  \})[]
+
+#### Defined in
+
+[src/components/OrgUpdate/OrgUpdateMocks.ts:4](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgUpdate/OrgUpdateMocks.ts#L4)
+
+___
+
+### MOCKS\_ERROR\_ORGLIST
+
+• `Const` **MOCKS\_ERROR\_ORGLIST**: \{ `error`: `Error` ; `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST; `variables`: \{ `id`: `string` = '123' \}  \}  \}[]
+
+#### Defined in
+
+[src/components/OrgUpdate/OrgUpdateMocks.ts:109](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgUpdate/OrgUpdateMocks.ts#L109)
+
+___
+
+### MOCKS\_ERROR\_UPDATE\_ORGLIST
+
+• `Const` **MOCKS\_ERROR\_UPDATE\_ORGLIST**: (\{ `erorr?`: `undefined` ; `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST; `variables`: \{ `address?`: `undefined` ; `description?`: `undefined` = 'This is a new update'; `id`: `string` = '123'; `image?`: `undefined` ; `name?`: `undefined` = ''; `userRegistrationRequired?`: `undefined` = true; `visibleInSearch?`: `undefined` = false \}  \} ; `result`: \{ `data`: \{ `organizations`: \{ `_id`: `string` = '123'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `admins`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[] ; `blockedUsers`: `never`[] = []; `creator`: \{ `email`: `string` = 'johndoe@example.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `description`: `string` = 'Equitable Access to STEM Education Jobs'; `image`: ``null`` = null; `members`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `membershipRequests`: \{ `_id`: `string` = '456'; `user`: \{ `email`: `string` = 'samsmith@gmail.com'; `firstName`: `string` = 'Sam'; `lastName`: `string` = 'Smith' \}  \} ; `name`: `string` = 'Palisadoes'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}[]  \}  \}  \} \| \{ `erorr`: `Error` ; `request`: \{ `query`: `DocumentNode` = UPDATE\_ORGANIZATION\_MUTATION; `variables`: \{ `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `description`: `string` = 'This is an updated test organization'; `id`: `string` = '123'; `image`: `File` ; `name`: `string` = 'Updated Organization'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}  \} ; `result?`: `undefined`  \})[]
+
+#### Defined in
+
+[src/components/OrgUpdate/OrgUpdateMocks.ts:119](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrgUpdate/OrgUpdateMocks.ts#L119)
diff --git a/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdate_test.md b/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdate_test.md
new file mode 100644
index 0000000000..e619c0f075
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrgUpdate_OrgUpdate_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrgUpdate/OrgUpdate.test
+
+# Module: components/OrgUpdate/OrgUpdate.test
diff --git a/talawa-admin-docs/modules/components_OrganizationCardStart_OrganizationCardStart.md b/talawa-admin-docs/modules/components_OrganizationCardStart_OrganizationCardStart.md
new file mode 100644
index 0000000000..1f3d0f7f15
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationCardStart_OrganizationCardStart.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationCardStart/OrganizationCardStart
+
+# Module: components/OrganizationCardStart/OrganizationCardStart
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrganizationCardStart_OrganizationCardStart.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrganizationCardStartProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrganizationCardStart/OrganizationCardStart.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationCardStart/OrganizationCardStart.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_OrganizationCardStart_OrganizationCardStart_test.md b/talawa-admin-docs/modules/components_OrganizationCardStart_OrganizationCardStart_test.md
new file mode 100644
index 0000000000..6071b1a57e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationCardStart_OrganizationCardStart_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationCardStart/OrganizationCardStart.test
+
+# Module: components/OrganizationCardStart/OrganizationCardStart.test
diff --git a/talawa-admin-docs/modules/components_OrganizationCard_OrganizationCard.md b/talawa-admin-docs/modules/components_OrganizationCard_OrganizationCard.md
new file mode 100644
index 0000000000..e72bc4b169
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationCard_OrganizationCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationCard/OrganizationCard
+
+# Module: components/OrganizationCard/OrganizationCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrganizationCard_OrganizationCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrganizationCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/OrganizationCard/OrganizationCard.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationCard/OrganizationCard.tsx#L13)
diff --git a/talawa-admin-docs/modules/components_OrganizationCard_OrganizationCard_test.md b/talawa-admin-docs/modules/components_OrganizationCard_OrganizationCard_test.md
new file mode 100644
index 0000000000..ab6e5c8712
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationCard_OrganizationCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationCard/OrganizationCard.test
+
+# Module: components/OrganizationCard/OrganizationCard.test
diff --git a/talawa-admin-docs/modules/components_OrganizationDashCards_CardItem.md b/talawa-admin-docs/modules/components_OrganizationDashCards_CardItem.md
new file mode 100644
index 0000000000..149ddf73b5
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationDashCards_CardItem.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationDashCards/CardItem
+
+# Module: components/OrganizationDashCards/CardItem
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceCardItem](../interfaces/components_OrganizationDashCards_CardItem.InterfaceCardItem.md)
+
+### Functions
+
+- [default](components_OrganizationDashCards_CardItem.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`InterfaceCardItem`](../interfaces/components_OrganizationDashCards_CardItem.InterfaceCardItem.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItem.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItem.tsx#L21)
diff --git a/talawa-admin-docs/modules/components_OrganizationDashCards_CardItemLoading.md b/talawa-admin-docs/modules/components_OrganizationDashCards_CardItemLoading.md
new file mode 100644
index 0000000000..c837ff6ae3
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationDashCards_CardItemLoading.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationDashCards/CardItemLoading
+
+# Module: components/OrganizationDashCards/CardItemLoading
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrganizationDashCards_CardItemLoading.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/CardItemLoading.tsx:4](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/CardItemLoading.tsx#L4)
diff --git a/talawa-admin-docs/modules/components_OrganizationDashCards_CardItem_test.md b/talawa-admin-docs/modules/components_OrganizationDashCards_CardItem_test.md
new file mode 100644
index 0000000000..436ed474ee
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationDashCards_CardItem_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationDashCards/CardItem.test
+
+# Module: components/OrganizationDashCards/CardItem.test
diff --git a/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCard.md b/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCard.md
new file mode 100644
index 0000000000..4874366105
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCard.md
@@ -0,0 +1,32 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationDashCards/DashboardCard
+
+# Module: components/OrganizationDashCards/DashboardCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrganizationDashCards_DashboardCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `Object` |
+| `props.count?` | `number` |
+| `props.icon` | `ReactNode` |
+| `props.title` | `string` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/DashboardCard.tsx:6](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/DashboardCard.tsx#L6)
diff --git a/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCardLoading.md b/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCardLoading.md
new file mode 100644
index 0000000000..48551c741d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCardLoading.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationDashCards/DashboardCardLoading
+
+# Module: components/OrganizationDashCards/DashboardCardLoading
+
+## Table of contents
+
+### Functions
+
+- [default](components_OrganizationDashCards_DashboardCardLoading.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/OrganizationDashCards/DashboardCardLoading.tsx:6](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationDashCards/DashboardCardLoading.tsx#L6)
diff --git a/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCard_test.md b/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCard_test.md
new file mode 100644
index 0000000000..e9bccb8d9a
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationDashCards_DashboardCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationDashCards/DashboardCard.test
+
+# Module: components/OrganizationDashCards/DashboardCard.test
diff --git a/talawa-admin-docs/modules/components_OrganizationScreen_OrganizationScreen.md b/talawa-admin-docs/modules/components_OrganizationScreen_OrganizationScreen.md
new file mode 100644
index 0000000000..8abc38e92f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationScreen_OrganizationScreen.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationScreen/OrganizationScreen
+
+# Module: components/OrganizationScreen/OrganizationScreen
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceOrganizationScreenProps](../interfaces/components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md)
+
+### Functions
+
+- [default](components_OrganizationScreen_OrganizationScreen.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | [`InterfaceOrganizationScreenProps`](../interfaces/components_OrganizationScreen_OrganizationScreen.InterfaceOrganizationScreenProps.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/OrganizationScreen/OrganizationScreen.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/OrganizationScreen/OrganizationScreen.tsx#L14)
diff --git a/talawa-admin-docs/modules/components_OrganizationScreen_OrganizationScreen_test.md b/talawa-admin-docs/modules/components_OrganizationScreen_OrganizationScreen_test.md
new file mode 100644
index 0000000000..1965da619e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_OrganizationScreen_OrganizationScreen_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/OrganizationScreen/OrganizationScreen.test
+
+# Module: components/OrganizationScreen/OrganizationScreen.test
diff --git a/talawa-admin-docs/modules/components_PaginationList_PaginationList.md b/talawa-admin-docs/modules/components_PaginationList_PaginationList.md
new file mode 100644
index 0000000000..2b35c78487
--- /dev/null
+++ b/talawa-admin-docs/modules/components_PaginationList_PaginationList.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/PaginationList/PaginationList
+
+# Module: components/PaginationList/PaginationList
+
+## Table of contents
+
+### Functions
+
+- [default](components_PaginationList_PaginationList.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfacePropsInterface` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/PaginationList/PaginationList.tsx:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/PaginationList/PaginationList.tsx#L21)
diff --git a/talawa-admin-docs/modules/components_Pagination_Pagination.md b/talawa-admin-docs/modules/components_Pagination_Pagination.md
new file mode 100644
index 0000000000..d4d4be6cd8
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Pagination_Pagination.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Pagination/Pagination
+
+# Module: components/Pagination/Pagination
+
+## Table of contents
+
+### Functions
+
+- [default](components_Pagination_Pagination.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceTablePaginationActionsProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/Pagination/Pagination.tsx:20](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/Pagination/Pagination.tsx#L20)
diff --git a/talawa-admin-docs/modules/components_Pagination_Pagination_test.md b/talawa-admin-docs/modules/components_Pagination_Pagination_test.md
new file mode 100644
index 0000000000..b663353b05
--- /dev/null
+++ b/talawa-admin-docs/modules/components_Pagination_Pagination_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/Pagination/Pagination.test
+
+# Module: components/Pagination/Pagination.test
diff --git a/talawa-admin-docs/modules/components_SecuredRoute_SecuredRoute.md b/talawa-admin-docs/modules/components_SecuredRoute_SecuredRoute.md
new file mode 100644
index 0000000000..1f48f3cb87
--- /dev/null
+++ b/talawa-admin-docs/modules/components_SecuredRoute_SecuredRoute.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/SecuredRoute/SecuredRoute
+
+# Module: components/SecuredRoute/SecuredRoute
+
+## Table of contents
+
+### Functions
+
+- [default](components_SecuredRoute_SecuredRoute.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `any` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/SecuredRoute/SecuredRoute.tsx:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/SecuredRoute/SecuredRoute.tsx#L7)
diff --git a/talawa-admin-docs/modules/components_SuperAdminScreen_SuperAdminScreen.md b/talawa-admin-docs/modules/components_SuperAdminScreen_SuperAdminScreen.md
new file mode 100644
index 0000000000..11c00f6131
--- /dev/null
+++ b/talawa-admin-docs/modules/components_SuperAdminScreen_SuperAdminScreen.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/SuperAdminScreen/SuperAdminScreen
+
+# Module: components/SuperAdminScreen/SuperAdminScreen
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceSuperAdminScreenProps](../interfaces/components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md)
+
+### Functions
+
+- [default](components_SuperAdminScreen_SuperAdminScreen.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`«destructured»`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `«destructured»` | [`InterfaceSuperAdminScreenProps`](../interfaces/components_SuperAdminScreen_SuperAdminScreen.InterfaceSuperAdminScreenProps.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/SuperAdminScreen/SuperAdminScreen.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/SuperAdminScreen/SuperAdminScreen.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_SuperAdminScreen_SuperAdminScreen_test.md b/talawa-admin-docs/modules/components_SuperAdminScreen_SuperAdminScreen_test.md
new file mode 100644
index 0000000000..09367d5fab
--- /dev/null
+++ b/talawa-admin-docs/modules/components_SuperAdminScreen_SuperAdminScreen_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/SuperAdminScreen/SuperAdminScreen.test
+
+# Module: components/SuperAdminScreen/SuperAdminScreen.test
diff --git a/talawa-admin-docs/modules/components_TableLoader_TableLoader.md b/talawa-admin-docs/modules/components_TableLoader_TableLoader.md
new file mode 100644
index 0000000000..9874a5c25e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_TableLoader_TableLoader.md
@@ -0,0 +1,33 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/TableLoader/TableLoader
+
+# Module: components/TableLoader/TableLoader
+
+## Table of contents
+
+### Interfaces
+
+- [InterfaceTableLoader](../interfaces/components_TableLoader_TableLoader.InterfaceTableLoader.md)
+
+### Functions
+
+- [default](components_TableLoader_TableLoader.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`InterfaceTableLoader`](../interfaces/components_TableLoader_TableLoader.InterfaceTableLoader.md) |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/TableLoader/TableLoader.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/TableLoader/TableLoader.tsx#L11)
diff --git a/talawa-admin-docs/modules/components_TableLoader_TableLoader_test.md b/talawa-admin-docs/modules/components_TableLoader_TableLoader_test.md
new file mode 100644
index 0000000000..8bdff07dba
--- /dev/null
+++ b/talawa-admin-docs/modules/components_TableLoader_TableLoader_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/TableLoader/TableLoader.test
+
+# Module: components/TableLoader/TableLoader.test
diff --git a/talawa-admin-docs/modules/components_UserListCard_UserListCard.md b/talawa-admin-docs/modules/components_UserListCard_UserListCard.md
new file mode 100644
index 0000000000..f8f040f88e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserListCard_UserListCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserListCard/UserListCard
+
+# Module: components/UserListCard/UserListCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserListCard_UserListCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceUserListCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserListCard/UserListCard.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserListCard/UserListCard.tsx#L24)
diff --git a/talawa-admin-docs/modules/components_UserListCard_UserListCard_test.md b/talawa-admin-docs/modules/components_UserListCard_UserListCard_test.md
new file mode 100644
index 0000000000..6e6b1eb973
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserListCard_UserListCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserListCard/UserListCard.test
+
+# Module: components/UserListCard/UserListCard.test
diff --git a/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md b/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md
new file mode 100644
index 0000000000..517a6d692f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate.md
@@ -0,0 +1,30 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPasswordUpdate/UserPasswordUpdate
+
+# Module: components/UserPasswordUpdate/UserPasswordUpdate
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPasswordUpdate_UserPasswordUpdate.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropsWithChildren`\<`InterfaceUserPasswordUpdateProps`\> |
+| `context?` | `any` |
+
+#### Returns
+
+``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Defined in
+
+[src/components/UserPasswordUpdate/UserPasswordUpdate.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPasswordUpdate/UserPasswordUpdate.tsx#L15)
diff --git a/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate_test.md b/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate_test.md
new file mode 100644
index 0000000000..55647dc09e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPasswordUpdate_UserPasswordUpdate_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPasswordUpdate/UserPasswordUpdate.test
+
+# Module: components/UserPasswordUpdate/UserPasswordUpdate.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_ChatRoom_ChatRoom.md b/talawa-admin-docs/modules/components_UserPortal_ChatRoom_ChatRoom.md
new file mode 100644
index 0000000000..84480b9f02
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_ChatRoom_ChatRoom.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/ChatRoom/ChatRoom
+
+# Module: components/UserPortal/ChatRoom/ChatRoom
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_ChatRoom_ChatRoom.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceChatRoomProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/ChatRoom/ChatRoom.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/ChatRoom/ChatRoom.tsx#L14)
diff --git a/talawa-admin-docs/modules/components_UserPortal_ChatRoom_ChatRoom_test.md b/talawa-admin-docs/modules/components_UserPortal_ChatRoom_ChatRoom_test.md
new file mode 100644
index 0000000000..e3893d355f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_ChatRoom_ChatRoom_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/ChatRoom/ChatRoom.test
+
+# Module: components/UserPortal/ChatRoom/ChatRoom.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_CommentCard_CommentCard.md b/talawa-admin-docs/modules/components_UserPortal_CommentCard_CommentCard.md
new file mode 100644
index 0000000000..9d36774a58
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_CommentCard_CommentCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/CommentCard/CommentCard
+
+# Module: components/UserPortal/CommentCard/CommentCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_CommentCard_CommentCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceCommentCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/CommentCard/CommentCard.tsx:27](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/CommentCard/CommentCard.tsx#L27)
diff --git a/talawa-admin-docs/modules/components_UserPortal_CommentCard_CommentCard_test.md b/talawa-admin-docs/modules/components_UserPortal_CommentCard_CommentCard_test.md
new file mode 100644
index 0000000000..dd0c09f9b3
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_CommentCard_CommentCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/CommentCard/CommentCard.test
+
+# Module: components/UserPortal/CommentCard/CommentCard.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_ContactCard_ContactCard.md b/talawa-admin-docs/modules/components_UserPortal_ContactCard_ContactCard.md
new file mode 100644
index 0000000000..f40934d0f8
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_ContactCard_ContactCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/ContactCard/ContactCard
+
+# Module: components/UserPortal/ContactCard/ContactCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_ContactCard_ContactCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceContactCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/ContactCard/ContactCard.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/ContactCard/ContactCard.tsx#L15)
diff --git a/talawa-admin-docs/modules/components_UserPortal_ContactCard_ContactCard_test.md b/talawa-admin-docs/modules/components_UserPortal_ContactCard_ContactCard_test.md
new file mode 100644
index 0000000000..fab09d56d9
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_ContactCard_ContactCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/ContactCard/ContactCard.test
+
+# Module: components/UserPortal/ContactCard/ContactCard.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_DonationCard_DonationCard.md b/talawa-admin-docs/modules/components_UserPortal_DonationCard_DonationCard.md
new file mode 100644
index 0000000000..c40b5fd806
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_DonationCard_DonationCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/DonationCard/DonationCard
+
+# Module: components/UserPortal/DonationCard/DonationCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_DonationCard_DonationCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceDonationCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/DonationCard/DonationCard.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/DonationCard/DonationCard.tsx#L12)
diff --git a/talawa-admin-docs/modules/components_UserPortal_EventCard_EventCard.md b/talawa-admin-docs/modules/components_UserPortal_EventCard_EventCard.md
new file mode 100644
index 0000000000..564eb9afa7
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_EventCard_EventCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/EventCard/EventCard
+
+# Module: components/UserPortal/EventCard/EventCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_EventCard_EventCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceEventCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/EventCard/EventCard.tsx:38](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/EventCard/EventCard.tsx#L38)
diff --git a/talawa-admin-docs/modules/components_UserPortal_EventCard_EventCard_test.md b/talawa-admin-docs/modules/components_UserPortal_EventCard_EventCard_test.md
new file mode 100644
index 0000000000..6a122d41fd
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_EventCard_EventCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/EventCard/EventCard.test
+
+# Module: components/UserPortal/EventCard/EventCard.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_Login_Login.md b/talawa-admin-docs/modules/components_UserPortal_Login_Login.md
new file mode 100644
index 0000000000..4b80b3969f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_Login_Login.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/Login/Login
+
+# Module: components/UserPortal/Login/Login
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_Login_Login.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceLoginProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/Login/Login.tsx:20](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/Login/Login.tsx#L20)
diff --git a/talawa-admin-docs/modules/components_UserPortal_Login_Login_test.md b/talawa-admin-docs/modules/components_UserPortal_Login_Login_test.md
new file mode 100644
index 0000000000..373cee75b5
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_Login_Login_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/Login/Login.test
+
+# Module: components/UserPortal/Login/Login.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_OrganizationCard_OrganizationCard.md b/talawa-admin-docs/modules/components_UserPortal_OrganizationCard_OrganizationCard.md
new file mode 100644
index 0000000000..c7b1e8643e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_OrganizationCard_OrganizationCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/OrganizationCard/OrganizationCard
+
+# Module: components/UserPortal/OrganizationCard/OrganizationCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_OrganizationCard_OrganizationCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrganizationCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/OrganizationCard/OrganizationCard.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx#L13)
diff --git a/talawa-admin-docs/modules/components_UserPortal_OrganizationCard_OrganizationCard_test.md b/talawa-admin-docs/modules/components_UserPortal_OrganizationCard_OrganizationCard_test.md
new file mode 100644
index 0000000000..141b8155d9
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_OrganizationCard_OrganizationCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/OrganizationCard/OrganizationCard.test
+
+# Module: components/UserPortal/OrganizationCard/OrganizationCard.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar.md b/talawa-admin-docs/modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar.md
new file mode 100644
index 0000000000..492e7a44c7
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/OrganizationNavbar/OrganizationNavbar
+
+# Module: components/UserPortal/OrganizationNavbar/OrganizationNavbar
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_OrganizationNavbar_OrganizationNavbar.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceNavbarProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx:30](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/OrganizationNavbar/OrganizationNavbar.tsx#L30)
diff --git a/talawa-admin-docs/modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar_test.md b/talawa-admin-docs/modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar_test.md
new file mode 100644
index 0000000000..41bd01b6c2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_OrganizationNavbar_OrganizationNavbar_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/OrganizationNavbar/OrganizationNavbar.test
+
+# Module: components/UserPortal/OrganizationNavbar/OrganizationNavbar.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar.md b/talawa-admin-docs/modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar.md
new file mode 100644
index 0000000000..6902fe678a
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/OrganizationSidebar/OrganizationSidebar
+
+# Module: components/UserPortal/OrganizationSidebar/OrganizationSidebar
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_OrganizationSidebar_OrganizationSidebar.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx:18](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/OrganizationSidebar/OrganizationSidebar.tsx#L18)
diff --git a/talawa-admin-docs/modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar_test.md b/talawa-admin-docs/modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar_test.md
new file mode 100644
index 0000000000..2d7163c537
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_OrganizationSidebar_OrganizationSidebar_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/OrganizationSidebar/OrganizationSidebar.test
+
+# Module: components/UserPortal/OrganizationSidebar/OrganizationSidebar.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_PeopleCard_PeopleCard.md b/talawa-admin-docs/modules/components_UserPortal_PeopleCard_PeopleCard.md
new file mode 100644
index 0000000000..a3497d6bca
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_PeopleCard_PeopleCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/PeopleCard/PeopleCard
+
+# Module: components/UserPortal/PeopleCard/PeopleCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_PeopleCard_PeopleCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceOrganizationCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/PeopleCard/PeopleCard.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/PeopleCard/PeopleCard.tsx#L12)
diff --git a/talawa-admin-docs/modules/components_UserPortal_PeopleCard_PeopleCard_test.md b/talawa-admin-docs/modules/components_UserPortal_PeopleCard_PeopleCard_test.md
new file mode 100644
index 0000000000..d874dc3b00
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_PeopleCard_PeopleCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/PeopleCard/PeopleCard.test
+
+# Module: components/UserPortal/PeopleCard/PeopleCard.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_PostCard_PostCard.md b/talawa-admin-docs/modules/components_UserPortal_PostCard_PostCard.md
new file mode 100644
index 0000000000..533ef95663
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_PostCard_PostCard.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/PostCard/PostCard
+
+# Module: components/UserPortal/PostCard/PostCard
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_PostCard_PostCard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfacePostCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/PostCard/PostCard.tsx:71](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/PostCard/PostCard.tsx#L71)
diff --git a/talawa-admin-docs/modules/components_UserPortal_PostCard_PostCard_test.md b/talawa-admin-docs/modules/components_UserPortal_PostCard_PostCard_test.md
new file mode 100644
index 0000000000..03b9f9b2ea
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_PostCard_PostCard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/PostCard/PostCard.test
+
+# Module: components/UserPortal/PostCard/PostCard.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_PromotedPost_PromotedPost.md b/talawa-admin-docs/modules/components_UserPortal_PromotedPost_PromotedPost.md
new file mode 100644
index 0000000000..8ce7350f58
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_PromotedPost_PromotedPost.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/PromotedPost/PromotedPost
+
+# Module: components/UserPortal/PromotedPost/PromotedPost
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_PromotedPost_PromotedPost.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfacePostCardProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/PromotedPost/PromotedPost.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/PromotedPost/PromotedPost.tsx#L10)
diff --git a/talawa-admin-docs/modules/components_UserPortal_PromotedPost_PromotedPost_test.md b/talawa-admin-docs/modules/components_UserPortal_PromotedPost_PromotedPost_test.md
new file mode 100644
index 0000000000..661be414a6
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_PromotedPost_PromotedPost_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/PromotedPost/PromotedPost.test
+
+# Module: components/UserPortal/PromotedPost/PromotedPost.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_Register_Register.md b/talawa-admin-docs/modules/components_UserPortal_Register_Register.md
new file mode 100644
index 0000000000..7865759c03
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_Register_Register.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/Register/Register
+
+# Module: components/UserPortal/Register/Register
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_Register_Register.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `JSX.Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `InterfaceRegisterProps` |
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/Register/Register.tsx:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/Register/Register.tsx#L19)
diff --git a/talawa-admin-docs/modules/components_UserPortal_Register_Register_test.md b/talawa-admin-docs/modules/components_UserPortal_Register_Register_test.md
new file mode 100644
index 0000000000..e82f244ca2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_Register_Register_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/Register/Register.test
+
+# Module: components/UserPortal/Register/Register.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser.md b/talawa-admin-docs/modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser.md
new file mode 100644
index 0000000000..b834c74894
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/SecuredRouteForUser/SecuredRouteForUser
+
+# Module: components/UserPortal/SecuredRouteForUser/SecuredRouteForUser
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_SecuredRouteForUser_SecuredRouteForUser.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `any` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx:5](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx#L5)
diff --git a/talawa-admin-docs/modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser_test.md b/talawa-admin-docs/modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser_test.md
new file mode 100644
index 0000000000..db3bec625b
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_SecuredRouteForUser_SecuredRouteForUser_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test
+
+# Module: components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_UserNavbar_UserNavbar.md b/talawa-admin-docs/modules/components_UserPortal_UserNavbar_UserNavbar.md
new file mode 100644
index 0000000000..265a3d12ef
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_UserNavbar_UserNavbar.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/UserNavbar/UserNavbar
+
+# Module: components/UserPortal/UserNavbar/UserNavbar
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_UserNavbar_UserNavbar.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/UserNavbar/UserNavbar.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/UserNavbar/UserNavbar.tsx#L16)
diff --git a/talawa-admin-docs/modules/components_UserPortal_UserNavbar_UserNavbar_test.md b/talawa-admin-docs/modules/components_UserPortal_UserNavbar_UserNavbar_test.md
new file mode 100644
index 0000000000..c6d86ea6b2
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_UserNavbar_UserNavbar_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/UserNavbar/UserNavbar.test
+
+# Module: components/UserPortal/UserNavbar/UserNavbar.test
diff --git a/talawa-admin-docs/modules/components_UserPortal_UserSidebar_UserSidebar.md b/talawa-admin-docs/modules/components_UserPortal_UserSidebar_UserSidebar.md
new file mode 100644
index 0000000000..d31979578d
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_UserSidebar_UserSidebar.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/UserSidebar/UserSidebar
+
+# Module: components/UserPortal/UserSidebar/UserSidebar
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserPortal_UserSidebar_UserSidebar.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/UserPortal/UserSidebar/UserSidebar.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L16)
diff --git a/talawa-admin-docs/modules/components_UserPortal_UserSidebar_UserSidebar_test.md b/talawa-admin-docs/modules/components_UserPortal_UserSidebar_UserSidebar_test.md
new file mode 100644
index 0000000000..f4eee6091e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserPortal_UserSidebar_UserSidebar_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserPortal/UserSidebar/UserSidebar.test
+
+# Module: components/UserPortal/UserSidebar/UserSidebar.test
diff --git a/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md b/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md
new file mode 100644
index 0000000000..6e9f01258e
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserUpdate_UserUpdate.md
@@ -0,0 +1,30 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserUpdate/UserUpdate
+
+# Module: components/UserUpdate/UserUpdate
+
+## Table of contents
+
+### Functions
+
+- [default](components_UserUpdate_UserUpdate.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropsWithChildren`\<`InterfaceUserUpdateProps`\> |
+| `context?` | `any` |
+
+#### Returns
+
+``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Defined in
+
+[src/components/UserUpdate/UserUpdate.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UserUpdate/UserUpdate.tsx#L24)
diff --git a/talawa-admin-docs/modules/components_UserUpdate_UserUpdate_test.md b/talawa-admin-docs/modules/components_UserUpdate_UserUpdate_test.md
new file mode 100644
index 0000000000..b5d37bf7fe
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UserUpdate_UserUpdate_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UserUpdate/UserUpdate.test
+
+# Module: components/UserUpdate/UserUpdate.test
diff --git a/talawa-admin-docs/modules/components_UsersTableItem_UserTableItemMocks.md b/talawa-admin-docs/modules/components_UsersTableItem_UserTableItemMocks.md
new file mode 100644
index 0000000000..85305b69e0
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UsersTableItem_UserTableItemMocks.md
@@ -0,0 +1,19 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UsersTableItem/UserTableItemMocks
+
+# Module: components/UsersTableItem/UserTableItemMocks
+
+## Table of contents
+
+### Variables
+
+- [MOCKS](components_UsersTableItem_UserTableItemMocks.md#mocks)
+
+## Variables
+
+### MOCKS
+
+• `Const` **MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = UPDATE\_USERTYPE\_MUTATION; `variables`: \{ `id`: `string` = '123'; `organizationId?`: `undefined` = 'abc'; `orgid?`: `undefined` = 'abc'; `role?`: `undefined` = 'ADMIN'; `userId?`: `undefined` = '123'; `userType`: `string` = 'ADMIN'; `userid?`: `undefined` = '123' \}  \} ; `result`: \{ `data`: \{ `removeMember?`: `undefined` ; `updateUserRoleInOrganization?`: `undefined` ; `updateUserType`: \{ `data`: \{ `id`: `string` = '123' \}  \}  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = REMOVE\_MEMBER\_MUTATION; `variables`: \{ `id?`: `undefined` = '456'; `organizationId?`: `undefined` = 'abc'; `orgid`: `string` = 'abc'; `role?`: `undefined` = 'ADMIN'; `userId?`: `undefined` = '123'; `userType?`: `undefined` = 'ADMIN'; `userid`: `string` = '123' \}  \} ; `result`: \{ `data`: \{ `removeMember`: \{ `_id`: `string` = '123' \} ; `updateUserRoleInOrganization?`: `undefined` ; `updateUserType?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = UPDATE\_USER\_ROLE\_IN\_ORG\_MUTATION; `variables`: \{ `id?`: `undefined` = '456'; `organizationId`: `string` = 'abc'; `orgid?`: `undefined` = 'abc'; `role`: `string` = 'ADMIN'; `userId`: `string` = '123'; `userType?`: `undefined` = 'ADMIN'; `userid?`: `undefined` = '123' \}  \} ; `result`: \{ `data`: \{ `removeMember?`: `undefined` ; `updateUserRoleInOrganization`: \{ `_id`: `string` = '123' \} ; `updateUserType?`: `undefined`  \}  \}  \})[]
+
+#### Defined in
+
+[src/components/UsersTableItem/UserTableItemMocks.ts:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UsersTableItem/UserTableItemMocks.ts#L7)
diff --git a/talawa-admin-docs/modules/components_UsersTableItem_UserTableItem_test.md b/talawa-admin-docs/modules/components_UsersTableItem_UserTableItem_test.md
new file mode 100644
index 0000000000..9ff1e7d92b
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UsersTableItem_UserTableItem_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UsersTableItem/UserTableItem.test
+
+# Module: components/UsersTableItem/UserTableItem.test
diff --git a/talawa-admin-docs/modules/components_UsersTableItem_UsersTableItem.md b/talawa-admin-docs/modules/components_UsersTableItem_UsersTableItem.md
new file mode 100644
index 0000000000..c1e49109f4
--- /dev/null
+++ b/talawa-admin-docs/modules/components_UsersTableItem_UsersTableItem.md
@@ -0,0 +1,29 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/UsersTableItem/UsersTableItem
+
+# Module: components/UsersTableItem/UsersTableItem
+
+## Table of contents
+
+### Functions
+
+- [default](components_UsersTableItem_UsersTableItem.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `Props` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/components/UsersTableItem/UsersTableItem.tsx:25](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/UsersTableItem/UsersTableItem.tsx#L25)
diff --git a/talawa-admin-docs/modules/components_plugins.md b/talawa-admin-docs/modules/components_plugins.md
new file mode 100644
index 0000000000..a72385a04b
--- /dev/null
+++ b/talawa-admin-docs/modules/components_plugins.md
@@ -0,0 +1,22 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/plugins
+
+# Module: components/plugins
+
+## Table of contents
+
+### References
+
+- [DummyPlugin](components_plugins.md#dummyplugin)
+- [DummyPlugin2](components_plugins.md#dummyplugin2)
+
+## References
+
+### DummyPlugin
+
+Renames and re-exports [default](components_plugins_DummyPlugin_DummyPlugin.md#default)
+
+___
+
+### DummyPlugin2
+
+Renames and re-exports [default](components_plugins_DummyPlugin2_DummyPlugin2.md#default)
diff --git a/talawa-admin-docs/modules/components_plugins_DummyPlugin2_DummyPlugin2.md b/talawa-admin-docs/modules/components_plugins_DummyPlugin2_DummyPlugin2.md
new file mode 100644
index 0000000000..f35bdef35a
--- /dev/null
+++ b/talawa-admin-docs/modules/components_plugins_DummyPlugin2_DummyPlugin2.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/plugins/DummyPlugin2/DummyPlugin2
+
+# Module: components/plugins/DummyPlugin2/DummyPlugin2
+
+## Table of contents
+
+### Functions
+
+- [default](components_plugins_DummyPlugin2_DummyPlugin2.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/plugins/DummyPlugin2/DummyPlugin2.tsx:4](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/plugins/DummyPlugin2/DummyPlugin2.tsx#L4)
diff --git a/talawa-admin-docs/modules/components_plugins_DummyPlugin2_DummyPlugin2_test.md b/talawa-admin-docs/modules/components_plugins_DummyPlugin2_DummyPlugin2_test.md
new file mode 100644
index 0000000000..10b1e69c6b
--- /dev/null
+++ b/talawa-admin-docs/modules/components_plugins_DummyPlugin2_DummyPlugin2_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/plugins/DummyPlugin2/DummyPlugin2.test
+
+# Module: components/plugins/DummyPlugin2/DummyPlugin2.test
diff --git a/talawa-admin-docs/modules/components_plugins_DummyPlugin_DummyPlugin.md b/talawa-admin-docs/modules/components_plugins_DummyPlugin_DummyPlugin.md
new file mode 100644
index 0000000000..dfc53edd9f
--- /dev/null
+++ b/talawa-admin-docs/modules/components_plugins_DummyPlugin_DummyPlugin.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/plugins/DummyPlugin/DummyPlugin
+
+# Module: components/plugins/DummyPlugin/DummyPlugin
+
+## Table of contents
+
+### Functions
+
+- [default](components_plugins_DummyPlugin_DummyPlugin.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/components/plugins/DummyPlugin/DummyPlugin.tsx:5](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/components/plugins/DummyPlugin/DummyPlugin.tsx#L5)
diff --git a/talawa-admin-docs/modules/components_plugins_DummyPlugin_DummyPlugin_test.md b/talawa-admin-docs/modules/components_plugins_DummyPlugin_DummyPlugin_test.md
new file mode 100644
index 0000000000..91fbe5a40b
--- /dev/null
+++ b/talawa-admin-docs/modules/components_plugins_DummyPlugin_DummyPlugin_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / components/plugins/DummyPlugin/DummyPlugin.test
+
+# Module: components/plugins/DummyPlugin/DummyPlugin.test
diff --git a/talawa-admin-docs/modules/screens_BlockUser_BlockUser.md b/talawa-admin-docs/modules/screens_BlockUser_BlockUser.md
new file mode 100644
index 0000000000..631fb56671
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_BlockUser_BlockUser.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/BlockUser/BlockUser
+
+# Module: screens/BlockUser/BlockUser
+
+## Table of contents
+
+### Functions
+
+- [default](screens_BlockUser_BlockUser.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/screens/BlockUser/BlockUser.tsx:32](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/BlockUser/BlockUser.tsx#L32)
diff --git a/talawa-admin-docs/modules/screens_BlockUser_BlockUser_test.md b/talawa-admin-docs/modules/screens_BlockUser_BlockUser_test.md
new file mode 100644
index 0000000000..f37cc5c5ba
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_BlockUser_BlockUser_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/BlockUser/BlockUser.test
+
+# Module: screens/BlockUser/BlockUser.test
diff --git a/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard.md b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard.md
new file mode 100644
index 0000000000..33bbf8f7ec
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/EventDashboard/EventDashboard
+
+# Module: screens/EventDashboard/EventDashboard
+
+## Table of contents
+
+### Functions
+
+- [default](screens_EventDashboard_EventDashboard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/screens/EventDashboard/EventDashboard.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/EventDashboard/EventDashboard.tsx#L10)
diff --git a/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md
new file mode 100644
index 0000000000..55d32ca1f5
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_mocks.md
@@ -0,0 +1,30 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/EventDashboard/EventDashboard.mocks
+
+# Module: screens/EventDashboard/EventDashboard.mocks
+
+## Table of contents
+
+### Variables
+
+- [queryMockWithTime](screens_EventDashboard_EventDashboard_mocks.md#querymockwithtime)
+- [queryMockWithoutTime](screens_EventDashboard_EventDashboard_mocks.md#querymockwithouttime)
+
+## Variables
+
+### queryMockWithTime
+
+• `Const` **queryMockWithTime**: (\{ `request`: \{ `query`: `DocumentNode` = EVENT\_FEEDBACKS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `_id`: `string` = 'event123'; `allDay?`: `undefined` = false; `attendees?`: `undefined` = []; `averageFeedbackScore`: `number` = 0; `description?`: `undefined` = 'This is a new update'; `endDate?`: `undefined` = '2/2/23'; `endTime?`: `undefined` = '07:00'; `feedback`: `never`[] = []; `location?`: `undefined` = 'New Delhi'; `organization?`: `undefined` ; `startDate?`: `undefined` = '1/1/23'; `startTime?`: `undefined` = '02:00'; `title?`: `undefined` = 'Updated title' \}  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `_id`: `string` = 'event123'; `allDay`: `boolean` = false; `attendees`: \{ `_id`: `string` = 'user1' \}[] ; `description`: `string` = 'Event Description'; `endDate`: `string` = '2/2/23'; `endTime`: `string` = '09:00:00'; `location`: `string` = 'India'; `organization`: \{ `_id`: `string` = 'org1'; `members`: \{ `_id`: `string` = 'user1'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[]  \} ; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' \}  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/EventDashboard/EventDashboard.mocks.ts:69](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/EventDashboard/EventDashboard.mocks.ts#L69)
+
+___
+
+### queryMockWithoutTime
+
+• `Const` **queryMockWithoutTime**: (\{ `request`: \{ `query`: `DocumentNode` = EVENT\_FEEDBACKS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `_id`: `string` = 'event123'; `allDay?`: `undefined` = false; `attendees?`: `undefined` = []; `averageFeedbackScore`: `number` = 0; `description?`: `undefined` = 'This is a new update'; `endDate?`: `undefined` = '2/2/23'; `endTime?`: `undefined` = '07:00'; `feedback`: `never`[] = []; `location?`: `undefined` = 'New Delhi'; `organization?`: `undefined` ; `startDate?`: `undefined` = '1/1/23'; `startTime?`: `undefined` = '02:00'; `title?`: `undefined` = 'Updated title' \}  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = '' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `_id`: `string` = ''; `allDay`: `boolean` = false; `attendees`: `never`[] = []; `averageFeedbackScore?`: `undefined` = 0; `description`: `string` = 'Event Description'; `endDate`: `string` = '2/2/23'; `endTime`: `string` = '09:00:00'; `feedback?`: `undefined` = []; `location`: `string` = 'India'; `organization`: \{ `_id`: `string` = ''; `members`: `never`[] = [] \} ; `startDate`: `string` = '1/1/23'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Event Title' \}  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = EVENT\_DETAILS; `variables`: \{ `id`: `string` = 'event123' \}  \} ; `result`: \{ `data`: \{ `event`: \{ `_id`: `string` = 'event123'; `allDay`: `boolean` = false; `attendees`: \{ `_id`: `string` = 'user1' \}[] ; `description`: `string` = 'Event Description'; `endDate`: `string` = '2/2/23'; `endTime`: ``null`` = null; `location`: `string` = 'India'; `organization`: \{ `_id`: `string` = 'org1'; `members`: \{ `_id`: `string` = 'user1'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[]  \} ; `startDate`: `string` = '1/1/23'; `startTime`: ``null`` = null; `title`: `string` = 'Event Title' \}  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/EventDashboard/EventDashboard.mocks.ts:102](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/EventDashboard/EventDashboard.mocks.ts#L102)
diff --git a/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_test.md b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_test.md
new file mode 100644
index 0000000000..56f57626c3
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_EventDashboard_EventDashboard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/EventDashboard/EventDashboard.test
+
+# Module: screens/EventDashboard/EventDashboard.test
diff --git a/talawa-admin-docs/modules/screens_ForgotPassword_ForgotPassword.md b/talawa-admin-docs/modules/screens_ForgotPassword_ForgotPassword.md
new file mode 100644
index 0000000000..b326d5e77f
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_ForgotPassword_ForgotPassword.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/ForgotPassword/ForgotPassword
+
+# Module: screens/ForgotPassword/ForgotPassword
+
+## Table of contents
+
+### Functions
+
+- [default](screens_ForgotPassword_ForgotPassword.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/screens/ForgotPassword/ForgotPassword.tsx:22](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/ForgotPassword/ForgotPassword.tsx#L22)
diff --git a/talawa-admin-docs/modules/screens_ForgotPassword_ForgotPassword_test.md b/talawa-admin-docs/modules/screens_ForgotPassword_ForgotPassword_test.md
new file mode 100644
index 0000000000..8748876204
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_ForgotPassword_ForgotPassword_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/ForgotPassword/ForgotPassword.test
+
+# Module: screens/ForgotPassword/ForgotPassword.test
diff --git a/talawa-admin-docs/modules/screens_LoginPage_LoginPage.md b/talawa-admin-docs/modules/screens_LoginPage_LoginPage.md
new file mode 100644
index 0000000000..75b2f9d03a
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_LoginPage_LoginPage.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/LoginPage/LoginPage
+
+# Module: screens/LoginPage/LoginPage
+
+## Table of contents
+
+### Functions
+
+- [default](screens_LoginPage_LoginPage.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/LoginPage/LoginPage.tsx:44](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/LoginPage/LoginPage.tsx#L44)
diff --git a/talawa-admin-docs/modules/screens_LoginPage_LoginPage_test.md b/talawa-admin-docs/modules/screens_LoginPage_LoginPage_test.md
new file mode 100644
index 0000000000..f269edc1ac
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_LoginPage_LoginPage_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/LoginPage/LoginPage.test
+
+# Module: screens/LoginPage/LoginPage.test
diff --git a/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md b/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md
new file mode 100644
index 0000000000..3775c53c7c
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail.md
@@ -0,0 +1,72 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/MemberDetail/MemberDetail
+
+# Module: screens/MemberDetail/MemberDetail
+
+## Table of contents
+
+### Functions
+
+- [default](screens_MemberDetail_MemberDetail.md#default)
+- [getLanguageName](screens_MemberDetail_MemberDetail.md#getlanguagename)
+- [prettyDate](screens_MemberDetail_MemberDetail.md#prettydate)
+
+## Functions
+
+### default
+
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropsWithChildren`\<`MemberDetailProps`\> |
+| `context?` | `any` |
+
+#### Returns
+
+``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Defined in
+
+[src/screens/MemberDetail/MemberDetail.tsx:28](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/MemberDetail/MemberDetail.tsx#L28)
+
+___
+
+### getLanguageName
+
+▸ **getLanguageName**(`code`): `string`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `code` | `string` |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+[src/screens/MemberDetail/MemberDetail.tsx:328](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/MemberDetail/MemberDetail.tsx#L328)
+
+___
+
+### prettyDate
+
+▸ **prettyDate**(`param`): `string`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `param` | `string` |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+[src/screens/MemberDetail/MemberDetail.tsx:320](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/MemberDetail/MemberDetail.tsx#L320)
diff --git a/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail_test.md b/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail_test.md
new file mode 100644
index 0000000000..fceb473c26
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_MemberDetail_MemberDetail_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/MemberDetail/MemberDetail.test
+
+# Module: screens/MemberDetail/MemberDetail.test
diff --git a/talawa-admin-docs/modules/screens_OrgContribution_OrgContribution.md b/talawa-admin-docs/modules/screens_OrgContribution_OrgContribution.md
new file mode 100644
index 0000000000..c9f5d05463
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgContribution_OrgContribution.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgContribution/OrgContribution
+
+# Module: screens/OrgContribution/OrgContribution
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrgContribution_OrgContribution.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrgContribution/OrgContribution.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgContribution/OrgContribution.tsx#L11)
diff --git a/talawa-admin-docs/modules/screens_OrgContribution_OrgContribution_test.md b/talawa-admin-docs/modules/screens_OrgContribution_OrgContribution_test.md
new file mode 100644
index 0000000000..588e0253be
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgContribution_OrgContribution_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgContribution/OrgContribution.test
+
+# Module: screens/OrgContribution/OrgContribution.test
diff --git a/talawa-admin-docs/modules/screens_OrgList_OrgList.md b/talawa-admin-docs/modules/screens_OrgList_OrgList.md
new file mode 100644
index 0000000000..04775362ee
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgList_OrgList.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgList/OrgList
+
+# Module: screens/OrgList/OrgList
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrgList_OrgList.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrgList/OrgList.tsx:34](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgList/OrgList.tsx#L34)
diff --git a/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md b/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md
new file mode 100644
index 0000000000..95d493570c
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgList_OrgListMocks.md
@@ -0,0 +1,52 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgList/OrgListMocks
+
+# Module: screens/OrgList/OrgListMocks
+
+## Table of contents
+
+### Variables
+
+- [MOCKS](screens_OrgList_OrgListMocks.md#mocks)
+- [MOCKS\_ADMIN](screens_OrgList_OrgListMocks.md#mocks_admin)
+- [MOCKS\_EMPTY](screens_OrgList_OrgListMocks.md#mocks_empty)
+- [MOCKS\_WITH\_ERROR](screens_OrgList_OrgListMocks.md#mocks_with_error)
+
+## Variables
+
+### MOCKS
+
+• `Const` **MOCKS**: (\{ `request`: \{ `notifyOnNetworkStatusChange`: `boolean` = true; `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables`: \{ `address?`: `undefined` ; `description?`: `undefined` = 'This is a new update'; `filter`: `string` = ''; `first`: `number` = 8; `id?`: `undefined` = '456'; `image?`: `undefined` ; `name?`: `undefined` = ''; `orderBy`: `string` = 'createdAt\_ASC'; `skip`: `number` = 0; `userRegistrationRequired?`: `undefined` = true; `visibleInSearch?`: `undefined` = false \}  \} ; `result`: \{ `data`: \{ `createOrganization?`: `undefined` ; `createSampleOrganization?`: `undefined` ; `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations \}  \}  \} \| \{ `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `address?`: `undefined` ; `description?`: `undefined` = 'This is a new update'; `filter?`: `undefined` = ''; `first?`: `undefined` = 8; `id`: `string` = '123'; `image?`: `undefined` ; `name?`: `undefined` = ''; `orderBy?`: `undefined` = 'createdAt\_ASC'; `skip?`: `undefined` = 0; `userRegistrationRequired?`: `undefined` = true; `visibleInSearch?`: `undefined` = false \}  \} ; `result`: \{ `data`: `InterfaceUserType` = superAdminUser \}  \} \| \{ `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = CREATE\_SAMPLE\_ORGANIZATION\_MUTATION; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `createOrganization?`: `undefined` ; `createSampleOrganization`: \{ `id`: `string` = '1'; `name`: `string` = 'Sample Organization' \} ; `organizationsConnection?`: `undefined` = organizations \}  \}  \} \| \{ `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = CREATE\_ORGANIZATION\_MUTATION; `variables`: \{ `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `description`: `string` = 'This is a dummy organization'; `filter?`: `undefined` = ''; `first?`: `undefined` = 8; `id?`: `undefined` = '456'; `image`: `string` = ''; `name`: `string` = 'Dummy Organization'; `orderBy?`: `undefined` = 'createdAt\_ASC'; `skip?`: `undefined` = 0; `userRegistrationRequired`: `boolean` = false; `visibleInSearch`: `boolean` = true \}  \} ; `result`: \{ `data`: \{ `createOrganization`: \{ `_id`: `string` = '1' \} ; `createSampleOrganization?`: `undefined` ; `organizationsConnection?`: `undefined` = organizations \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/OrgList/OrgListMocks.ts:101](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgList/OrgListMocks.ts#L101)
+
+___
+
+### MOCKS\_ADMIN
+
+• `Const` **MOCKS\_ADMIN**: (\{ `request`: \{ `notifyOnNetworkStatusChange`: `boolean` = true; `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables`: \{ `filter`: `string` = ''; `first`: `number` = 8; `id?`: `undefined` = '456'; `orderBy`: `string` = 'createdAt\_ASC'; `skip`: `number` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations \}  \}  \} \| \{ `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `filter?`: `undefined` = ''; `first?`: `undefined` = 8; `id`: `string` = '123'; `orderBy?`: `undefined` = 'createdAt\_ASC'; `skip?`: `undefined` = 0 \}  \} ; `result`: \{ `data`: `InterfaceUserType` = adminUser \}  \})[]
+
+#### Defined in
+
+[src/screens/OrgList/OrgListMocks.ts:235](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgList/OrgListMocks.ts#L235)
+
+___
+
+### MOCKS\_EMPTY
+
+• `Const` **MOCKS\_EMPTY**: (\{ `request`: \{ `notifyOnNetworkStatusChange`: `boolean` = true; `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables`: \{ `filter`: `string` = ''; `first`: `number` = 8; `id?`: `undefined` = '456'; `orderBy`: `string` = 'createdAt\_ASC'; `skip`: `number` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `never`[] = [] \}  \}  \} \| \{ `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `filter?`: `undefined` = ''; `first?`: `undefined` = 8; `id`: `string` = '123'; `orderBy?`: `undefined` = 'createdAt\_ASC'; `skip?`: `undefined` = 0 \}  \} ; `result`: \{ `data`: `InterfaceUserType` = superAdminUser \}  \})[]
+
+#### Defined in
+
+[src/screens/OrgList/OrgListMocks.ts:171](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgList/OrgListMocks.ts#L171)
+
+___
+
+### MOCKS\_WITH\_ERROR
+
+• `Const` **MOCKS\_WITH\_ERROR**: (\{ `error?`: `undefined` ; `request`: \{ `notifyOnNetworkStatusChange`: `boolean` = true; `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables`: \{ `filter`: `string` = ''; `first`: `number` = 8; `id?`: `undefined` = '456'; `orderBy`: `string` = 'createdAt\_ASC'; `skip`: `number` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `InterfaceOrgConnectionInfoType`[] = organizations \}  \}  \} \| \{ `error?`: `undefined` ; `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `filter?`: `undefined` = ''; `first?`: `undefined` = 8; `id`: `string` = '123'; `orderBy?`: `undefined` = 'createdAt\_ASC'; `skip?`: `undefined` = 0 \}  \} ; `result`: \{ `data`: `InterfaceUserType` = superAdminUser \}  \} \| \{ `error`: `Error` ; `request`: \{ `notifyOnNetworkStatusChange?`: `undefined` = true; `query`: `DocumentNode` = CREATE\_SAMPLE\_ORGANIZATION\_MUTATION; `variables?`: `undefined`  \} ; `result?`: `undefined`  \})[]
+
+#### Defined in
+
+[src/screens/OrgList/OrgListMocks.ts:199](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgList/OrgListMocks.ts#L199)
diff --git a/talawa-admin-docs/modules/screens_OrgList_OrgList_test.md b/talawa-admin-docs/modules/screens_OrgList_OrgList_test.md
new file mode 100644
index 0000000000..97033df2f3
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgList_OrgList_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgList/OrgList.test
+
+# Module: screens/OrgList/OrgList.test
diff --git a/talawa-admin-docs/modules/screens_OrgList_OrganizationModal.md b/talawa-admin-docs/modules/screens_OrgList_OrganizationModal.md
new file mode 100644
index 0000000000..70df93939d
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgList_OrganizationModal.md
@@ -0,0 +1,32 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgList/OrganizationModal
+
+# Module: screens/OrgList/OrganizationModal
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrgList_OrganizationModal.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(`props`, `context?`): ``null`` \| `ReactElement`\<`any`, `any`\>
+
+Represents the organization modal component.
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | `PropsWithChildren`\<`InterfaceOrganizationModalProps`\> |
+| `context?` | `any` |
+
+#### Returns
+
+``null`` \| `ReactElement`\<`any`, `any`\>
+
+#### Defined in
+
+[src/screens/OrgList/OrganizationModal.tsx:58](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgList/OrganizationModal.tsx#L58)
diff --git a/talawa-admin-docs/modules/screens_OrgPost_OrgPost.md b/talawa-admin-docs/modules/screens_OrgPost_OrgPost.md
new file mode 100644
index 0000000000..a21030a9eb
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgPost_OrgPost.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgPost/OrgPost
+
+# Module: screens/OrgPost/OrgPost
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrgPost_OrgPost.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrgPost/OrgPost.tsx:35](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgPost/OrgPost.tsx#L35)
diff --git a/talawa-admin-docs/modules/screens_OrgPost_OrgPost_test.md b/talawa-admin-docs/modules/screens_OrgPost_OrgPost_test.md
new file mode 100644
index 0000000000..7bbf3988e6
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgPost_OrgPost_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgPost/OrgPost.test
+
+# Module: screens/OrgPost/OrgPost.test
diff --git a/talawa-admin-docs/modules/screens_OrgSettings_OrgSettings.md b/talawa-admin-docs/modules/screens_OrgSettings_OrgSettings.md
new file mode 100644
index 0000000000..7ea5d95389
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgSettings_OrgSettings.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgSettings/OrgSettings
+
+# Module: screens/OrgSettings/OrgSettings
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrgSettings_OrgSettings.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrgSettings/OrgSettings.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrgSettings/OrgSettings.tsx#L13)
diff --git a/talawa-admin-docs/modules/screens_OrgSettings_OrgSettings_test.md b/talawa-admin-docs/modules/screens_OrgSettings_OrgSettings_test.md
new file mode 100644
index 0000000000..58f2a07074
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrgSettings_OrgSettings_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrgSettings/OrgSettings.test
+
+# Module: screens/OrgSettings/OrgSettings.test
diff --git a/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboard.md b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboard.md
new file mode 100644
index 0000000000..7fb0774b3c
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboard.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationDashboard/OrganizationDashboard
+
+# Module: screens/OrganizationDashboard/OrganizationDashboard
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrganizationDashboard_OrganizationDashboard.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrganizationDashboard/OrganizationDashboard.tsx:32](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrganizationDashboard/OrganizationDashboard.tsx#L32)
diff --git a/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md
new file mode 100644
index 0000000000..58a98c70e1
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboardMocks.md
@@ -0,0 +1,41 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationDashboard/OrganizationDashboardMocks
+
+# Module: screens/OrganizationDashboard/OrganizationDashboardMocks
+
+## Table of contents
+
+### Variables
+
+- [EMPTY\_MOCKS](screens_OrganizationDashboard_OrganizationDashboardMocks.md#empty_mocks)
+- [ERROR\_MOCKS](screens_OrganizationDashboard_OrganizationDashboardMocks.md#error_mocks)
+- [MOCKS](screens_OrganizationDashboard_OrganizationDashboardMocks.md#mocks)
+
+## Variables
+
+### EMPTY\_MOCKS
+
+• `Const` **EMPTY\_MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganizationConnection?`: `undefined` ; `organizations`: \{ `_id`: `number` = 123; `address`: \{ `city`: `string` = 'Delhi'; `countryCode`: `string` = 'IN'; `dependentLocality`: `string` = 'Some Dependent Locality'; `line1`: `string` = '123 Random Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = '110001'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Delhi' \} ; `admins`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[] ; `blockedUsers`: \{ `_id`: `string` = '789'; `email`: `string` = 'stevesmith@gmail.com'; `firstName`: `string` = 'Steve'; `lastName`: `string` = 'Smith' \}[] ; `creator`: \{ `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `description`: `string` = 'This is a Dummy Organization'; `image`: `string` = ''; `members`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[] ; `membershipRequests`: `never`[] = []; `name`: `string` = 'Dummy Organization'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}[] ; `postsByOrganizationConnection?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_POST\_CONNECTION\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganizationConnection?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganizationConnection`: \{ `edges`: `never`[] = [] \}  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_EVENT\_CONNECTION\_LIST \} ; `result`: \{ `data`: \{ `eventsByOrganizationConnection`: `never`[] = []; `organizations?`: `undefined` ; `postsByOrganizationConnection?`: `undefined`  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts:197](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts#L197)
+
+___
+
+### ERROR\_MOCKS
+
+• `Const` **ERROR\_MOCKS**: \{ `error`: `Error` ; `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST \}  \}[]
+
+#### Defined in
+
+[src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts:281](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts#L281)
+
+___
+
+### MOCKS
+
+• `Const` **MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = ORGANIZATIONS\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `eventsByOrganizationConnection?`: `undefined` ; `organizations`: \{ `_id`: `number` = 123; `address`: \{ `city`: `string` = 'Delhi'; `countryCode`: `string` = 'IN'; `dependentLocality`: `string` = 'Some Dependent Locality'; `line1`: `string` = '123 Random Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = '110001'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Delhi' \} ; `admins`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[] ; `blockedUsers`: \{ `_id`: `string` = '789'; `email`: `string` = 'stevesmith@gmail.com'; `firstName`: `string` = 'Steve'; `lastName`: `string` = 'Smith' \}[] ; `creator`: \{ `email`: `string` = ''; `firstName`: `string` = ''; `lastName`: `string` = '' \} ; `description`: `string` = 'This is a Dummy Organization'; `image`: `string` = ''; `members`: \{ `_id`: `string` = '123'; `email`: `string` = 'johndoe@gmail.com'; `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \}[] ; `membershipRequests`: \{ `_id`: `string` = '456'; `user`: \{ `email`: `string` = 'janedoe@gmail.com'; `firstName`: `string` = 'Jane'; `lastName`: `string` = 'Doe' \}  \}[] ; `name`: `string` = 'Dummy Organization'; `userRegistrationRequired`: `boolean` = true; `visibleInSearch`: `boolean` = false \}[] ; `postsByOrganizationConnection?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_POST\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `eventsByOrganizationConnection?`: `undefined` ; `organizations?`: `undefined` ; `postsByOrganizationConnection`: \{ `edges`: \{ `_id`: `string` = '6411e54835d7ba2344a78e29'; `commentCount`: `number` = 2; `comments`: \{ `__typename`: `string` = 'Comment'; `_id`: `string` = '64eb13beca85de60ebe0ed0e'; `creator`: \{ `__typename`: `string` = 'User'; `_id`: `string` = '63d6064458fce20ee25c3bf7'; `email`: `string` = 'test@gmail.com'; `firstName`: `string` = 'Noble'; `lastName`: `string` = 'Mittal' \} ; `likeCount`: `number` = 1; `likedBy`: \{ `_id`: `number` = 1 \}[] ; `text`: `string` = 'Yes, that is $50' \}[] ; `createdAt`: `Dayjs` ; `creator`: \{ `_id`: `string` = '640d98d9eb6a743d75341067'; `email`: `string` = 'adidacreator1@gmail.com'; `firstName`: `string` = 'Aditya'; `lastName`: `string` = 'Shelke' \} ; `imageUrl`: ``null`` = null; `likeCount`: `number` = 0; `likedBy`: \{ `_id`: `string` = '63d6064458fce20ee25c3bf7'; `firstName`: `string` = 'Comment'; `lastName`: `string` = 'Likkert' \}[] ; `pinned`: `boolean` = false; `text`: `string` = 'Hey, anyone saw my watch that I left at the office?'; `title`: `string` = 'Post 2'; `videoUrl`: ``null`` = null \}[]  \}  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_EVENT\_CONNECTION\_LIST; `variables`: \{ `organization_id`: `string` = '123' \}  \} ; `result`: \{ `data`: \{ `eventsByOrganizationConnection`: \{ `_id`: `string` = '1'; `allDay`: `boolean` = false; `description`: `string` = 'Sample Description'; `endDate`: `string` = '2023-10-29T23:59:59.000Z'; `endTime`: `string` = '17:00:00'; `isPublic`: `boolean` = true; `isRegisterable`: `boolean` = true; `location`: `string` = 'Sample Location'; `recurring`: `boolean` = false; `startDate`: `string` = '2023-10-29T00:00:00.000Z'; `startTime`: `string` = '08:00:00'; `title`: `string` = 'Sample Event' \}[] ; `organizations?`: `undefined` ; `postsByOrganizationConnection?`: `undefined`  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts:8](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts#L8)
diff --git a/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboard_test.md b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboard_test.md
new file mode 100644
index 0000000000..59b308b2c3
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationDashboard_OrganizationDashboard_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationDashboard/OrganizationDashboard.test
+
+# Module: screens/OrganizationDashboard/OrganizationDashboard.test
diff --git a/talawa-admin-docs/modules/screens_OrganizationEvents_OrganizationEvents.md b/talawa-admin-docs/modules/screens_OrganizationEvents_OrganizationEvents.md
new file mode 100644
index 0000000000..5ea99e50ac
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationEvents_OrganizationEvents.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationEvents/OrganizationEvents
+
+# Module: screens/OrganizationEvents/OrganizationEvents
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrganizationEvents_OrganizationEvents.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrganizationEvents/OrganizationEvents.tsx:29](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrganizationEvents/OrganizationEvents.tsx#L29)
diff --git a/talawa-admin-docs/modules/screens_OrganizationEvents_OrganizationEvents_test.md b/talawa-admin-docs/modules/screens_OrganizationEvents_OrganizationEvents_test.md
new file mode 100644
index 0000000000..6cbca3f09b
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationEvents_OrganizationEvents_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationEvents/OrganizationEvents.test
+
+# Module: screens/OrganizationEvents/OrganizationEvents.test
diff --git a/talawa-admin-docs/modules/screens_OrganizationPeople_OrganizationPeople.md b/talawa-admin-docs/modules/screens_OrganizationPeople_OrganizationPeople.md
new file mode 100644
index 0000000000..6169d2109b
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationPeople_OrganizationPeople.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationPeople/OrganizationPeople
+
+# Module: screens/OrganizationPeople/OrganizationPeople
+
+## Table of contents
+
+### Functions
+
+- [default](screens_OrganizationPeople_OrganizationPeople.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/OrganizationPeople/OrganizationPeople.tsx:28](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/OrganizationPeople/OrganizationPeople.tsx#L28)
diff --git a/talawa-admin-docs/modules/screens_OrganizationPeople_OrganizationPeople_test.md b/talawa-admin-docs/modules/screens_OrganizationPeople_OrganizationPeople_test.md
new file mode 100644
index 0000000000..e0879da4b3
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_OrganizationPeople_OrganizationPeople_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/OrganizationPeople/OrganizationPeople.test
+
+# Module: screens/OrganizationPeople/OrganizationPeople.test
diff --git a/talawa-admin-docs/modules/screens_PageNotFound_PageNotFound.md b/talawa-admin-docs/modules/screens_PageNotFound_PageNotFound.md
new file mode 100644
index 0000000000..580ae063d3
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_PageNotFound_PageNotFound.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/PageNotFound/PageNotFound
+
+# Module: screens/PageNotFound/PageNotFound
+
+## Table of contents
+
+### Functions
+
+- [default](screens_PageNotFound_PageNotFound.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/screens/PageNotFound/PageNotFound.tsx:8](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/PageNotFound/PageNotFound.tsx#L8)
diff --git a/talawa-admin-docs/modules/screens_PageNotFound_PageNotFound_test.md b/talawa-admin-docs/modules/screens_PageNotFound_PageNotFound_test.md
new file mode 100644
index 0000000000..b63137770c
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_PageNotFound_PageNotFound_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/PageNotFound/PageNotFound.test
+
+# Module: screens/PageNotFound/PageNotFound.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Chat_Chat.md b/talawa-admin-docs/modules/screens_UserPortal_Chat_Chat.md
new file mode 100644
index 0000000000..314d6c9dfd
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Chat_Chat.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Chat/Chat
+
+# Module: screens/UserPortal/Chat/Chat
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_Chat_Chat.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/Chat/Chat.tsx:30](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/Chat/Chat.tsx#L30)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Chat_Chat_test.md b/talawa-admin-docs/modules/screens_UserPortal_Chat_Chat_test.md
new file mode 100644
index 0000000000..a8ba0f2b34
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Chat_Chat_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Chat/Chat.test
+
+# Module: screens/UserPortal/Chat/Chat.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Donate_Donate.md b/talawa-admin-docs/modules/screens_UserPortal_Donate_Donate.md
new file mode 100644
index 0000000000..ebd7721aa6
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Donate_Donate.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Donate/Donate
+
+# Module: screens/UserPortal/Donate/Donate
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_Donate_Donate.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/Donate/Donate.tsx:27](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/Donate/Donate.tsx#L27)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Donate_Donate_test.md b/talawa-admin-docs/modules/screens_UserPortal_Donate_Donate_test.md
new file mode 100644
index 0000000000..5fd12c96d5
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Donate_Donate_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Donate/Donate.test
+
+# Module: screens/UserPortal/Donate/Donate.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Events_Events.md b/talawa-admin-docs/modules/screens_UserPortal_Events_Events.md
new file mode 100644
index 0000000000..b99b7dca32
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Events_Events.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Events/Events
+
+# Module: screens/UserPortal/Events/Events
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_Events_Events.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/Events/Events.tsx:50](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/Events/Events.tsx#L50)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Events_Events_test.md b/talawa-admin-docs/modules/screens_UserPortal_Events_Events_test.md
new file mode 100644
index 0000000000..d195e39ba3
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Events_Events_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Events/Events.test
+
+# Module: screens/UserPortal/Events/Events.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Home_Home.md b/talawa-admin-docs/modules/screens_UserPortal_Home_Home.md
new file mode 100644
index 0000000000..c3820ac902
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Home_Home.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Home/Home
+
+# Module: screens/UserPortal/Home/Home
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_Home_Home.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/Home/Home.tsx:79](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/Home/Home.tsx#L79)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Home_Home_test.md b/talawa-admin-docs/modules/screens_UserPortal_Home_Home_test.md
new file mode 100644
index 0000000000..024a7960f4
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Home_Home_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Home/Home.test
+
+# Module: screens/UserPortal/Home/Home.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Organizations_Organizations.md b/talawa-admin-docs/modules/screens_UserPortal_Organizations_Organizations.md
new file mode 100644
index 0000000000..c59cfe6ad9
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Organizations_Organizations.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Organizations/Organizations
+
+# Module: screens/UserPortal/Organizations/Organizations
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_Organizations_Organizations.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/Organizations/Organizations.tsx:27](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/Organizations/Organizations.tsx#L27)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Organizations_Organizations_test.md b/talawa-admin-docs/modules/screens_UserPortal_Organizations_Organizations_test.md
new file mode 100644
index 0000000000..71d42b41fc
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Organizations_Organizations_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Organizations/Organizations.test
+
+# Module: screens/UserPortal/Organizations/Organizations.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_People_People.md b/talawa-admin-docs/modules/screens_UserPortal_People_People.md
new file mode 100644
index 0000000000..8e7d871987
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_People_People.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/People/People
+
+# Module: screens/UserPortal/People/People
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_People_People.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/People/People.tsx:26](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/People/People.tsx#L26)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_People_People_test.md b/talawa-admin-docs/modules/screens_UserPortal_People_People_test.md
new file mode 100644
index 0000000000..2e500bc348
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_People_People_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/People/People.test
+
+# Module: screens/UserPortal/People/People.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Settings_Settings.md b/talawa-admin-docs/modules/screens_UserPortal_Settings_Settings.md
new file mode 100644
index 0000000000..fb7a967028
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Settings_Settings.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Settings/Settings
+
+# Module: screens/UserPortal/Settings/Settings
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_Settings_Settings.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/Settings/Settings.tsx:16](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/Settings/Settings.tsx#L16)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_Settings_Settings_test.md b/talawa-admin-docs/modules/screens_UserPortal_Settings_Settings_test.md
new file mode 100644
index 0000000000..89bc26e757
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_Settings_Settings_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/Settings/Settings.test
+
+# Module: screens/UserPortal/Settings/Settings.test
diff --git a/talawa-admin-docs/modules/screens_UserPortal_UserLoginPage_UserLoginPage.md b/talawa-admin-docs/modules/screens_UserPortal_UserLoginPage_UserLoginPage.md
new file mode 100644
index 0000000000..ddb0371bf4
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_UserLoginPage_UserLoginPage.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/UserLoginPage/UserLoginPage
+
+# Module: screens/UserPortal/UserLoginPage/UserLoginPage
+
+## Table of contents
+
+### Functions
+
+- [default](screens_UserPortal_UserLoginPage_UserLoginPage.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `JSX.Element`
+
+#### Returns
+
+`JSX.Element`
+
+#### Defined in
+
+[src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx:43](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx#L43)
diff --git a/talawa-admin-docs/modules/screens_UserPortal_UserLoginPage_UserLoginPage_test.md b/talawa-admin-docs/modules/screens_UserPortal_UserLoginPage_UserLoginPage_test.md
new file mode 100644
index 0000000000..186ddd1caf
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_UserPortal_UserLoginPage_UserLoginPage_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/UserPortal/UserLoginPage/UserLoginPage.test
+
+# Module: screens/UserPortal/UserLoginPage/UserLoginPage.test
diff --git a/talawa-admin-docs/modules/screens_Users_Users.md b/talawa-admin-docs/modules/screens_Users_Users.md
new file mode 100644
index 0000000000..a87c93404e
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_Users_Users.md
@@ -0,0 +1,23 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/Users/Users
+
+# Module: screens/Users/Users
+
+## Table of contents
+
+### Functions
+
+- [default](screens_Users_Users.md#default)
+
+## Functions
+
+### default
+
+▸ **default**(): `Element`
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[src/screens/Users/Users.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/Users/Users.tsx#L24)
diff --git a/talawa-admin-docs/modules/screens_Users_UsersMocks.md b/talawa-admin-docs/modules/screens_Users_UsersMocks.md
new file mode 100644
index 0000000000..31b72fc622
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_Users_UsersMocks.md
@@ -0,0 +1,41 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/Users/UsersMocks
+
+# Module: screens/Users/UsersMocks
+
+## Table of contents
+
+### Variables
+
+- [EMPTY\_MOCKS](screens_Users_UsersMocks.md#empty_mocks)
+- [MOCKS](screens_Users_UsersMocks.md#mocks)
+- [MOCKS2](screens_Users_UsersMocks.md#mocks2)
+
+## Variables
+
+### EMPTY\_MOCKS
+
+• `Const` **EMPTY\_MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = USER\_LIST; `variables`: \{ `first`: `number` = 12; `firstName_contains`: `string` = ''; `lastName_contains`: `string` = ''; `skip`: `number` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection?`: `undefined` = organizations; `users`: `never`[] = [] \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `organizationsConnection`: `never`[] = []; `users?`: `undefined`  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/Users/UsersMocks.ts:392](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/Users/UsersMocks.ts#L392)
+
+___
+
+### MOCKS
+
+• `Const` **MOCKS**: (\{ `request`: \{ `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `first?`: `undefined` = 8; `firstName_contains?`: `undefined` = 'john'; `id`: `string` = 'user1'; `lastName_contains?`: `undefined` = ''; `skip?`: `undefined` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection?`: `undefined` = organizations; `user`: \{ `_id`: `string` = 'user1'; `adminFor`: \{ `_id`: `number` = 1; `image`: `string` = ''; `name`: `string` = 'Palisadoes' \}[] ; `email`: `string` = 'John\_Does\_Palasidoes@gmail.com'; `firstName`: `string` = 'John'; `image`: `string` = ''; `lastName`: `string` = 'Doe'; `userType`: `string` = 'SUPERADMIN' \} ; `users?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = USER\_LIST; `variables`: \{ `first`: `number` = 12; `firstName_contains`: `string` = ''; `id?`: `undefined` = '456'; `lastName_contains`: `string` = ''; `skip`: `number` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection?`: `undefined` = organizations; `user?`: `undefined` ; `users`: \{ `_id`: `string` = 'user1'; `adminApproved`: `boolean` = true; `adminFor`: \{ `_id`: `string` = '123' \}[] ; `createdAt`: `string` = '20/06/2022'; `email`: `string` = 'john@example.com'; `firstName`: `string` = 'John'; `image`: ``null`` = null; `joinedOrganizations`: \{ `_id`: `string` = 'abc'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `createdAt`: `string` = '20/06/2022'; `creator`: \{ `_id`: `string` = '123'; `createdAt`: `string` = '20/06/2022'; `email`: `string` = 'john@example.com'; `firstName`: `string` = 'John'; `image`: ``null`` = null; `lastName`: `string` = 'Doe' \} ; `image`: ``null`` = null; `name`: `string` = 'Joined Organization 1' \}[] ; `lastName`: `string` = 'Doe'; `organizationsBlockedBy`: \{ `_id`: `string` = 'xyz'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `createdAt`: `string` = '20/06/2022'; `creator`: \{ `_id`: `string` = '123'; `createdAt`: `string` = '20/06/2022'; `email`: `string` = 'john@example.com'; `firstName`: `string` = 'John'; `image`: ``null`` = null; `lastName`: `string` = 'Doe' \} ; `image`: ``null`` = null; `name`: `string` = 'ABC' \}[] ; `userType`: `string` = 'SUPERADMIN' \}[]  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `organizationsConnection`: \{ `_id`: `number` = 123; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `admins`: \{ `_id`: `string` = 'user1' \}[] ; `createdAt`: `string` = '09/11/2001'; `creator`: \{ `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `image`: ``null`` = null; `members`: \{ `_id`: `string` = 'user1' \}[] ; `name`: `string` = 'Palisadoes' \}[] ; `user?`: `undefined` ; `users?`: `undefined`  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/Users/UsersMocks.ts:7](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/Users/UsersMocks.ts#L7)
+
+___
+
+### MOCKS2
+
+• `Const` **MOCKS2**: (\{ `request`: \{ `query`: `DocumentNode` = USER\_ORGANIZATION\_LIST; `variables`: \{ `first?`: `undefined` = 8; `firstName_contains?`: `undefined` = 'john'; `id`: `string` = 'user1'; `lastName_contains?`: `undefined` = ''; `skip?`: `undefined` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection?`: `undefined` = organizations; `user`: \{ `_id`: `string` = 'user1'; `adminFor`: \{ `_id`: `number` = 1; `image`: `string` = ''; `name`: `string` = 'Palisadoes' \}[] ; `email`: `string` = 'John\_Does\_Palasidoes@gmail.com'; `firstName`: `string` = 'John'; `image`: `string` = ''; `lastName`: `string` = 'Doe'; `userType`: `string` = 'SUPERADMIN' \} ; `users?`: `undefined`  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = USER\_LIST; `variables`: \{ `first`: `number` = 12; `firstName_contains`: `string` = ''; `id?`: `undefined` = '456'; `lastName_contains`: `string` = ''; `skip`: `number` = 0 \}  \} ; `result`: \{ `data`: \{ `organizationsConnection?`: `undefined` = organizations; `user?`: `undefined` ; `users`: \{ `_id`: `string` = 'user1'; `adminApproved`: `boolean` = true; `adminFor`: \{ `_id`: `string` = '123' \}[] ; `createdAt`: `string` = '20/06/2022'; `email`: `string` = 'john@example.com'; `firstName`: `string` = 'John'; `image`: ``null`` = null; `joinedOrganizations`: \{ `_id`: `string` = 'abc'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `createdAt`: `string` = '20/06/2022'; `creator`: \{ `_id`: `string` = '123'; `createdAt`: `string` = '20/06/2022'; `email`: `string` = 'john@example.com'; `firstName`: `string` = 'John'; `image`: ``null`` = null; `lastName`: `string` = 'Doe' \} ; `image`: ``null`` = null; `name`: `string` = 'Joined Organization 1' \}[] ; `lastName`: `string` = 'Doe'; `organizationsBlockedBy`: \{ `_id`: `string` = 'xyz'; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `createdAt`: `string` = '20/06/2022'; `creator`: \{ `_id`: `string` = '123'; `createdAt`: `string` = '20/06/2022'; `email`: `string` = 'john@example.com'; `firstName`: `string` = 'John'; `image`: ``null`` = null; `lastName`: `string` = 'Doe' \} ; `image`: ``null`` = null; `name`: `string` = 'ABC' \}[] ; `userType`: `string` = 'SUPERADMIN' \}[]  \}  \}  \} \| \{ `request`: \{ `query`: `DocumentNode` = ORGANIZATION\_CONNECTION\_LIST; `variables?`: `undefined`  \} ; `result`: \{ `data`: \{ `organizationsConnection`: \{ `_id`: `number` = 123; `address`: \{ `city`: `string` = 'Kingston'; `countryCode`: `string` = 'JM'; `dependentLocality`: `string` = 'Sample Dependent Locality'; `line1`: `string` = '123 Jamaica Street'; `line2`: `string` = 'Apartment 456'; `postalCode`: `string` = 'JM12345'; `sortingCode`: `string` = 'ABC-123'; `state`: `string` = 'Kingston Parish' \} ; `admins`: \{ `_id`: `string` = 'user1' \}[] ; `createdAt`: `string` = '09/11/2001'; `creator`: \{ `firstName`: `string` = 'John'; `lastName`: `string` = 'Doe' \} ; `image`: ``null`` = null; `members`: \{ `_id`: `string` = 'user1' \}[] ; `name`: `string` = 'Palisadoes' \}[] ; `user?`: `undefined` ; `users?`: `undefined`  \}  \}  \})[]
+
+#### Defined in
+
+[src/screens/Users/UsersMocks.ts:233](https://github.com/PalisadoesFoundation/talawa-admin/blob/12d9229/src/screens/Users/UsersMocks.ts#L233)
diff --git a/talawa-admin-docs/modules/screens_Users_Users_test.md b/talawa-admin-docs/modules/screens_Users_Users_test.md
new file mode 100644
index 0000000000..c8069af122
--- /dev/null
+++ b/talawa-admin-docs/modules/screens_Users_Users_test.md
@@ -0,0 +1,3 @@
+[talawa-admin](../README.md) / [Modules](../modules.md) / screens/Users/Users.test
+
+# Module: screens/Users/Users.test
diff --git a/tsconfig.json b/tsconfig.json
index 9d379a3c4a..0116d88a31 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "types": ["vite/client", "vite-plugin-svgr/client", "node"],
+    "baseUrl": "src",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -16,5 +18,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src", "src/App.tsx", "setup.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index 27c0be6951..0000000000
--- a/yarn.lock
+++ /dev/null
@@ -1,11845 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/code-frame@7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
-  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
-"@babel/code-frame@7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.5.5":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
-  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
-  dependencies:
-    "@babel/highlight" "^7.12.13"
-
-"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.13.15", "@babel/compat-data@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
-  integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
-
-"@babel/core@7.12.3":
-  version "7.12.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
-  integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.12.1"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helpers" "^7.12.1"
-    "@babel/parser" "^7.12.3"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.12.1"
-    "@babel/types" "^7.12.1"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.19"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.7.5", "@babel/core@^7.8.4":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
-  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.3"
-    "@babel/helper-compilation-targets" "^7.13.16"
-    "@babel/helper-module-transforms" "^7.14.2"
-    "@babel/helpers" "^7.14.0"
-    "@babel/parser" "^7.14.3"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.2"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    semver "^6.3.0"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.12.1", "@babel/generator@^7.14.2", "@babel/generator@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.3.tgz#0c2652d91f7bddab7cccc6ba8157e4f40dcedb91"
-  integrity sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==
-  dependencies:
-    "@babel/types" "^7.14.2"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab"
-  integrity sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz#6bc20361c88b0a74d05137a65cac8d3cbf6f61fc"
-  integrity sha512-CZOv9tGphhDRlVjVkAgm8Nhklm9RzSmWpX2my+t7Ua/KT616pEzXsQCjinzvkRvHWJ9itO4f296efroX23XCMA==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.12.13"
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.16":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz#6e91dccf15e3f43e5556dffe32d860109887563c"
-  integrity sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==
-  dependencies:
-    "@babel/compat-data" "^7.13.15"
-    "@babel/helper-validator-option" "^7.12.17"
-    browserslist "^4.14.5"
-    semver "^6.3.0"
-
-"@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.3.tgz#832111bcf4f57ca57a4c5b1a000fc125abc6554a"
-  integrity sha512-BnEfi5+6J2Lte9LeiL6TxLWdIlEv9Woacc1qXzXBgbikcOzMRM2Oya5XGg/f/ngotv1ej2A/b+3iJH8wbS1+lQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.14.2"
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.14.3"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-
-"@babel/helper-create-regexp-features-plugin@^7.12.13":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.3.tgz#149aa6d78c016e318c43e2409a0ae9c136a86688"
-  integrity sha512-JIB2+XJrb7v3zceV2XzDhGIB902CmKGSpSl4q2C6agU9SNLG/2V1RtFRGPG1Ajh9STj3+q6zJMOC+N/pp2P9DA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    regexpu-core "^4.7.1"
-
-"@babel/helper-define-polyfill-provider@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.1.tgz#e6f5f4a6edc3722152c21359190de67fc6cf664d"
-  integrity sha512-x3AUTVZNPunaw1opRTa5OwVA5N0YxGlIad9xQ5QflK1uIS7PnAGGU5O2Dj/G183fR//N8AzTq+Q8+oiu9m0VFg==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.13.0"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/traverse" "^7.13.0"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-    semver "^6.1.2"
-
-"@babel/helper-explode-assignable-expression@^7.12.13":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz#17b5c59ff473d9f956f40ef570cf3a76ca12657f"
-  integrity sha512-qS0peLTDP8kOisG1blKbaoBg/o9OSa1qoumMjTK5pM+KDTtpxpsiubnCGP34vK8BXGcb2M9eigwgvoJryrzwWA==
-  dependencies:
-    "@babel/types" "^7.13.0"
-
-"@babel/helper-function-name@^7.12.13", "@babel/helper-function-name@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz#397688b590760b6ef7725b5f0860c82427ebaac2"
-  integrity sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/types" "^7.14.2"
-
-"@babel/helper-get-function-arity@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583"
-  integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-hoist-variables@^7.13.0":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz#1b1651249e94b51f8f0d33439843e33e39775b30"
-  integrity sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg==
-  dependencies:
-    "@babel/traverse" "^7.13.15"
-    "@babel/types" "^7.13.16"
-
-"@babel/helper-member-expression-to-functions@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
-  integrity sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==
-  dependencies:
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
-  integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
-  dependencies:
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.14.0", "@babel/helper-module-transforms@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz#ac1cc30ee47b945e3e0c4db12fa0c5389509dfe5"
-  integrity sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.13.12"
-    "@babel/helper-replace-supers" "^7.13.12"
-    "@babel/helper-simple-access" "^7.13.12"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/helper-validator-identifier" "^7.14.0"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.2"
-
-"@babel/helper-optimise-call-expression@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz#5c02d171b4c8615b1e7163f888c1c81c30a2aaea"
-  integrity sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
-  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
-
-"@babel/helper-remap-async-to-generator@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz#376a760d9f7b4b2077a9dd05aa9c3927cadb2209"
-  integrity sha512-pUQpFBE9JvC9lrQbpX0TmeNIy5s7GnZjna2lhhcHC7DzgBs6fWn722Y5cfwgrtrqc7NAJwMvOa0mKhq6XaE4jg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-wrap-function" "^7.13.0"
-    "@babel/types" "^7.13.0"
-
-"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.12", "@babel/helper-replace-supers@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.3.tgz#ca17b318b859d107f0e9b722d58cf12d94436600"
-  integrity sha512-Rlh8qEWZSTfdz+tgNV/N4gz1a0TMNwCUcENhMjHTHKp3LseYH5Jha0NSlyTQWMnjbYcwFt+bqAMqSLHVXkQ6UA==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.2"
-
-"@babel/helper-simple-access@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
-  integrity sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==
-  dependencies:
-    "@babel/types" "^7.13.12"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
-  integrity sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
-  dependencies:
-    "@babel/types" "^7.12.1"
-
-"@babel/helper-split-export-declaration@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
-  integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
-  dependencies:
-    "@babel/types" "^7.12.13"
-
-"@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
-  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
-
-"@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.17":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
-  integrity sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==
-
-"@babel/helper-wrap-function@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.13.0.tgz#bdb5c66fda8526ec235ab894ad53a1235c79fcc4"
-  integrity sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA==
-  dependencies:
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-
-"@babel/helpers@^7.12.1", "@babel/helpers@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.0.tgz#ea9b6be9478a13d6f961dbb5f36bf75e2f3b8f62"
-  integrity sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==
-  dependencies:
-    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.14.0"
-
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.0.tgz#3197e375711ef6bf834e67d0daec88e4f46113cf"
-  integrity sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.0"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.3", "@babel/parser@^7.14.2", "@babel/parser@^7.14.3", "@babel/parser@^7.7.0":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
-  integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
-
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
-  integrity sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
-
-"@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.2.tgz#3a2085abbf5d5f962d480dbc81347385ed62eb1e"
-  integrity sha512-b1AM4F6fwck4N8ItZ/AtC4FP/cqZqmKRQ4FaTDutwSYyjuhtvsGEMLK4N/ztV/ImP40BjIDyMgBQAeAMsQYVFQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-remap-async-to-generator" "^7.13.0"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-proposal-class-properties@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
-  integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz#146376000b94efd001e57a40a88a525afaab9f37"
-  integrity sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-proposal-class-static-block@^7.13.11":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.14.3.tgz#5a527e2cae4a4753119c3a3e7f64ecae8ccf1360"
-  integrity sha512-HEjzp5q+lWSjAgJtSluFDrGGosmwTgKwCXdDQZvhKsRlwv3YdkUEqxNrrjesJd+B9E9zvr1PVPVBvhYZ9msjvQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.14.3"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-class-static-block" "^7.12.13"
-
-"@babel/plugin-proposal-decorators@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz#59271439fed4145456c41067450543aee332d15f"
-  integrity sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-decorators" "^7.12.1"
-
-"@babel/plugin-proposal-dynamic-import@^7.12.1", "@babel/plugin-proposal-dynamic-import@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.2.tgz#01ebabd7c381cff231fa43e302939a9de5be9d9f"
-  integrity sha512-oxVQZIWFh91vuNEMKltqNsKLFWkOIyJc95k2Gv9lWVyDfPUQGSSlbDEgWuJUU1afGE9WwlzpucMZ3yDRHIItkA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-proposal-export-namespace-from@^7.12.1", "@babel/plugin-proposal-export-namespace-from@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.2.tgz#62542f94aa9ce8f6dba79eec698af22112253791"
-  integrity sha512-sRxW3z3Zp3pFfLAgVEvzTFutTXax837oOatUIvSG9o5gRj9mKwm3br1Se5f4QalTQs9x4AzlA/HrCWbQIHASUQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-proposal-json-strings@^7.12.1", "@babel/plugin-proposal-json-strings@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.2.tgz#830b4e2426a782e8b2878fbfe2cba85b70cbf98c"
-  integrity sha512-w2DtsfXBBJddJacXMBhElGEYqCZQqN99Se1qeYn8DVLB33owlrlLftIbMzn5nz1OITfDVknXF433tBrLEAOEjA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-proposal-logical-assignment-operators@^7.12.1", "@babel/plugin-proposal-logical-assignment-operators@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.2.tgz#222348c080a1678e0e74ea63fe76f275882d1fd7"
-  integrity sha512-1JAZtUrqYyGsS7IDmFeaem+/LJqujfLZ2weLR9ugB0ufUPjzf8cguyVT1g5im7f7RXxuLq1xUxEzvm68uYRtGg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
-  integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.2.tgz#425b11dc62fc26939a2ab42cbba680bdf5734546"
-  integrity sha512-ebR0zU9OvI2N4qiAC38KIAK75KItpIPTpAtd2r4OZmMFeKbKJpUFLYP2EuDut82+BmYi8sz42B+TfTptJ9iG5Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-proposal-numeric-separator@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz#0e2c6774c4ce48be412119b4d693ac777f7685a6"
-  integrity sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-proposal-numeric-separator@^7.12.1", "@babel/plugin-proposal-numeric-separator@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.2.tgz#82b4cc06571143faf50626104b335dd71baa4f9e"
-  integrity sha512-DcTQY9syxu9BpU3Uo94fjCB3LN9/hgPS8oUL7KrSW3bA2ePrKZZPJcc5y0hoJAM9dft3pGfErtEUvxXQcfLxUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-proposal-object-rest-spread@^7.12.1", "@babel/plugin-proposal-object-rest-spread@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.2.tgz#e17d418f81cc103fedd4ce037e181c8056225abc"
-  integrity sha512-hBIQFxwZi8GIp934+nj5uV31mqclC1aYDhctDu5khTi9PCCUOczyy0b34W0oE9U/eJXiqQaKyVsmjeagOaSlbw==
-  dependencies:
-    "@babel/compat-data" "^7.14.0"
-    "@babel/helper-compilation-targets" "^7.13.16"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.14.2"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.12.1", "@babel/plugin-proposal-optional-catch-binding@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.2.tgz#150d4e58e525b16a9a1431bd5326c4eed870d717"
-  integrity sha512-XtkJsmJtBaUbOxZsNk0Fvrv8eiqgneug0A6aqLFZ4TSkar2L5dSXWcnUKHgmjJt49pyB/6ZHvkr3dPgl9MOWRQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-proposal-optional-chaining@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
-  integrity sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-
-"@babel/plugin-proposal-optional-chaining@^7.12.1", "@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.2.tgz#df8171a8b9c43ebf4c1dabe6311b432d83e1b34e"
-  integrity sha512-qQByMRPwMZJainfig10BoaDldx/+VDtNcrA7qdNaEOAj6VXud+gfrkA8j4CRAU5HjnWREXqIpSpH30qZX1xivA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
-"@babel/plugin-proposal-private-methods@^7.12.1", "@babel/plugin-proposal-private-methods@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.13.0.tgz#04bd4c6d40f6e6bbfa2f57e2d8094bad900ef787"
-  integrity sha512-MXyyKQd9inhx1kDYPkFRVOBXQ20ES8Pto3T7UZ92xj2mY0EVD8oAVzeyYuVfy/mxAdTSIayOvg+aVzcHV2bn6Q==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-proposal-private-property-in-object@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.0.tgz#b1a1f2030586b9d3489cc26179d2eb5883277636"
-  integrity sha512-59ANdmEwwRUkLjB7CRtwJxxwtjESw+X2IePItA+RGQh+oy5RmpCh/EvVVvh5XQc3yxsm5gtv0+i9oBZhaDNVTg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-create-class-features-plugin" "^7.14.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.0"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.12.13", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.13.tgz#bebde51339be829c17aaaaced18641deb62b39ba"
-  integrity sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-bigint@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
-  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-class-properties@^7.12.1", "@babel/plugin-syntax-class-properties@^7.12.13", "@babel/plugin-syntax-class-properties@^7.8.3":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
-  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-class-static-block@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.12.13.tgz#8e3d674b0613e67975ceac2776c97b60cafc5c9c"
-  integrity sha512-ZmKQ0ZXR0nYpHZIIuj9zE7oIqCx2hw9TKi+lIo73NNrMPAZGHfS92/VRV0ZmPj6H2ffBgyFHXvJ5NYsNeEaP2A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-decorators@^7.12.1":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.13.tgz#fac829bf3c7ef4a1bc916257b403e58c6bdaf648"
-  integrity sha512-Rw6aIXGuqDLr6/LoBBYE57nKOzQpz/aDkKlMqEwH+Vp0MXbG6H/TfRjaY343LKxzAKAMXIHsQ8JzaZKuDZ9MwA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-export-namespace-from@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
-  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-flow@^7.12.1":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.13.tgz#5df9962503c0a9c918381c929d51d4d6949e7e86"
-  integrity sha512-J/RYxnlSLXZLVR7wTRsozxKT8qbsx1mNKJzXEEjQ0Kjx1ZACcyHgbanNWNCFtc36IzuWhYWPpvJFFoexoOWFmA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-import-meta@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
-  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-jsx@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15"
-  integrity sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
-  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
-  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-private-property-in-object@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.0.tgz#762a4babec61176fec6c88480dec40372b140c0b"
-  integrity sha512-bda3xF8wGl5/5btF794utNOL0Jw+9jE5C1sLZcoK7c4uonE/y3iQiyG+KbkF3WBV/paX58VCpjhxLPkdj5Fe4w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-syntax-top-level-await@^7.12.1", "@babel/plugin-syntax-top-level-await@^7.12.13", "@babel/plugin-syntax-top-level-await@^7.8.3":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.13.tgz#c5f0fa6e249f5b739727f923540cf7a806130178"
-  integrity sha512-A81F9pDwyS7yM//KwbCSDqy3Uj4NMIurtplxphWxoYtNPov7cJsDkAFNNyVlIZ3jwGycVsurZ+LtOA8gZ376iQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-typescript@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz#9dff111ca64154cef0f4dc52cf843d9f12ce4474"
-  integrity sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz#10a59bebad52d637a027afa692e8d5ceff5e3dae"
-  integrity sha512-96lgJagobeVmazXFaDrbmCLQxBysKu7U6Do3mLsx27gf5Dk85ezysrs2BZUpXD703U/Su1xTBDxxar2oa4jAGg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-async-to-generator@^7.12.1", "@babel/plugin-transform-async-to-generator@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.13.0.tgz#8e112bf6771b82bf1e974e5e26806c5c99aa516f"
-  integrity sha512-3j6E004Dx0K3eGmhxVJxwwI89CTJrce7lg3UrtFuDAVQ/2+SJ/h/aSFOeE6/n0WB1GsOffsJp6MnPQNQ8nmwhg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-remap-async-to-generator" "^7.13.0"
-
-"@babel/plugin-transform-block-scoped-functions@^7.12.1", "@babel/plugin-transform-block-scoped-functions@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.13.tgz#a9bf1836f2a39b4eb6cf09967739de29ea4bf4c4"
-  integrity sha512-zNyFqbc3kI/fVpqwfqkg6RvBgFpC4J18aKKMmv7KdQ/1GgREapSJAykLMVNwfRGO3BtHj3YQZl8kxCXPcVMVeg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-block-scoping@^7.12.1", "@babel/plugin-transform-block-scoping@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.2.tgz#761cb12ab5a88d640ad4af4aa81f820e6b5fdf5c"
-  integrity sha512-neZZcP19NugZZqNwMTH+KoBjx5WyvESPSIOQb4JHpfd+zPfqcH65RMu5xJju5+6q/Y2VzYrleQTr+b6METyyxg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-classes@^7.12.1", "@babel/plugin-transform-classes@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.2.tgz#3f1196c5709f064c252ad056207d87b7aeb2d03d"
-  integrity sha512-7oafAVcucHquA/VZCsXv/gmuiHeYd64UJyyTYU+MPfNu0KeNlxw06IeENBO8bJjXVbolu+j1MM5aKQtH1OMCNg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.14.2"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-replace-supers" "^7.13.12"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    globals "^11.1.0"
-
-"@babel/plugin-transform-computed-properties@^7.12.1", "@babel/plugin-transform-computed-properties@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.13.0.tgz#845c6e8b9bb55376b1fa0b92ef0bdc8ea06644ed"
-  integrity sha512-RRqTYTeZkZAz8WbieLTvKUEUxZlUTdmL5KGMyZj7FnMfLNKV4+r5549aORG/mgojRmFlQMJDUupwAMiF2Q7OUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-destructuring@^7.12.1", "@babel/plugin-transform-destructuring@^7.13.17":
-  version "7.13.17"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.17.tgz#678d96576638c19d5b36b332504d3fd6e06dea27"
-  integrity sha512-UAUqiLv+uRLO+xuBKKMEpC+t7YRNVRqBsWWq1yKXbBZBje/t3IXCiSinZhjn/DC3qzBfICeYd2EFGEbHsh5RLA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.12.13", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.13.tgz#3f1601cc29905bfcb67f53910f197aeafebb25ad"
-  integrity sha512-foDrozE65ZFdUC2OfgeOCrEPTxdB3yjqxpXh8CH+ipd9CHd4s/iq81kcUpyH8ACGNEPdFqbtzfgzbT/ZGlbDeQ==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-duplicate-keys@^7.12.1", "@babel/plugin-transform-duplicate-keys@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.13.tgz#6f06b87a8b803fd928e54b81c258f0a0033904de"
-  integrity sha512-NfADJiiHdhLBW3pulJlJI2NB0t4cci4WTZ8FtdIuNc2+8pslXdPtRRAEWqUY+m9kNOk2eRYbTAOipAxlrOcwwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-exponentiation-operator@^7.12.1", "@babel/plugin-transform-exponentiation-operator@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.13.tgz#4d52390b9a273e651e4aba6aee49ef40e80cd0a1"
-  integrity sha512-fbUelkM1apvqez/yYx1/oICVnGo2KM5s63mhGylrmXUxK/IAXSIf87QIxVfZldWf4QsOafY6vV3bX8aMHSvNrA==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-flow-strip-types@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
-  integrity sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-flow" "^7.12.1"
-
-"@babel/plugin-transform-for-of@^7.12.1", "@babel/plugin-transform-for-of@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.13.0.tgz#c799f881a8091ac26b54867a845c3e97d2696062"
-  integrity sha512-IHKT00mwUVYE0zzbkDgNRP6SRzvfGCYsOxIRz8KsiaaHCcT9BWIkO+H9QRJseHBLOGBZkHUdHiqj6r0POsdytg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-function-name@^7.12.1", "@babel/plugin-transform-function-name@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.13.tgz#bb024452f9aaed861d374c8e7a24252ce3a50051"
-  integrity sha512-6K7gZycG0cmIwwF7uMK/ZqeCikCGVBdyP2J5SKNCXO5EOHcqi+z7Jwf8AmyDNcBgxET8DrEtCt/mPKPyAzXyqQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-literals@^7.12.1", "@babel/plugin-transform-literals@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.13.tgz#2ca45bafe4a820197cf315794a4d26560fe4bdb9"
-  integrity sha512-FW+WPjSR7hiUxMcKqyNjP05tQ2kmBCdpEpZHY1ARm96tGQCCBvXKnpjILtDplUnJ/eHZ0lALLM+d2lMFSpYJrQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-member-expression-literals@^7.12.1", "@babel/plugin-transform-member-expression-literals@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.13.tgz#5ffa66cd59b9e191314c9f1f803b938e8c081e40"
-  integrity sha512-kxLkOsg8yir4YeEPHLuO2tXP9R/gTjpuTOjshqSpELUN3ZAg2jfDnKUvzzJxObun38sw3wm4Uu69sX/zA7iRvg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-modules-amd@^7.12.1", "@babel/plugin-transform-modules-amd@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.2.tgz#6622806fe1a7c07a1388444222ef9535f2ca17b0"
-  integrity sha512-hPC6XBswt8P3G2D1tSV2HzdKvkqOpmbyoy+g73JG0qlF/qx2y3KaMmXb1fLrpmWGLZYA0ojCvaHdzFWjlmV+Pw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.14.2"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-commonjs@^7.12.1", "@babel/plugin-transform-modules-commonjs@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.0.tgz#52bc199cb581e0992edba0f0f80356467587f161"
-  integrity sha512-EX4QePlsTaRZQmw9BsoPeyh5OCtRGIhwfLquhxGp5e32w+dyL8htOcDwamlitmNFK6xBZYlygjdye9dbd9rUlQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.14.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-simple-access" "^7.13.12"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-systemjs@^7.12.1", "@babel/plugin-transform-modules-systemjs@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.13.8.tgz#6d066ee2bff3c7b3d60bf28dec169ad993831ae3"
-  integrity sha512-hwqctPYjhM6cWvVIlOIe27jCIBgHCsdH2xCJVAYQm7V5yTMoilbVMi9f6wKg0rpQAOn6ZG4AOyvCqFF/hUh6+A==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.13.0"
-    "@babel/helper-module-transforms" "^7.13.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-validator-identifier" "^7.12.11"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-umd@^7.12.1", "@babel/plugin-transform-modules-umd@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.0.tgz#2f8179d1bbc9263665ce4a65f305526b2ea8ac34"
-  integrity sha512-nPZdnWtXXeY7I87UZr9VlsWme3Y0cfFFE41Wbxz4bbaexAjNMInXPFUpRRUJ8NoMm0Cw+zxbqjdPmLhcjfazMw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.14.0"
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1", "@babel/plugin-transform-named-capturing-groups-regex@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.13.tgz#2213725a5f5bbbe364b50c3ba5998c9599c5c9d9"
-  integrity sha512-Xsm8P2hr5hAxyYblrfACXpQKdQbx4m2df9/ZZSQ8MAhsadw06+jW7s9zsSw6he+mJZXRlVMyEnVktJo4zjk1WA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-
-"@babel/plugin-transform-new-target@^7.12.1", "@babel/plugin-transform-new-target@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.13.tgz#e22d8c3af24b150dd528cbd6e685e799bf1c351c"
-  integrity sha512-/KY2hbLxrG5GTQ9zzZSc3xWiOy379pIETEhbtzwZcw9rvuaVV4Fqy7BYGYOWZnaoXIQYbbJ0ziXLa/sKcGCYEQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-object-super@^7.12.1", "@babel/plugin-transform-object-super@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.13.tgz#b4416a2d63b8f7be314f3d349bd55a9c1b5171f7"
-  integrity sha512-JzYIcj3XtYspZDV8j9ulnoMPZZnF/Cj0LUxPOjR89BdBVx+zYJI9MdMIlUZjbXDX+6YVeS6I3e8op+qQ3BYBoQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.12.13"
-
-"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.14.2":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.2.tgz#e4290f72e0e9e831000d066427c4667098decc31"
-  integrity sha512-NxoVmA3APNCC1JdMXkdYXuQS+EMdqy0vIwyDHeKHiJKRxmp1qGSdb0JLEIoPRhkx6H/8Qi3RJ3uqOCYw8giy9A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-property-literals@^7.12.1", "@babel/plugin-transform-property-literals@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.13.tgz#4e6a9e37864d8f1b3bc0e2dce7bf8857db8b1a81"
-  integrity sha512-nqVigwVan+lR+g8Fj8Exl0UQX2kymtjcWfMOYM1vTYEKujeyv2SkMgazf2qNcK7l4SDiKyTA/nHCPqL4e2zo1A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-react-constant-elements@^7.12.1":
-  version "7.13.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.13.13.tgz#0208b1d942bf939cd4f7aa5b255d42602aa4a920"
-  integrity sha512-SNJU53VM/SjQL0bZhyU+f4kJQz7bQQajnrZRSaU21hruG/NWY41AEM9AWXeXX90pYr/C2yAmTgI6yW3LlLrAUQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-react-display-name@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz#1cbcd0c3b1d6648c55374a22fc9b6b7e5341c00d"
-  integrity sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-react-display-name@^7.12.1", "@babel/plugin-transform-react-display-name@^7.12.13":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.2.tgz#2e854544d42ab3bb9c21f84e153d62e800fbd593"
-  integrity sha512-zCubvP+jjahpnFJvPaHPiGVfuVUjXHhFvJKQdNnsmSsiU9kR/rCZ41jHc++tERD2zV+p7Hr6is+t5b6iWTCqSw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-react-jsx-development@^7.12.1", "@babel/plugin-transform-react-jsx-development@^7.12.17":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.17.tgz#f510c0fa7cd7234153539f9a362ced41a5ca1447"
-  integrity sha512-BPjYV86SVuOaudFhsJR1zjgxxOhJDt6JHNoD48DxWEIxUCAMjV1ys6DYw4SDYZh0b1QsS2vfIA9t/ZsQGsDOUQ==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.12.17"
-
-"@babel/plugin-transform-react-jsx-self@^7.12.1":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.13.tgz#422d99d122d592acab9c35ea22a6cfd9bf189f60"
-  integrity sha512-FXYw98TTJ125GVCCkFLZXlZ1qGcsYqNQhVBQcZjyrwf8FEUtVfKIoidnO8S0q+KBQpDYNTmiGo1gn67Vti04lQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-react-jsx-source@^7.12.1":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.2.tgz#2620b57e7de775c0687f65d464026d15812941da"
-  integrity sha512-OMorspVyjxghAjzgeAWc6O7W7vHbJhV69NeTGdl9Mxgz6PaweAuo7ffB9T5A1OQ9dGcw0As4SYMUhyNC4u7mVg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-react-jsx@^7.12.1", "@babel/plugin-transform-react-jsx@^7.12.17", "@babel/plugin-transform-react-jsx@^7.13.12":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.3.tgz#0e26597805cf0862da735f264550933c38babb66"
-  integrity sha512-uuxuoUNVhdgYzERiHHFkE4dWoJx+UFVyuAl0aqN8P2/AKFHwqgUC5w2+4/PjpKXJsFgBlYAFXlUmDQ3k3DUkXw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-module-imports" "^7.13.12"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-jsx" "^7.12.13"
-    "@babel/types" "^7.14.2"
-
-"@babel/plugin-transform-react-pure-annotations@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42"
-  integrity sha512-RqeaHiwZtphSIUZ5I85PEH19LOSzxfuEazoY7/pWASCAIBuATQzpSVD+eT6MebeeZT2F4eSL0u4vw6n4Nm0Mjg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-regenerator@^7.12.1", "@babel/plugin-transform-regenerator@^7.13.15":
-  version "7.13.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.13.15.tgz#e5eb28945bf8b6563e7f818945f966a8d2997f39"
-  integrity sha512-Bk9cOLSz8DiurcMETZ8E2YtIVJbFCPGW28DJWUakmyVWtQSm6Wsf0p4B4BfEr/eL2Nkhe/CICiUiMOCi1TPhuQ==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
-"@babel/plugin-transform-reserved-words@^7.12.1", "@babel/plugin-transform-reserved-words@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.13.tgz#7d9988d4f06e0fe697ea1d9803188aa18b472695"
-  integrity sha512-xhUPzDXxZN1QfiOy/I5tyye+TRz6lA7z6xaT4CLOjPRMVg1ldRf0LHw0TDBpYL4vG78556WuHdyO9oi5UmzZBg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-runtime@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
-  integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    resolve "^1.8.1"
-    semver "^5.5.1"
-
-"@babel/plugin-transform-shorthand-properties@^7.12.1", "@babel/plugin-transform-shorthand-properties@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz#db755732b70c539d504c6390d9ce90fe64aff7ad"
-  integrity sha512-xpL49pqPnLtf0tVluuqvzWIgLEhuPpZzvs2yabUHSKRNlN7ScYU7aMlmavOeyXJZKgZKQRBlh8rHbKiJDraTSw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.13.0.tgz#84887710e273c1815ace7ae459f6f42a5d31d5fd"
-  integrity sha512-V6vkiXijjzYeFmQTr3dBxPtZYLPcUfY34DebOU27jIl2M/Y8Egm52Hw82CSjjPqd54GTlJs5x+CR7HeNr24ckg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-
-"@babel/plugin-transform-sticky-regex@^7.12.1", "@babel/plugin-transform-sticky-regex@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.13.tgz#760ffd936face73f860ae646fb86ee82f3d06d1f"
-  integrity sha512-Jc3JSaaWT8+fr7GRvQP02fKDsYk4K/lYwWq38r/UGfaxo89ajud321NH28KRQ7xy1Ybc0VUE5Pz8psjNNDUglg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-template-literals@^7.12.1", "@babel/plugin-transform-template-literals@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.13.0.tgz#a36049127977ad94438dee7443598d1cefdf409d"
-  integrity sha512-d67umW6nlfmr1iehCcBv69eSUSySk1EsIS8aTDX4Xo9qajAh6mYtcl4kJrBkGXuxZPEgVr7RVfAvNW6YQkd4Mw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-
-"@babel/plugin-transform-typeof-symbol@^7.12.1", "@babel/plugin-transform-typeof-symbol@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.13.tgz#785dd67a1f2ea579d9c2be722de8c84cb85f5a7f"
-  integrity sha512-eKv/LmUJpMnu4npgfvs3LiHhJua5fo/CysENxa45YCQXZwKnGCQKAg87bvoqSW1fFT+HA32l03Qxsm8ouTY3ZQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-typescript@^7.12.1":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.3.tgz#44f67f725a60cccee33d9d6fee5e4f338258f34f"
-  integrity sha512-G5Bb5pY6tJRTC4ag1visSgiDoGgJ1u1fMUgmc2ijLkcIdzP83Q1qyZX4ggFQ/SkR+PNOatkaYC+nKcTlpsX4ag==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.14.3"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/plugin-syntax-typescript" "^7.12.13"
-
-"@babel/plugin-transform-unicode-escapes@^7.12.1", "@babel/plugin-transform-unicode-escapes@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz#840ced3b816d3b5127dd1d12dcedc5dead1a5e74"
-  integrity sha512-0bHEkdwJ/sN/ikBHfSmOXPypN/beiGqjo+o4/5K+vxEFNPRPdImhviPakMKG4x96l85emoa0Z6cDflsdBusZbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-transform-unicode-regex@^7.12.1", "@babel/plugin-transform-unicode-regex@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.13.tgz#b52521685804e155b1202e83fc188d34bb70f5ac"
-  integrity sha512-mDRzSNY7/zopwisPZ5kM9XKCfhchqIYwAKRERtEnhYscZB79VRekuRSoYbN0+KVe3y8+q1h6A4svXtP7N+UoCA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/preset-env@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
-  integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
-  dependencies:
-    "@babel/compat-data" "^7.12.1"
-    "@babel/helper-compilation-targets" "^7.12.1"
-    "@babel/helper-module-imports" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-validator-option" "^7.12.1"
-    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
-    "@babel/plugin-proposal-class-properties" "^7.12.1"
-    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
-    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
-    "@babel/plugin-proposal-json-strings" "^7.12.1"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
-    "@babel/plugin-proposal-numeric-separator" "^7.12.1"
-    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
-    "@babel/plugin-proposal-optional-chaining" "^7.12.1"
-    "@babel/plugin-proposal-private-methods" "^7.12.1"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-class-properties" "^7.12.1"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.12.1"
-    "@babel/plugin-transform-arrow-functions" "^7.12.1"
-    "@babel/plugin-transform-async-to-generator" "^7.12.1"
-    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
-    "@babel/plugin-transform-block-scoping" "^7.12.1"
-    "@babel/plugin-transform-classes" "^7.12.1"
-    "@babel/plugin-transform-computed-properties" "^7.12.1"
-    "@babel/plugin-transform-destructuring" "^7.12.1"
-    "@babel/plugin-transform-dotall-regex" "^7.12.1"
-    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
-    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
-    "@babel/plugin-transform-for-of" "^7.12.1"
-    "@babel/plugin-transform-function-name" "^7.12.1"
-    "@babel/plugin-transform-literals" "^7.12.1"
-    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
-    "@babel/plugin-transform-modules-amd" "^7.12.1"
-    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
-    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
-    "@babel/plugin-transform-modules-umd" "^7.12.1"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
-    "@babel/plugin-transform-new-target" "^7.12.1"
-    "@babel/plugin-transform-object-super" "^7.12.1"
-    "@babel/plugin-transform-parameters" "^7.12.1"
-    "@babel/plugin-transform-property-literals" "^7.12.1"
-    "@babel/plugin-transform-regenerator" "^7.12.1"
-    "@babel/plugin-transform-reserved-words" "^7.12.1"
-    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
-    "@babel/plugin-transform-spread" "^7.12.1"
-    "@babel/plugin-transform-sticky-regex" "^7.12.1"
-    "@babel/plugin-transform-template-literals" "^7.12.1"
-    "@babel/plugin-transform-typeof-symbol" "^7.12.1"
-    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
-    "@babel/plugin-transform-unicode-regex" "^7.12.1"
-    "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.12.1"
-    core-js-compat "^3.6.2"
-    semver "^5.5.0"
-
-"@babel/preset-env@^7.12.1", "@babel/preset-env@^7.8.4":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.14.2.tgz#e80612965da73579c84ad2f963c2359c71524ed5"
-  integrity sha512-7dD7lVT8GMrE73v4lvDEb85cgcQhdES91BSD7jS/xjC6QY8PnRhux35ac+GCpbiRhp8crexBvZZqnaL6VrY8TQ==
-  dependencies:
-    "@babel/compat-data" "^7.14.0"
-    "@babel/helper-compilation-targets" "^7.13.16"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-validator-option" "^7.12.17"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.13.12"
-    "@babel/plugin-proposal-async-generator-functions" "^7.14.2"
-    "@babel/plugin-proposal-class-properties" "^7.13.0"
-    "@babel/plugin-proposal-class-static-block" "^7.13.11"
-    "@babel/plugin-proposal-dynamic-import" "^7.14.2"
-    "@babel/plugin-proposal-export-namespace-from" "^7.14.2"
-    "@babel/plugin-proposal-json-strings" "^7.14.2"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.14.2"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.14.2"
-    "@babel/plugin-proposal-numeric-separator" "^7.14.2"
-    "@babel/plugin-proposal-object-rest-spread" "^7.14.2"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.14.2"
-    "@babel/plugin-proposal-optional-chaining" "^7.14.2"
-    "@babel/plugin-proposal-private-methods" "^7.13.0"
-    "@babel/plugin-proposal-private-property-in-object" "^7.14.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.12.13"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.12.13"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.0"
-    "@babel/plugin-syntax-top-level-await" "^7.12.13"
-    "@babel/plugin-transform-arrow-functions" "^7.13.0"
-    "@babel/plugin-transform-async-to-generator" "^7.13.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.12.13"
-    "@babel/plugin-transform-block-scoping" "^7.14.2"
-    "@babel/plugin-transform-classes" "^7.14.2"
-    "@babel/plugin-transform-computed-properties" "^7.13.0"
-    "@babel/plugin-transform-destructuring" "^7.13.17"
-    "@babel/plugin-transform-dotall-regex" "^7.12.13"
-    "@babel/plugin-transform-duplicate-keys" "^7.12.13"
-    "@babel/plugin-transform-exponentiation-operator" "^7.12.13"
-    "@babel/plugin-transform-for-of" "^7.13.0"
-    "@babel/plugin-transform-function-name" "^7.12.13"
-    "@babel/plugin-transform-literals" "^7.12.13"
-    "@babel/plugin-transform-member-expression-literals" "^7.12.13"
-    "@babel/plugin-transform-modules-amd" "^7.14.2"
-    "@babel/plugin-transform-modules-commonjs" "^7.14.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.13.8"
-    "@babel/plugin-transform-modules-umd" "^7.14.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.13"
-    "@babel/plugin-transform-new-target" "^7.12.13"
-    "@babel/plugin-transform-object-super" "^7.12.13"
-    "@babel/plugin-transform-parameters" "^7.14.2"
-    "@babel/plugin-transform-property-literals" "^7.12.13"
-    "@babel/plugin-transform-regenerator" "^7.13.15"
-    "@babel/plugin-transform-reserved-words" "^7.12.13"
-    "@babel/plugin-transform-shorthand-properties" "^7.12.13"
-    "@babel/plugin-transform-spread" "^7.13.0"
-    "@babel/plugin-transform-sticky-regex" "^7.12.13"
-    "@babel/plugin-transform-template-literals" "^7.13.0"
-    "@babel/plugin-transform-typeof-symbol" "^7.12.13"
-    "@babel/plugin-transform-unicode-escapes" "^7.12.13"
-    "@babel/plugin-transform-unicode-regex" "^7.12.13"
-    "@babel/preset-modules" "^0.1.4"
-    "@babel/types" "^7.14.2"
-    babel-plugin-polyfill-corejs2 "^0.2.0"
-    babel-plugin-polyfill-corejs3 "^0.2.0"
-    babel-plugin-polyfill-regenerator "^0.2.0"
-    core-js-compat "^3.9.0"
-    semver "^6.3.0"
-
-"@babel/preset-modules@^0.1.3", "@babel/preset-modules@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
-  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/types" "^7.4.4"
-    esutils "^2.0.2"
-
-"@babel/preset-react@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
-  integrity sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-react-display-name" "^7.12.1"
-    "@babel/plugin-transform-react-jsx" "^7.12.1"
-    "@babel/plugin-transform-react-jsx-development" "^7.12.1"
-    "@babel/plugin-transform-react-jsx-self" "^7.12.1"
-    "@babel/plugin-transform-react-jsx-source" "^7.12.1"
-    "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
-
-"@babel/preset-react@^7.12.5":
-  version "7.13.13"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.13.13.tgz#fa6895a96c50763fe693f9148568458d5a839761"
-  integrity sha512-gx+tDLIE06sRjKJkVtpZ/t3mzCDOnPG+ggHZG9lffUbX8+wC739x20YQc9V35Do6ZAxaUc/HhVHIiOzz5MvDmA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-validator-option" "^7.12.17"
-    "@babel/plugin-transform-react-display-name" "^7.12.13"
-    "@babel/plugin-transform-react-jsx" "^7.13.12"
-    "@babel/plugin-transform-react-jsx-development" "^7.12.17"
-    "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
-
-"@babel/preset-typescript@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
-  integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-typescript" "^7.12.1"
-
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.0.tgz#6bf5fbc0b961f8e3202888cb2cd0fb7a0a9a3f66"
-  integrity sha512-0R0HTZWHLk6G8jIk0FtoX+AatCtKnswS98VhXwGImFc759PJRp4Tru0PQYZofyijTFUr+gT8Mu7sgXVJLQ0ceg==
-  dependencies:
-    core-js-pure "^3.0.0"
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
-  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
-  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
-  integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/parser" "^7.12.13"
-    "@babel/types" "^7.12.13"
-
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.13.15", "@babel/traverse@^7.14.0", "@babel/traverse@^7.14.2", "@babel/traverse@^7.7.0":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.2.tgz#9201a8d912723a831c2679c7ebbf2fe1416d765b"
-  integrity sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.2"
-    "@babel/helper-function-name" "^7.14.2"
-    "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.14.2"
-    "@babel/types" "^7.14.2"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.12.6", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.2", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.2.tgz#4208ae003107ef8a057ea8333e56eb64d2f6a2c3"
-  integrity sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.0"
-    to-fast-properties "^2.0.0"
-
-"@bcoe/v8-coverage@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
-  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
-
-"@cnakazawa/watch@^1.0.3":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
-  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
-  dependencies:
-    exec-sh "^0.3.2"
-    minimist "^1.2.0"
-
-"@csstools/convert-colors@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
-  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
-
-"@csstools/normalize.css@^10.1.0":
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
-  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
-
-"@eslint/eslintrc@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.1.tgz#442763b88cecbe3ee0ec7ca6d6dd6168550cbf14"
-  integrity sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
-    minimatch "^3.0.4"
-    strip-json-comments "^3.1.1"
-
-"@hapi/address@2.x.x":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
-  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
-
-"@hapi/bourne@1.x.x":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
-  integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
-
-"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
-  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
-
-"@hapi/joi@^15.1.0":
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
-  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
-  dependencies:
-    "@hapi/address" "2.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/topo" "3.x.x"
-
-"@hapi/topo@3.x.x":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
-  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
-  dependencies:
-    "@hapi/hoek" "^8.3.0"
-
-"@istanbuljs/load-nyc-config@^1.0.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
-  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
-  dependencies:
-    camelcase "^5.3.1"
-    find-up "^4.1.0"
-    get-package-type "^0.1.0"
-    js-yaml "^3.13.1"
-    resolve-from "^5.0.0"
-
-"@istanbuljs/schema@^0.1.2":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
-  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
-
-"@jest/console@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.6.2.tgz#4e04bc464014358b03ab4937805ee36a0aeb98f2"
-  integrity sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    jest-message-util "^26.6.2"
-    jest-util "^26.6.2"
-    slash "^3.0.0"
-
-"@jest/core@^26.6.0", "@jest/core@^26.6.3":
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
-  integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/reporters" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-changed-files "^26.6.2"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-resolve-dependencies "^26.6.3"
-    jest-runner "^26.6.3"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    jest-watcher "^26.6.2"
-    micromatch "^4.0.2"
-    p-each-series "^2.1.0"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-    strip-ansi "^6.0.0"
-
-"@jest/environment@^26.6.0", "@jest/environment@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.6.2.tgz#ba364cc72e221e79cc8f0a99555bf5d7577cf92c"
-  integrity sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==
-  dependencies:
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    jest-mock "^26.6.2"
-
-"@jest/fake-timers@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
-  integrity sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@sinonjs/fake-timers" "^6.0.1"
-    "@types/node" "*"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-
-"@jest/globals@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
-  integrity sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    expect "^26.6.2"
-
-"@jest/reporters@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
-  integrity sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.2"
-    graceful-fs "^4.2.4"
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^4.0.3"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.0.2"
-    jest-haste-map "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    slash "^3.0.0"
-    source-map "^0.6.0"
-    string-length "^4.0.1"
-    terminal-link "^2.0.0"
-    v8-to-istanbul "^7.0.0"
-  optionalDependencies:
-    node-notifier "^8.0.0"
-
-"@jest/source-map@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
-  integrity sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==
-  dependencies:
-    callsites "^3.0.0"
-    graceful-fs "^4.2.4"
-    source-map "^0.6.0"
-
-"@jest/test-result@^26.6.0", "@jest/test-result@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
-  integrity sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
-"@jest/test-sequencer@^26.6.3":
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
-  integrity sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==
-  dependencies:
-    "@jest/test-result" "^26.6.2"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^26.6.2"
-    jest-runner "^26.6.3"
-    jest-runtime "^26.6.3"
-
-"@jest/transform@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
-  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/types" "^26.6.2"
-    babel-plugin-istanbul "^6.0.0"
-    chalk "^4.0.0"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-util "^26.6.2"
-    micromatch "^4.0.2"
-    pirates "^4.0.1"
-    slash "^3.0.0"
-    source-map "^0.6.1"
-    write-file-atomic "^3.0.0"
-
-"@jest/types@^26.6.0", "@jest/types@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
-  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-
-"@nodelib/fs.scandir@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
-  integrity sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==
-  dependencies:
-    "@nodelib/fs.stat" "2.0.4"
-    run-parallel "^1.1.9"
-
-"@nodelib/fs.stat@2.0.4", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz#a3f2dd61bab43b8db8fa108a121cfffe4c676655"
-  integrity sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==
-
-"@nodelib/fs.walk@^1.2.3":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz#cce9396b30aa5afe9e3756608f5831adcb53d063"
-  integrity sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==
-  dependencies:
-    "@nodelib/fs.scandir" "2.1.4"
-    fastq "^1.6.0"
-
-"@npmcli/move-file@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.1.2.tgz#1a82c3e372f7cae9253eb66d72543d6b8685c674"
-  integrity sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==
-  dependencies:
-    mkdirp "^1.0.4"
-    rimraf "^3.0.2"
-
-"@pmmmwh/react-refresh-webpack-plugin@0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"
-  integrity sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==
-  dependencies:
-    ansi-html "^0.0.7"
-    error-stack-parser "^2.0.6"
-    html-entities "^1.2.1"
-    native-url "^0.2.6"
-    schema-utils "^2.6.5"
-    source-map "^0.7.3"
-
-"@popperjs/core@^2.8.6":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
-  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
-
-"@restart/context@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
-  integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
-
-"@restart/hooks@^0.3.26":
-  version "0.3.26"
-  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.26.tgz#ade155a7b0b014ef1073391dda46972c3a14a129"
-  integrity sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==
-  dependencies:
-    lodash "^4.17.20"
-    lodash-es "^4.17.20"
-
-"@rollup/plugin-node-resolve@^7.1.1":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
-  integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
-  dependencies:
-    "@rollup/pluginutils" "^3.0.8"
-    "@types/resolve" "0.0.8"
-    builtin-modules "^3.1.0"
-    is-module "^1.0.0"
-    resolve "^1.14.2"
-
-"@rollup/plugin-replace@^2.3.1":
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
-  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
-  dependencies:
-    "@rollup/pluginutils" "^3.1.0"
-    magic-string "^0.25.7"
-
-"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
-  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
-  dependencies:
-    "@types/estree" "0.0.39"
-    estree-walker "^1.0.1"
-    picomatch "^2.2.2"
-
-"@sinonjs/commons@^1.7.0":
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
-  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
-  dependencies:
-    type-detect "4.0.8"
-
-"@sinonjs/fake-timers@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
-  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
-"@surma/rollup-plugin-off-main-thread@^1.1.1":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
-  integrity sha512-yBMPqmd1yEJo/280PAMkychuaALyQ9Lkb5q1ck3mjJrFuEobIfhnQ4J3mbvBoISmR3SWMWV+cGB/I0lCQee79A==
-  dependencies:
-    ejs "^2.6.1"
-    magic-string "^0.25.0"
-
-"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
-  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
-
-"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
-  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
-
-"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
-  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
-
-"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
-  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
-
-"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
-  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
-
-"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
-  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
-
-"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
-  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
-
-"@svgr/babel-plugin-transform-svg-component@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
-  integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
-
-"@svgr/babel-preset@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
-  integrity sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==
-  dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
-    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
-    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
-    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
-    "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
-
-"@svgr/core@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
-  integrity sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
-  dependencies:
-    "@svgr/plugin-jsx" "^5.5.0"
-    camelcase "^6.2.0"
-    cosmiconfig "^7.0.0"
-
-"@svgr/hast-util-to-babel-ast@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
-  integrity sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==
-  dependencies:
-    "@babel/types" "^7.12.6"
-
-"@svgr/plugin-jsx@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
-  integrity sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==
-  dependencies:
-    "@babel/core" "^7.12.3"
-    "@svgr/babel-preset" "^5.5.0"
-    "@svgr/hast-util-to-babel-ast" "^5.5.0"
-    svg-parser "^2.0.2"
-
-"@svgr/plugin-svgo@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
-  integrity sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    deepmerge "^4.2.2"
-    svgo "^1.2.2"
-
-"@svgr/webpack@5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.5.0.tgz#aae858ee579f5fa8ce6c3166ef56c6a1b381b640"
-  integrity sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==
-  dependencies:
-    "@babel/core" "^7.12.3"
-    "@babel/plugin-transform-react-constant-elements" "^7.12.1"
-    "@babel/preset-env" "^7.12.1"
-    "@babel/preset-react" "^7.12.5"
-    "@svgr/core" "^5.5.0"
-    "@svgr/plugin-jsx" "^5.5.0"
-    "@svgr/plugin-svgo" "^5.5.0"
-    loader-utils "^2.0.0"
-
-"@testing-library/dom@^7.28.1":
-  version "7.31.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.0.tgz#938451abd3ca27e1b69bb395d4a40759fd7f5b3b"
-  integrity sha512-0X7ACg4YvTRDFMIuTOEj6B4NpN7i3F/4j5igOcTI5NC5J+N4TribNdErCHOZF1LBWhhcyfwxelVwvoYNMUXTOA==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^4.2.2"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.4"
-    lz-string "^1.4.4"
-    pretty-format "^26.6.2"
-
-"@testing-library/jest-dom@^5.11.4":
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.12.0.tgz#6a5d340b092c44b7bce17a4791b47d9bc2c61443"
-  integrity sha512-N9Y82b2Z3j6wzIoAqajlKVF1Zt7sOH0pPee0sUHXHc5cv2Fdn23r+vpWm0MBBoGJtPOly5+Bdx1lnc3CD+A+ow==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^4.2.2"
-    chalk "^3.0.0"
-    css "^3.0.0"
-    css.escape "^1.5.1"
-    lodash "^4.17.15"
-    redent "^3.0.0"
-
-"@testing-library/react@^11.1.0":
-  version "11.2.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818"
-  integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^7.28.1"
-
-"@testing-library/user-event@^12.1.10":
-  version "12.8.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.8.3.tgz#1aa3ed4b9f79340a1e1836bc7f57c501e838704a"
-  integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
-"@types/aria-query@^4.2.0":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
-  integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
-
-"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
-  version "7.1.14"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
-  integrity sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__generator@*":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.2.tgz#f3d71178e187858f7c45e30380f8f1b7415a12d8"
-  integrity sha512-MdSJnBjl+bdwkLskZ3NGFp9YcXGx5ggLpQQPqtgakVhsWK0hTtNYhjpZLlWQTviGTvF8at+Bvli3jV7faPdgeQ==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@types/babel__template@*":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.0.tgz#0c888dd70b3ee9eebb6e4f200e809da0076262be"
-  integrity sha512-NTPErx4/FiPCGScH7foPyr+/1Dkzkni+rHiYHHoTjvwou7AQzJkNeD60A9CXRy+ZEN2B1bggmkTMCDb+Mv5k+A==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.11.1.tgz#654f6c4f67568e24c23b367e947098c6206fa639"
-  integrity sha512-Vs0hm0vPahPMYi9tDjtP66llufgO3ST16WXaSTtDGEl9cewAl3AibmxWw6TINOqHPT9z0uABKAYjT9jNSg4npw==
-  dependencies:
-    "@babel/types" "^7.3.0"
-
-"@types/classnames@^2.2.10":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
-  integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
-  dependencies:
-    classnames "*"
-
-"@types/eslint@^7.2.6":
-  version "7.2.11"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.11.tgz#180b58f5bb7d7376e39d22496e2b08901aa52fd2"
-  integrity sha512-WYhv//5K8kQtsSc9F1Kn2vHzhYor6KpwPbARH7hwYe3C3ETD0EVx/3P5qQybUoaBEuUa9f/02JjBiXFWalYUmw==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
-
-"@types/estree@*":
-  version "0.0.47"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
-  integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
-
-"@types/estree@0.0.39":
-  version "0.0.39"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
-  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
-
-"@types/glob@^7.1.1":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
-  integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
-  dependencies:
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/graceful-fs@^4.1.2":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
-  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
-  dependencies:
-    "@types/node" "*"
-
-"@types/html-minifier-terser@^5.0.0":
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
-  integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
-
-"@types/invariant@^2.2.33":
-  version "2.2.34"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe"
-  integrity sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==
-
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
-  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
-
-"@types/istanbul-lib-report@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
-  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-
-"@types/istanbul-reports@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
-  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
-  dependencies:
-    "@types/istanbul-lib-report" "*"
-
-"@types/jest@*", "@types/jest@^26.0.15":
-  version "26.0.23"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.23.tgz#a1b7eab3c503b80451d019efb588ec63522ee4e7"
-  integrity sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==
-  dependencies:
-    jest-diff "^26.0.0"
-    pretty-format "^26.0.0"
-
-"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
-  integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
-
-"@types/json5@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
-
-"@types/minimatch@*":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
-  integrity sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==
-
-"@types/node@*":
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.6.0.tgz#f0ddca5a61e52627c9dcb771a6039d44694597bc"
-  integrity sha512-gCYSfQpy+LYhOFTKAeE8BkyGqaxmlFxe+n4DKM6DR0wzw/HISUE/hAmkC/KT8Sw5PCJblqg062b3z9gucv3k0A==
-
-"@types/node@^12.0.0":
-  version "12.20.13"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.13.tgz#e743bae112bd779ac9650f907197dd2caa7f0364"
-  integrity sha512-1x8W5OpxPq+T85OUsHRP6BqXeosKmeXRtjoF39STcdf/UWLqUsoehstZKOi0CunhVqHG17AyZgpj20eRVooK6A==
-
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
-  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
-
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
-"@types/prettier@^2.0.0":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.3.tgz#ef65165aea2924c9359205bf748865b8881753c0"
-  integrity sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==
-
-"@types/prop-types@*", "@types/prop-types@^15.7.3":
-  version "15.7.3"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
-  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
-
-"@types/q@^1.5.1":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
-  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
-
-"@types/react-dom@^17.0.0":
-  version "17.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.5.tgz#df44eed5b8d9e0b13bb0cd38e0ea6572a1231227"
-  integrity sha512-ikqukEhH4H9gr4iJCmQVNzTB307kROe3XFfHAOTxOXPOw7lAoEXnM5KWTkzeANGL5Ce6ABfiMl/zJBYNi7ObmQ==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-transition-group@^4.4.1":
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
-  integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@>=16.9.11", "@types/react@>=16.9.35", "@types/react@^17.0.0":
-  version "17.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.6.tgz#0ec564566302c562bf497d73219797a5e0297013"
-  integrity sha512-u/TtPoF/hrvb63LdukET6ncaplYsvCvmkceasx8oG84/ZCsoLxz9Z/raPBP4lTAiWW1Jb889Y9svHmv8R26dWw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/resolve@0.0.8":
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
-  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/scheduler@*":
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
-  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
-
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
-"@types/stack-utils@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
-  integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
-
-"@types/tapable@^1", "@types/tapable@^1.0.5":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4"
-  integrity sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==
-
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.9.5"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0"
-  integrity sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==
-  dependencies:
-    "@types/jest" "*"
-
-"@types/uglify-js@*":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.0.tgz#1cad8df1fb0b143c5aba08de5712ea9d1ff71124"
-  integrity sha512-EGkrJD5Uy+Pg0NUR8uA4bJ5WMfljyad0G+784vLCNUkD+QwOJXUbBYExXfVGf7YtyzdQp3L/XMYcliB987kL5Q==
-  dependencies:
-    source-map "^0.6.1"
-
-"@types/warning@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
-  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
-
-"@types/webpack-sources@*":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
-  integrity sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==
-  dependencies:
-    "@types/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.7.3"
-
-"@types/webpack@^4.41.8":
-  version "4.41.29"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.29.tgz#2e66c1de8223c440366469415c50a47d97625773"
-  integrity sha512-6pLaORaVNZxiB3FSHbyBiWM7QdazAWda1zvAq4SbZObZqHSDbWLi62iFdblVea6SK9eyBIVp5yHhKt/yNQdR7Q==
-  dependencies:
-    "@types/node" "*"
-    "@types/tapable" "^1"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    anymatch "^3.0.0"
-    source-map "^0.6.0"
-
-"@types/yargs-parser@*":
-  version "20.2.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
-  integrity sha512-37RSHht+gzzgYeobbG+KWryeAW8J33Nhr69cjTqSYymXVZEN9NbRYWoYlRtDhHKPVT1FyNKwaTPC1NynKZpzRA==
-
-"@types/yargs@^15.0.0":
-  version "15.0.13"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.13.tgz#34f7fec8b389d7f3c1fd08026a5763e072d3c6dc"
-  integrity sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@typescript-eslint/eslint-plugin@^4.24.0", "@typescript-eslint/eslint-plugin@^4.5.0":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.24.0.tgz#03801ffc25b2af9d08f3dc9bccfc0b7ce3780d0f"
-  integrity sha512-qbCgkPM7DWTsYQGjx9RTuQGswi+bEt0isqDBeo+CKV0953zqI0Tp7CZ7Fi9ipgFA6mcQqF4NOVNwS/f2r6xShw==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "4.24.0"
-    "@typescript-eslint/scope-manager" "4.24.0"
-    debug "^4.1.1"
-    functional-red-black-tree "^1.0.1"
-    lodash "^4.17.15"
-    regexpp "^3.0.0"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/experimental-utils@4.24.0", "@typescript-eslint/experimental-utils@^4.0.1":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.24.0.tgz#c23ead9de44b99c3a5fd925c33a106b00165e172"
-  integrity sha512-IwTT2VNDKH1h8RZseMH4CcYBz6lTvRoOLDuuqNZZoThvfHEhOiZPQCow+5El3PtyxJ1iDr6UXZwYtE3yZQjhcw==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.24.0"
-    "@typescript-eslint/types" "4.24.0"
-    "@typescript-eslint/typescript-estree" "4.24.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-
-"@typescript-eslint/experimental-utils@^3.10.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686"
-  integrity sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/types" "3.10.1"
-    "@typescript-eslint/typescript-estree" "3.10.1"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-
-"@typescript-eslint/parser@^4.24.0", "@typescript-eslint/parser@^4.5.0":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.24.0.tgz#2e5f1cc78ffefe43bfac7e5659309a92b09a51bd"
-  integrity sha512-dj1ZIh/4QKeECLb2f/QjRwMmDArcwc2WorWPRlB8UNTZlY1KpTVsbX7e3ZZdphfRw29aTFUSNuGB8w9X5sS97w==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.24.0"
-    "@typescript-eslint/types" "4.24.0"
-    "@typescript-eslint/typescript-estree" "4.24.0"
-    debug "^4.1.1"
-
-"@typescript-eslint/scope-manager@4.24.0":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.24.0.tgz#38088216f0eaf235fa30ed8cabf6948ec734f359"
-  integrity sha512-9+WYJGDnuC9VtYLqBhcSuM7du75fyCS/ypC8c5g7Sdw7pGL4NDTbeH38eJPfzIydCHZDoOgjloxSAA3+4l/zsA==
-  dependencies:
-    "@typescript-eslint/types" "4.24.0"
-    "@typescript-eslint/visitor-keys" "4.24.0"
-
-"@typescript-eslint/types@3.10.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
-  integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
-
-"@typescript-eslint/types@4.24.0":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.24.0.tgz#6d0cca2048cbda4e265e0c4db9c2a62aaad8228c"
-  integrity sha512-tkZUBgDQKdvfs8L47LaqxojKDE+mIUmOzdz7r+u+U54l3GDkTpEbQ1Jp3cNqqAU9vMUCBA1fitsIhm7yN0vx9Q==
-
-"@typescript-eslint/typescript-estree@3.10.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853"
-  integrity sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==
-  dependencies:
-    "@typescript-eslint/types" "3.10.1"
-    "@typescript-eslint/visitor-keys" "3.10.1"
-    debug "^4.1.1"
-    glob "^7.1.6"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/typescript-estree@4.24.0":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.24.0.tgz#b49249679a98014d8b03e8d4b70864b950e3c90f"
-  integrity sha512-kBDitL/by/HK7g8CYLT7aKpAwlR8doshfWz8d71j97n5kUa5caHWvY0RvEUEanL/EqBJoANev8Xc/mQ6LLwXGA==
-  dependencies:
-    "@typescript-eslint/types" "4.24.0"
-    "@typescript-eslint/visitor-keys" "4.24.0"
-    debug "^4.1.1"
-    globby "^11.0.1"
-    is-glob "^4.0.1"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/visitor-keys@3.10.1":
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931"
-  integrity sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-"@typescript-eslint/visitor-keys@4.24.0":
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.24.0.tgz#a8fafdc76cad4e04a681a945fbbac4e35e98e297"
-  integrity sha512-4ox1sjmGHIxjEDBnMCtWFFhErXtKA1Ec0sBpuz0fqf3P+g3JFGyTxxbF06byw0FRsPnnbq44cKivH7Ks1/0s6g==
-  dependencies:
-    "@typescript-eslint/types" "4.24.0"
-    eslint-visitor-keys "^2.0.0"
-
-"@webassemblyjs/ast@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
-  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
-  dependencies:
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-
-"@webassemblyjs/floating-point-hex-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
-  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
-
-"@webassemblyjs/helper-api-error@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
-  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
-
-"@webassemblyjs/helper-buffer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
-  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
-
-"@webassemblyjs/helper-code-frame@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
-  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
-  dependencies:
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/helper-fsm@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
-  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
-
-"@webassemblyjs/helper-module-context@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
-  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-
-"@webassemblyjs/helper-wasm-bytecode@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
-  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
-
-"@webassemblyjs/helper-wasm-section@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
-  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-
-"@webassemblyjs/ieee754@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
-  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
-"@webassemblyjs/leb128@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
-  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/utf8@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
-  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
-
-"@webassemblyjs/wasm-edit@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
-  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/helper-wasm-section" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-opt" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    "@webassemblyjs/wast-printer" "1.9.0"
-
-"@webassemblyjs/wasm-gen@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
-  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wasm-opt@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
-  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-
-"@webassemblyjs/wasm-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
-  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/ieee754" "1.9.0"
-    "@webassemblyjs/leb128" "1.9.0"
-    "@webassemblyjs/utf8" "1.9.0"
-
-"@webassemblyjs/wast-parser@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
-  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
-    "@webassemblyjs/helper-api-error" "1.9.0"
-    "@webassemblyjs/helper-code-frame" "1.9.0"
-    "@webassemblyjs/helper-fsm" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/wast-printer@1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
-  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/wast-parser" "1.9.0"
-    "@xtuc/long" "4.2.2"
-
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
-
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
-
-abab@^2.0.3, abab@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
-  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
-
-accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
-  dependencies:
-    mime-types "~2.1.24"
-    negotiator "0.6.2"
-
-acorn-globals@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
-  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-walk "^7.1.1"
-
-acorn-jsx@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
-  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
-
-acorn-walk@^7.1.1:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
-acorn@^6.4.1:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
-  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
-
-acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
-acorn@^8.1.0:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
-  integrity sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==
-
-address@1.1.2, address@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
-  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
-
-adjust-sourcemap-loader@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz#5ae12fb5b7b1c585e80bbb5a63ec163a1a45e61e"
-  integrity sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==
-  dependencies:
-    loader-utils "^2.0.0"
-    regex-parser "^2.2.11"
-
-aggregate-error@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
-  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
-  dependencies:
-    clean-stack "^2.0.0"
-    indent-string "^4.0.0"
-
-ajv-errors@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
-  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
-
-ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
-  version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
-  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ajv@^8.0.1:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.5.0.tgz#695528274bcb5afc865446aa275484049a18ae4b"
-  integrity sha512-Y2l399Tt1AguU3BPRP9Fn4eN+Or+StUGWCUpbnFyXSo8NZ9S4uj+AG2pjs5apK+ZMOwYOz1+a+VKvKH7CudXgQ==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-
-ansi-colors@^3.0.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
-  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
-
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
-ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
-  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
-  dependencies:
-    type-fest "^0.21.3"
-
-ansi-html@0.0.7, ansi-html@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
-  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansi-styles@^4.0.0, ansi-styles@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
-  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
-  dependencies:
-    color-convert "^2.0.1"
-
-anymatch@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
-  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
-  dependencies:
-    micromatch "^3.1.4"
-    normalize-path "^2.1.1"
-
-anymatch@^3.0.0, anymatch@^3.0.3, anymatch@~3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-aproba@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-aria-query@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
-  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
-
-arity-n@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
-  integrity sha1-2edrEXM+CFacCEeuezmyhgswt0U=
-
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
-
-array-flatten@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
-  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
-
-array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
-  integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    get-intrinsic "^1.1.1"
-    is-string "^1.0.5"
-
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-union@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
-  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
-
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-
-array.prototype.flat@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
-  integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-
-array.prototype.flatmap@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz#94cfd47cc1556ec0747d97f7c7738c58122004c9"
-  integrity sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    function-bind "^1.1.1"
-
-arrify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
-  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
-
-asap@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
-
-asn1.js@^5.2.0:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
-  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    safer-buffer "^2.1.0"
-
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
-
-assert@^1.1.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
-  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
-  dependencies:
-    object-assign "^4.1.1"
-    util "0.10.3"
-
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
-
-ast-types-flow@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
-
-astral-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
-  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
-
-async-each@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
-  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
-
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
-async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
-  dependencies:
-    lodash "^4.17.14"
-
-asynckit@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
-
-at-least-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
-  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-
-atob@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
-  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-
-autoprefixer@^9.6.1:
-  version "9.8.6"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
-  integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
-  dependencies:
-    browserslist "^4.12.0"
-    caniuse-lite "^1.0.30001109"
-    colorette "^1.2.1"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^7.0.32"
-    postcss-value-parser "^4.1.0"
-
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
-
-aws4@^1.8.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
-  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
-
-axe-core@^4.0.2:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.1.tgz#2e50bcf10ee5b819014f6e342e41e45096239e34"
-  integrity sha512-evY7DN8qSIbsW2H/TWQ1bX3sXN1d4MNb5Vb4n7BzPuCwRHdkZ1H2eNLuSh73EoQqkGKUtju2G2HCcjCfhvZIAA==
-
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
-  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
-
-babel-eslint@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
-babel-extract-comments@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
-  integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
-  dependencies:
-    babylon "^6.18.0"
-
-babel-jest@^26.6.0, babel-jest@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
-  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
-  dependencies:
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/babel__core" "^7.1.7"
-    babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^26.6.2"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    slash "^3.0.0"
-
-babel-loader@8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
-  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
-  dependencies:
-    find-cache-dir "^2.1.0"
-    loader-utils "^1.4.0"
-    mkdirp "^0.5.3"
-    pify "^4.0.1"
-    schema-utils "^2.6.5"
-
-babel-plugin-dynamic-import-node@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
-  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
-  dependencies:
-    object.assign "^4.1.0"
-
-babel-plugin-istanbul@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
-  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@istanbuljs/load-nyc-config" "^1.0.0"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-instrument "^4.0.0"
-    test-exclude "^6.0.0"
-
-babel-plugin-jest-hoist@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
-  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
-  dependencies:
-    "@babel/template" "^7.3.3"
-    "@babel/types" "^7.3.3"
-    "@types/babel__core" "^7.0.0"
-    "@types/babel__traverse" "^7.0.6"
-
-babel-plugin-macros@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
-  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
-
-babel-plugin-named-asset-import@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
-  integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
-
-babel-plugin-polyfill-corejs2@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.1.tgz#ae2cf6d6f1aa7c0edcf04a25180e8856a6d1184f"
-  integrity sha512-hXGSPbr6IbjeMyGew+3uGIAkRjBFSOJ9FLDZNOfHuyJZCcoia4nd/72J0bSgvfytcVfUcP/dxEVcUhVJuQRtSw==
-  dependencies:
-    "@babel/compat-data" "^7.13.11"
-    "@babel/helper-define-polyfill-provider" "^0.2.1"
-    semver "^6.1.1"
-
-babel-plugin-polyfill-corejs3@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.1.tgz#786f40218040030f0edecfd48e6e59f1ee9bef53"
-  integrity sha512-WZCqF3DLUhdTD/P381MDJfuP18hdCZ+iqJ+wHtzhWENpsiof284JJ1tMQg1CE+hfCWyG48F7e5gDMk2c3Laz7w==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.2.1"
-    core-js-compat "^3.9.1"
-
-babel-plugin-polyfill-regenerator@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.1.tgz#ca9595d7d5f3afefec2d83126148b90db751a091"
-  integrity sha512-T3bYyL3Sll2EtC94v3f+fA8M28q7YPTOZdB++SRHjvYZTvtd+WorMUq3tDTD4Q7Kjk1LG0gGromslKjcO5p2TA==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.2.1"
-
-babel-plugin-syntax-object-rest-spread@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
-  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
-
-babel-plugin-transform-object-rest-spread@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
-  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.26.0"
-
-babel-plugin-transform-react-remove-prop-types@0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
-  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
-
-babel-preset-current-node-syntax@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
-  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
-  dependencies:
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-bigint" "^7.8.3"
-    "@babel/plugin-syntax-class-properties" "^7.8.3"
-    "@babel/plugin-syntax-import-meta" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-top-level-await" "^7.8.3"
-
-babel-preset-jest@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
-  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
-  dependencies:
-    babel-plugin-jest-hoist "^26.6.2"
-    babel-preset-current-node-syntax "^1.0.0"
-
-babel-preset-react-app@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz#689b60edc705f8a70ce87f47ab0e560a317d7045"
-  integrity sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==
-  dependencies:
-    "@babel/core" "7.12.3"
-    "@babel/plugin-proposal-class-properties" "7.12.1"
-    "@babel/plugin-proposal-decorators" "7.12.1"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "7.12.1"
-    "@babel/plugin-proposal-numeric-separator" "7.12.1"
-    "@babel/plugin-proposal-optional-chaining" "7.12.1"
-    "@babel/plugin-transform-flow-strip-types" "7.12.1"
-    "@babel/plugin-transform-react-display-name" "7.12.1"
-    "@babel/plugin-transform-runtime" "7.12.1"
-    "@babel/preset-env" "7.12.1"
-    "@babel/preset-react" "7.12.1"
-    "@babel/preset-typescript" "7.12.1"
-    "@babel/runtime" "7.12.1"
-    babel-plugin-macros "2.8.0"
-    babel-plugin-transform-react-remove-prop-types "0.4.24"
-
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
-balanced-match@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
-  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
-
-base64-js@^1.0.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
-  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
-batch@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
-  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
-
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
-  dependencies:
-    tweetnacl "^0.14.3"
-
-bfj@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
-  integrity sha512-+e/UqUzwmzJamNF50tBV6tZPTORow7gQ96iFow+8b562OdMpEK0BcJEq2OSPEDmAbSMBQ7PKZ87ubFkgxpYWgw==
-  dependencies:
-    bluebird "^3.5.5"
-    check-types "^11.1.1"
-    hoopy "^0.1.4"
-    tryer "^1.0.1"
-
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
-binary-extensions@^1.0.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
-  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
-
-binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-
-bindings@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
-  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
-  dependencies:
-    file-uri-to-path "1.0.0"
-
-bluebird@^3.5.5:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
-  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
-  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
-
-bn.js@^5.0.0, bn.js@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
-  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
-
-body-parser@1.19.0:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
-  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
-  dependencies:
-    bytes "3.1.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
-
-bonjour@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
-  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
-  dependencies:
-    array-flatten "^2.1.0"
-    deep-equal "^1.0.1"
-    dns-equal "^1.0.0"
-    dns-txt "^2.0.2"
-    multicast-dns "^6.0.1"
-    multicast-dns-service-types "^1.1.0"
-
-boolbase@^1.0.0, boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@^2.3.1, braces@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
-braces@^3.0.1, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-brorand@^1.0.1, brorand@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
-
-browser-process-hrtime@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
-  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
-
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
-  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
-  dependencies:
-    bn.js "^5.0.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
-  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
-  dependencies:
-    bn.js "^5.1.1"
-    browserify-rsa "^4.0.1"
-    create-hash "^1.2.0"
-    create-hmac "^1.1.7"
-    elliptic "^6.5.3"
-    inherits "^2.0.4"
-    parse-asn1 "^5.1.5"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-browserify-zlib@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
-  dependencies:
-    pako "~1.0.5"
-
-browserslist@4.14.2:
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce"
-  integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==
-  dependencies:
-    caniuse-lite "^1.0.30001125"
-    electron-to-chromium "^1.3.564"
-    escalade "^3.0.2"
-    node-releases "^1.1.61"
-
-browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.6.2, browserslist@^4.6.4:
-  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
-  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
-  dependencies:
-    caniuse-lite "^1.0.30001219"
-    colorette "^1.2.2"
-    electron-to-chromium "^1.3.723"
-    escalade "^3.1.1"
-    node-releases "^1.1.71"
-
-bser@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
-  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
-  dependencies:
-    node-int64 "^0.4.0"
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-buffer-indexof@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
-  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
-
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
-
-buffer@^4.3.0:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
-  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
-builtin-modules@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
-  integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==
-
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
-
-bytes@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
-  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
-
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-cacache@^12.0.2:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
-  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
-  dependencies:
-    bluebird "^3.5.5"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
-    glob "^7.1.4"
-    graceful-fs "^4.1.15"
-    infer-owner "^1.0.3"
-    lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.3"
-    ssri "^6.0.1"
-    unique-filename "^1.1.1"
-    y18n "^4.0.0"
-
-cacache@^15.0.5:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.1.0.tgz#164c2f857ee606e4cc793c63018fefd0ea5eba7b"
-  integrity sha512-mfx0C+mCfWjD1PnwQ9yaOrwG1ou9FkKnx0SvzUHWdFt7r7GaRtzT+9M8HAvLu62zIHtnpQ/1m93nWNDCckJGXQ==
-  dependencies:
-    "@npmcli/move-file" "^1.0.1"
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    infer-owner "^1.0.4"
-    lru-cache "^6.0.0"
-    minipass "^3.1.1"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^1.0.3"
-    p-map "^4.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^3.0.2"
-    ssri "^8.0.1"
-    tar "^6.0.2"
-    unique-filename "^1.1.1"
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
-
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-camel-case@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
-  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
-  dependencies:
-    pascal-case "^3.1.2"
-    tslib "^2.0.3"
-
-camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
-  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
-
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001219:
-  version "1.0.30001228"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
-  integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
-
-capture-exit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
-  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
-  dependencies:
-    rsvp "^4.8.4"
-
-case-sensitive-paths-webpack-plugin@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
-  integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
-
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
-  integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-char-regex@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
-  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
-
-check-types@^11.1.1:
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
-  integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==
-
-chokidar@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
-  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
-  dependencies:
-    anymatch "^2.0.0"
-    async-each "^1.0.1"
-    braces "^2.3.2"
-    glob-parent "^3.1.0"
-    inherits "^2.0.3"
-    is-binary-path "^1.0.0"
-    is-glob "^4.0.0"
-    normalize-path "^3.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.2.1"
-    upath "^1.1.1"
-  optionalDependencies:
-    fsevents "^1.2.7"
-
-chokidar@^3.4.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
-  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.5.0"
-  optionalDependencies:
-    fsevents "~2.3.1"
-
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
-chrome-trace-event@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
-  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
-
-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
-
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-cjs-module-lexer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
-  integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==
-
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
-
-classnames@*, classnames@^2.2.6:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
-clean-css@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
-  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
-  dependencies:
-    source-map "~0.6.0"
-
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-cliui@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
-  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^6.2.0"
-
-co@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
-  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
-
-coa@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
-  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
-  dependencies:
-    "@types/q" "^1.5.1"
-    chalk "^2.4.1"
-    q "^1.1.2"
-
-collect-v8-coverage@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
-  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
-
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
-color-convert@^1.9.0, color-convert@^1.9.1:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@^1.0.0, color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-string@^1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
-  integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
-
-colorette@^1.2.1, colorette@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
-  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
-
-combined-stream@^1.0.6, combined-stream@~1.0.6:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
-  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
-  dependencies:
-    delayed-stream "~1.0.0"
-
-commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-commander@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
-  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
-
-common-tags@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
-  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
-
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-
-component-emitter@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
-compose-function@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
-  integrity sha1-ntZ18TzFRQHTCVCkhv9qe6OrGF8=
-  dependencies:
-    arity-n "^1.0.4"
-
-compressible@~2.0.16:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
-  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
-  dependencies:
-    mime-db ">= 1.43.0 < 2"
-
-compression@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
-  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
-  dependencies:
-    accepts "~1.3.5"
-    bytes "3.0.0"
-    compressible "~2.0.16"
-    debug "2.6.9"
-    on-headers "~1.0.2"
-    safe-buffer "5.1.2"
-    vary "~1.1.2"
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-concat-stream@^1.5.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-confusing-browser-globals@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz#30d1e7f3d1b882b25ec4933d1d1adac353d20a59"
-  integrity sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==
-
-connect-history-api-fallback@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
-  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
-
-console-browserify@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
-  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
-
-constants-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
-
-content-disposition@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
-  dependencies:
-    safe-buffer "5.1.2"
-
-content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-
-convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
-convert-source-map@^0.3.3:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
-  integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
-
-cookie-signature@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
-
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
-
-copy-concurrently@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
-  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
-  dependencies:
-    aproba "^1.1.1"
-    fs-write-stream-atomic "^1.0.8"
-    iferr "^0.1.5"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.0"
-
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-
-core-js-compat@^3.6.2, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.12.1.tgz#2c302c4708505fa7072b0adb5156d26f7801a18b"
-  integrity sha512-i6h5qODpw6EsHAoIdQhKoZdWn+dGBF3dSS8m5tif36RlWvW3A6+yu2S16QHUo3CrkzrnEskMAt9f8FxmY9fhWQ==
-  dependencies:
-    browserslist "^4.16.6"
-    semver "7.0.0"
-
-core-js-pure@^3.0.0:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.12.1.tgz#934da8b9b7221e2a2443dc71dfa5bd77a7ea00b8"
-  integrity sha512-1cch+qads4JnDSWsvc7d6nzlKAippwjUlf6vykkTLW53VSV+NkE6muGBToAjEA8pG90cSfcud3JgVmW2ds5TaQ==
-
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
-core-js@^3.6.5:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.12.1.tgz#6b5af4ff55616c08a44d386f1f510917ff204112"
-  integrity sha512-Ne9DKPHTObRuB09Dru5AjwKjY4cJHVGu+y5f7coGn1E9Grkc3p2iBwE9AI/nJzsE29mQF7oq+mhYYRqOMFN1Bw==
-
-core-util-is@1.0.2, core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-cosmiconfig@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
-cosmiconfig@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
-  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.2.1"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.10.0"
-
-create-ecdh@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
-  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.5.3"
-
-create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-cross-spawn@^6.0.0:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-crypto-browserify@^3.11.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
-crypto-random-string@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
-  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
-
-css-blank-pseudo@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
-  integrity sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==
-  dependencies:
-    postcss "^7.0.5"
-
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
-  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
-  dependencies:
-    postcss "^7.0.1"
-    timsort "^0.3.0"
-
-css-has-pseudo@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
-  integrity sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^5.0.0-rc.4"
-
-css-loader@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
-  integrity sha512-rdezjCjScIrsL8BSYszgT4s476IcNKt6yX69t0pHjJVnPUTDpn4WfIpDQTN3wCJvUvfsz/mFjuGOekf3PY3NUg==
-  dependencies:
-    camelcase "^6.0.0"
-    cssesc "^3.0.0"
-    icss-utils "^4.1.1"
-    loader-utils "^2.0.0"
-    postcss "^7.0.32"
-    postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^3.0.3"
-    postcss-modules-scope "^2.2.0"
-    postcss-modules-values "^3.0.0"
-    postcss-value-parser "^4.1.0"
-    schema-utils "^2.7.1"
-    semver "^7.3.2"
-
-css-prefers-color-scheme@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
-  integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
-  dependencies:
-    postcss "^7.0.5"
-
-css-select-base-adapter@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
-  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
-
-css-select@^2.0.0, css-select@^2.0.2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
-  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^3.2.1"
-    domutils "^1.7.0"
-    nth-check "^1.0.2"
-
-css-tree@1.0.0-alpha.37:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  dependencies:
-    mdn-data "2.0.4"
-    source-map "^0.6.1"
-
-css-tree@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
-css-what@^3.2.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
-  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
-
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
-css@^2.0.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
-  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
-  dependencies:
-    inherits "^2.0.3"
-    source-map "^0.6.1"
-    source-map-resolve "^0.5.2"
-    urix "^0.1.0"
-
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
-cssdb@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
-  integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
-
-cssesc@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
-  integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
-
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
-cssnano-preset-default@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
-  integrity sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.3"
-    postcss-unique-selectors "^4.0.1"
-
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
-  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-
-cssnano@^4.1.10:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
-  integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.8"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
-
-csso@^4.0.2:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
-  dependencies:
-    css-tree "^1.1.2"
-
-cssom@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
-  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
-
-cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
-
-cssstyle@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
-  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
-  dependencies:
-    cssom "~0.3.6"
-
-csstype@^3.0.2:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
-  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
-
-cyclist@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
-
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
-damerau-levenshtein@^1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
-  integrity sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==
-
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
-data-urls@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
-  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
-  dependencies:
-    abab "^2.0.3"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.0.0"
-
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
-  dependencies:
-    ms "2.1.2"
-
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-decimal.js@^10.2.1:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
-  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
-
-decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
-
-dedent@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
-  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
-
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
-deep-is@^0.1.3, deep-is@~0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-
-deepmerge@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
-  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
-
-default-gateway@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
-  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
-  dependencies:
-    execa "^1.0.0"
-    ip-regex "^2.1.0"
-
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
-  dependencies:
-    object-keys "^1.0.12"
-
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-del@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
-  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    globby "^6.1.0"
-    is-path-cwd "^2.0.0"
-    is-path-in-cwd "^2.0.0"
-    p-map "^2.0.0"
-    pify "^4.0.1"
-    rimraf "^2.6.3"
-
-delayed-stream@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
-
-depd@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
-
-des.js@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
-  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
-
-detect-newline@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
-  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
-
-detect-node@^2.0.4:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
-  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
-
-detect-port-alt@1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
-  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
-  dependencies:
-    address "^1.0.1"
-    debug "^2.6.0"
-
-diff-sequences@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
-  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
-
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
-  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
-  dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
-
-dir-glob@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
-  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-  dependencies:
-    path-type "^4.0.0"
-
-dns-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
-  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
-
-dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
-  dependencies:
-    ip "^1.1.0"
-    safe-buffer "^5.0.1"
-
-dns-txt@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
-  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
-  dependencies:
-    buffer-indexof "^1.0.0"
-
-doctrine@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
-  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
-  dependencies:
-    esutils "^2.0.2"
-
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
-dom-accessibility-api@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
-  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
-
-dom-converter@^0.2:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
-  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
-  dependencies:
-    utila "~0.4"
-
-dom-helpers@^5.0.1, dom-helpers@^5.1.2, dom-helpers@^5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
-domain-browser@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
-  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
-
-domelementtype@1, domelementtype@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
-  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
-
-domexception@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
-  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
-  dependencies:
-    webidl-conversions "^5.0.0"
-
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
-  dependencies:
-    domelementtype "1"
-
-domutils@^1.5.1, domutils@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
-  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
-dot-prop@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
-  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
-  dependencies:
-    is-obj "^2.0.0"
-
-dotenv-expand@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
-  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
-
-dotenv@8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-duplexer@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
-  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
-
-duplexify@^3.4.2, duplexify@^3.6.0:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
-  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
-ee-first@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-
-ejs@^2.6.1:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
-  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
-
-electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.723:
-  version "1.3.735"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.735.tgz#fa1a8660f2790662291cb2136f0e446a444cdfdc"
-  integrity sha512-cp7MWzC3NseUJV2FJFgaiesdrS+A8ZUjX5fLAxdRlcaPDkaPGFplX930S5vf84yqDp4LjuLdKouWuVOTwUfqHQ==
-
-elliptic@^6.5.3:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
-  dependencies:
-    bn.js "^4.11.9"
-    brorand "^1.1.0"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.1"
-    inherits "^2.0.4"
-    minimalistic-assert "^1.0.1"
-    minimalistic-crypto-utils "^1.0.1"
-
-emittery@^0.7.1:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
-  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-
-emoji-regex@^9.0.0:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
-  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
-
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
-encodeurl@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
-
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-enhanced-resolve@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
-  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
-enquirer@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
-  dependencies:
-    ansi-colors "^4.1.1"
-
-entities@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
-  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
-
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
-errno@^0.1.3, errno@~0.1.7:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
-error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-error-stack-parser@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8"
-  integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==
-  dependencies:
-    stackframe "^1.1.1"
-
-es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
-  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
-  dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.2"
-    is-callable "^1.2.3"
-    is-negative-zero "^2.0.1"
-    is-regex "^1.1.2"
-    is-string "^1.0.5"
-    object-inspect "^1.9.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.0"
-
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
-es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.53"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
-  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.3"
-    next-tick "~1.0.0"
-
-es6-iterator@2.0.3, es6-iterator@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3.1.1, es6-symbol@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
-  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
-escalade@^3.0.2, escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
-
-escape-html@~1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
-
-escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
-  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-escape-string-regexp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
-  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
-
-escodegen@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
-  integrity sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==
-  dependencies:
-    esprima "^4.0.1"
-    estraverse "^5.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
-eslint-config-prettier@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
-  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
-
-eslint-config-react-app@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e"
-  integrity sha512-bpoAAC+YRfzq0dsTk+6v9aHm/uqnDwayNAXleMypGl6CpxI9oXXscVHo4fk3eJPIn+rsbtNetB4r/ZIidFIE8A==
-  dependencies:
-    confusing-browser-globals "^1.0.10"
-
-eslint-import-resolver-node@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
-  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
-  dependencies:
-    debug "^2.6.9"
-    resolve "^1.13.1"
-
-eslint-module-utils@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.1.tgz#b51be1e473dd0de1c5ea638e22429c2490ea8233"
-  integrity sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==
-  dependencies:
-    debug "^3.2.7"
-    pkg-dir "^2.0.0"
-
-eslint-plugin-flowtype@^5.2.0:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.7.2.tgz#482a42fe5d15ee614652ed256d37543d584d7bc0"
-  integrity sha512-7Oq/N0+3nijBnYWQYzz/Mp/7ZCpwxYvClRyW/PLAmimY9uLCBvoXsNsERcJdkKceyOjgRbFhhxs058KTrne9Mg==
-  dependencies:
-    lodash "^4.17.15"
-    string-natural-compare "^3.0.1"
-
-eslint-plugin-import@^2.22.1:
-  version "2.23.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.23.3.tgz#8a1b073289fff03c4af0f04b6df956b7d463e191"
-  integrity sha512-wDxdYbSB55F7T5CC7ucDjY641VvKmlRwT0Vxh7PkY1mI4rclVRFWYfsrjDgZvwYYDZ5ee0ZtfFKXowWjqvEoRQ==
-  dependencies:
-    array-includes "^3.1.3"
-    array.prototype.flat "^1.2.4"
-    debug "^2.6.9"
-    doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.4"
-    eslint-module-utils "^2.6.1"
-    find-up "^2.0.0"
-    has "^1.0.3"
-    is-core-module "^2.4.0"
-    minimatch "^3.0.4"
-    object.values "^1.1.3"
-    pkg-up "^2.0.0"
-    read-pkg-up "^3.0.0"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.9.0"
-
-eslint-plugin-jest@^24.1.0:
-  version "24.3.6"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.3.6.tgz#5f0ca019183c3188c5ad3af8e80b41de6c8e9173"
-  integrity sha512-WOVH4TIaBLIeCX576rLcOgjNXqP+jNlCiEmRgFTfQtJ52DpwnIQKAVGlGPAN7CZ33bW6eNfHD6s8ZbEUTQubJg==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "^4.0.1"
-
-eslint-plugin-jsx-a11y@^6.3.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
-  integrity sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
-    aria-query "^4.2.2"
-    array-includes "^3.1.1"
-    ast-types-flow "^0.0.7"
-    axe-core "^4.0.2"
-    axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.6"
-    emoji-regex "^9.0.0"
-    has "^1.0.3"
-    jsx-ast-utils "^3.1.0"
-    language-tags "^1.0.5"
-
-eslint-plugin-prettier@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
-  integrity sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
-  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
-
-eslint-plugin-react@^7.21.5:
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz#2d2291b0f95c03728b55869f01102290e792d494"
-  integrity sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==
-  dependencies:
-    array-includes "^3.1.3"
-    array.prototype.flatmap "^1.2.4"
-    doctrine "^2.1.0"
-    has "^1.0.3"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.0.4"
-    object.entries "^1.1.3"
-    object.fromentries "^2.0.4"
-    object.values "^1.1.3"
-    prop-types "^15.7.2"
-    resolve "^2.0.0-next.3"
-    string.prototype.matchall "^4.0.4"
-
-eslint-plugin-testing-library@^3.9.2:
-  version "3.10.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.2.tgz#609ec2b0369da7cf2e6d9edff5da153cc31d87bd"
-  integrity sha512-WAmOCt7EbF1XM8XfbCKAEzAPnShkNSwcIsAD2jHdsMUT9mZJPjLCG7pMzbcC8kK366NOuGip8HKLDC+Xk4yIdA==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "^3.10.1"
-
-eslint-scope@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
-  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-scope@^5.0.0, eslint-scope@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
-eslint-utils@^2.0.0, eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
-eslint-webpack-plugin@^2.5.2:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.5.4.tgz#473b84932f1a8e2c2b8e66a402d0497bf440b986"
-  integrity sha512-7rYh0m76KyKSDE+B+2PUQrlNS4HJ51t3WKpkJg6vo2jFMbEPTG99cBV0Dm7LXSHucN4WGCG65wQcRiTFrj7iWw==
-  dependencies:
-    "@types/eslint" "^7.2.6"
-    arrify "^2.0.1"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    normalize-path "^3.0.0"
-    schema-utils "^3.0.0"
-
-eslint@^7.11.0:
-  version "7.27.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.27.0.tgz#665a1506d8f95655c9274d84bd78f7166b07e9c7"
-  integrity sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==
-  dependencies:
-    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.1"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
-    esquery "^1.4.0"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^13.6.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^6.0.9"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-espree@^7.3.0, espree@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
-  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
-  dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
-
-esprima@^4.0.0, esprima@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
-  dependencies:
-    estraverse "^5.1.0"
-
-esrecurse@^4.1.0, esrecurse@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
-  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
-  dependencies:
-    estraverse "^5.2.0"
-
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
-estraverse@^5.1.0, estraverse@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
-  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
-
-estree-walker@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
-  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
-
-estree-walker@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
-  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
-
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
-etag@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
-
-eventemitter3@^4.0.0:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
-events@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
-eventsource@^1.0.7:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.1.0.tgz#00e8ca7c92109e94b0ddf32dac677d841028cfaf"
-  integrity sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==
-  dependencies:
-    original "^1.0.0"
-
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
-exec-sh@^0.3.2:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
-  integrity sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==
-
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
-  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
-  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
-exit@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
-
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-expect@^26.6.0, expect@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
-  integrity sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    ansi-styles "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-regex-util "^26.0.0"
-
-express@^4.17.1:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
-ext@^1.1.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
-  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
-  dependencies:
-    type "^2.0.0"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
-fast-glob@^3.1.1:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
-  integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-    picomatch "^2.2.1"
-
-fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
-  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
-
-fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-
-fastq@^1.6.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.11.0.tgz#bb9fb955a07130a918eb63c1f5161cc32a5d0858"
-  integrity sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==
-  dependencies:
-    reusify "^1.0.4"
-
-faye-websocket@^0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
-  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
-  dependencies:
-    websocket-driver ">=0.5.1"
-
-fb-watchman@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
-  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
-  dependencies:
-    bser "2.1.1"
-
-figgy-pudding@^3.5.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
-  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
-
-file-entry-cache@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
-  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
-  dependencies:
-    flat-cache "^3.0.4"
-
-file-loader@6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.1.1.tgz#a6f29dfb3f5933a1c350b2dbaa20ac5be0539baa"
-  integrity sha512-Klt8C4BjWSXYQAfhpYYkG4qHNTna4toMHEbWrI5IuVoxbU6uiDKeKAP99R8mmbJi3lvewn/jQBOgU4+NS3tDQw==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-
-file-uri-to-path@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
-  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
-
-filesize@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00"
-  integrity sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==
-
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
-find-cache-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
-  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^2.0.0"
-    pkg-dir "^3.0.0"
-
-find-cache-dir@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
-  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
-
-find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
-    path-exists "^4.0.0"
-
-find-up@^2.0.0, find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
-flat-cache@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
-  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
-  dependencies:
-    flatted "^3.1.0"
-    rimraf "^3.0.2"
-
-flatted@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
-  integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
-
-flatten@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
-  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
-
-flush-write-stream@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
-  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.3.6"
-
-follow-redirects@^1.0.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
-  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
-
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
-
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
-
-fork-ts-checker-webpack-plugin@4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz#5055c703febcf37fa06405d400c122b905167fc5"
-  integrity sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    chalk "^2.4.1"
-    micromatch "^3.1.10"
-    minimatch "^3.0.4"
-    semver "^5.6.0"
-    tapable "^1.0.0"
-    worker-rpc "^0.1.0"
-
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
-  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
-
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
-  dependencies:
-    map-cache "^0.2.2"
-
-fresh@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
-
-from2@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-
-fs-extra@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-extra@^9.0.1:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
-  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
-  dependencies:
-    at-least-node "^1.0.0"
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
-fs-write-stream-atomic@^1.0.8:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
-  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
-  dependencies:
-    graceful-fs "^4.1.2"
-    iferr "^0.1.5"
-    imurmurhash "^0.1.4"
-    readable-stream "1 || 2"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fsevents@^1.2.7:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
-  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
-  dependencies:
-    bindings "^1.5.0"
-    nan "^2.12.1"
-
-fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-
-gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
-  version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
-  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
-
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
-  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
-get-own-enumerable-property-symbols@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
-  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
-
-get-package-type@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
-  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
-
-get-stream@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
-  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
-  dependencies:
-    pump "^3.0.0"
-
-get-stream@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
-  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
-  dependencies:
-    pump "^3.0.0"
-
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
-
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
-  dependencies:
-    assert-plus "^1.0.0"
-
-glob-parent@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
-  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
-  dependencies:
-    is-glob "^3.1.0"
-    path-dirname "^1.0.0"
-
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-global-modules@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
-  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
-  dependencies:
-    global-prefix "^3.0.0"
-
-global-prefix@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
-  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
-  dependencies:
-    ini "^1.3.5"
-    kind-of "^6.0.2"
-    which "^1.3.1"
-
-globals@^11.1.0:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
-  dependencies:
-    type-fest "^0.8.1"
-
-globals@^13.6.0:
-  version "13.8.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.8.0.tgz#3e20f504810ce87a8d72e55aecf8435b50f4c1b3"
-  integrity sha512-rHtdA6+PDBIjeEvA91rpqzEvk/k3/i7EeNQiryiWuJH0Hw9cpyJMAt2jtbAwUaRdhD+573X4vWw6IcjKPasi9Q==
-  dependencies:
-    type-fest "^0.20.2"
-
-globby@11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
-  integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
-    slash "^3.0.0"
-
-globby@^11.0.1:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
-  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
-    slash "^3.0.0"
-
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
-  dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
-  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
-
-growly@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
-  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
-
-gzip-size@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
-  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
-  dependencies:
-    duplexer "^0.1.1"
-    pify "^4.0.1"
-
-handle-thing@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
-  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
-
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
-
-har-validator@~5.1.3:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
-  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
-  dependencies:
-    ajv "^6.12.3"
-    har-schema "^2.0.0"
-
-harmony-reflect@^1.4.6:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
-  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
-
-has-bigints@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
-  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-has-symbols@^1.0.1, has-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
-  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
-
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
-has@^1.0.0, has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-hash-base@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
-  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
-  dependencies:
-    inherits "^2.0.4"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
-  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
-he@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
-history@^4.9.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    loose-envify "^1.2.0"
-    resolve-pathname "^3.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-    value-equal "^1.0.1"
-
-hmac-drbg@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
-
-hoist-non-react-statics@^3.1.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
-hoopy@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
-  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
-
-hosted-git-info@^2.1.4:
-  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
-  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
-
-hpack.js@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
-  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
-  dependencies:
-    inherits "^2.0.1"
-    obuf "^1.0.0"
-    readable-stream "^2.0.1"
-    wbuf "^1.1.0"
-
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
-html-encoding-sniffer@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
-  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
-  dependencies:
-    whatwg-encoding "^1.0.5"
-
-html-entities@^1.2.1, html-entities@^1.3.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc"
-  integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==
-
-html-escaper@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
-  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
-
-html-minifier-terser@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
-  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
-  dependencies:
-    camel-case "^4.1.1"
-    clean-css "^4.2.3"
-    commander "^4.1.1"
-    he "^1.2.0"
-    param-case "^3.0.3"
-    relateurl "^0.2.7"
-    terser "^4.6.3"
-
-html-webpack-plugin@4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
-  integrity sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==
-  dependencies:
-    "@types/html-minifier-terser" "^5.0.0"
-    "@types/tapable" "^1.0.5"
-    "@types/webpack" "^4.41.8"
-    html-minifier-terser "^5.0.1"
-    loader-utils "^1.2.3"
-    lodash "^4.17.15"
-    pretty-error "^2.1.1"
-    tapable "^1.1.3"
-    util.promisify "1.0.0"
-
-htmlparser2@^3.10.1:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
-  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
-  dependencies:
-    domelementtype "^1.3.1"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^3.1.1"
-
-http-deceiver@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
-  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
-
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
-  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-errors@~1.6.2:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
-  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.4.0 < 2"
-
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
-http-parser-js@>=0.5.1:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.3.tgz#01d2709c79d41698bb01d4decc5e9da4e4a033d9"
-  integrity sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==
-
-http-proxy-middleware@0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
-  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
-  dependencies:
-    http-proxy "^1.17.0"
-    is-glob "^4.0.0"
-    lodash "^4.17.11"
-    micromatch "^3.1.10"
-
-http-proxy@^1.17.0:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
-  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    follow-redirects "^1.0.0"
-    requires-port "^1.0.0"
-
-http-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
-  dependencies:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
-
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
-
-human-signals@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
-  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
-
-iconv-lite@0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
-icss-utils@^4.0.0, icss-utils@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
-  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
-  dependencies:
-    postcss "^7.0.14"
-
-identity-obj-proxy@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
-  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
-  dependencies:
-    harmony-reflect "^1.4.6"
-
-ieee754@^1.1.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
-  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
-
-iferr@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
-
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
-ignore@^5.1.4:
-  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
-  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
-
-immer@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
-  integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==
-
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
-  dependencies:
-    import-from "^2.1.0"
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
-  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
-  dependencies:
-    resolve-from "^3.0.0"
-
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
-import-local@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
-  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
-  dependencies:
-    pkg-dir "^4.2.0"
-    resolve-cwd "^3.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-indent-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
-  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
-
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
-infer-owner@^1.0.3, infer-owner@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
-
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
-
-ini@^1.3.5:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
-  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
-
-internal-ip@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
-  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
-  dependencies:
-    default-gateway "^4.2.0"
-    ipaddr.js "^1.9.0"
-
-internal-slot@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
-  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
-  dependencies:
-    get-intrinsic "^1.1.0"
-    has "^1.0.3"
-    side-channel "^1.0.4"
-
-invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
-
-ip@^1.1.0, ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
-
-ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
-  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
-
-is-absolute-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
-  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
-
-is-absolute-url@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
-  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
-
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-arguments@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
-  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
-  dependencies:
-    call-bind "^1.0.0"
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
-is-bigint@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
-  integrity sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==
-
-is-binary-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
-  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
-  dependencies:
-    binary-extensions "^1.0.0"
-
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
-is-boolean-object@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.1.tgz#3c0878f035cb821228d350d2e1e36719716a3de8"
-  integrity sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==
-  dependencies:
-    call-bind "^1.0.2"
-
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
-is-callable@^1.1.4, is-callable@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
-  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
-
-is-ci@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
-  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
-  dependencies:
-    ci-info "^2.0.0"
-
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
-is-core-module@^2.0.0, is-core-module@^2.2.0, is-core-module@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
-  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
-  dependencies:
-    has "^1.0.3"
-
-is-data-descriptor@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-data-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
-  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
-  dependencies:
-    kind-of "^6.0.0"
-
-is-date-object@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5"
-  integrity sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==
-
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
-is-docker@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
-  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
-
-is-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
-is-extglob@^2.1.0, is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
-is-generator-fn@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
-  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
-
-is-glob@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
-  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
-  dependencies:
-    is-extglob "^2.1.0"
-
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
-  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
-
-is-negative-zero@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
-  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
-
-is-number-object@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.5.tgz#6edfaeed7950cff19afedce9fbfca9ee6dd289eb"
-  integrity sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==
-
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-obj@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
-  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
-
-is-obj@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
-  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
-
-is-path-cwd@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
-is-path-in-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
-  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
-  dependencies:
-    is-path-inside "^2.1.0"
-
-is-path-inside@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
-  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
-  dependencies:
-    path-is-inside "^1.0.2"
-
-is-plain-obj@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
-is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
-is-potential-custom-element-name@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
-  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
-
-is-regex@^1.0.4, is-regex@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
-  integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.2"
-
-is-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
-  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
-
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
-
-is-root@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
-  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
-
-is-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-is-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
-  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
-
-is-string@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
-  integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
-  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
-  dependencies:
-    has-symbols "^1.0.2"
-
-is-typedarray@^1.0.0, is-typedarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-
-is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
-
-is-wsl@^2.1.1, is-wsl@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
-  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
-  dependencies:
-    is-docker "^2.0.0"
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
-
-istanbul-lib-coverage@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
-  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
-
-istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
-  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
-  dependencies:
-    "@babel/core" "^7.7.5"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.0.0"
-    semver "^6.3.0"
-
-istanbul-lib-report@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
-  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
-  dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    make-dir "^3.0.0"
-    supports-color "^7.1.0"
-
-istanbul-lib-source-maps@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
-  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
-  dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^3.0.0"
-    source-map "^0.6.1"
-
-istanbul-reports@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
-  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
-  dependencies:
-    html-escaper "^2.0.0"
-    istanbul-lib-report "^3.0.0"
-
-jest-changed-files@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
-  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    execa "^4.0.0"
-    throat "^5.0.0"
-
-jest-circus@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-26.6.0.tgz#7d9647b2e7f921181869faae1f90a2629fd70705"
-  integrity sha512-L2/Y9szN6FJPWFK8kzWXwfp+FOR7xq0cUL4lIsdbIdwz3Vh6P1nrpcqOleSzr28zOtSHQNV9Z7Tl+KkuK7t5Ng==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.0"
-    "@jest/test-result" "^26.6.0"
-    "@jest/types" "^26.6.0"
-    "@types/babel__traverse" "^7.0.4"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    expect "^26.6.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^26.6.0"
-    jest-matcher-utils "^26.6.0"
-    jest-message-util "^26.6.0"
-    jest-runner "^26.6.0"
-    jest-runtime "^26.6.0"
-    jest-snapshot "^26.6.0"
-    jest-util "^26.6.0"
-    pretty-format "^26.6.0"
-    stack-utils "^2.0.2"
-    throat "^5.0.0"
-
-jest-cli@^26.6.0:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
-  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
-  dependencies:
-    "@jest/core" "^26.6.3"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    import-local "^3.0.2"
-    is-ci "^2.0.0"
-    jest-config "^26.6.3"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    prompts "^2.0.1"
-    yargs "^15.4.1"
-
-jest-config@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
-  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^26.6.3"
-    "@jest/types" "^26.6.2"
-    babel-jest "^26.6.3"
-    chalk "^4.0.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.1"
-    graceful-fs "^4.2.4"
-    jest-environment-jsdom "^26.6.2"
-    jest-environment-node "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-jasmine2 "^26.6.3"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
-
-jest-diff@^26.0.0, jest-diff@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
-  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-docblock@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
-  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-each@^26.6.0, jest-each@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
-  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-
-jest-environment-jsdom@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
-  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-    jsdom "^16.4.0"
-
-jest-environment-node@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
-  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-
-jest-get-type@^26.3.0:
-  version "26.3.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
-  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
-
-jest-haste-map@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
-  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/graceful-fs" "^4.1.2"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.4"
-    jest-regex-util "^26.0.0"
-    jest-serializer "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    sane "^4.0.3"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.1.2"
-
-jest-jasmine2@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
-  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    expect "^26.6.2"
-    is-generator-fn "^2.0.0"
-    jest-each "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-    throat "^5.0.0"
-
-jest-leak-detector@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
-  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
-  dependencies:
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-matcher-utils@^26.6.0, jest-matcher-utils@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
-  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-message-util@^26.6.0, jest-message-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
-  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^26.6.2"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
-    slash "^3.0.0"
-    stack-utils "^2.0.2"
-
-jest-mock@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
-  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-
-jest-pnp-resolver@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
-  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
-
-jest-regex-util@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
-  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
-
-jest-resolve-dependencies@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
-  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-snapshot "^26.6.2"
-
-jest-resolve@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.0.tgz#070fe7159af87b03e50f52ea5e17ee95bbee40e1"
-  integrity sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==
-  dependencies:
-    "@jest/types" "^26.6.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.0"
-    read-pkg-up "^7.0.1"
-    resolve "^1.17.0"
-    slash "^3.0.0"
-
-jest-resolve@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
-  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.2"
-    read-pkg-up "^7.0.1"
-    resolve "^1.18.1"
-    slash "^3.0.0"
-
-jest-runner@^26.6.0, jest-runner@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
-  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    emittery "^0.7.1"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-docblock "^26.0.0"
-    jest-haste-map "^26.6.2"
-    jest-leak-detector "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    source-map-support "^0.5.6"
-    throat "^5.0.0"
-
-jest-runtime@^26.6.0, jest-runtime@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
-  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/globals" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/yargs" "^15.0.0"
-    chalk "^4.0.0"
-    cjs-module-lexer "^0.6.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-    yargs "^15.4.1"
-
-jest-serializer@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
-  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
-  dependencies:
-    "@types/node" "*"
-    graceful-fs "^4.2.4"
-
-jest-snapshot@^26.6.0, jest-snapshot@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
-  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
-  dependencies:
-    "@babel/types" "^7.0.0"
-    "@jest/types" "^26.6.2"
-    "@types/babel__traverse" "^7.0.4"
-    "@types/prettier" "^2.0.0"
-    chalk "^4.0.0"
-    expect "^26.6.2"
-    graceful-fs "^4.2.4"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-haste-map "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
-    natural-compare "^1.4.0"
-    pretty-format "^26.6.2"
-    semver "^7.3.2"
-
-jest-util@^26.6.0, jest-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    micromatch "^4.0.2"
-
-jest-validate@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
-  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    camelcase "^6.0.0"
-    chalk "^4.0.0"
-    jest-get-type "^26.3.0"
-    leven "^3.1.0"
-    pretty-format "^26.6.2"
-
-jest-watch-typeahead@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.1.tgz#45221b86bb6710b7e97baaa1640ae24a07785e63"
-  integrity sha512-ITVnHhj3Jd/QkqQcTqZfRgjfyRhDFM/auzgVo2RKvSwi18YMvh0WvXDJFoFED6c7jd/5jxtu4kSOb9PTu2cPVg==
-  dependencies:
-    ansi-escapes "^4.3.1"
-    chalk "^4.0.0"
-    jest-regex-util "^26.0.0"
-    jest-watcher "^26.3.0"
-    slash "^3.0.0"
-    string-length "^4.0.1"
-    strip-ansi "^6.0.0"
-
-jest-watcher@^26.3.0, jest-watcher@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.6.2.tgz#a5b683b8f9d68dbcb1d7dae32172d2cca0592975"
-  integrity sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==
-  dependencies:
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    jest-util "^26.6.2"
-    string-length "^4.0.1"
-
-jest-worker@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
-  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^6.1.0"
-
-jest-worker@^26.5.0, jest-worker@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
-  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^7.0.0"
-
-jest@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.0.tgz#546b25a1d8c888569dbbe93cae131748086a4a25"
-  integrity sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==
-  dependencies:
-    "@jest/core" "^26.6.0"
-    import-local "^3.0.2"
-    jest-cli "^26.6.0"
-
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-yaml@^3.13.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
-  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
-jsdom@^16.4.0:
-  version "16.5.3"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.5.3.tgz#13a755b3950eb938b4482c407238ddf16f0d2136"
-  integrity sha512-Qj1H+PEvUsOtdPJ056ewXM4UJPCi4hhLA8wpiz9F2YvsRBhuFsXxtrIFAgGBDynQA9isAMGE91PfUYbdMPXuTA==
-  dependencies:
-    abab "^2.0.5"
-    acorn "^8.1.0"
-    acorn-globals "^6.0.0"
-    cssom "^0.4.4"
-    cssstyle "^2.3.0"
-    data-urls "^2.0.0"
-    decimal.js "^10.2.1"
-    domexception "^2.0.1"
-    escodegen "^2.0.0"
-    html-encoding-sniffer "^2.0.1"
-    is-potential-custom-element-name "^1.0.0"
-    nwsapi "^2.2.0"
-    parse5 "6.0.1"
-    request "^2.88.2"
-    request-promise-native "^1.0.9"
-    saxes "^5.0.1"
-    symbol-tree "^3.2.4"
-    tough-cookie "^4.0.0"
-    w3c-hr-time "^1.0.2"
-    w3c-xmlserializer "^2.0.0"
-    webidl-conversions "^6.1.0"
-    whatwg-encoding "^1.0.5"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.5.0"
-    ws "^7.4.4"
-    xml-name-validator "^3.0.0"
-
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
-
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-json-parse-even-better-errors@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
-  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-schema-traverse@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
-  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
-
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
-
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
-
-json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
-
-json3@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
-  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
-
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
-json5@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
-  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
-  dependencies:
-    minimist "^1.2.5"
-
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsonfile@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
-  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
-  dependencies:
-    universalify "^2.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.2.3"
-    verror "1.10.0"
-
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
-  integrity sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==
-  dependencies:
-    array-includes "^3.1.2"
-    object.assign "^4.1.2"
-
-killable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
-  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
-
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
-  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
-
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
-kleur@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
-klona@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
-  integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
-
-language-subtag-registry@~0.3.2:
-  version "0.3.21"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
-  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
-
-language-tags@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
-  dependencies:
-    language-subtag-registry "~0.3.2"
-
-last-call-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
-  integrity sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==
-  dependencies:
-    lodash "^4.17.5"
-    webpack-sources "^1.1.0"
-
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
-levn@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
-  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
-  dependencies:
-    prelude-ls "^1.2.1"
-    type-check "~0.4.0"
-
-levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
-lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
-
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
-loader-runner@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
-  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
-
-loader-utils@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
-
-loader-utils@2.0.0, loader-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
-  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
-loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
-
-lodash-es@^4.17.20:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
-lodash._reinterpolate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
-
-lodash.clonedeep@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
-
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
-lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-
-lodash.merge@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
-  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-
-lodash.template@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
-  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-
-lodash.truncate@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
-  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
-
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@^4.7.0:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-loglevel@^1.6.8:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
-  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
-
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-lower-case@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
-  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
-  dependencies:
-    tslib "^2.0.3"
-
-lru-cache@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
-  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-  dependencies:
-    yallist "^3.0.2"
-
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
-lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
-  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
-
-magic-string@^0.25.0, magic-string@^0.25.7:
-  version "0.25.7"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
-  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
-  dependencies:
-    sourcemap-codec "^1.4.4"
-
-make-dir@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
-make-dir@^3.0.0, make-dir@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
-  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
-  dependencies:
-    semver "^6.0.0"
-
-makeerror@1.0.x:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
-  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
-  dependencies:
-    tmpl "1.0.x"
-
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
-  dependencies:
-    object-visit "^1.0.0"
-
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
-
-media-typer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
-
-memory-fs@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
-  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-memory-fs@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
-  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
-
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
-merge2@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
-  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-
-methods@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
-
-microevent.ts@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
-  integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
-
-micromatch@^3.1.10, micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
-micromatch@^4.0.2:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
-  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.2.3"
-
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
-  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
-  dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
-
-mime-db@1.47.0, "mime-db@>= 1.43.0 < 2":
-  version "1.47.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
-  integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
-
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.30"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
-  integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
-  dependencies:
-    mime-db "1.47.0"
-
-mime@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
-mime@^2.4.4:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
-  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-min-indent@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
-  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-
-mini-create-react-context@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
-  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-    tiny-warning "^1.0.3"
-
-mini-css-extract-plugin@0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
-  integrity sha512-n9BA8LonkOkW1/zn+IbLPQmovsL0wMb9yx75fMJQZf2X1Zoec9yTZtyMePcyu19wPkmFbzZZA6fLTotpFhQsOA==
-  dependencies:
-    loader-utils "^1.1.0"
-    normalize-url "1.9.1"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
-
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-
-minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-
-minimatch@3.0.4, minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-flush@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
-  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-pipeline@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
-  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass@^3.0.0, minipass@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
-  dependencies:
-    yallist "^4.0.0"
-
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
-mississippi@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
-  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
-  dependencies:
-    concat-stream "^1.5.0"
-    duplexify "^3.4.2"
-    end-of-stream "^1.1.0"
-    flush-write-stream "^1.0.0"
-    from2 "^2.1.0"
-    parallel-transform "^1.1.0"
-    pump "^3.0.0"
-    pumpify "^1.3.3"
-    stream-each "^1.1.0"
-    through2 "^2.0.0"
-
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
-mkdirp@^1.0.3, mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-move-concurrently@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
-  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
-  dependencies:
-    aproba "^1.1.1"
-    copy-concurrently "^1.0.0"
-    fs-write-stream-atomic "^1.0.8"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.3"
-
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
-
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
-multicast-dns-service-types@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
-  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
-
-multicast-dns@^6.0.1:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
-  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
-  dependencies:
-    dns-packet "^1.3.1"
-    thunky "^1.0.2"
-
-nan@^2.12.1:
-  version "2.14.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
-  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
-
-nanoid@^3.1.23:
-  version "3.1.23"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
-  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-native-url@^0.2.6:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae"
-  integrity sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==
-  dependencies:
-    querystring "^0.2.0"
-
-natural-compare@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
-  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
-
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
-
-neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
-next-tick@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
-  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-no-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
-  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
-  dependencies:
-    lower-case "^2.0.2"
-    tslib "^2.0.3"
-
-node-forge@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
-  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
-
-node-int64@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
-  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
-
-node-libs-browser@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
-  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.1"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "^1.0.1"
-
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
-
-node-notifier@^8.0.0:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.2.tgz#f3167a38ef0d2c8a866a83e318c1ba0efeb702c5"
-  integrity sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==
-  dependencies:
-    growly "^1.3.0"
-    is-wsl "^2.2.0"
-    semver "^7.3.2"
-    shellwords "^0.1.1"
-    uuid "^8.3.0"
-    which "^2.0.2"
-
-node-releases@^1.1.61, node-releases@^1.1.71:
-  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
-
-normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-path@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
-  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
-  dependencies:
-    remove-trailing-separator "^1.0.1"
-
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-normalize-range@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
-  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
-
-normalize-url@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
-  integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
-  dependencies:
-    object-assign "^4.0.1"
-    prepend-http "^1.0.0"
-    query-string "^4.1.0"
-    sort-keys "^1.0.0"
-
-normalize-url@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
-  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
-
-npm-run-path@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
-  dependencies:
-    path-key "^2.0.0"
-
-npm-run-path@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
-  dependencies:
-    path-key "^3.0.0"
-
-nth-check@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
-  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
-  dependencies:
-    boolbase "~1.0.0"
-
-num2fraction@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-
-nwsapi@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
-  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
-
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
-
-object-inspect@^1.9.0:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
-  integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
-
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-object-keys@^1.0.12, object-keys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
-  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
-
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
-  dependencies:
-    isobject "^3.0.0"
-
-object.assign@^4.1.0, object.assign@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
-  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    has-symbols "^1.0.1"
-    object-keys "^1.1.1"
-
-object.entries@^1.1.0, object.entries@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
-  integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has "^1.0.3"
-
-object.fromentries@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.4.tgz#26e1ba5c4571c5c6f0890cef4473066456a120b8"
-  integrity sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has "^1.0.3"
-
-object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
-  integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
-  dependencies:
-    isobject "^3.0.1"
-
-object.values@^1.1.0, object.values@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
-  integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has "^1.0.3"
-
-obuf@^1.0.0, obuf@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
-  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
-
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
-  dependencies:
-    ee-first "1.1.1"
-
-on-headers@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
-  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^5.1.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
-  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-open@^7.0.2:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
-  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
-  dependencies:
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
-
-opn@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
-  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
-  dependencies:
-    is-wsl "^1.1.0"
-
-optimize-css-assets-webpack-plugin@5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz#85883c6528aaa02e30bbad9908c92926bb52dc90"
-  integrity sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==
-  dependencies:
-    cssnano "^4.1.10"
-    last-call-webpack-plugin "^3.0.0"
-
-optionator@^0.8.1:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
-  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
-  dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.6"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    word-wrap "~1.2.3"
-
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
-  dependencies:
-    deep-is "^0.1.3"
-    fast-levenshtein "^2.0.6"
-    levn "^0.4.1"
-    prelude-ls "^1.2.1"
-    type-check "^0.4.0"
-    word-wrap "^1.2.3"
-
-original@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
-  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
-  dependencies:
-    url-parse "^1.4.3"
-
-os-browserify@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
-
-p-each-series@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
-  integrity sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==
-
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
-
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
-p-limit@^2.0.0, p-limit@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
-  dependencies:
-    p-try "^2.0.0"
-
-p-limit@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
-  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
-  dependencies:
-    yocto-queue "^0.1.0"
-
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-map@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
-  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
-
-p-map@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
-  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
-  dependencies:
-    aggregate-error "^3.0.0"
-
-p-retry@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
-  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
-  dependencies:
-    retry "^0.12.0"
-
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-pako@~1.0.5:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
-  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
-parallel-transform@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
-  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
-  dependencies:
-    cyclist "^1.0.1"
-    inherits "^2.0.3"
-    readable-stream "^2.1.5"
-
-param-case@^3.0.3:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
-  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
-
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
-parse-asn1@^5.0.0, parse-asn1@^5.1.5:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
-  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
-  dependencies:
-    asn1.js "^5.2.0"
-    browserify-aes "^1.0.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-    safe-buffer "^5.1.1"
-
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
-parse-json@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
-  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-even-better-errors "^2.3.0"
-    lines-and-columns "^1.1.6"
-
-parse5@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
-parseurl@~1.3.2, parseurl@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
-  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-
-pascal-case@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
-  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
-
-path-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
-  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
-
-path-dirname@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
-  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-exists@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
-  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-is-inside@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
-
-path-key@^2.0.0, path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-
-path-key@^3.0.0, path-key@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
-  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
-
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
-
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-
-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
-pbkdf2@^3.0.3:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
-  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
-  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
-
-pify@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-pirates@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
-  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
-  dependencies:
-    node-modules-regexp "^1.0.0"
-
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
-  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
-  dependencies:
-    find-up "^2.1.0"
-
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
-  dependencies:
-    find-up "^3.0.0"
-
-pkg-dir@^4.1.0, pkg-dir@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
-  dependencies:
-    find-up "^4.0.0"
-
-pkg-up@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
-  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
-  dependencies:
-    find-up "^3.0.0"
-
-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
-  dependencies:
-    find-up "^2.1.0"
-
-pnp-webpack-plugin@1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
-  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
-  dependencies:
-    ts-pnp "^1.1.6"
-
-portfinder@^1.0.26:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
-  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
-  dependencies:
-    async "^2.6.2"
-    debug "^3.1.1"
-    mkdirp "^0.5.5"
-
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-
-postcss-attribute-case-insensitive@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
-  integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^6.0.2"
-
-postcss-browser-comments@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-3.0.0.tgz#1248d2d935fb72053c8e1f61a84a57292d9f65e9"
-  integrity sha512-qfVjLfq7HFd2e0HW4s1dvU8X080OZdG46fFbIBFjW7US7YPDcWfRvdElvwMJr2LI6hMmD+7LnH2HcmXTs+uOig==
-  dependencies:
-    postcss "^7"
-
-postcss-calc@^7.0.1:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
-  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
-  dependencies:
-    postcss "^7.0.27"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.2"
-
-postcss-color-functional-notation@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
-  integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-color-gray@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
-  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
-
-postcss-color-hex-alpha@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
-  integrity sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==
-  dependencies:
-    postcss "^7.0.14"
-    postcss-values-parser "^2.0.1"
-
-postcss-color-mod-function@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
-  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-color-rebeccapurple@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
-  integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
-  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
-  dependencies:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
-  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-custom-media@^7.0.8:
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
-  integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
-  dependencies:
-    postcss "^7.0.14"
-
-postcss-custom-properties@^8.0.11:
-  version "8.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
-  integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
-  dependencies:
-    postcss "^7.0.17"
-    postcss-values-parser "^2.0.1"
-
-postcss-custom-selectors@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
-  integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
-
-postcss-dir-pseudo-class@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
-  integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
-
-postcss-discard-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
-  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
-  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-double-position-gradients@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
-  integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
-  dependencies:
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
-
-postcss-env-function@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
-  integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-flexbugs-fixes@4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
-  integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==
-  dependencies:
-    postcss "^7.0.26"
-
-postcss-focus-visible@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
-  integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-focus-within@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
-  integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-font-variant@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.1.tgz#42d4c0ab30894f60f98b17561eb5c0321f502641"
-  integrity sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-gap-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
-  integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-image-set-function@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
-  integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-initial@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.4.tgz#9d32069a10531fe2ecafa0b6ac750ee0bc7efc53"
-  integrity sha512-3RLn6DIpMsK1l5UUy9jxQvoDeUN4gP939tDcKUHD/kM8SGSKbFAnvkpFpj3Bhtz3HGk1jWY5ZNWX6mPta5M9fg==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-lab-function@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
-  integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-load-config@^2.0.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
-  integrity sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    import-cwd "^2.0.0"
-
-postcss-loader@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
-  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
-  dependencies:
-    loader-utils "^1.1.0"
-    postcss "^7.0.0"
-    postcss-load-config "^2.0.0"
-    schema-utils "^1.0.0"
-
-postcss-logical@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
-  integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-media-minmax@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
-  integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-merge-longhand@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
-  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
-  dependencies:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
-
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
-  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
-
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
-  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
-  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
-  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
-
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
-  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-postcss-modules-extract-imports@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
-  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-modules-local-by-default@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
-  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
-  dependencies:
-    icss-utils "^4.1.1"
-    postcss "^7.0.32"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.1.0"
-
-postcss-modules-scope@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
-  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^6.0.0"
-
-postcss-modules-values@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
-  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
-  dependencies:
-    icss-utils "^4.0.0"
-    postcss "^7.0.6"
-
-postcss-nesting@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
-  integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
-  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
-  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
-  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
-  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
-  dependencies:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
-  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
-  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
-  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
-  dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
-  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-8.0.1.tgz#90e80a7763d7fdf2da6f2f0f82be832ce4f66776"
-  integrity sha512-rt9JMS/m9FHIRroDDBGSMsyW1c0fkvOJPy62ggxSHUldJO7B195TqFMqIf+lY5ezpDcYOV4j86aUp3/XbxzCCQ==
-  dependencies:
-    "@csstools/normalize.css" "^10.1.0"
-    browserslist "^4.6.2"
-    postcss "^7.0.17"
-    postcss-browser-comments "^3.0.0"
-    sanitize.css "^10.0.0"
-
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
-  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-overflow-shorthand@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
-  integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-page-break@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
-  integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-place@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
-  integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-preset-env@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
-  integrity sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==
-  dependencies:
-    autoprefixer "^9.6.1"
-    browserslist "^4.6.4"
-    caniuse-lite "^1.0.30000981"
-    css-blank-pseudo "^0.1.4"
-    css-has-pseudo "^0.10.0"
-    css-prefers-color-scheme "^3.1.1"
-    cssdb "^4.4.0"
-    postcss "^7.0.17"
-    postcss-attribute-case-insensitive "^4.0.1"
-    postcss-color-functional-notation "^2.0.1"
-    postcss-color-gray "^5.0.0"
-    postcss-color-hex-alpha "^5.0.3"
-    postcss-color-mod-function "^3.0.3"
-    postcss-color-rebeccapurple "^4.0.1"
-    postcss-custom-media "^7.0.8"
-    postcss-custom-properties "^8.0.11"
-    postcss-custom-selectors "^5.1.2"
-    postcss-dir-pseudo-class "^5.0.0"
-    postcss-double-position-gradients "^1.0.0"
-    postcss-env-function "^2.0.2"
-    postcss-focus-visible "^4.0.0"
-    postcss-focus-within "^3.0.0"
-    postcss-font-variant "^4.0.0"
-    postcss-gap-properties "^2.0.0"
-    postcss-image-set-function "^3.0.1"
-    postcss-initial "^3.0.0"
-    postcss-lab-function "^2.0.1"
-    postcss-logical "^3.0.0"
-    postcss-media-minmax "^4.0.0"
-    postcss-nesting "^7.0.0"
-    postcss-overflow-shorthand "^2.0.0"
-    postcss-page-break "^2.0.0"
-    postcss-place "^4.0.1"
-    postcss-pseudo-class-any-link "^6.0.0"
-    postcss-replace-overflow-wrap "^3.0.0"
-    postcss-selector-matches "^4.0.0"
-    postcss-selector-not "^4.0.0"
-
-postcss-pseudo-class-any-link@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
-  integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
-
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
-  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-replace-overflow-wrap@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
-  integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-safe-parser@5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d"
-  integrity sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==
-  dependencies:
-    postcss "^8.1.0"
-
-postcss-selector-matches@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
-  integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
-  dependencies:
-    balanced-match "^1.0.0"
-    postcss "^7.0.2"
-
-postcss-selector-not@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.1.tgz#263016eef1cf219e0ade9a913780fc1f48204cbf"
-  integrity sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==
-  dependencies:
-    balanced-match "^1.0.0"
-    postcss "^7.0.2"
-
-postcss-selector-parser@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
-  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
-  dependencies:
-    dot-prop "^5.2.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
-  integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
-  dependencies:
-    cssesc "^2.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
-  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
-postcss-svgo@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
-  integrity sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
-
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
-  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-
-postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
-  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss@7.0.21:
-  version "7.0.21"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
-  integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^8.1.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f"
-  integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==
-  dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map-js "^0.6.2"
-
-prelude-ls@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
-  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
-
-prepend-http@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
-  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
-prettier@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
-  integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
-
-pretty-bytes@^5.3.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
-  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
-
-pretty-error@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
-  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
-  dependencies:
-    lodash "^4.17.20"
-    renderkid "^2.0.4"
-
-pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
-  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    ansi-regex "^5.0.0"
-    ansi-styles "^4.0.0"
-    react-is "^17.0.1"
-
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
-process@^0.11.10:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
-
-progress@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-
-promise@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
-  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
-  dependencies:
-    asap "~2.0.6"
-
-prompts@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
-  integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.5"
-
-prompts@^2.0.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
-  integrity sha512-EQyfIuO2hPDsX1L/blblV+H7I0knhgAd82cVneCwcdND9B8AuCDuRcBH6yIcG4dFzlOUqbazQqwGjx5xmsNLuQ==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.5"
-
-prop-types-extra@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
-  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
-  dependencies:
-    react-is "^16.3.2"
-    warning "^4.0.0"
-
-prop-types@^15.6.2, prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
-proxy-addr@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
-  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.9.1"
-
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
-
-psl@^1.1.28, psl@^1.1.33:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
-  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
-
-public-encrypt@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
-  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
-pump@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
-  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pumpify@^1.3.3:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
-  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
-  dependencies:
-    duplexify "^3.6.0"
-    inherits "^2.0.3"
-    pump "^2.0.0"
-
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
-
-punycode@^1.2.4:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
-
-punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-q@^1.1.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
-
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
-
-query-string@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
-  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
-  dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
-querystring-es3@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
-  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
-
-querystring@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
-
-querystring@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
-  integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
-
-querystringify@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
-  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
-
-queue-microtask@^1.2.2:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
-  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
-
-raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
-range-parser@^1.2.1, range-parser@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
-
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
-  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
-  dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
-react-app-polyfill@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
-  integrity sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==
-  dependencies:
-    core-js "^3.6.5"
-    object-assign "^4.1.1"
-    promise "^8.1.0"
-    raf "^3.4.1"
-    regenerator-runtime "^0.13.7"
-    whatwg-fetch "^3.4.1"
-
-react-bootstrap@^1.5.2:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-1.6.0.tgz#5b4f160ce0cd22784cf4271ca90550b4891fdd42"
-  integrity sha512-PaeOGeRC2+JH9Uf1PukJgXcIpfGlrKKHEBZIArymjenYzSJ/RhO2UdNX+e7nalsCFFZLRRgQ0/FKkscW2LmmRg==
-  dependencies:
-    "@babel/runtime" "^7.13.8"
-    "@restart/context" "^2.1.4"
-    "@restart/hooks" "^0.3.26"
-    "@types/classnames" "^2.2.10"
-    "@types/invariant" "^2.2.33"
-    "@types/prop-types" "^15.7.3"
-    "@types/react" ">=16.9.35"
-    "@types/react-transition-group" "^4.4.1"
-    "@types/warning" "^3.0.0"
-    classnames "^2.2.6"
-    dom-helpers "^5.1.2"
-    invariant "^2.2.4"
-    prop-types "^15.7.2"
-    prop-types-extra "^1.1.0"
-    react-overlays "^5.0.0"
-    react-transition-group "^4.4.1"
-    uncontrollable "^7.2.1"
-    warning "^4.0.3"
-
-react-dev-utils@^11.0.3:
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
-  integrity sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==
-  dependencies:
-    "@babel/code-frame" "7.10.4"
-    address "1.1.2"
-    browserslist "4.14.2"
-    chalk "2.4.2"
-    cross-spawn "7.0.3"
-    detect-port-alt "1.1.6"
-    escape-string-regexp "2.0.0"
-    filesize "6.1.0"
-    find-up "4.1.0"
-    fork-ts-checker-webpack-plugin "4.1.6"
-    global-modules "2.0.0"
-    globby "11.0.1"
-    gzip-size "5.1.1"
-    immer "8.0.1"
-    is-root "2.1.0"
-    loader-utils "2.0.0"
-    open "^7.0.2"
-    pkg-up "3.1.0"
-    prompts "2.4.0"
-    react-error-overlay "^6.0.9"
-    recursive-readdir "2.2.2"
-    shell-quote "1.7.2"
-    strip-ansi "6.0.0"
-    text-table "0.2.0"
-
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
-
-react-error-overlay@^6.0.9:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
-  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
-
-react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
-react-overlays@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.0.1.tgz#7e2c3cd3c0538048b0b7451d203b1289c561b7f2"
-  integrity sha512-plwUJieTBbLSrgvQ4OkkbTD/deXgxiJdNuKzo6n1RWE3OVnQIU5hffCGS/nvIuu6LpXFs2majbzaXY8rcUVdWA==
-  dependencies:
-    "@babel/runtime" "^7.13.8"
-    "@popperjs/core" "^2.8.6"
-    "@restart/hooks" "^0.3.26"
-    "@types/warning" "^3.0.0"
-    dom-helpers "^5.2.0"
-    prop-types "^15.7.2"
-    uncontrollable "^7.2.1"
-    warning "^4.0.3"
-
-react-refresh@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
-  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
-
-react-router-dom@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
-  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.2.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-react-router@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
-  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    mini-create-react-context "^0.4.0"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.2"
-    react-is "^16.6.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-react-scripts@4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
-  integrity sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==
-  dependencies:
-    "@babel/core" "7.12.3"
-    "@pmmmwh/react-refresh-webpack-plugin" "0.4.3"
-    "@svgr/webpack" "5.5.0"
-    "@typescript-eslint/eslint-plugin" "^4.5.0"
-    "@typescript-eslint/parser" "^4.5.0"
-    babel-eslint "^10.1.0"
-    babel-jest "^26.6.0"
-    babel-loader "8.1.0"
-    babel-plugin-named-asset-import "^0.3.7"
-    babel-preset-react-app "^10.0.0"
-    bfj "^7.0.2"
-    camelcase "^6.1.0"
-    case-sensitive-paths-webpack-plugin "2.3.0"
-    css-loader "4.3.0"
-    dotenv "8.2.0"
-    dotenv-expand "5.1.0"
-    eslint "^7.11.0"
-    eslint-config-react-app "^6.0.0"
-    eslint-plugin-flowtype "^5.2.0"
-    eslint-plugin-import "^2.22.1"
-    eslint-plugin-jest "^24.1.0"
-    eslint-plugin-jsx-a11y "^6.3.1"
-    eslint-plugin-react "^7.21.5"
-    eslint-plugin-react-hooks "^4.2.0"
-    eslint-plugin-testing-library "^3.9.2"
-    eslint-webpack-plugin "^2.5.2"
-    file-loader "6.1.1"
-    fs-extra "^9.0.1"
-    html-webpack-plugin "4.5.0"
-    identity-obj-proxy "3.0.0"
-    jest "26.6.0"
-    jest-circus "26.6.0"
-    jest-resolve "26.6.0"
-    jest-watch-typeahead "0.6.1"
-    mini-css-extract-plugin "0.11.3"
-    optimize-css-assets-webpack-plugin "5.0.4"
-    pnp-webpack-plugin "1.6.4"
-    postcss-flexbugs-fixes "4.2.1"
-    postcss-loader "3.0.0"
-    postcss-normalize "8.0.1"
-    postcss-preset-env "6.7.0"
-    postcss-safe-parser "5.0.2"
-    prompts "2.4.0"
-    react-app-polyfill "^2.0.0"
-    react-dev-utils "^11.0.3"
-    react-refresh "^0.8.3"
-    resolve "1.18.1"
-    resolve-url-loader "^3.1.2"
-    sass-loader "^10.0.5"
-    semver "7.3.2"
-    style-loader "1.3.0"
-    terser-webpack-plugin "4.2.3"
-    ts-pnp "1.2.0"
-    url-loader "4.1.1"
-    webpack "4.44.2"
-    webpack-dev-server "3.11.1"
-    webpack-manifest-plugin "2.2.0"
-    workbox-webpack-plugin "5.1.4"
-  optionalDependencies:
-    fsevents "^2.1.3"
-
-react-transition-group@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
-  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-read-pkg-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^3.0.0"
-
-read-pkg-up@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
-  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
-  dependencies:
-    find-up "^4.1.0"
-    read-pkg "^5.2.0"
-    type-fest "^0.8.1"
-
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
-read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readdirp@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
-  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    micromatch "^3.1.10"
-    readable-stream "^2.0.2"
-
-readdirp@~3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
-  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
-  dependencies:
-    picomatch "^2.2.1"
-
-recursive-readdir@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
-  integrity sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==
-  dependencies:
-    minimatch "3.0.4"
-
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
-regenerate-unicode-properties@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
-  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
-  dependencies:
-    regenerate "^1.4.0"
-
-regenerate@^1.4.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
-  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
-
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
-regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
-
-regenerator-transform@^0.14.2:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
-  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
-regex-parser@^2.2.11:
-  version "2.2.11"
-  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
-  integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
-
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
-  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-regexpp@^3.0.0, regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
-
-regexpu-core@^4.7.1:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
-  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
-  dependencies:
-    regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.2.0"
-    regjsgen "^0.5.1"
-    regjsparser "^0.6.4"
-    unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.2.0"
-
-regjsgen@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
-  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
-
-regjsparser@^0.6.4:
-  version "0.6.9"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
-  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
-  dependencies:
-    jsesc "~0.5.0"
-
-relateurl@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
-
-remove-trailing-separator@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-
-renderkid@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.5.tgz#483b1ac59c6601ab30a7a596a5965cabccfdd0a5"
-  integrity sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==
-  dependencies:
-    css-select "^2.0.2"
-    dom-converter "^0.2"
-    htmlparser2 "^3.10.1"
-    lodash "^4.17.20"
-    strip-ansi "^3.0.0"
-
-repeat-element@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
-  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
-
-repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
-
-request-promise-core@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
-  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
-  dependencies:
-    lodash "^4.17.19"
-
-request-promise-native@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
-  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
-  dependencies:
-    request-promise-core "1.1.4"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request@^2.88.2:
-  version "2.88.2"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
-  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.8.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.6"
-    extend "~3.0.2"
-    forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.19"
-    oauth-sign "~0.9.0"
-    performance-now "^2.1.0"
-    qs "~6.5.2"
-    safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
-    tunnel-agent "^0.6.0"
-    uuid "^3.3.2"
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-require-from-string@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
-  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
-
-resolve-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
-  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
-  dependencies:
-    resolve-from "^3.0.0"
-
-resolve-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
-  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
-  dependencies:
-    resolve-from "^5.0.0"
-
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
-resolve-url-loader@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.3.tgz#49ec68340f67d8d2ab6b401948d5def3ab2d0367"
-  integrity sha512-WbDSNFiKPPLem1ln+EVTE+bFUBdTTytfQZWbmghroaFNFaAVmGq0Saqw6F/306CwgPXsGwXVxbODE+3xAo/YbA==
-  dependencies:
-    adjust-sourcemap-loader "3.0.0"
-    camelcase "5.3.1"
-    compose-function "3.0.3"
-    convert-source-map "1.7.0"
-    es6-iterator "2.0.3"
-    loader-utils "1.2.3"
-    postcss "7.0.21"
-    rework "1.0.1"
-    rework-visit "1.0.0"
-    source-map "0.6.1"
-
-resolve-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-
-resolve@1.18.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
-  integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==
-  dependencies:
-    is-core-module "^2.0.0"
-    path-parse "^1.0.6"
-
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-resolve@^2.0.0-next.3:
-  version "2.0.0-next.3"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
-  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
-retry@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
-
-reusify@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
-  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
-
-rework-visit@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
-  integrity sha1-mUWygD8hni96ygCtuLyfZA+ELJo=
-
-rework@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
-  integrity sha1-MIBqhBNCtUUQqkEQhQzUhTQUSqc=
-  dependencies:
-    convert-source-map "^0.3.3"
-    css "^2.0.0"
-
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
-rimraf@^2.5.4, rimraf@^2.6.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^3.0.0, rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
-rollup-plugin-babel@^4.3.3:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz#d15bd259466a9d1accbdb2fe2fff17c52d030acb"
-  integrity sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    rollup-pluginutils "^2.8.1"
-
-rollup-plugin-terser@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"
-  integrity sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    jest-worker "^24.9.0"
-    rollup-pluginutils "^2.8.2"
-    serialize-javascript "^4.0.0"
-    terser "^4.6.2"
-
-rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
-  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  dependencies:
-    estree-walker "^0.6.1"
-
-rollup@^1.31.1:
-  version "1.32.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4"
-  integrity sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==
-  dependencies:
-    "@types/estree" "*"
-    "@types/node" "*"
-    acorn "^7.1.0"
-
-rsvp@^4.8.4:
-  version "4.8.5"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
-  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
-
-run-parallel@^1.1.9:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
-  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
-  dependencies:
-    queue-microtask "^1.2.2"
-
-run-queue@^1.0.0, run-queue@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
-  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
-  dependencies:
-    aproba "^1.1.1"
-
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
-  dependencies:
-    ret "~0.1.10"
-
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-sane@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
-  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
-  dependencies:
-    "@cnakazawa/watch" "^1.0.3"
-    anymatch "^2.0.0"
-    capture-exit "^2.0.0"
-    exec-sh "^0.3.2"
-    execa "^1.0.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-
-sanitize.css@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a"
-  integrity sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==
-
-sass-loader@^10.0.5:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
-  integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==
-  dependencies:
-    klona "^2.0.4"
-    loader-utils "^2.0.0"
-    neo-async "^2.6.2"
-    schema-utils "^3.0.0"
-    semver "^7.3.2"
-
-sax@~1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
-
-saxes@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
-  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
-  dependencies:
-    xmlchars "^2.2.0"
-
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-schema-utils@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
-  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
-  dependencies:
-    ajv "^6.1.0"
-    ajv-errors "^1.0.0"
-    ajv-keywords "^3.1.0"
-
-schema-utils@^2.6.5, schema-utils@^2.7.0, schema-utils@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
-  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
-  dependencies:
-    "@types/json-schema" "^7.0.5"
-    ajv "^6.12.4"
-    ajv-keywords "^3.5.2"
-
-schema-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef"
-  integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
-  dependencies:
-    "@types/json-schema" "^7.0.6"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
-select-hose@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
-  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
-
-selfsigned@^1.10.8:
-  version "1.10.11"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.11.tgz#24929cd906fe0f44b6d01fb23999a739537acbe9"
-  integrity sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==
-  dependencies:
-    node-forge "^0.10.0"
-
-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
-semver@7.3.2:
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
-  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
-
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^7.2.1, semver@^7.3.2:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
-  dependencies:
-    lru-cache "^6.0.0"
-
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
-  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.7.2"
-    mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.1"
-    statuses "~1.5.0"
-
-serialize-javascript@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
-  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
-  dependencies:
-    randombytes "^2.1.0"
-
-serialize-javascript@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
-  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
-  dependencies:
-    randombytes "^2.1.0"
-
-serve-index@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
-  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
-  dependencies:
-    accepts "~1.3.4"
-    batch "0.6.1"
-    debug "2.6.9"
-    escape-html "~1.0.3"
-    http-errors "~1.6.2"
-    mime-types "~2.1.17"
-    parseurl "~1.3.2"
-
-serve-static@1.14.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
-  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
-
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
-setimmediate@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
-
-setprototypeof@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
-  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
-
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
-
-sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
-  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
-  dependencies:
-    shebang-regex "^1.0.0"
-
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
-  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
-  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-
-shell-quote@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
-
-shellwords@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
-  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
-
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
-
-signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
-
-sisteransi@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
-  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
-
-slash@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-
-slice-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
-  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
-  dependencies:
-    ansi-styles "^4.0.0"
-    astral-regex "^2.0.0"
-    is-fullwidth-code-point "^3.0.0"
-
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
-sockjs-client@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.5.1.tgz#256908f6d5adfb94dabbdbd02c66362cca0f9ea6"
-  integrity sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==
-  dependencies:
-    debug "^3.2.6"
-    eventsource "^1.0.7"
-    faye-websocket "^0.11.3"
-    inherits "^2.0.4"
-    json3 "^3.3.3"
-    url-parse "^1.5.1"
-
-sockjs@^0.3.21:
-  version "0.3.21"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.21.tgz#b34ffb98e796930b60a0cfa11904d6a339a7d417"
-  integrity sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==
-  dependencies:
-    faye-websocket "^0.11.3"
-    uuid "^3.4.0"
-    websocket-driver "^0.7.4"
-
-sort-keys@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
-  integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
-  dependencies:
-    is-plain-obj "^1.0.0"
-
-source-list-map@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
-  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
-
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
-  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
-
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
-source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-url@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
-  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
-
-source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-source-map@^0.5.0, source-map@^0.5.6:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
-
-source-map@^0.7.3, source-map@~0.7.2:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-sourcemap-codec@^1.4.4:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
-
-spdx-correct@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
-  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
-  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
-  integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
-
-spdy-transport@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
-  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
-  dependencies:
-    debug "^4.1.0"
-    detect-node "^2.0.4"
-    hpack.js "^2.1.6"
-    obuf "^1.1.2"
-    readable-stream "^3.0.6"
-    wbuf "^1.7.3"
-
-spdy@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
-  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
-  dependencies:
-    debug "^4.1.0"
-    handle-thing "^2.0.0"
-    http-deceiver "^1.2.7"
-    select-hose "^2.0.0"
-    spdy-transport "^3.0.0"
-
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-sshpk@^1.7.0:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
-  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    bcrypt-pbkdf "^1.0.0"
-    dashdash "^1.12.0"
-    ecc-jsbn "~0.1.1"
-    getpass "^0.1.1"
-    jsbn "~0.1.0"
-    safer-buffer "^2.0.2"
-    tweetnacl "~0.14.0"
-
-ssri@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
-  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
-  dependencies:
-    figgy-pudding "^3.5.1"
-
-ssri@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
-  integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==
-  dependencies:
-    minipass "^3.1.1"
-
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
-stack-utils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
-  integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-
-stackframe@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
-  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
-
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
-
-"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
-
-stealthy-require@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
-stream-browserify@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
-  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^2.0.2"
-
-stream-each@^1.1.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
-  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
-  dependencies:
-    end-of-stream "^1.1.0"
-    stream-shift "^1.0.0"
-
-stream-http@^2.7.2:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
-  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.3.6"
-    to-arraybuffer "^1.0.0"
-    xtend "^4.0.0"
-
-stream-shift@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
-  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
-
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
-
-string-length@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
-  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
-  dependencies:
-    char-regex "^1.0.2"
-    strip-ansi "^6.0.0"
-
-string-natural-compare@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
-  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
-  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
-
-string.prototype.matchall@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29"
-  integrity sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has-symbols "^1.0.1"
-    internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.3.1"
-    side-channel "^1.0.4"
-
-string.prototype.trimend@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
-  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-string.prototype.trimstart@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
-  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-string_decoder@^1.0.0, string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-stringify-object@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
-  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
-  dependencies:
-    get-own-enumerable-property-symbols "^3.0.0"
-    is-obj "^1.0.1"
-    is-regexp "^1.0.0"
-
-strip-ansi@6.0.0, strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
-strip-bom@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
-  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
-
-strip-comments@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
-  integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
-  dependencies:
-    babel-extract-comments "^1.0.0"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-
-strip-eof@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
-  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
-
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
-  dependencies:
-    min-indent "^1.0.0"
-
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
-  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
-
-style-loader@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
-  integrity sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^2.7.0"
-
-stylehacks@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
-  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^7.0.0, supports-color@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-hyperlinks@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
-  integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
-  dependencies:
-    has-flag "^4.0.0"
-    supports-color "^7.0.0"
-
-svg-parser@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
-  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
-
-svgo@^1.0.0, svgo@^1.2.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
-  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
-  dependencies:
-    chalk "^2.4.1"
-    coa "^2.0.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.37"
-    csso "^4.0.2"
-    js-yaml "^3.13.1"
-    mkdirp "~0.5.1"
-    object.values "^1.1.0"
-    sax "~1.2.4"
-    stable "^0.1.8"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
-symbol-tree@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
-  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
-
-table@^6.0.9:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
-  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
-  dependencies:
-    ajv "^8.0.1"
-    lodash.clonedeep "^4.5.0"
-    lodash.truncate "^4.4.2"
-    slice-ansi "^4.0.0"
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-
-tapable@^1.0.0, tapable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
-tar@^6.0.2:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.0.tgz#d1724e9bcc04b977b18d5c573b333a2207229a83"
-  integrity sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
-temp-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
-  integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
-
-tempy@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.3.0.tgz#6f6c5b295695a16130996ad5ab01a8bd726e8bf8"
-  integrity sha512-WrH/pui8YCwmeiAoxV+lpRH9HpRtgBhSR2ViBPgpGb/wnYDzp21R4MN45fsCGvLROvY67o3byhJRYRONJyImVQ==
-  dependencies:
-    temp-dir "^1.0.0"
-    type-fest "^0.3.1"
-    unique-string "^1.0.0"
-
-terminal-link@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
-  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    supports-hyperlinks "^2.0.0"
-
-terser-webpack-plugin@4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz#28daef4a83bd17c1db0297070adc07fc8cfc6a9a"
-  integrity sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==
-  dependencies:
-    cacache "^15.0.5"
-    find-cache-dir "^3.3.1"
-    jest-worker "^26.5.0"
-    p-limit "^3.0.2"
-    schema-utils "^3.0.0"
-    serialize-javascript "^5.0.1"
-    source-map "^0.6.1"
-    terser "^5.3.4"
-    webpack-sources "^1.4.3"
-
-terser-webpack-plugin@^1.4.3:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
-  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
-  dependencies:
-    cacache "^12.0.2"
-    find-cache-dir "^2.1.0"
-    is-wsl "^1.1.0"
-    schema-utils "^1.0.0"
-    serialize-javascript "^4.0.0"
-    source-map "^0.6.1"
-    terser "^4.1.2"
-    webpack-sources "^1.4.0"
-    worker-farm "^1.7.0"
-
-terser@^4.1.2, terser@^4.6.2, terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-terser@^5.3.4:
-  version "5.7.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.0.tgz#a761eeec206bc87b605ab13029876ead938ae693"
-  integrity sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.7.2"
-    source-map-support "~0.5.19"
-
-test-exclude@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
-  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
-  dependencies:
-    "@istanbuljs/schema" "^0.1.2"
-    glob "^7.1.4"
-    minimatch "^3.0.4"
-
-text-table@0.2.0, text-table@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-
-throat@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
-  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
-
-through2@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
-thunky@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
-  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
-
-timers-browserify@^2.0.4:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
-  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
-  dependencies:
-    setimmediate "^1.0.4"
-
-timsort@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
-  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
-
-tiny-invariant@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
-  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
-
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
-tmpl@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
-  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
-
-to-arraybuffer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
-  dependencies:
-    kind-of "^3.0.2"
-
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
-toidentifier@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
-  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
-
-tough-cookie@^2.3.3, tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
-  dependencies:
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tough-cookie@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
-  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
-  dependencies:
-    psl "^1.1.33"
-    punycode "^2.1.1"
-    universalify "^0.1.2"
-
-tr46@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
-  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
-  dependencies:
-    punycode "^2.1.1"
-
-tryer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
-  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
-
-ts-pnp@1.2.0, ts-pnp@^1.1.6:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
-  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
-
-tsconfig-paths@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
-  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.0"
-    strip-bom "^3.0.0"
-
-tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-tslib@^2.0.3:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
-
-tsutils@^3.17.1:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
-
-tty-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
-  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
-
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
-  dependencies:
-    safe-buffer "^5.0.1"
-
-tweetnacl@^0.14.3, tweetnacl@~0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
-
-type-check@^0.4.0, type-check@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
-  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
-  dependencies:
-    prelude-ls "^1.2.1"
-
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
-  dependencies:
-    prelude-ls "~1.1.2"
-
-type-detect@4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
-  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
-
-type-fest@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
-  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
-
-type-fest@^0.21.3:
-  version "0.21.3"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
-  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
-
-type-fest@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
-  integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
-
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-type-is@~1.6.17, type-is@~1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
-
-type@^2.0.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d"
-  integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
-
-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
-typescript@^4.2.4:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
-  integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
-
-unbox-primitive@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
-  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
-  dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.1"
-    has-symbols "^1.0.2"
-    which-boxed-primitive "^1.0.2"
-
-uncontrollable@^7.2.1:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
-  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
-  dependencies:
-    "@babel/runtime" "^7.6.3"
-    "@types/react" ">=16.9.11"
-    invariant "^2.2.4"
-    react-lifecycles-compat "^3.0.4"
-
-unicode-canonical-property-names-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
-  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
-
-unicode-match-property-ecmascript@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
-  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
-  dependencies:
-    unicode-canonical-property-names-ecmascript "^1.0.4"
-    unicode-property-aliases-ecmascript "^1.0.4"
-
-unicode-match-property-value-ecmascript@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
-  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
-
-unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
-  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
-
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
-
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
-  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
-unique-string@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
-  integrity sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=
-  dependencies:
-    crypto-random-string "^1.0.0"
-
-universalify@^0.1.0, universalify@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
-
-unpipe@1.0.0, unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
-
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
-upath@^1.1.1, upath@^1.1.2, upath@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
-  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
-
-uri-js@^4.2.2:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
-  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
-  dependencies:
-    punycode "^2.1.0"
-
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
-
-url-loader@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
-  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
-  dependencies:
-    loader-utils "^2.0.0"
-    mime-types "^2.1.27"
-    schema-utils "^3.0.0"
-
-url-parse@^1.4.3, url-parse@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
-  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
-url@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-util.promisify@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
-  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
-util.promisify@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
-  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.2"
-    has-symbols "^1.0.1"
-    object.getownpropertydescriptors "^2.1.0"
-
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
-  dependencies:
-    inherits "2.0.1"
-
-util@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
-  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
-  dependencies:
-    inherits "2.0.3"
-
-utila@~0.4:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
-  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
-
-utils-merge@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
-
-uuid@^3.3.2, uuid@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
-uuid@^8.3.0:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
-v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
-
-v8-to-istanbul@^7.0.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz#30898d1a7fa0c84d225a2c1434fb958f290883c1"
-  integrity sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.1"
-    convert-source-map "^1.6.0"
-    source-map "^0.7.3"
-
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
-vary@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
-
-vendors@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
-  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
-
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
-vm-browserify@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
-
-w3c-hr-time@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
-  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
-  dependencies:
-    browser-process-hrtime "^1.0.0"
-
-w3c-xmlserializer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
-  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
-  dependencies:
-    xml-name-validator "^3.0.0"
-
-walker@^1.0.7, walker@~1.0.5:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
-  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
-  dependencies:
-    makeerror "1.0.x"
-
-warning@^4.0.0, warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
-watchpack-chokidar2@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
-  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
-  dependencies:
-    chokidar "^2.1.8"
-
-watchpack@^1.7.4:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
-  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
-  dependencies:
-    graceful-fs "^4.1.2"
-    neo-async "^2.5.0"
-  optionalDependencies:
-    chokidar "^3.4.1"
-    watchpack-chokidar2 "^2.0.1"
-
-wbuf@^1.1.0, wbuf@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
-  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
-  dependencies:
-    minimalistic-assert "^1.0.0"
-
-web-vitals@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-1.1.2.tgz#06535308168986096239aa84716e68b4c6ae6d1c"
-  integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==
-
-webidl-conversions@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
-  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
-
-webidl-conversions@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
-  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
-
-webpack-dev-middleware@^3.7.2:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz#0639372b143262e2b84ab95d3b91a7597061c2c5"
-  integrity sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==
-  dependencies:
-    memory-fs "^0.4.1"
-    mime "^2.4.4"
-    mkdirp "^0.5.1"
-    range-parser "^1.2.1"
-    webpack-log "^2.0.0"
-
-webpack-dev-server@3.11.1:
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.1.tgz#c74028bf5ba8885aaf230e48a20e8936ab8511f0"
-  integrity sha512-u4R3mRzZkbxQVa+MBWi2uVpB5W59H3ekZAJsQlKUTdl7Elcah2EhygTPLmeFXybQkf9i2+L0kn7ik9SnXa6ihQ==
-  dependencies:
-    ansi-html "0.0.7"
-    bonjour "^3.5.0"
-    chokidar "^2.1.8"
-    compression "^1.7.4"
-    connect-history-api-fallback "^1.6.0"
-    debug "^4.1.1"
-    del "^4.1.1"
-    express "^4.17.1"
-    html-entities "^1.3.1"
-    http-proxy-middleware "0.19.1"
-    import-local "^2.0.0"
-    internal-ip "^4.3.0"
-    ip "^1.1.5"
-    is-absolute-url "^3.0.3"
-    killable "^1.0.1"
-    loglevel "^1.6.8"
-    opn "^5.5.0"
-    p-retry "^3.0.1"
-    portfinder "^1.0.26"
-    schema-utils "^1.0.0"
-    selfsigned "^1.10.8"
-    semver "^6.3.0"
-    serve-index "^1.9.1"
-    sockjs "^0.3.21"
-    sockjs-client "^1.5.0"
-    spdy "^4.0.2"
-    strip-ansi "^3.0.1"
-    supports-color "^6.1.0"
-    url "^0.11.0"
-    webpack-dev-middleware "^3.7.2"
-    webpack-log "^2.0.0"
-    ws "^6.2.1"
-    yargs "^13.3.2"
-
-webpack-log@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
-  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
-  dependencies:
-    ansi-colors "^3.0.0"
-    uuid "^3.3.2"
-
-webpack-manifest-plugin@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
-  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
-  dependencies:
-    fs-extra "^7.0.0"
-    lodash ">=3.5 <5"
-    object.entries "^1.1.0"
-    tapable "^1.0.0"
-
-webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
-webpack@4.44.2:
-  version "4.44.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
-  integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/wasm-edit" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.4.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.3.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.3"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.7.4"
-    webpack-sources "^1.4.1"
-
-websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
-  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
-  dependencies:
-    http-parser-js ">=0.5.1"
-    safe-buffer ">=5.1.0"
-    websocket-extensions ">=0.1.1"
-
-websocket-extensions@>=0.1.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
-  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
-
-whatwg-encoding@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
-  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
-  dependencies:
-    iconv-lite "0.4.24"
-
-whatwg-fetch@^3.4.1:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
-  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
-
-whatwg-mimetype@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
-  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
-
-whatwg-url@^8.0.0, whatwg-url@^8.5.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.5.0.tgz#7752b8464fc0903fec89aa9846fc9efe07351fd3"
-  integrity sha512-fy+R77xWv0AiqfLl4nuGUlQ3/6b5uNfQ4WAbGQVMYshCTCCPK9psC1nWh3XHuxGVCtlcDDQPQW1csmmIQo+fwg==
-  dependencies:
-    lodash "^4.7.0"
-    tr46 "^2.0.2"
-    webidl-conversions "^6.1.0"
-
-which-boxed-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-
-which@^1.2.9, which@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^2.0.1, which@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
-  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-  dependencies:
-    isexe "^2.0.0"
-
-word-wrap@^1.2.3, word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
-
-workbox-background-sync@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-5.1.4.tgz#5ae0bbd455f4e9c319e8d827c055bb86c894fd12"
-  integrity sha512-AH6x5pYq4vwQvfRDWH+vfOePfPIYQ00nCEB7dJRU1e0n9+9HMRyvI63FlDvtFT2AvXVRsXvUt7DNMEToyJLpSA==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-broadcast-update@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-5.1.4.tgz#0eeb89170ddca7f6914fa3523fb14462891f2cfc"
-  integrity sha512-HTyTWkqXvHRuqY73XrwvXPud/FN6x3ROzkfFPsRjtw/kGZuZkPzfeH531qdUGfhtwjmtO/ZzXcWErqVzJNdXaA==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-build@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-5.1.4.tgz#23d17ed5c32060c363030c8823b39d0eabf4c8c7"
-  integrity sha512-xUcZn6SYU8usjOlfLb9Y2/f86Gdo+fy1fXgH8tJHjxgpo53VVsqRX0lUDw8/JuyzNmXuo8vXX14pXX2oIm9Bow==
-  dependencies:
-    "@babel/core" "^7.8.4"
-    "@babel/preset-env" "^7.8.4"
-    "@babel/runtime" "^7.8.4"
-    "@hapi/joi" "^15.1.0"
-    "@rollup/plugin-node-resolve" "^7.1.1"
-    "@rollup/plugin-replace" "^2.3.1"
-    "@surma/rollup-plugin-off-main-thread" "^1.1.1"
-    common-tags "^1.8.0"
-    fast-json-stable-stringify "^2.1.0"
-    fs-extra "^8.1.0"
-    glob "^7.1.6"
-    lodash.template "^4.5.0"
-    pretty-bytes "^5.3.0"
-    rollup "^1.31.1"
-    rollup-plugin-babel "^4.3.3"
-    rollup-plugin-terser "^5.3.1"
-    source-map "^0.7.3"
-    source-map-url "^0.4.0"
-    stringify-object "^3.3.0"
-    strip-comments "^1.0.2"
-    tempy "^0.3.0"
-    upath "^1.2.0"
-    workbox-background-sync "^5.1.4"
-    workbox-broadcast-update "^5.1.4"
-    workbox-cacheable-response "^5.1.4"
-    workbox-core "^5.1.4"
-    workbox-expiration "^5.1.4"
-    workbox-google-analytics "^5.1.4"
-    workbox-navigation-preload "^5.1.4"
-    workbox-precaching "^5.1.4"
-    workbox-range-requests "^5.1.4"
-    workbox-routing "^5.1.4"
-    workbox-strategies "^5.1.4"
-    workbox-streams "^5.1.4"
-    workbox-sw "^5.1.4"
-    workbox-window "^5.1.4"
-
-workbox-cacheable-response@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-5.1.4.tgz#9ff26e1366214bdd05cf5a43da9305b274078a54"
-  integrity sha512-0bfvMZs0Of1S5cdswfQK0BXt6ulU5kVD4lwer2CeI+03czHprXR3V4Y8lPTooamn7eHP8Iywi5QjyAMjw0qauA==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-core@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-5.1.4.tgz#8bbfb2362ecdff30e25d123c82c79ac65d9264f4"
-  integrity sha512-+4iRQan/1D8I81nR2L5vcbaaFskZC2CL17TLbvWVzQ4qiF/ytOGF6XeV54pVxAvKUtkLANhk8TyIUMtiMw2oDg==
-
-workbox-expiration@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-5.1.4.tgz#92b5df461e8126114943a3b15c55e4ecb920b163"
-  integrity sha512-oDO/5iC65h2Eq7jctAv858W2+CeRW5e0jZBMNRXpzp0ZPvuT6GblUiHnAsC5W5lANs1QS9atVOm4ifrBiYY7AQ==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-google-analytics@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-5.1.4.tgz#b3376806b1ac7d7df8418304d379707195fa8517"
-  integrity sha512-0IFhKoEVrreHpKgcOoddV+oIaVXBFKXUzJVBI+nb0bxmcwYuZMdteBTp8AEDJacENtc9xbR0wa9RDCnYsCDLjA==
-  dependencies:
-    workbox-background-sync "^5.1.4"
-    workbox-core "^5.1.4"
-    workbox-routing "^5.1.4"
-    workbox-strategies "^5.1.4"
-
-workbox-navigation-preload@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-5.1.4.tgz#30d1b720d26a05efc5fa11503e5cc1ed5a78902a"
-  integrity sha512-Wf03osvK0wTflAfKXba//QmWC5BIaIZARU03JIhAEO2wSB2BDROWI8Q/zmianf54kdV7e1eLaIEZhth4K4MyfQ==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-precaching@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-5.1.4.tgz#874f7ebdd750dd3e04249efae9a1b3f48285fe6b"
-  integrity sha512-gCIFrBXmVQLFwvAzuGLCmkUYGVhBb7D1k/IL7pUJUO5xacjLcFUaLnnsoVepBGAiKw34HU1y/YuqvTKim9qAZA==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-range-requests@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-5.1.4.tgz#7066a12c121df65bf76fdf2b0868016aa2bab859"
-  integrity sha512-1HSujLjgTeoxHrMR2muDW2dKdxqCGMc1KbeyGcmjZZAizJTFwu7CWLDmLv6O1ceWYrhfuLFJO+umYMddk2XMhw==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-routing@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-5.1.4.tgz#3e8cd86bd3b6573488d1a2ce7385e547b547e970"
-  integrity sha512-8ljknRfqE1vEQtnMtzfksL+UXO822jJlHTIR7+BtJuxQ17+WPZfsHqvk1ynR/v0EHik4x2+826Hkwpgh4GKDCw==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-strategies@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-5.1.4.tgz#96b1418ccdfde5354612914964074d466c52d08c"
-  integrity sha512-VVS57LpaJTdjW3RgZvPwX0NlhNmscR7OQ9bP+N/34cYMDzXLyA6kqWffP6QKXSkca1OFo/v6v7hW7zrrguo6EA==
-  dependencies:
-    workbox-core "^5.1.4"
-    workbox-routing "^5.1.4"
-
-workbox-streams@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-5.1.4.tgz#05754e5e3667bdc078df2c9315b3f41210d8cac0"
-  integrity sha512-xU8yuF1hI/XcVhJUAfbQLa1guQUhdLMPQJkdT0kn6HP5CwiPOGiXnSFq80rAG4b1kJUChQQIGPrq439FQUNVrw==
-  dependencies:
-    workbox-core "^5.1.4"
-    workbox-routing "^5.1.4"
-
-workbox-sw@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-5.1.4.tgz#2bb34c9f7381f90d84cef644816d45150011d3db"
-  integrity sha512-9xKnKw95aXwSNc8kk8gki4HU0g0W6KXu+xks7wFuC7h0sembFnTrKtckqZxbSod41TDaGh+gWUA5IRXrL0ECRA==
-
-workbox-webpack-plugin@5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-5.1.4.tgz#7bfe8c16e40fe9ed8937080ac7ae9c8bde01e79c"
-  integrity sha512-PZafF4HpugZndqISi3rZ4ZK4A4DxO8rAqt2FwRptgsDx7NF8TVKP86/huHquUsRjMGQllsNdn4FNl8CD/UvKmQ==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    fast-json-stable-stringify "^2.0.0"
-    source-map-url "^0.4.0"
-    upath "^1.1.2"
-    webpack-sources "^1.3.0"
-    workbox-build "^5.1.4"
-
-workbox-window@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-5.1.4.tgz#2740f7dea7f93b99326179a62f1cc0ca2c93c863"
-  integrity sha512-vXQtgTeMCUq/4pBWMfQX8Ee7N2wVC4Q7XYFqLnfbXJ2hqew/cU1uMTD2KqGEgEpE4/30luxIxgE+LkIa8glBYw==
-  dependencies:
-    workbox-core "^5.1.4"
-
-worker-farm@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
-  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
-  dependencies:
-    errno "~0.1.7"
-
-worker-rpc@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
-  integrity sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==
-  dependencies:
-    microevent.ts "~0.1.1"
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-write-file-atomic@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
-  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
-  dependencies:
-    imurmurhash "^0.1.4"
-    is-typedarray "^1.0.0"
-    signal-exit "^3.0.2"
-    typedarray-to-buffer "^3.1.5"
-
-ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
-  dependencies:
-    async-limiter "~1.0.0"
-
-ws@^7.4.4:
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.5.tgz#a484dd851e9beb6fdb420027e3885e8ce48986c1"
-  integrity sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==
-
-xml-name-validator@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
-  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
-
-xmlchars@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
-  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
-
-xtend@^4.0.0, xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
-y18n@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
-  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
-
-yallist@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
-yaml@^1.10.0, yaml@^1.7.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
-yargs-parser@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
-  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs-parser@^18.1.2:
-  version "18.1.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
-  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs@^13.3.2:
-  version "13.3.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
-  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.2"
-
-yargs@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
-  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
-  dependencies:
-    cliui "^6.0.0"
-    decamelize "^1.2.0"
-    find-up "^4.1.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^4.2.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^18.1.2"
-
-yocto-queue@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==